radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-11-15 19:30:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show inbox button in active state when showing inbox

Browse Source
This commit is contained in:
Rūdolfs Ošiņš
2025-02-13 08:54:16 -06:00
parent 9231d3c6c7
commit 6cbd6336dc
2 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.svelte
+3
View File
@@ -8,6 +8,8 @@
import Icon from "./Icon.svelte";
import NakedButton from "./NakedButton.svelte";
const activeRouteStore = router.activeRouteStore;
interface Props {
publicKey: string;
center?: Snippet;
@@ -94,6 +96,7 @@
<NakedButton
variant="ghost"
stylePadding="0 4px"
active={$activeRouteStore.resource === "inbox"}
onclick={() => router.push({ resource: "inbox" })}>
<Icon name="inbox" />
</NakedButton>
src/components/NakedButton.svelte
+29 -13
View File
@@ -9,6 +9,7 @@
onclick?: (e: MouseEvent) => void;
styleHeight?: string;
stylePadding?: string;
active?: boolean;
}
const {
@@ -19,6 +20,7 @@
onclick,
styleHeight = "2rem",
stylePadding = "0 8px",
active = false,
}: Props = $props();
const style = $derived(
@@ -147,46 +149,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);
}
@@ -221,6 +236,7 @@
<div
class="container"
class:disabled
class:active
onclick={!disabled ? onclick : undefined}
{title}
role="button"