Tweak copyable IDs

radicle-dev · Jun 7, 2024 · 66ae6f7 · 66ae6f7
1 parent adc6c6c
commit 66ae6f7
Show file tree

Hide file tree

Showing 23 changed files with 188 additions and 252 deletions.
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
@@ -9,6 +9,7 @@
   import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
   import Markdown from "@app/components/Markdown.svelte";
   import NodeId from "@app/components/NodeId.svelte";
   import ReactionSelector from "@app/components/ReactionSelector.svelte";
@@ -136,15 +137,10 @@
     {/if}
     <div class="card-header" class:card-header-no-icon={isReply}>
       <slot class="icon" name="icon" />
-      <NodeId
-        stylePopoverPositionLeft="-13px"
-        nodeId={authorId}
-        alias={authorAlias} />
+      <NodeId nodeId={authorId} alias={authorAlias} />
       <slot name="caption">{caption}</slot>
       {#if id}
-        <span class="global-oid">
-          {utils.formatObjectId(id)}
-        </span>
+        <Id {id} />
       {/if}
       <span class="timestamp" title={utils.absoluteTimestamp(timestamp)}>
         {utils.formatTimestamp(timestamp)}

diff --git a/src/components/CopyableId.svelte b/src/components/CopyableId.svelte
diff --git a/src/components/HoverPopover.svelte b/src/components/HoverPopover.svelte
@@ -8,6 +8,10 @@
   export let stylePopoverPositionTop: string | undefined = undefined;
   export let stylePopoverPositionBottom: string | undefined = undefined;
   export let stylePopoverPadding: string | undefined = "1rem";
+  export let styleBorderRadius = "var(--border-radius-regular)";
+  export let styleBackground = "var(--color-background-float)";
+  export let styleBorder = "1px solid var(--color-border-hint)";
+  export let debounceTimeout = 500;
 
   let visible: boolean = false;
 
@@ -16,17 +20,15 @@
     if (visible) {
       onShow();
     }
-  }, 500);
+  }, debounceTimeout);
 </script>
 
 <style>
   .container {
     position: relative;
+    display: inline-block;
   }
   .popover {
-    background: var(--color-background-float);
-    border-radius: var(--border-radius-regular);
-    border: 1px solid var(--color-border-hint);
     box-shadow: var(--elevation-low);
     position: absolute;
     z-index: 10;
@@ -50,6 +52,9 @@
       <div style:position="absolute" on:click|stopPropagation>
         <div
           class="popover"
+          style:border={styleBorder}
+          style:background={styleBackground}
+          style:border-radius={styleBorderRadius}
           style:padding={stylePopoverPadding}
           style:left={stylePopoverPositionLeft}
           style:right={stylePopoverPositionRight}

diff --git a/src/components/Id.svelte b/src/components/Id.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+
+  import { debounce } from "lodash";
+
+  import { formatObjectId } from "@app/lib/utils";
+  import { toClipboard } from "@app/lib/utils";
+
+  import HoverPopover from "./HoverPopover.svelte";
+  import IconSmall from "./IconSmall.svelte";
+
+  export let id: string;
+  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;
+
+  let icon: ComponentProps<IconSmall>["name"] = "clipboard";
+  const text = subject ? `Click to copy ${subject}` : "Click to copy";
+  let tooltip = text;
+
+  const restoreIcon = debounce(() => {
+    icon = "clipboard";
+    tooltip = text;
+  }, 800);
+
+  async function copy() {
+    await toClipboard(clipboard);
+    icon = "checkmark";
+    tooltip = "Copied to clipboard";
+    restoreIcon();
+  }
+</script>
+
+<style>
+  .popover {
+    font-weight: var(--font-weight-regular);
+    font-family: var(--font-family-sans-serif);
+    font-size: var(--font-size-small);
+    color: var(--color-foreground-default);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    gap: 0.5rem;
+  }
+  .target-commit:hover {
+    color: var(--color-foreground-contrast);
+  }
+  .target-oid:hover {
+    color: var(--color-foreground-emphasized-hover);
+  }
+</style>
+
+<HoverPopover
+  debounceTimeout={50}
+  stylePopoverPositionLeft="0"
+  stylePopoverPositionBottom="1.5rem"
+  styleBorderRadius="var(--border-radius-small)"
+  stylePopoverPadding="0.25rem 0.5rem">
+  <div
+    slot="toggle"
+    class="target-{style} global-{style}"
+    style:cursor="pointer">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span aria-label={ariaLabel} on:click={copy} role="button" tabindex="0">
+      <slot>
+        {#if shorten}
+          {formatObjectId(id)}
+        {:else}
+          {id}
+        {/if}
+      </slot>
+    </span>
+  </div>
+  <div slot="popover" class="popover">
+    <IconSmall name={icon} />
+    {tooltip}
+  </div>
+</HoverPopover>
diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte
@@ -2,13 +2,10 @@
   import { formatNodeId } from "@app/lib/utils";
 
   import Avatar from "./Avatar.svelte";
-  import HoverPopover from "./HoverPopover.svelte";
-  import CopyableId from "./CopyableId.svelte";
+  import Id from "./Id.svelte";
 
   export let nodeId: string;
   export let alias: string | undefined = undefined;
-  export let large: boolean = false;
-  export let stylePopoverPositionLeft = "-4.5rem";
 </script>
 
 <style>
@@ -22,52 +19,15 @@
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-small);
   }
