Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Improve share and get link interactions
dnlklmn committed 2 years ago
commit 0bb5d04a4eb0666fadca5eb3de9104dcbe08d1a7
parent 4ccd02b19b1e6bd8d4c1f96b162ed5c04dce2ca4
2 files changed +36 -19
modified src/views/projects/Header/ShareButton.svelte
@@ -10,6 +10,7 @@
  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";



  export let preferredSeeds: string[];

  export let publicExplorer: string;
@@ -72,6 +73,7 @@
    gap: 0.5rem;

    width: 100%;

    min-width: 0;
+ 
    margin-right: 0.5rem;

  }



  .help {
@@ -122,21 +124,33 @@
              {path.replace("/nodes/", "")}

            </span>

          </div>
- 
          <div style="display: flex; gap: 0.5rem; align-items: center;">
+ 
          <div style="display: flex; align-items: center;">

            {#if state === "found"}
- 
              <Clipboard
- 
                text={formatPublicExplorer(
- 
                  publicExplorer,
- 
                  seed.node.hostname,
- 
                  seed.project,
- 
                  path,
- 
                )} />
- 
              <a href={path} target="_blank">
- 
                <IconSmall name="arrow-box-up-right" />
- 
              </a>
+ 
              <IconButton>
+ 
                <Clipboard
+ 
                  text={formatPublicExplorer(
+ 
                    publicExplorer,
+ 
                    seed.node.hostname,
+ 
                    seed.project,
+ 
                    path,
+ 
                  )} />
+ 
              </IconButton>
+ 
              <IconButton>
+ 
                <a
+ 
                  href={path}
+ 
                  target="_blank"
+ 
                  style=" width: 1.5rem;
+ 
                height: 1.5rem; display: flex; align-items: center; justify-content: center;">
+ 
                  <IconSmall name="arrow-box-up-right" />
+ 
                </a>
+ 
              </IconButton>

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

            {/if}

          </div>

        </li>
modified src/views/projects/Share.svelte
@@ -15,15 +15,18 @@
  export let baseUrl: BaseUrl;



  const caption = "Link to seed";
- 
  let icon: "link" | "checkmark" = "link";
+ 
  let linkIcon: "link" | "checkmark" = "link";
+ 
  let shareIcon: "share" | "checkmark" = "share";



  const restoreIcon = debounce(() => {
- 
    icon = "link";
+ 
    linkIcon = "link";
+ 
    shareIcon = "share";

  }, 800);



  async function copy(text: string) {

    await toClipboard(text);
- 
    icon = "checkmark";
+ 
    linkIcon = "checkmark";
+ 
    shareIcon = "checkmark";

    restoreIcon();

  }

</script>
@@ -39,7 +42,7 @@
      slot="toggle"

      let:toggle

      on:click={toggle}>
- 
      <IconSmall name={icon} />
+ 
      <IconSmall name={linkIcon} />

      {caption}

    </Button>

    <ShareButton {publicExplorer} {preferredSeeds} slot="popover" />
@@ -52,7 +55,7 @@
      void copy(

        new URL(publicExplorer).origin.concat(window.location.pathname),

      )}>
- 
    <IconSmall name={icon} />
- 
    {caption}
+ 
    <IconSmall name={shareIcon} />
+ 
    {shareIcon === "share" ? "Share" : "Link copied"}

  </Button>

{/if}