Radish alpha
r
radicle-explorer
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Patches › 5df1dcfc
Tweak share button UX
Archived rudolfs opened 1 year ago
Activity Changes +47 -34
2 files changed +47 -34 fb32e01a → 9c5b9b68
modified src/components/CopyableId.svelte
@@ -3,7 +3,8 @@
  import Clipboard from "@app/components/Clipboard.svelte";



  export let id: string;
- 
  export let style: "commit" | "oid";
+ 
  export let style: "commit" | "oid" | "other";
+ 
  export let disabled: boolean = false;



  let clipboard: SvelteComponent;

</script>
@@ -15,6 +16,7 @@
    overflow-wrap: anywhere;

    display: flex;

    align-items: center;
+ 
    justify-content: center;

    gap: 0.125rem;

    width: fit-content;

  }
@@ -32,11 +34,16 @@
  }}

  class="id">

  <span
+ 
    style:display="flex"
+ 
    style:gap="0.5rem"
+ 
    style:align-items="center"

    class="txt-overflow"

    class:global-commit={style === "commit"}

    class:global-oid={style === "oid"}

    style="color: inherit">

    <slot>{id}</slot>

  </span>
- 
  <Clipboard bind:this={clipboard} text={id} />
+ 
  {#if !disabled}
+ 
    <Clipboard bind:this={clipboard} text={id} />
+ 
  {/if}

</div>
modified src/views/projects/Header/ShareButton.svelte
@@ -9,16 +9,17 @@
  import { formatPublicExplorer } from "@app/lib/utils";

  import { queryProject } from "@app/lib/projects";
- 
  import Clipboard from "@app/components/Clipboard.svelte";

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

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

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

  import IconButton from "@app/components/IconButton.svelte";
+ 
  import CopyableId from "@app/components/CopyableId.svelte";



  let usedFallbackSeed = false;



  let publicExplorer: string;

  let seedRoutes: ProjectRoute[] = [];
+ 
  let loading = true;



  onMount(async () => {

    const profile = await api.profile.getProfile().catch(() => undefined);
@@ -50,12 +51,13 @@
        },

      });

    }
+ 
    loading = false;

  });

</script>



<style>

  .share {
- 
    width: 22rem;
+ 
    min-width: 16rem;

    font-size: var(--font-size-small);

  }

  .seed-list {
@@ -92,7 +94,7 @@
    padding-top: 1rem;

    margin-top: 1rem;

  }
- 
  .notFound {
+ 
  .not-available {

    color: var(--color-foreground-dim);

  }

</style>
@@ -101,49 +103,60 @@
  <div class="txt-bold" style:padding-bottom="0.5rem">

    You're on your local node

  </div>
- 
  <div>
- 
    Copy a link to this page on a public seed node, accessible by everyone.
- 
  </div>
+ 
  <div>Copy a link to this project on one of your preferred seed nodes.</div>

  <ul class="seed-list">
+ 
    {#if loading}
+ 
      <div style:height="6.5rem">
+ 
        <Loading small />
+ 
      </div>
+ 
    {/if}

    {#each seedRoutes as seed}

      {#await queryProject(seed.node, seed.project)}

        <li class="seed-item">
- 
          <span class="seed txt-bold">
+ 
          <span class="seed not-available">

            <IconSmall name="seedling" />

            <span class="txt-overflow">
- 
              {seed.node.hostname}/{seed.project}
+ 
              {seed.node.hostname}

            </span>

          </span>

          <span style:height="1.5rem">
- 
            <Loading center small noDelay condensed />
+ 
            <Loading small noDelay />

          </span>

        </li>

      {:then state}

        {@const path = routeToPath(seed)}

        <li

          class="seed-item"
- 
          class:notFound={state === "notFound"}
+ 
          class:not-available={state === "notFound"}

          title={state === "notFound"
- 
            ? "Not available on this public seed node"
+ 
            ? "The project is not available on this node"

            : ""}>
- 
          <div class="seed txt-bold">
- 
            <IconSmall name="seedling" />
- 
            <span class="txt-overflow">
- 
              {path.replace("/nodes/", "")}
+ 
          {#if state === "found"}
+ 
            <div class="seed">
+ 
              <CopyableId
+ 
                style="other"
+ 
                id={formatPublicExplorer(
+ 
                  publicExplorer,
+ 
                  seed.node.hostname,
+ 
                  seed.project,
+ 
                  path,
+ 
                )}>
+ 
                <IconSmall name="seedling" />
+ 
                {seed.node.hostname}
+ 
              </CopyableId>
+ 
            </div>
+ 
          {:else}
+ 
            <span class="seed not-available">
+ 
              <IconSmall name="seedling" />
+ 
              <span class="txt-overflow">
+ 
                {seed.node.hostname}
+ 
              </span>

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


          <div style="display: flex; align-items: center;">

            {#if state === "found"}

              <IconButton>
- 
                <Clipboard
- 
                  text={formatPublicExplorer(
- 
                    publicExplorer,
- 
                    seed.node.hostname,
- 
                    seed.project,
- 
                    path,
- 
                  )} />
- 
              </IconButton>
- 
              <IconButton>

                <a

                  href={formatPublicExplorer(

                    publicExplorer,
@@ -157,13 +170,6 @@
                  <IconSmall name="arrow-box-up-right" />

                </a>

              </IconButton>
- 
            {:else}
- 
              <IconButton>
- 
                <IconSmall name="clipboard" />
- 
              </IconButton>
- 
              <IconButton>
- 
                <IconSmall name="arrow-box-up-right" />
- 
              </IconButton>

            {/if}

          </div>

        </li>