Radish alpha
r
radicle-explorer
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Patches › d8536cfe
Tweak copyable ID UX
Merged rudolfs opened 1 year ago
  • don’t keep the tooltip open when hovering over it
  • offset the tooltip to the right, so it doesn’t overlap with other content
  • tweak colors so it pops out of the background more
  • tweak elevation shadows to stand out more
  • don’t show node ID DID in popover

check check-visual check-unit-test check-http-client-unit-test check-radicle-httpd check-e2e check-build check-http 👉 Preview 👉 Workflow runs 👉 Branch on GitHub

Activity Changes +38 -47
4 files changed +38 -47 b0bd692d → 5ed05651
modified 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;

}
modified src/components/Id.svelte
@@ -12,11 +12,10 @@
  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";
+ 
  const text = "Click to copy";

  let tooltip = text;



  const restoreIcon = debounce(() => {
@@ -47,24 +46,24 @@
  }

  .popover {

    position: absolute;
- 
    bottom: 1.5rem;
- 
    left: 0;
+ 
    left: 1rem;

    display: flex;

    align-items: center;

    flex-direction: row;

    gap: 0.5rem;

    justify-content: center;

    z-index: 20;
- 
    background: var(--color-background-float);
- 
    color: var(--color-foreground-default);
- 
    border: 1px solid var(--color-border-hint);
- 
    border-radius: var(--border-radius-small);
+ 
    bottom: 1.5rem;
+ 
    background: var(--color-fill-ghost);
+ 
    color: var(--color-fill-gray);
+ 
    border: 1px solid var(--color-border-default);
+ 
    border-radius: var(--border-radius-tiny);

    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;
+ 
    padding: 0.125rem 0.5rem;

  }

  .target-commit:hover {

    color: var(--color-foreground-contrast);
@@ -75,42 +74,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="copy"
+ 
    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">
+ 
        <IconSmall name={icon} />
+ 
        {tooltip}

      </div>
- 
    {/if}
- 
  </div>
+ 
    </div>
+ 
  {/if}

</div>
modified 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">

  <div class="avatar-alias">

    <Avatar {nodeId} />

    {#if alias}
modified 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" />