add copy2clipboard icon

querwurzel · Dec 17, 2023 · dfb29af · dfb29af
1 parent ef9ae57
commit dfb29af
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 13 deletions.
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
@@ -6,6 +6,7 @@ import {PasteSearchView} from './model/PasteSearchView';
 const apiBaseUrl = () => {
   switch (window.location.host) {
     case 'localhost:3000': // development
+    case 'localhost:4173': // development
       return 'http://localhost:8080';
     default:
       return window.location.origin;

diff --git a/frontend/src/assets/Vectors.tsx b/frontend/src/assets/Vectors.tsx
@@ -33,7 +33,15 @@ export const Key: () => JSX.Element = () => {
   )
 };
 
-export const Copy: () => JSX.Element = () => {
+export const CopyToClipboard: () => JSX.Element = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+      <path d="M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM112 192H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
+    </svg>
+  )
+}
+
+export const Clone: () => JSX.Element = () => {
   return (
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
         <path d="M288 448H64V224h64V160H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64zm-64-96H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64z"/>

diff --git a/frontend/src/components/CreatePaste/CreatePaste.tsx b/frontend/src/components/CreatePaste/CreatePaste.tsx
@@ -2,7 +2,7 @@ import {Component, createSignal, JSX, Show, onMount, onCleanup} from "solid-js";
 import {createStore} from "solid-js/store";
 import {PasteCreateCmd} from "../../api/model/PasteCreateCmd";
 import {encrypt} from "../../crypto/CryptoUtil";
-import {Copy} from '../../assets/Vectors';
+import {CopyToClipboard} from '../../assets/Vectors';
 import styles from "./createPaste.module.css";
 
 export type PasteClone = {
@@ -179,7 +179,7 @@ const CreatePaste: Component<CreatePasteProps> = ({onCreatePaste, initialPaste})
 
       <fieldset>
         <Show when={lastPasteUrl()}>
-          <p class={styles.lastPaste}>{lastPasteUrl()}<Copy/></p>
+          <p class={styles.lastPaste}>{lastPasteUrl()}<CopyToClipboard/></p>
         </Show>
         <input ref={submitInput} type="submit" value="Paste"/>
         <input type="reset" value="Reset"/>

diff --git a/frontend/src/components/ReadPaste/ReadPaste.tsx b/frontend/src/components/ReadPaste/ReadPaste.tsx
@@ -3,7 +3,7 @@ import linkifyElement from 'linkify-element';
 import {PasteView} from '../../api/model/PasteView';
 import {decrypt} from '../../crypto/CryptoUtil';
 import {relativeDiffLabel, toDateString, toDateTimeString} from '../../datetime/DateTimeUtil';
-import {Lock, Unlock, Key, Trash, Copy} from '../../assets/Vectors';
+import {Lock, Unlock, Key, Trash, CopyToClipboard, Clone} from '../../assets/Vectors';
 import styles from './readPaste.module.css';
 
 type ReadPasteProps = {
@@ -57,6 +57,13 @@ const ReadPaste: Component<ReadPasteProps> = ({paste, onClonePaste, onDeletePast
     onClonePaste();
   }
 
+  function onCopyClick(e: Event) {
+    e.preventDefault();
+    navigator.clipboard
+      .writeText(content())
+      .catch(_ => {});
+  }
+
   function onDeleteClick(e: Event) {
     e.preventDefault();
 
@@ -98,8 +105,7 @@ const ReadPaste: Component<ReadPasteProps> = ({paste, onClonePaste, onDeletePast
   }
 
   function content() {
-    const text = clearText() || paste.content;
-    return text.split(/\r?\n|\r|\n/g);
+    return clearText() || paste.content;
   }
 
   return (
@@ -114,15 +120,16 @@ const ReadPaste: Component<ReadPasteProps> = ({paste, onClonePaste, onDeletePast
         {paste.title || 'Untitled'}
       </h2>
 
-      <p>
+      <p class={styles.meta}>
         Created: <time title={toDateTimeString(paste.dateCreated)}>{toDateString(paste.dateCreated)}</time> |
         Expires: <time>{paste.dateOfExpiry ? toDateTimeString(paste.dateOfExpiry) : 'Never'}</time> |
         Size: {paste.sizeInBytes} bytes
         <Show when={paste.views} keyed>
         <br />
         Views: {paste.views} | Last viewed: <time title={toDateTimeString(paste.lastViewed)}>{relativeDiffLabel(paste.lastViewed)}</time>
         </Show>
-        <Show when={paste.isPublic && !paste.isEncrypted} keyed> | <a onClick={onCloneClick} href="#" title="Clone" class={styles.clone}><Copy /></a></Show>
+        <Show when={paste.isPublic && !paste.isEncrypted} keyed> | <a onClick={onCloneClick} href="#" title="Clone"><Clone /></a></Show>
+        <Show when={!paste.isOneTime} keyed> | <a onClick={onCopyClick} href="#" title="Copy" class={styles.clipboard}><CopyToClipboard /></a></Show>
         <Show when={paste.isErasable} keyed> | <a onClick={onDeleteClick} href="#" title="Delete"><Trash /></a></Show>
       </p>
 
@@ -141,9 +148,9 @@ const ReadPaste: Component<ReadPasteProps> = ({paste, onClonePaste, onDeletePast
       </Show>
 
       <pre ref={contentElement}>
-      <Show when={content().length > 1} keyed fallback={<span class={styles.line}>{content()}</span>}>
-      <For each={content()}>{line =>
-        <span class={styles.row}><span class={styles.count}></span><span class={styles.line}>{line}</span></span>
+      <Show when={content().split(/\n/g).length > 1} keyed fallback={<span class={styles.line}>{content()}</span>}>
+      <For each={content().split(/\n/g)}>{line =>
+        <span class={styles.row}><span class={styles.count}></span><span class={styles.line}>{line}<br /></span></span>
       }
       </For>
       </Show>

diff --git a/frontend/src/components/ReadPaste/readPaste.module.css b/frontend/src/components/ReadPaste/readPaste.module.css
@@ -50,8 +50,16 @@
   word-break: break-all;
 }
 
-.read .clone {
-  font-size: 1.5rem;
+.read .meta {
+  line-height: 1.5rem;
+}
+
+.read .meta svg:hover {
+    fill: var(--color-link);
+}
+
+.read .meta svg:active {
+    fill: var(--color-text);
 }
 
 .read .onetime {