From 78dbf91c53dd9fc396a7070ace93ee44689c5e7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 18 Jun 2024 18:32:58 +0200
Subject: [PATCH] Hide Id copyable tooltip when hovering the tooltip itself

---
 public/elevations.css                         |  4 +-
 src/components/Id.svelte                      | 64 +++++++++----------
 src/components/NodeId.svelte                  |  3 +-
 src/views/projects/Issue/IssueTeaser.svelte   |  2 +-
 .../Source/PeerBranchSelector/Peer.svelte     |  5 +-
 5 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/public/elevations.css b/public/elevations.css
index d3a8f1341e..b21ad2187f 100644
--- a/public/elevations.css
+++ b/public/elevations.css
@@ -1,7 +1,7 @@
 :root {
-  --elevation-low: 0 0 64px 0 #00000099;
+  --elevation-low: 0 0 48px 0 #000000ee;
 }
 
 [data-theme="light"] {
-  --elevation-low: 0 0 64px 0 #0000001a;
+  --elevation-low: 0 0 16px 0 #00000022;
 }
diff --git a/src/components/Id.svelte b/src/components/Id.svelte
index a36f755e6d..246d5d2a0a 100644
--- a/src/components/Id.svelte
+++ b/src/components/Id.svelte
@@ -12,11 +12,11 @@
   export let clipboard: string = id;
   export let shorten: boolean = true;
   export let style: "oid" | "commit" | "none" = "oid";
-  export let subject: string | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
+  export let styleLeft: string = "0";
 
   let icon: ComponentProps<IconSmall>["name"] = "clipboard";
-  const text = subject ? `Click to copy ${subject}` : "Click to copy";
+  const text = "Click to copy";
   let tooltip = text;
 
   const restoreIcon = debounce(() => {
@@ -47,7 +47,6 @@
   }
   .popover {
     position: absolute;
-    bottom: 1.5rem;
     left: 0;
     display: flex;
     align-items: center;
@@ -55,8 +54,9 @@
     gap: 0.5rem;
     justify-content: center;
     z-index: 20;
+    bottom: 1.5rem;
     background: var(--color-background-float);
-    color: var(--color-foreground-default);
+    color: var(--color-fill-gray);
     border: 1px solid var(--color-border-hint);
     border-radius: var(--border-radius-small);
     box-shadow: var(--elevation-low);
@@ -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:left={styleLeft}>
+        <IconSmall name={icon} />
+        {tooltip}
       </div>
-    {/if}
-  </div>
+    </div>
+  {/if}
 </div>
diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte
index 6807b43138..3d42dffe1d 100644
--- a/src/components/NodeId.svelte
+++ b/src/components/NodeId.svelte
@@ -6,7 +6,6 @@
 
   export let nodeId: string;
   export let alias: string | undefined = undefined;
-  export let subject: string = formatNodeId(nodeId);
 </script>
 
 <style>
@@ -25,7 +24,7 @@
   }
 </style>
 
-<Id id={nodeId} {subject} style="none">
+<Id id={nodeId} style="none" styleLeft="1rem">
   <div class="avatar-alias">
     <Avatar {nodeId} />
     {#if alias}
diff --git a/src/views/projects/Issue/IssueTeaser.svelte b/src/views/projects/Issue/IssueTeaser.svelte
index 11e46a6991..34a52b302b 100644
--- a/src/views/projects/Issue/IssueTeaser.svelte
+++ b/src/views/projects/Issue/IssueTeaser.svelte
@@ -121,7 +121,7 @@
       <div
         style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
         <NodeId nodeId={issue.author.id} alias={issue.author.alias} />
-        opened
+        opened a
         <Id id={issue.id} />
         <span title={absoluteTimestamp(issue.discussion[0].timestamp)}>
           {formatTimestamp(issue.discussion[0].timestamp)}
diff --git a/src/views/projects/Source/PeerBranchSelector/Peer.svelte b/src/views/projects/Source/PeerBranchSelector/Peer.svelte
index d9b71df7a1..c0bef22a40 100644
--- a/src/views/projects/Source/PeerBranchSelector/Peer.svelte
+++ b/src/views/projects/Source/PeerBranchSelector/Peer.svelte
@@ -38,10 +38,7 @@
     <IconButton title="Expand peer" on:click={() => (expanded = !expanded)}>
       <IconSmall name={expanded ? "chevron-down" : "chevron-right"} />
     </IconButton>
-    <NodeId
-      subject="Node Id"
-      nodeId={peer.remote.id}
-      alias={peer.remote.alias} />
+    <NodeId nodeId={peer.remote.id} alias={peer.remote.alias} />
     {#if peer.remote.delegate}
       <Badge size="tiny" variant="delegate">
         <IconSmall name="badge" />