-  .large {
-    height: 1.25rem;
-    gap: 0.5rem;
-  }
-  .popover-avatar {
-    height: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-family: var(--font-family-monospace);
-    font-weight: var(--font-weight-semibold);
-    font-size: var(--font-size-small);
-    white-space: nowrap;
-  }
-  .popover-container {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
 </style>
 
-<HoverPopover
-  {stylePopoverPositionLeft}
-  stylePopoverPadding="0.5rem 0.5rem 0.5rem 0.75rem"
-  stylePopoverPositionTop="-4.5rem">
-  <div slot="toggle" class="avatar-alias" class:large>
+<Id id={nodeId} subject={formatNodeId(nodeId)} style="none">
+  <div class="avatar-alias">
     <Avatar {nodeId} />
     {#if alias}
       {alias}
     {:else}
       {formatNodeId(nodeId)}
     {/if}
   </div>
-
-  <div slot="popover">
-    <div class="popover-container">
-      <div class="popover-avatar">
-        <Avatar {nodeId} />
-        {#if alias}
-          {alias}
-        {/if}
-      </div>
-
-      <CopyableId id={nodeId} style="oid">
-        {formatNodeId(nodeId)}
-      </CopyableId>
-    </div>
-  </div>
-</HoverPopover>
+</Id>
diff --git a/src/views/nodes/View.svelte b/src/views/nodes/View.svelte
@@ -11,9 +11,9 @@
   import { isDelegate } from "@app/lib/roles";
 
   import AppLayout from "@app/App/AppLayout.svelte";
-  import CopyableId from "@app/components/CopyableId.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
   import Loading from "@app/components/Loading.svelte";
   import Popover from "@app/components/Popover.svelte";
   import ProjectCard from "@app/components/ProjectCard.svelte";
@@ -128,25 +128,27 @@
             {#each externalAddresses as address}
               <!-- If there are externalAddresses this is probably a remote node -->
               <!-- in that case, we show all the defined externalAddresses as a listing -->
-              <CopyableId id={`${nid}@${address}`} style="oid">
-                {truncateId(nid)}@{address}
-              </CopyableId>
+              <Id
+                ariaLabel="node-id"
+                shorten={false}
+                id="{truncateId(nid)}@{address}"
+                clipboard={`${nid}@${address}`} />
             {:else}
               <!-- else this is probably a local node -->
               <!-- So we show only the nid -->
-              <CopyableId id={nid} style="oid">
-                <div class="global-hide-on-small-desktop-up">
-                  {truncateId(nid)}
-                </div>
-                <div class="global-hide-on-mobile-down">
-                  {nid}
-                </div>
-              </CopyableId>
+              <div class="global-hide-on-small-desktop-up">
+                <Id ariaLabel="node-id" id={truncateId(nid)} shorten={false} />
+              </div>
+              <div class="global-hide-on-mobile-down">
+                <Id ariaLabel="node-id" id={nid} shorten={false} />
+              </div>
             {/each}
           </div>
-          <div class="version">
-            {version}
-          </div>
+          <Id ariaLabel="version" id={version} shorten={false} style="none">
+            <div class="version">
+              {version}
+            </div>
+          </Id>
         </div>
       </div>
 

diff --git a/src/views/projects/Cob/CobCommitTeaser.svelte b/src/views/projects/Cob/CobCommitTeaser.svelte
@@ -3,11 +3,11 @@
 
   import { twemoji } from "@app/lib/utils";
 
-  import CommitLink from "@app/views/projects/components/CommitLink.svelte";
   import CompactCommitAuthorship from "@app/components/CompactCommitAuthorship.svelte";
   import ExpandButton from "@app/components/ExpandButton.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import Link from "@app/components/Link.svelte";
 
@@ -88,15 +88,15 @@
     {/if}
     <div class="global-hide-on-small-desktop-up">
       <CompactCommitAuthorship {commit}>
-        <CommitLink {baseUrl} {projectId} commitId={commit.id} />
+        <Id id={commit.id} style="commit" />
       </CompactCommitAuthorship>
     </div>
   </div>
   <div class="right">
     <div style="display: flex; gap: 0.5rem; height: 21px; align-items: center;">
       <div class="global-hide-on-mobile-down">
         <CompactCommitAuthorship {commit}>
-          <CommitLink {baseUrl} {projectId} commitId={commit.id} />
+          <Id id={commit.id} style="commit" />
         </CompactCommitAuthorship>
       </div>
       <IconButton title="Browse repo at this commit">

diff --git a/src/views/projects/Cob/CobHeader.svelte b/src/views/projects/Cob/CobHeader.svelte
@@ -11,7 +11,6 @@
     flex-wrap: wrap;
     gap: 0.5rem;
     font-size: var(--font-size-small);
-    font-family: var(--font-family-monospace);
   }
   .summary {
     display: flex;