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/share/ShareStatus.svelte | 50 +++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 5 deletions(-)

(limited to 'assets/src/components/share/ShareStatus.svelte')

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