Radish alpha
r
radicle-explorer
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Commits › 46d1c21
Make RID on repo cards copyable
Rūdolfs Ošiņš committed 1 year ago
commit 46d1c2177dcb3039151dcad7068059f2c05bd45c
parent b650160
2 files changed +11 -11
modified src/components/Id.svelte
@@ -13,6 +13,7 @@
  export let style: "oid" | "commit" | "none" = "oid";

  export let ariaLabel: string | undefined = undefined;

  export let styleWidth: string | undefined = undefined;
+ 
  export let title: string | undefined = undefined;



  let icon: ComponentProps<Icon>["name"] = "clipboard";

  const text = "Click to copy";
@@ -72,9 +73,10 @@
  }

</style>
- 
<div class="container" style:width={styleWidth}>
+ 
<div class="container" style:width={styleWidth} {title}>

  <!-- svelte-ignore a11y-click-events-have-key-events -->

  <div
+ 
    style:display="flex"

    on:mouseenter={() => {

      setVisible(true);

    }}
@@ -84,7 +86,7 @@
    class="target-{style} global-{style}"

    style:cursor="copy"

    aria-label={ariaLabel}
- 
    on:click={async () => {
+ 
    on:click|preventDefault|stopPropagation={async () => {

      await copy();

      setVisible(true);

    }}
modified src/components/RepoCard.svelte
@@ -14,6 +14,7 @@
  import ActivityDiagram from "@app/components/ActivityDiagram.svelte";

  import Badge from "@app/components/Badge.svelte";

  import Icon from "@app/components/Icon.svelte";
+ 
  import Id from "@app/components/Id.svelte";

  import Link from "@app/components/Link.svelte";



  export let compact = false;
@@ -39,7 +40,6 @@
    display: flex;

    flex-direction: column;

    justify-content: space-between;
- 
    overflow: hidden;

  }



  .repo-card.compact {
@@ -132,12 +132,6 @@
    align-items: center;

    white-space: nowrap;

  }
-
- 
  .rid {
- 
    font-family: var(--font-family-monospace);
- 
    margin-left: auto;
- 
    color: var(--color-foreground-emphasized);
- 
  }

</style>



<Link
@@ -195,8 +189,12 @@
            · Updated {formatTimestamp(commit.committer.time)}

          </span>

        {/await}
- 
        <span class="rid" title={repo.rid}>
- 
          {formatRepositoryId(repo.rid)}
+ 
        <span class="global-flex-item" style:margin-left="auto">
+ 
          <Id id={repo.rid} title={repo.rid}>
+ 
            <span style:font-size="var(--font-size-tiny)">
+ 
              {formatRepositoryId(repo.rid)}
+ 
            </span>
+ 
          </Id>

        </span>

      </div>

    </div>