diff options
Diffstat (limited to 'assets/src/components/share')
| -rw-r--r-- | assets/src/components/share/ShareStatus.svelte | 50 |
1 files changed, 45 insertions, 5 deletions
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> |