6cbd633 Show inbox button in active state when showing inbox — radicle-desktop

Radicle desktop app

Show inbox button in active state when showing inbox

Rūdolfs Ošiņš committed 1 year ago

commit 6cbd6336dc06dacdf6d84f6c4ab0e042f8d36439
parent 9231d3c6c75d894ebfe6331baf8da76ed73a3903

2 files changed +32 -13

modified src/components/Header.svelte

@@ -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>

modified src/components/NakedButton.svelte

@@ -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"