From 3178bf5a96897981b050036623451da94c92ce17 Mon Sep 17 00:00:00 2001
From: Mel <einebeere@gmail.com>
Date: Tue, 22 Feb 2022 17:41:38 +0100
Subject: Add copy button for data view and URL

---
 assets/src/components/DataView.svelte              | 43 ++++++++++++++++---
 assets/src/components/icons/ClipboardIcon.svelte   | 16 +++++++
 assets/src/components/request/RequestStatus.svelte |  2 +-
 assets/src/components/share/ShareStatus.svelte     | 50 +++++++++++++++++++---
 4 files changed, 98 insertions(+), 13 deletions(-)
 create mode 100644 assets/src/components/icons/ClipboardIcon.svelte

(limited to 'assets/src/components')

diff --git a/assets/src/components/DataView.svelte b/assets/src/components/DataView.svelte
index b1dcfe5..d615d05 100644
--- a/assets/src/components/DataView.svelte
+++ b/assets/src/components/DataView.svelte
@@ -3,15 +3,31 @@
     import EyeOpenedIcon from "./icons/EyeOpenedIcon.svelte";
     import EyeClosedIcon from "./icons/EyeClosedIcon.svelte";
     import { isClientShare } from "../state/constant_state";
+    import { get } from "svelte/store";
+    import copy from "../utils/copy";
+    import { toast, ToastType } from "../state/toast";
+    import ClipboardIcon from "./icons/ClipboardIcon.svelte";
 
-    let hidden = true;
+    export let showCopyButton: boolean = false;
+    const iconColor = isClientShare() ? "white" : "black";
 
-    const eyeColor = isClientShare() ? "white" : "black";
+    let hidden = true;
 
     function toggle() {
         hidden = !hidden;
     }
 
+    function copyText() {
+        const text = get(data).data;
+        copy(text).then(() => {
+            toast({
+                title: "Copied to clipboard!",
+                message: "The shared data is now in your clipboard.",
+                type: ToastType.INFO,
+            });
+        });
+    }
+
     function hideText(text: string): string {
         return text
             .split("")
@@ -29,11 +45,16 @@
 <div class="button-overlay">
     <button on:click={toggle} class="top-icon">
         {#if hidden}
-            <EyeOpenedIcon color={eyeColor} />
+            <EyeOpenedIcon color={iconColor} />
         {:else}
-            <EyeClosedIcon color={eyeColor} />
+            <EyeClosedIcon color={iconColor} />
         {/if}
     </button>
+    {#if showCopyButton}
+        <button on:click={copyText} class="bottom-icon">
+            <ClipboardIcon color={iconColor} />
+        </button>
+    {/if}
     <div class="data-view">
         <div class="textbox">
             {hidden ? hideText($data.data) : $data.data}
@@ -58,7 +79,7 @@
         /* Overloads auto on Chrome and Opera */
         overflow-y: overlay;
 
-        min-height: 40px;
+        min-height: 80px;
         min-width: 300px;
         max-width: 500px;
         width: 100%;
@@ -89,14 +110,22 @@
         background: transparent;
     }
 
-    .top-icon {
+    button {
         border: none;
         background: none;
+        padding: 0;
+    }
 
+    .top-icon {
         position: absolute;
         top: 10px;
         right: 10px;
-        padding: 0;
+    }
+
+    .bottom-icon {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
     }
 
     .textbox {
diff --git a/assets/src/components/icons/ClipboardIcon.svelte b/assets/src/components/icons/ClipboardIcon.svelte
new file mode 100644
index 0000000..11611c5
--- /dev/null
+++ b/assets/src/components/icons/ClipboardIcon.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let color: "white" | "black";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+>
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+        d="M6 4v4h12V4h2.007c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 21.007V4.993C3 4.445 3.445 4 3.993 4H6zm2-2h8v4H8V2z"
+        fill={color}
+    />
+</svg>
diff --git a/assets/src/components/request/RequestStatus.svelte b/assets/src/components/request/RequestStatus.svelte
index 7ba93d9..bc284a6 100644
--- a/assets/src/components/request/RequestStatus.svelte
+++ b/assets/src/components/request/RequestStatus.svelte
@@ -22,7 +22,7 @@
         Transferring...
     {:else}
         <p>Congratulations! You can access the received data below:</p>
-        <DataView />
+        <DataView showCopyButton={true} />
     {/if}
 {:else if $state === RequestStateType.DECLINED}
     <h1>Your request was <b>declined!</b></h1>
diff --git a/assets/src/components/share/ShareStatus.svelte b/assets/src/components/share/ShareStatus.svelte
index da8531e..91bb825 100644
--- a/assets/src/components/share/ShareStatus.svelte
+++ b/assets/src/components/share/ShareStatus.svelte
@@ -2,6 +2,9 @@
     import { getShareState, ShareStateType, Sharing } from "../../state/share";
     import DataSelector from "./selector/DataSelector.svelte";
     import DataView from "../DataView.svelte";
+    import ClipboardIcon from "../icons/ClipboardIcon.svelte";
+    import copy from "../../utils/copy";
+    import { toast, ToastType } from "../../state/toast";
 
     const state = getShareState().type;
 
@@ -9,6 +12,17 @@
         const sharing = getShareState().state as Sharing;
         return sharing.getToken();
     }
+
+    function copyUrl() {
+        const url = `https://rook.to/${token()}`;
+        copy(url).then(() => {
+            toast({
+                title: "Copied to clipboard!",
+                message: url,
+                type: ToastType.INFO,
+            });
+        });
+    }
 </script>
 
 {#if $state == ShareStateType.CHOOSING_DATA}
@@ -22,10 +36,15 @@
     {#if $state === ShareStateType.CONNECTING}
         <p>Connecting to signaling server...</p>
     {:else}
-        <p>
-            Your share is available under: <br />
-            rook.to/<span>{token()}</span>
-        </p>
+        <div>
+            Your share is available under:
+            <div class="url-view">
+                <span>rook.to/<span class="highlight">{token()}</span></span>
+                <button class="copy-button" on:click={copyUrl}>
+                    <ClipboardIcon color="white" />
+                </button>
+            </div>
+        </div>
         <DataView />
     {/if}
 {/if}
@@ -35,7 +54,28 @@
         margin-top: 0;
     }
 
-    span {
+    div {
+        color: #626262;
+    }
+
+    .highlight {
         color: white;
     }
+
+    .url-view {
+        color: #626262;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 30px;
+    }
+
+    .copy-button {
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+        padding-right: 9px;
+    }
 </style>
-- 
cgit 1.4.1