d03e4ac Improve clipboard buttons — radicle-explorer

Radicle web interface

Improve clipboard buttons

Alexis Sellier committed 4 years ago

commit d03e4acf38521bf44686a41f8f70d291514d1f29
parent 2deb947bb1f7e8448d49fcbb7a46096b83edf768

3 files changed +63 -9

added src/Clipboard.svelte

@@ -0,0 +1,39 @@

 <script lang="ts">
   import Icon from '@app/Icon.svelte';
   import { toClipboard } from '@app/utils';
   export let text: string;
   export let small = false;
 </script>
 <style>
   .clipboard {
     width: 32px;
     height: 32px;
     cursor: pointer;
     display: inline-flex;
     justify-content: center;
     align-items: center;
   }
   .clipboard.small {
     width: 24px;
     height: 24px;
   }
   .clipboard:hover :global(svg) {
     stroke: var(--color-foreground-90);
   }
   .clipboard:active :global(svg) {
     stroke: var(--color-positive);
   }
   .clipboard:hover {
     border-radius: 1.5rem;
   }
 </style>
 <span class="clipboard" class:small on:click={() => toClipboard(text)}>
   {#if small}
     <Icon name="clipboard-small" width={12} height={12} />
   {:else}
     <Icon name="clipboard" width={16} height={16} />
   {/if}
 </span>

modified src/Icon.svelte

@@ -44,8 +44,9 @@

       data: `<path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path>`
     },
     {
       name: "small-clipboard",
       name: "clipboard-small",
       size: 12,
       offset: { x: -1, y: 1 },
       data: `<svg width="12" height="12" viewBox="0 0 12 12" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><line x1="3.5" y1="1" x2="3.5" y2="10"/><line x1="6.5" y1="1" x2="6.5" y2="4"/><line x1="9.5" y1="5" x2="9.5" y2="10"/><line x1="7" y1="1.5" x2="4" y2="1.5"/><line x1="9.64645" y1="4.35355" x2="6.64644" y2="1.35355"/><line x1="10" y1="9.5" x2="4" y2="9.5"/><line x1="10" y1="4.5" x2="6" y2="4.5"/><line x1="1.5" y1="4" x2="1.5" y2="12"/><line x1="7" y1="11.5" x2="1" y2="11.5"/></svg>`
     },
     {

@@ -67,6 +68,11 @@

   svg.clickable {
     cursor: pointer;
   }
   span {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
 </style>
 {#if svg}

modified src/base/projects/Project.svelte

@@ -3,8 +3,8 @@

   import type { Config } from '@app/config';
   import * as proj from '@app/project';
   import Avatar from '@app/Avatar.svelte';
   import Icon from '@app/Icon.svelte';
   import { formatProfile, formatSeedId, setOpenGraphMetaTag, toClipboard } from '@app/utils';
   import Clipboard from '@app/Clipboard.svelte';
   import { formatProfile, formatSeedId, setOpenGraphMetaTag } from '@app/utils';
   import { browserStore } from '@app/project';
   import Header from '@app/base/projects/Header.svelte';

@@ -53,9 +53,9 @@

     padding: 0 2rem 0 8rem;
   }
   .title {
     display: inline-flex;
     display: flex;
     align-items: center;
     justify-content: center;
     justify-content: left;
     font-size: 2rem;
     margin-bottom: 0.5rem;
   }

@@ -64,6 +64,10 @@

     margin: 0 0.5rem;
     font-weight: normal;
   }
   .title .peer-id {
     color: var(--color-foreground-subtle);
     font-weight: normal;
   }
   .org-avatar {
     display: inline-block;
     width: 2rem;

@@ -74,6 +78,10 @@

     font-size: 0.75rem;
     color: var(--color-foreground-faded);
     overflow-wrap: anywhere;
     display: flex;
     justify-content: left;
     align-items: center;
     gap: 0.125rem;
   }
   .description {
     margin: 1rem 0 1.5rem 0;

@@ -114,13 +122,14 @@

     {/if}
     <Link to={rootPath()}>{project.name}</Link>
     {#if peer}
       <span class="divider" title={peer}>/ {formatSeedId(peer)}
         <Icon name="clipboard" width={16} height={16} class="clickable" on:click={() => toClipboard(peer ?? "")}/>
       <span class="peer-id">
         <span class="divider">/</span><span title={peer}>{formatSeedId(peer)}</span><Clipboard text={peer} />
       </span>
     {/if}
   </div>
   <div class="urn" on:click={() => toClipboard(project.urn)}>{project.urn}
     <Icon name="small-clipboard" width={12} height={12} class="clickable" on:click={() => toClipboard(project.urn)}/>
   <div class="urn">
     <span>{project.urn}</span>
     <Clipboard small text={project.urn} />
   </div>
   <div class="description">{project.description}</div>
 </header>