Tweak copyable IDs

radicle-dev · Jun 12, 2024 · 5eb0c47 · 5eb0c47
1 parent adc6c6c
commit 5eb0c47
Show file tree

Hide file tree

Showing 24 changed files with 225 additions and 269 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
@@ -1,32 +1,26 @@
 <script lang="ts">
   import debounce from "lodash/debounce";
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  export let onShow: () => void = () => {};
-  export let stylePopoverPositionLeft: string | undefined = undefined;
-  export let stylePopoverPositionRight: string | undefined = undefined;
-  export let stylePopoverPositionTop: string | undefined = undefined;
   export let stylePopoverPositionBottom: string | undefined = undefined;
-  export let stylePopoverPadding: string | undefined = "1rem";
+  export let stylePopoverPositionLeft: string | undefined = undefined;
 
   let visible: boolean = false;
 
   const setVisible = debounce((value: boolean) => {
     visible = value;
-    if (visible) {
-      onShow();
-    }
-  }, 500);
+  }, 50);
 </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);
+    padding: 1rem;
     box-shadow: var(--elevation-low);
     position: absolute;
     z-index: 10;
@@ -42,19 +36,11 @@
     <slot name="toggle" />
 
     {#if visible}
-      <!-- If this component is used inside a button (see `NodeId`, for example)
-       we don’t want clicks in the popover to trigger button actions. So we
-       stop propagation of click events. -->
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div style:position="absolute" on:click|stopPropagation>
+      <div style:position="absolute">
         <div
           class="popover"
-          style:padding={stylePopoverPadding}
           style:left={stylePopoverPositionLeft}
-          style:right={stylePopoverPositionRight}
-          style:bottom={stylePopoverPositionBottom}
-          style:top={stylePopoverPositionTop}>
+          style:bottom={stylePopoverPositionBottom}>
           <slot name="popover" />
         </div>
       </div>

diff --git a/src/components/Id.svelte b/src/components/Id.svelte
@@ -0,0 +1,116 @@
+<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 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;
+    visible = false;
+  }, 1000);
+
+  async function copy() {
+    await toClipboard(clipboard);
+    icon = "checkmark";
+    tooltip = "Copied to clipboard";
+    restoreIcon();
+  }
+
+  let visible: boolean = false;
+  export let debounceTimeout = 50;
+
+  const setVisible = debounce((value: boolean) => {
+    visible = value;
+  }, debounceTimeout);
+</script>
+
+<style>
+  .container {
+    position: relative;
+    display: inline-block;
+  }
+  .popover {
+    position: absolute;
+    bottom: 1.5rem;
+    left: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 0.5rem;
+    justify-content: center;
+    z-index: 10;
+    background: var(--color-background-float);
+    color: var(--color-foreground-default);
+    border: 1px solid var(--color-border-hint);
+    border-radius: var(--border-radius-small);
+    box-shadow: var(--elevation-low);
+    font-family: var(--font-family-sans-serif);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    white-space: nowrap;
+    padding: 0.25rem 0.5rem;
+  }
+  .target-commit:hover {
+    color: var(--color-foreground-contrast);
+  }
+  .target-oid:hover {
+    color: var(--color-foreground-emphasized-hover);
+  }
+</style>
+
+<div class="container">
+  <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>
+
+    {#if visible}
+      <div style:position="absolute">
+        <div class="popover">
+          <IconSmall name={icon} />
+          {tooltip}
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
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">