521a2bb Refactor SeedAddress into separate component — radicle-explorer

Radicle web interface

Refactor SeedAddress into separate component

Sebastian Martinez committed 4 years ago

commit 521a2bbf60986d6f0b416403a45ae52350820a5a
parent 3bced1f4860f5582c937aaba744150f8b4f8afe8

3 files changed +63 -88

added src/SeedID.svelte

@@ -0,0 +1,59 @@

 <script lang="ts">
   import type { Config } from "./config";
   import { formatSeedAddress, formatSeedId, toClipboard } from "./utils";
   export let config: Config;
   export let id: string;
   export let host: string;
   export let port: number;
   let seedCopied = false;
   const copySeed = (seedId: string, seedHost: string) => {
     return () => toClipboard(formatSeedAddress(seedId, seedHost, config)).then(() => {
       seedCopied = true;
       setTimeout(() => {
         seedCopied = false;
       }, 3000);
     });
   };
 </script>
 <style>
   .seed-address {
     display: inline-flex;
     font-size: 1rem;
     color: var(--color-foreground-90);
   }
   .seed-icon {
     width: 1rem;
     margin-right: 0.5rem;
   }
 </style>
 <div class="mobile">
   <button class="tiny faded" disabled={seedCopied} on:click={copySeed(id, host)}>
     {#if seedCopied}
       Copy ✓
     {:else}
       Copy
     {/if}
   </button>
 </div>
 <div class="desktop">
   <div class="seed-address">
     <span class="seed-icon">🌱</span>
     <span><a href="/seeds/{host}" class="link">{formatSeedId(id)}@{host}</a></span>
     <span class="faded">:{port}</span>
   </div>
 </div>
 <div class="desktop">
   <button class="tiny faded" disabled={seedCopied} on:click={copySeed(id, host)}>
     {#if seedCopied}
       Copy ✓
     {:else}
       Copy
     {/if}
   </button>
 </div>

modified src/base/orgs/View.svelte

@@ -17,6 +17,7 @@

   import { Profile, ProfileType } from '@app/profile';
   import Projects from './View/Projects.svelte';
   import Link from '@app/Link.svelte';
   import SeedId from '@app/SeedID.svelte';
   export let addressOrName: string;
   export let config: Config;

@@ -30,16 +31,6 @@

     setNameForm = SetName;
   };
   let seedCopied = false;
   const copySeed = (seedId: string, seedHost: string) => {
     return () => utils.toClipboard(utils.formatSeedAddress(seedId, seedHost, config)).then(() => {
       seedCopied = true;
       setTimeout(() => {
         seedCopied = false;
       }, 3000);
     });
   };
   let transferOwnerForm: typeof SvelteComponent | null = null;
   const transferOwnership = () => {
     transferOwnerForm = TransferOwnership;

@@ -136,15 +127,6 @@

     margin-right: 1rem;
     height: 1.6rem;
   }
   .seed-address {
     display: inline-flex;
     font-size: 1rem;
     color: var(--color-foreground-90);
   }
   .seed-icon {
     width: 1rem;
     margin-right: 0.5rem;
   }
   .members {
     margin-top: 2rem;
     align-items: center;

@@ -267,31 +249,7 @@

           <!-- Seed Address -->
           {#if profile.seedId && profile.seedHost}
             <div class="label">Seed</div>
             <div class="mobile">
               <button class="tiny faded" disabled={seedCopied} on:click={copySeed(profile.seedId, profile.seedHost)}>
                 {#if seedCopied}
                   Copy ✓
                 {:else}
                   Copy
                 {/if}
               </button>
             </div>
             <div class="desktop">
               <div class="seed-address">
                 <span class="seed-icon">🌱</span>
                 <span><a href="/seeds/{profile.seedHost}" class="link">{utils.formatSeedId(profile.seedId)}@{profile.seedHost}</a></span>
                 <span class="faded">:{config.seed.link.port}</span>
               </div>
             </div>
             <div class="desktop">
               <button class="tiny faded" disabled={seedCopied} on:click={copySeed(profile.seedId, profile.seedHost)}>
                 {#if seedCopied}
                   Copy ✓
                 {:else}
                   Copy
                 {/if}
               </button>
             </div>
             <SeedId {config} id={profile.seedId} host={profile.seedHost} port={config.seed.link.port} />
           {/if}
           <!-- Name/Profile -->
           <div class="label">Profile</div>

modified src/base/seeds/View.svelte

@@ -2,23 +2,13 @@

   import type { Config } from "@app/config";
   import { Seed } from "@app/base/seeds/Seed";
   import Widget from "@app/base/projects/Widget.svelte";
   import * as utils from "@app/utils";
   import Loading from "@app/Loading.svelte";
   import SeedId from "@app/SeedID.svelte";
   export let config: Config;
   export let seedAddress: string;
   const seed = new Seed(config, seedAddress);
   let seedCopied = false;
   const copySeed = (seedId: string, seedHost: string) => {
     return () => utils.toClipboard(utils.formatSeedAddress(seedId, seedHost, config)).then(() => {
       seedCopied = true;
       setTimeout(() => {
         seedCopied = false;
       }, 3000);
     });
   };
 </script>
 <style>

@@ -62,9 +52,6 @@

   .projects .project {
     margin-bottom: 1rem;
   }
   .mobile {
     display: none !important;
   }
   .desktop {
     display: block !important;
   }

@@ -76,9 +63,6 @@

     .fields {
       grid-template-columns: 5rem auto;
     }
     .mobile {
       display: block !important;
     }
     .desktop {
       display: none !important;
     }

@@ -110,33 +94,7 @@

       <div class="label">Seed</div>
       {#if info.version === "0.2.0" && seed.host}
         {#await seed.getPeer() then peer}
           <div class="mobile">
             <button class="tiny faded" disabled={seedCopied} on:click={copySeed(peer.id, seed.host)}>
               {#if seedCopied}
                 Copy ✓
               {:else}
                 Copy
               {/if}
             </button>
           </div>
           <div class="seed-address desktop">
             <span class="seed-icon">🌱</span>
             {utils.formatSeedId(peer.id)}@{seed.host}
             <span class="faded">:{seed.config.seed.link.port}</span>
           </div>
           <div class="desktop">
             <button
               class="tiny faded"
               disabled={seedCopied}
               on:click={copySeed(peer.id, seed.host)}
             >
               {#if seedCopied}
                 Copy ✓
               {:else}
                 Copy
               {/if}
             </button>
           </div>
           <SeedId {config} id={peer.id} host={seed.host} port={config.seed.link.port} />
         {/await}
       {:else}
         <div class="seed-address subtle">N/A</div>