diff options
| -rw-r--r-- | assets/src/components/DataView.svelte | 43 | ||||
| -rw-r--r-- | assets/src/components/icons/ClipboardIcon.svelte | 16 | ||||
| -rw-r--r-- | assets/src/components/request/RequestStatus.svelte | 2 | ||||
| -rw-r--r-- | assets/src/components/share/ShareStatus.svelte | 50 | ||||
| -rw-r--r-- | assets/src/utils/copy.ts | 3 |
5 files changed, 101 insertions, 13 deletions
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> diff --git a/assets/src/utils/copy.ts b/assets/src/utils/copy.ts new file mode 100644 index 0000000..ded2070 --- /dev/null +++ b/assets/src/utils/copy.ts @@ -0,0 +1,3 @@ +export default function (str: string) { + return navigator.clipboard.writeText(str); +} |