Hide Id copyable tooltip when hovering the tooltip itself

radicle-dev · Jun 19, 2024 · 58d4df0 · 58d4df0
1 parent 05632a1
commit 58d4df0
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 39 deletions.
diff --git a/src/components/Id.svelte b/src/components/Id.svelte
@@ -14,6 +14,7 @@
   export let style: "oid" | "commit" | "none" = "oid";
   export let subject: string | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
+  export let styleBottom: string = "1.5rem";
 
   let icon: ComponentProps<IconSmall>["name"] = "clipboard";
   const text = subject ? `Click to copy ${subject}` : "Click to copy";
@@ -47,7 +48,6 @@
   }
   .popover {
     position: absolute;
-    bottom: 1.5rem;
     left: 0;
     display: flex;
     align-items: center;
@@ -75,42 +75,38 @@
 </style>
 
 <div class="container">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
-    role="button"
-    tabindex="0"
     on:mouseenter={() => {
       setVisible(true);
     }}
     on:mouseleave={() => {
       setVisible(false);
-    }}>
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div
-      class="target-{style} global-{style}"
-      style:cursor="pointer"
-      aria-label={ariaLabel}
-      on:click={async () => {
-        await copy();
-        setVisible(true);
-      }}
-      role="button"
-      tabindex="0">
-      <slot>
-        {#if shorten}
-          {formatObjectId(id)}
-        {:else}
-          {id}
-        {/if}
-      </slot>
-    </div>
+    }}
+    class="target-{style} global-{style}"
+    style:cursor="pointer"
+    aria-label={ariaLabel}
+    on:click={async () => {
+      await copy();
+      setVisible(true);
+    }}
+    role="button"
+    tabindex="0">
+    <slot>
+      {#if shorten}
+        {formatObjectId(id)}
+      {:else}
+        {id}
+      {/if}
+    </slot>
+  </div>
 
-    {#if visible}
-      <div style:position="absolute">
-        <div class="popover">
-          <IconSmall name={icon} />
-          {tooltip}
-        </div>
+  {#if visible}
+    <div style:position="absolute">
+      <div class="popover" style:bottom={styleBottom}>
+        <IconSmall name={icon} />
+        {tooltip}
       </div>
-    {/if}
-  </div>
+    </div>
+  {/if}
 </div>
diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte
@@ -6,6 +6,7 @@
 
   export let nodeId: string;
   export let alias: string | undefined = undefined;
+  export let popoverStyleBottom: string | undefined = undefined;
 </script>
 
 <style>
@@ -21,7 +22,11 @@
   }
 </style>
 
-<Id id={nodeId} subject={formatNodeId(nodeId)} style="none">
+<Id
+  id={nodeId}
+  subject={formatNodeId(nodeId)}
+  style="none"
+  styleBottom={popoverStyleBottom}>
   <div class="avatar-alias">
     <Avatar {nodeId} />
     {#if alias}

diff --git a/src/views/projects/Commit/CommitTeaser.svelte b/src/views/projects/Commit/CommitTeaser.svelte
@@ -104,7 +104,7 @@
       </div>
     {/if}
     <CommitAuthorship header={commit}>
-      <Id id={commit.id} style="commit" />
+      <Id styleBottom="-2.5rem" id={commit.id} style="commit" />
     </CommitAuthorship>
   </div>
   <div class="right">

diff --git a/src/views/projects/Issue/IssueTeaser.svelte b/src/views/projects/Issue/IssueTeaser.svelte
@@ -120,9 +120,12 @@
       {/if}
       <div
         style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
-        <NodeId nodeId={issue.author.id} alias={issue.author.alias} />
-        opened
-        <Id id={issue.id} />
+        <NodeId
+          nodeId={issue.author.id}
+          alias={issue.author.alias}
+          popoverStyleBottom="-2.5rem" />
+        opened a
+        <Id styleBottom="-2.5rem" id={issue.id} />
         <span title={absoluteTimestamp(issue.discussion[0].timestamp)}>
           {formatTimestamp(issue.discussion[0].timestamp)}
         </span>

diff --git a/src/views/projects/Patch/PatchTeaser.svelte b/src/views/projects/Patch/PatchTeaser.svelte
@@ -134,12 +134,17 @@
         {/if}
         <div
           style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
-          <NodeId nodeId={patch.author.id} alias={patch.author.alias} />
+          <NodeId
+            popoverStyleBottom="-2.5rem"
+            nodeId={patch.author.id}
+            alias={patch.author.alias} />
           {patch.revisions.length > 1 ? "updated" : "opened"}
-          <Id id={patch.id} />
+          <Id id={patch.id} styleBottom="-2.5rem" />
           {#if patch.revisions.length > 1}
             <span class="global-hide-on-mobile-down">
-              to <Id id={patch.revisions[patch.revisions.length - 1].id} />
+              to <Id
+                styleBottom="-2.5rem"
+                id={patch.revisions[patch.revisions.length - 1].id} />
             </span>
           {/if}
           <span title={absoluteTimestamp(latestRevision.timestamp)}>