4ca6605 Make all copy command to clipboard instances consistent — radicle-explorer

Radicle web interface

Make all copy command to clipboard instances consistent

Rūdolfs Ošiņš committed 2 years ago

commit 4ca660504e1dffa0d3624272403e74ab073b7e6c
parent e79685b8a6d2cc9917cc665d6d5a5693bac6469a

3 files changed +44 -57

modified src/components/Clipboard.svelte

@@ -44,9 +44,6 @@

   .clipboard:hover :global(svg) {
     fill: var(--color-foreground);
   }
   .clipboard:active :global(svg) {
     fill: var(--color-foreground-6);
   }
   .clipboard:hover {
     border-radius: var(--border-radius);
   }

modified src/components/Command.svelte

@@ -2,6 +2,7 @@

   import Clipboard from "@app/components/Clipboard.svelte";
   export let command: string;
   export let color: "caution" | "foreground" = "foreground";
 </script>
 <style>

@@ -11,17 +12,53 @@

   .cmd {
     background-color: var(--color-foreground-3);
     border-radius: var(--border-radius-small);
     display: inline-block;
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-small);
     margin-top: 0.5rem;
     overflow: hidden;
     padding: 2px 0.5rem;
     display: inline;
     position: relative;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
   .clipboard {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     background-image: linear-gradient(
       -90deg,
       var(--color-foreground-2),
       var(--color-foreground-2),
       transparent
     );
     position: absolute;
     right: 0;
     top: 0;
     visibility: hidden;
     width: 3rem;
     height: 100%;
   }
   .cmd:hover .clipboard {
     visibility: visible;
   }
   .caution {
     background-color: var(--color-caution-3);
     color: var(--color-caution-6);
   }
   .caution .clipboard {
     background: linear-gradient(var(--color-caution-3), var(--color-caution-3)),
       linear-gradient(var(--color-background), var(--color-background));
     -webkit-mask: linear-gradient(90deg, transparent 0%, #fff 50%);
     mask: linear-gradient(90deg, transparent 0%, #fff 50%);
   }
 </style>
 <div class="wrapper">
   <div class="cmd">{command}</div>
   <Clipboard text={command} small />
   <div class="cmd" class:caution={color === "caution"}>
     {command}
     <div class="clipboard">
       <Clipboard text={command} small />
     </div>
   </div>
 </div>

modified src/views/projects/CloneButton.svelte

@@ -1,11 +1,10 @@

 <script lang="ts">
   import type { BaseUrl } from "@httpd-client";
   import { closeFocused } from "@app/components/Floating.svelte";
   import { parseRepositoryId } from "@app/lib/utils";
   import { config } from "@app/lib/config";
   import Clipboard from "@app/components/Clipboard.svelte";
   import Command from "@app/components/Command.svelte";
   import Floating from "@app/components/Floating.svelte";
   export let baseUrl: BaseUrl;

@@ -61,54 +60,13 @@

     font-size: var(--font-size-tiny);
     padding: 0.5rem 0.5rem 0 0.25rem;
   }
   .clone-url-wrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
   .clone-url {
     border-radius: var(--border-radius-small);
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-tiny);
     height: 2rem;
     overflow: hidden;
     padding: 0.5rem;
     text-overflow: ellipsis;
     white-space: nowrap;
     line-height: 1.4;
     color: var(--color-caution-6);
     background: linear-gradient(var(--color-caution-3), var(--color-caution-3)),
       linear-gradient(var(--color-background), var(--color-background));
   }
   .clipboard {
     position: absolute;
     right: 0;
     color: var(--color-caution-6);
     background: linear-gradient(var(--color-caution-3), var(--color-caution-3)),
       linear-gradient(var(--color-background), var(--color-background));
     visibility: hidden;
     width: 4rem;
     height: 2rem;
     text-align: right;
     -webkit-mask: linear-gradient(90deg, transparent 0%, #fff 50%);
     mask: linear-gradient(90deg, transparent 0%, #fff 50%);
     border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
   }
   .clone-url-wrapper:hover .clipboard {
     visibility: visible;
   }
 </style>
 <Floating>
   <div slot="toggle" class="clone-button">Clone</div>
   <svelte:fragment slot="modal">
     <div class="dropdown">
       <div class="clone-url-wrapper">
         <div class="clone-url" id="rad-clone-url">{radCloneUrl}</div>
         <span class="clipboard">
           <Clipboard text={radCloneUrl} on:copied={closeFocused} />
         </span>
       </div>
       <Command color="caution" command={radCloneUrl} />
       <label for="rad-clone-url">
         Use the <a
           target="_blank"

@@ -120,12 +78,7 @@

         to clone this project.
       </label>
       <br />
       <div class="clone-url-wrapper">
         <div class="clone-url" id="git-clone-url">{gitCloneUrl}</div>
         <span class="clipboard">
           <Clipboard text={gitCloneUrl} on:copied={closeFocused} />
         </span>
       </div>
       <Command color="caution" command={gitCloneUrl} />
       <label for="git-clone-url">
         Use Git to clone this repository from the URL above.
       </label>