Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › 3e8d63f
Add auto-hide scrollbars into revision selector
Sebastian Martinez committed 10 months ago
commit 3e8d63fb80be0c0368d8480ff9a1b6d0d7397774
parent 30710d5
4 files changed +40 -17
modified public/index.css
@@ -22,19 +22,6 @@ body {
  background-color: var(--color-background-default);

}
- 
:root {
- 
  .os-theme-radicle {
- 
    --os-size: 16px;
- 
    --os-handle-border-radius: 4px;
- 
    --os-padding-perpendicular: 4px;
- 
    --os-padding-axis: 2px;
- 
    --os-track-bg: var(--color-background-default);
- 
    --os-handle-bg: var(--color-fill-ghost);
- 
    --os-handle-bg-hover: var(--color-fill-ghost);
- 
    --os-handle-bg-active: var(--color-fill-ghost);
- 
  }
- 
}
- 


::selection {

  background: var(--color-fill-yellow);

  color: var(--color-foreground-black);
@@ -100,6 +87,19 @@ body {
}



:root {
+ 
  .global-os-theme-radicle {
+ 
    --os-size: 16px;
+ 
    --os-handle-border-radius: 4px;
+ 
    --os-padding-perpendicular: 4px;
+ 
    --os-padding-axis: 2px;
+ 
    --os-handle-bg: var(--color-border-default);
+ 
    --os-handle-bg-hover: var(--color-border-default);
+ 
    --os-handle-bg-active: var(--color-border-default);
+ 
    --os-track-bg: transparent;
+ 
  }
+ 
}
+
+ 
:root {

  --elevation-low: 0 0 48px 0 #000000ee;

}
modified src/components/DropdownList.svelte
@@ -1,6 +1,8 @@
<script lang="ts" generics="T">

  import type { Snippet } from "svelte";
+ 
  import { useOverlayScrollbars } from "overlayscrollbars-svelte";
+ 


  interface Props {

    item: Snippet<[T]>;

    empty?: Snippet;
@@ -9,6 +11,24 @@
  }



  const { item, empty, items, styleDropdownMinWidth }: Props = $props();
+
+ 
  let dropdownElement: HTMLDivElement | undefined = undefined;
+
+ 
  $effect(() => {
+ 
    if (dropdownElement) {
+ 
      const [initialize] = useOverlayScrollbars({
+ 
        options: () => ({
+ 
          scrollbars: {
+ 
            theme: "global-os-theme-radicle",
+ 
            autoHide: "scroll",
+ 
          },
+ 
        }),
+ 
        defer: true,
+ 
      });
+
+ 
      initialize({ target: dropdownElement });
+ 
    }
+ 
  });

</script>



<style>
@@ -23,7 +43,10 @@
  }

</style>
- 
<div class="dropdown" style:min-width={styleDropdownMinWidth}>
+ 
<div
+ 
  class="dropdown"
+ 
  bind:this={dropdownElement}
+ 
  style:min-width={styleDropdownMinWidth}>

  {#each items as i}

    <div class="dropdown-item">

      {@render item(i)}
modified src/components/InboxButton.svelte
@@ -35,7 +35,7 @@
    if (borderComponent) {

      const [initialize] = useOverlayScrollbars({

        options: () => ({
- 
          scrollbars: { theme: "os-theme-radicle", autoHide: "scroll" },
+ 
          scrollbars: { theme: "global-os-theme-radicle", autoHide: "scroll" },

        }),

        defer: true,

      });
modified src/views/repo/Layout.svelte
@@ -131,7 +131,7 @@
    options={{

      overflow: { x: "visible" },

      scrollbars: {
- 
        theme: "os-theme-radicle",
+ 
        theme: "global-os-theme-radicle",

        autoHide: "scroll",

      },

    }}
@@ -158,7 +158,7 @@
    style="grid-column: 3/4; width: 100%;"

    options={{

      scrollbars: {
- 
        theme: "os-theme-radicle",
+ 
        theme: "global-os-theme-radicle",

        autoHide: "scroll",

      },

    }}