mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-11-11 18:30:36 +08:00
Style issue and patch list views
This commit is contained in:
Rūdolfs Ošiņš
@@ -126,4 +126,42 @@ body {
|
||||
2px calc(100% - 6px),
|
||||
0 calc(100% - 6px)
|
||||
);
|
||||
|
||||
--3px-top-corner-fill: polygon(
|
||||
0 6px,
|
||||
2px 6px,
|
||||
2px 4px,
|
||||
4px 4px,
|
||||
4px 2px,
|
||||
6px 2px,
|
||||
6px 0,
|
||||
calc(100% - 6px) 0,
|
||||
calc(100% - 6px) 2px,
|
||||
calc(100% - 4px) 2px,
|
||||
calc(100% - 4px) 4px,
|
||||
calc(100% - 2px) 4px,
|
||||
calc(100% - 2px) 6px,
|
||||
100% 6px,
|
||||
100% 100%,
|
||||
0 100%
|
||||
);
|
||||
|
||||
--3px-bottom-corner-fill: polygon(
|
||||
0 0,
|
||||
100% 0,
|
||||
100% calc(100% - 6px),
|
||||
calc(100% - 2px) calc(100% - 6px),
|
||||
calc(100% - 2px) calc(100% - 4px),
|
||||
calc(100% - 4px) calc(100% - 4px),
|
||||
calc(100% - 4px) calc(100% - 2px),
|
||||
calc(100% - 6px) calc(100% - 2px),
|
||||
calc(100% - 6px) 100%,
|
||||
6px 100%,
|
||||
6px calc(100% - 2px),
|
||||
4px calc(100% - 2px),
|
||||
4px calc(100% - 4px),
|
||||
2px calc(100% - 4px),
|
||||
2px calc(100% - 6px),
|
||||
0 calc(100% - 6px)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -91,7 +91,8 @@ html {
|
||||
* otherwise Safari breaks. */
|
||||
font-size: 16px;
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: 1.5;
|
||||
/* On Safari this aligns text with different font-faces properly vertically. */
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
@@ -31,24 +31,7 @@
|
||||
z-index: -1;
|
||||
|
||||
background-color: var(--color-background-float);
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
100% 0,
|
||||
100% calc(100% - 6px),
|
||||
calc(100% - 2px) calc(100% - 6px),
|
||||
calc(100% - 2px) calc(100% - 4px),
|
||||
calc(100% - 4px) calc(100% - 4px),
|
||||
calc(100% - 4px) calc(100% - 2px),
|
||||
calc(100% - 6px) calc(100% - 2px),
|
||||
calc(100% - 6px) 100%,
|
||||
6px 100%,
|
||||
6px calc(100% - 2px),
|
||||
4px calc(100% - 2px),
|
||||
4px calc(100% - 4px),
|
||||
2px calc(100% - 4px),
|
||||
2px calc(100% - 6px),
|
||||
0 calc(100% - 6px)
|
||||
);
|
||||
clip-path: var(--3px-bottom-corner-fill);
|
||||
}
|
||||
.breadcrumbs {
|
||||
gap: 0.5rem;
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<script lang="ts">
|
||||
import type { Issue } from "@bindings/Issue";
|
||||
|
||||
import { formatOid } from "@app/lib/utils";
|
||||
|
||||
import Icon from "./Icon.svelte";
|
||||
import NodeId from "./NodeId.svelte";
|
||||
|
||||
export let issue: Issue;
|
||||
|
||||
const statusColor: Record<Issue["state"]["status"], string> = {
|
||||
open: "var(--color-fill-success)",
|
||||
closed: "var(--color-foreground-red)",
|
||||
};
|
||||
const statusBackgroundColor: Record<Issue["state"]["status"], string> = {
|
||||
open: "var(--color-fill-diff-green)",
|
||||
closed: "var(--color-fill-diff-red)",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.issue-teaser {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.25rem;
|
||||
height: 5rem;
|
||||
background-color: var(--color-background-float);
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
.issue-teaser:hover {
|
||||
background-color: var(--color-fill-float-hover);
|
||||
}
|
||||
.status {
|
||||
padding: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.issue-teaser:first-of-type {
|
||||
clip-path: var(--3px-top-corner-fill);
|
||||
}
|
||||
.issue-teaser:last-of-type {
|
||||
clip-path: var(--3px-bottom-corner-fill);
|
||||
}
|
||||
.issue-teaser:only-of-type {
|
||||
clip-path: var(--3px-corner-fill);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="issue-teaser">
|
||||
<div class="global-flex">
|
||||
<div
|
||||
class="global-counter status"
|
||||
style:color={statusColor[issue.state.status]}
|
||||
style:background-color={statusBackgroundColor[issue.state.status]}>
|
||||
<Icon name="issue" />
|
||||
</div>
|
||||
<div
|
||||
class="global-flex"
|
||||
style:flex-direction="column"
|
||||
style:align-items="flex-start">
|
||||
{issue.title}
|
||||
<div class="global-flex txt-small">
|
||||
<NodeId
|
||||
nodeId={issue.author.did.replace("did:key:", "")}
|
||||
alias={issue.author.alias} />
|
||||
opened
|
||||
<div class="global-oid">{formatOid(issue.id)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="global-flex">
|
||||
{#each issue.labels as label}
|
||||
<div class="global-counter txt-small">{label}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -15,7 +15,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
height: 1rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
.no-alias {
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import type { Patch } from "@bindings/Patch";
|
||||
|
||||
import { formatOid } from "@app/lib/utils";
|
||||
|
||||
import Icon from "./Icon.svelte";
|
||||
import NodeId from "./NodeId.svelte";
|
||||
|
||||
export let patch: Patch;
|
||||
|
||||
const statusColor: Record<Patch["state"]["status"], string> = {
|
||||
draft: "var(--color-fill-gray)",
|
||||
open: "var(--color-fill-success)",
|
||||
archived: "var(--color-foreground-yellow)",
|
||||
merged: "var(--color-fill-primary)",
|
||||
};
|
||||
|
||||
const statusBackgroundColor: Record<Patch["state"]["status"], string> = {
|
||||
draft: "var(--color-fill-ghost)",
|
||||
open: "var(--color-fill-diff-green)",
|
||||
archived: "var(--color-fill-private)",
|
||||
merged: "var(--color-fill-delegate)",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.patch-teaser {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.25rem;
|
||||
height: 5rem;
|
||||
background-color: var(--color-background-float);
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
.patch-teaser:hover {
|
||||
background-color: var(--color-fill-float-hover);
|
||||
}
|
||||
.status {
|
||||
padding: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.patch-teaser:first-of-type {
|
||||
clip-path: var(--3px-top-corner-fill);
|
||||
}
|
||||
.patch-teaser:last-of-type {
|
||||
clip-path: var(--3px-bottom-corner-fill);
|
||||
}
|
||||
.patch-teaser:only-of-type {
|
||||
clip-path: var(--3px-corner-fill);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="patch-teaser">
|
||||
<div class="global-flex">
|
||||
<div
|
||||
class="global-counter status"
|
||||
style:color={statusColor[patch.state.status]}
|
||||
style:background-color={statusBackgroundColor[patch.state.status]}>
|
||||
<Icon name="patch" />
|
||||
</div>
|
||||
<div
|
||||
class="global-flex"
|
||||
style:flex-direction="column"
|
||||
style:align-items="flex-start">
|
||||
{patch.title}
|
||||
<div class="global-flex txt-small">
|
||||
<NodeId
|
||||
nodeId={patch.author.did.replace("did:key:", "")}
|
||||
alias={patch.author.alias} />
|
||||
opened
|
||||
<div class="global-oid">{formatOid(patch.id)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="global-flex">
|
||||
{#each patch.labels as label}
|
||||
<div class="global-counter txt-small">{label}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,11 +4,10 @@
|
||||
import type { IssueStatus } from "./router";
|
||||
import type { RepoInfo } from "@bindings/RepoInfo";
|
||||
|
||||
import { formatOid } from "@app/lib/utils";
|
||||
|
||||
import Layout from "./Layout.svelte";
|
||||
|
||||
import Icon from "@app/components/Icon.svelte";
|
||||
import IssueTeaser from "@app/components/IssueTeaser.svelte";
|
||||
import Link from "@app/components/Link.svelte";
|
||||
import NodeId from "@app/components/NodeId.svelte";
|
||||
|
||||
@@ -17,14 +16,6 @@
|
||||
export let config: Config;
|
||||
export let status: IssueStatus;
|
||||
|
||||
const statusColor: Record<Issue["state"]["status"], string> = {
|
||||
open: "var(--color-fill-success)",
|
||||
closed: "var(--color-foreground-red)",
|
||||
};
|
||||
const statusBackgroundColor: Record<Issue["state"]["status"], string> = {
|
||||
open: "var(--color-fill-diff-green)",
|
||||
closed: "var(--color-fill-diff-red)",
|
||||
};
|
||||
$: project = repo.payloads["xyz.radicle.project"]!;
|
||||
</script>
|
||||
|
||||
@@ -32,7 +23,8 @@
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 2px;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -106,17 +98,7 @@
|
||||
|
||||
<div class="list">
|
||||
{#each issues as issue}
|
||||
<div class="global-flex">
|
||||
<div
|
||||
class="global-counter"
|
||||
style:padding="0"
|
||||
style:color={statusColor[issue.state.status]}
|
||||
style:background-color={statusBackgroundColor[issue.state.status]}>
|
||||
<Icon name="issue" />
|
||||
</div>
|
||||
<div class="global-oid">{formatOid(issue.id)}</div>
|
||||
{issue.title}
|
||||
</div>
|
||||
<IssueTeaser {issue} />
|
||||
{/each}
|
||||
|
||||
{#if issues.length === 0}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
.sidebar {
|
||||
grid-column: 1 / 2;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
min-width: 14rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,33 +4,18 @@
|
||||
import type { PatchStatus } from "./router";
|
||||
import type { RepoInfo } from "@bindings/RepoInfo";
|
||||
|
||||
import { formatOid } from "@app/lib/utils";
|
||||
|
||||
import Layout from "./Layout.svelte";
|
||||
|
||||
import Icon from "@app/components/Icon.svelte";
|
||||
import Link from "@app/components/Link.svelte";
|
||||
import NodeId from "@app/components/NodeId.svelte";
|
||||
import PatchTeaser from "@app/components/PatchTeaser.svelte";
|
||||
|
||||
export let repo: RepoInfo;
|
||||
export let patches: Patch[];
|
||||
export let config: Config;
|
||||
export let status: PatchStatus;
|
||||
|
||||
const statusColor: Record<Patch["state"]["status"], string> = {
|
||||
draft: "var(--color-fill-gray)",
|
||||
open: "var(--color-fill-success)",
|
||||
archived: "var(--color-foreground-yellow)",
|
||||
merged: "var(--color-fill-primary)",
|
||||
};
|
||||
|
||||
const statusBackgroundColor: Record<Patch["state"]["status"], string> = {
|
||||
draft: "var(--color-fill-ghost)",
|
||||
open: "var(--color-fill-diff-green)",
|
||||
archived: "var(--color-fill-private)",
|
||||
merged: "var(--color-fill-delegate)",
|
||||
};
|
||||
|
||||
$: project = repo.payloads["xyz.radicle.project"]!;
|
||||
</script>
|
||||
|
||||
@@ -38,7 +23,8 @@
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 2px;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -131,17 +117,7 @@
|
||||
|
||||
<div class="list">
|
||||
{#each patches as patch}
|
||||
<div class="global-flex">
|
||||
<div
|
||||
class="global-counter"
|
||||
style:padding="0"
|
||||
style:color={statusColor[patch.state.status]}
|
||||
style:background-color={statusBackgroundColor[patch.state.status]}>
|
||||
<Icon name="patch" />
|
||||
</div>
|
||||
<div class="global-oid">{formatOid(patch.id)}</div>
|
||||
{patch.title}
|
||||
</div>
|
||||
<PatchTeaser {patch} />
|
||||
{/each}
|
||||
|
||||
{#if patches.length === 0}
|
||||
|
||||
Reference in New Issue
Block a user