9a92842 Create "Dropdown" component — radicle-explorer

modified public/index.css

@@ -60,6 +60,7 @@

 	--color-foreground-5: #8594a1;
 	--color-foreground-6: #d3dee8;
 	--color-background: #0b131a;
 	--color-shadow: rgba(0, 0, 0, 0.2);
 	--color-glow: #5555ff22;
 	--color-glow-error: #ff555522;
 	--color-scrollbar: var(--color-foreground-subtler);

added src/Dropdown.svelte

@@ -0,0 +1,44 @@

 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   export let items: string[];
   export let visible = false;
   const dispatch = createEventDispatcher();
   const onSelect = (item: string) => {
     dispatch("select", item);
   };
 </script>
 <style>
   .dropdown {
     background-color: var(--color-foreground-background);
     padding: 0.5rem 0;
     margin-top: 0.5rem;
     border-radius: 0.25rem;
     position: absolute;
     box-shadow: 8px 8px 24px var(--color-shadow);
   }
   .dropdown-item {
     cursor: pointer;
     padding: 0.5rem 1rem;
   }
   .dropdown-item:hover {
     background-color: var(--color-foreground-background-lighter);
   }
   @media (max-width: 720px) {
     .dropdown {
       left: 32px;
       z-index: 10;
     }
   }
 </style>
 {#if visible}
   <div class="dropdown">
     {#each items as item}
       <div class="dropdown-item" on:click={() => onSelect(item)}>{item}</div>
     {/each}
   </div>
 {/if}

modified src/base/projects/BranchSelector.svelte

@@ -1,7 +1,8 @@

 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import { Info, getOid } from "@app/project";
   import { formatCommit, isOid } from "@app/utils";
   import { createEventDispatcher } from "svelte";
   import Dropdown from "@app/Dropdown.svelte";
   export let branches: [string, string][];
   export let project: Info;

@@ -61,44 +62,14 @@

     padding: 0.5rem 0.75rem;
     border-radius: inherit;
   }
   .item {
     cursor: pointer;
     padding: 0.3rem;
   }
   .item:hover {
     background-color: var(--color-foreground-background-lighter);
   }
   .dropdown {
     background-color: var(--color-foreground-background);
     padding: 1rem;
     margin-top: 0.5rem;
     border-radius: 0.25rem;
     display: none;
     position: absolute;
   }
   .hidden {
     display: none;
   }
   .pointer {
     cursor: pointer;
   }
   .branch-dropdown.branch-dropdown-without-label {
     margin-top: 1.6rem;
   }
   .branch-dropdown.branch-dropdown-visible {
     display: block;
   }
   .stat {
     font-family: var(--font-family-monospace);
     padding: 0.5rem 0.75rem;
     background: var(--color-foreground-background);
   }
   @media (max-width: 720px) {
     .dropdown {
       left: 32px;
       z-index: 10;
     }
   }
 </style>
 <div class="commit">

@@ -113,28 +84,21 @@

       >
         {branchLabel}
       </div>
       <div
         class="dropdown branch-dropdown"
         class:branch-dropdown-without-label={!isLabel}
         class:branch-dropdown-visible={branchesDropdown}
       >
         {#each branches as [name,]}
           <div class="item" on:click={() => switchBranch(name)}>{name}</div>
         {/each}
       </div>
       <Dropdown
         items={branches.map(([name,]) => name)}
         visible={branchesDropdown}
         on:select={(e) => switchBranch(e.detail)} />
     </span>
     {#if isLabel}
       <div class="hash">
     <div class="hash desktop">
       {#if isLabel}
         {formatCommit(commit)}
       </div>
     {:else}
       <div class="hash desktop" class:pointer={!isLabel} on:click={() => toggleDropdown("branch")}>
       {:else}
         {commit}
       </div>
       <div class="hash mobile" class:pointer={!isLabel} on:click={() => toggleDropdown("branch")}>
         {formatCommit(commit)}
       </div>
     {/if}
       {/if}
     </div>
     <div class="hash mobile">
       {formatCommit(commit)}
     </div>
   <!-- If there is no branch listing available, show default branch name if commit is head and else show entire commit -->
   {:else if commit === project.head}
     <div class="stat branch not-allowed">

modified src/base/projects/PeerSelector.svelte

@@ -1,7 +1,8 @@

 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import Icon from "@app/Icon.svelte";
   import Dropdown from "@app/Dropdown.svelte";
   import { formatSeedId } from "@app/utils";
   import { createEventDispatcher } from "svelte";
   export let peer: string | null;
   export let peers: string[];

@@ -38,24 +39,6 @@

   .peer:hover {
     background-color: var(--color-foreground-background-lighter);
   }
   .item {
     cursor: pointer;
     padding: 0.3rem;
   }
   .item:hover {
     background-color: var(--color-foreground-background-lighter);
   }
   .dropdown {
     background-color: var(--color-foreground-background);
     padding: 1rem;
     margin-top: 0.5rem;
     border-radius: 0.25rem;
     display: none;
     position: absolute;
   }
   .peer-dropdown.peer-dropdown-visible {
     display: block;
   }
   .stat {
     display: flex;
     align-items: center;

@@ -64,12 +47,6 @@

     height: 2.125rem;
     background: var(--color-foreground-background);
   }
   @media (max-width: 720px) {
     .dropdown {
       left: 32px;
       z-index: 10;
     }
   }
 </style>
 <div class="selector">

@@ -82,13 +59,10 @@

         </span>
       {/if}
     </div>
     <div
       class="dropdown peer-dropdown"
       class:peer-dropdown-visible={peersDropdown}
     >
       {#each peers as peer}
         <div class="item" on:click={() => switchPeer(peer)}>{peer}</div>
       {/each}
     </div>
     <Dropdown
       items={peers}
       visible={peersDropdown}
       on:select={(e) => switchPeer(e.detail)}
     />
   </span>
 </div>