3f373ff Add tooltips for Dropdowns — radicle-explorer

Radicle web interface

Add tooltips for Dropdowns

Sebastian Martinez committed 3 years ago

commit 3f373ff9d65d251c62f43c4f95049f23180679e3
parent 71c47a2046468165a06643b0eebcdd592d852156

5 files changed +15 -9

modified src/Dropdown.svelte

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

 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   export let items: { key: string; value: string; badge: string | null }[];
   export let items: { key: string; title: string; value: string; badge: string | null }[];
   export let selected: string | null = null;
   const dispatch = createEventDispatcher();

@@ -32,9 +32,9 @@

 </style>
 <div class="dropdown">
   {#each items as {key, value, badge}}
   {#each items as {key, value, badge, title}}
     {#if key && value}
       <div class="dropdown-item" class:selected={value === selected} on:click={() => onSelect(value)} title={value}>{@html key}
       <div class="dropdown-item" class:selected={value === selected} on:click={() => onSelect(value)} {title}>{@html key}
         {#if badge}
           <span class="badge primary">{badge}</span>
         {/if}

modified src/SeedDropdown.svelte

@@ -15,7 +15,7 @@

       let seed = await Seed.lookup(session.domain, config);
       let key = `${seed.emoji} ${seed.host}`;
       return { key, value: seed.host, badge: null };
       return { key, value: seed.host, title: `Go to ${seed.host}`, badge: null };
     }));
   };
 </script>

modified src/base/projects/BranchSelector.svelte

@@ -16,7 +16,7 @@

   let branchLabel: string | null = null;
   $: branchList = Object.keys(branches).sort().map(b => ({ key: b, value: b, badge: null }));
   $: branchList = Object.keys(branches).sort().map(b => ({ key: b, value: b, title: `Switch to ${b}`, badge: null }));
   $: showSelector = branchList.length > 1;
   $: head = project.head ?? branches[project.defaultBranch];
   $: commit = getOid(revision, branches) || head;

@@ -67,7 +67,7 @@

   }
 </style>
 <div class="commit">
 <div class="commit" title="Switch branches">
   <!-- Check for branches listing feature -->
   {#if branchList.length > 0}
     {#if branchLabel}

modified src/base/projects/Patch/PatchTabBar.svelte

@@ -20,6 +20,7 @@

   const revisionList = Object.values(revisions).map((b, i) => ({
     key: formatRevisionName(b, i),
     value: i.toString(),
     title: `Browse revision ${formatRevisionName(b, i)}`,
     badge: null,
   }));

modified src/base/projects/PeerSelector.svelte

@@ -11,7 +11,12 @@

   let meta: Peer | undefined;
   // List of items to be created for the Dropdown component.
   let items: { key: string; value: string; badge: string | null }[] = [];
   let items: { key: string; value: string; title: string; badge: string | null }[] = [];
   function createTitle(p: Peer): string {
     const name = p.person?.name ? p.person.name : p.id;
     return p.delegate ? `${name} is a delegate of this project` : `${name} is a peer tracked by this seed`;
   }
   onMount(() => {
     meta = peers.find(p => p.id === peer);

@@ -19,7 +24,7 @@

       if (! p.person?.name) console.debug("Not able to resolve peer identity for: ", p.id);
       let key = p.person?.name ? `<strong>${p.person.name}</strong> ${p.id}` : p.id;
       return { key, value: p.id, badge: p.delegate ? "delegate" : null };
       return { key, value: p.id, title: createTitle(p), badge: p.delegate ? "delegate" : null };
     });
   });

@@ -67,7 +72,7 @@

 </style>
 <Floating>
   <div slot="toggle" class="selector">
   <div slot="toggle" class="selector" title="Switch peers">
     <div class="stat peer" class:not-allowed={!peers}>
       <Icon name="fork" />
       {#if meta}