radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-10-25 06:40:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make New Issue button visually toggleable

Browse Source
This commit is contained in:
Rūdolfs Ošiņš
2025-04-04 10:25:46 +02:00
parent 76162e4500
commit 4fc03eda4e
2 changed files with 49 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/IssueSecondColumn.svelte
+11 -6
View File
@@ -136,13 +136,18 @@
<OutlineButton
variant="ghost"
disabled={$activeRouteStore.resource === "repo.createIssue"}
styleHeight="2.5rem"
active={$activeRouteStore.resource === "repo.createIssue"}
onclick={() => {
void router.push({
resource: "repo.createIssue",
rid: repo.rid,
status,
});
if ($activeRouteStore.resource === "repo.createIssue") {
window.history.back();
} else {
void router.push({
resource: "repo.createIssue",
rid: repo.rid,
status,
});
}
}}>
<Icon name="plus" />New
</OutlineButton>
src/components/OutlineButton.svelte
+38 -15
View File
@@ -6,9 +6,18 @@
variant: "primary" | "secondary" | "ghost";
onclick?: () => void;
disabled?: boolean;
styleHeight?: "2rem" | "2.5rem";
active?: boolean;
}
const { children, variant, onclick, disabled = false }: Props = $props();
const {
children,
variant,
onclick,
disabled = false,
styleHeight = "2rem",
active = false,
}: Props = $props();
const style = $derived(
`--button-color-1: var(--color-fill-${variant});` +
@@ -160,46 +169,59 @@
background-color: var(--button-color-1);
}
.container:active:not(.disabled) .p1-3 {
.container:active:not(.disabled) .p1-3,
.container.active:not(.disabled) .p1-3 {
background-color: var(--button-color-1);
}
.container:active:not(.disabled) .p2-2 {
.container:active:not(.disabled) .p2-2,
.container.active:not(.disabled) .p2-2 {
background-color: var(--button-color-1);
}
.container:active:not(.disabled) .p2-3 {
.container:active:not(.disabled) .p2-3,
.container.active:not(.disabled) .p2-3 {
background-color: var(--button-color-3);
}
.container:active:not(.disabled) .p2-4 {
.container:active:not(.disabled) .p2-4,
.container.active:not(.disabled) .p2-4 {
background-color: var(--button-color-1);
}
.container:active:not(.disabled) .p3-1 {
.container:active:not(.disabled) .p3-1,
.container.active:not(.disabled) .p3-1 {
background-color: var(--button-color-1);
}
.container:active:not(.disabled) .p3-2 {
.container:active:not(.disabled) .p3-2,
.container.active:not(.disabled) .p3-2 {
background-color: var(--button-color-3);
}
.container:active:not(.disabled) .p3-3 {
.container:active:not(.disabled) .p3-3,
.container.active:not(.disabled) .p3-3 {
background-color: var(--button-color-1);
}
.container:active:not(.disabled) .p3-4 {
.container:active:not(.disabled) .p3-4,
.container.active:not(.disabled) .p3-4 {
background-color: var(--button-color-2);
}
.container:active:not(.disabled) .p3-5 {
.container:active:not(.disabled) .p3-5,
.container.active:not(.disabled) .p3-5 {
background-color: var(--button-color-1);
}
.container:active:not(.disabled) .p4-2 {
.container:active:not(.disabled) .p4-2,
.container.active:not(.disabled) .p4-2 {
background-color: var(--button-color-1);
}
.container:active:not(.disabled) .p4-3 {
.container:active:not(.disabled) .p4-3,
.container.active:not(.disabled) .p4-3 {
background-color: var(--button-color-2);
}
.container:active:not(.disabled) .p4-4 {
.container:active:not(.disabled) .p4-4,
.container.active:not(.disabled) .p4-4 {
background-color: var(--button-color-1);
}
.container:active:not(.disabled) .p5-3 {
.container:active:not(.disabled) .p5-3,
.container.active:not(.disabled) .p5-3 {
background-color: var(--button-color-1);
}
@@ -224,7 +246,6 @@
}
.container {
height: 2rem;
cursor: pointer;
white-space: nowrap;
@@ -249,8 +270,10 @@
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
class="container"
style:height={styleHeight}
style:cursor={!disabled ? "pointer" : "default"}
class:disabled
class:active
onclick={!disabled ? onclick : undefined}
role="button"
tabindex="0"