diff options
| -rw-r--r-- | assets/src/components/DataView.svelte | 60 | ||||
| -rw-r--r-- | assets/src/components/SharePage.svelte | 3 | ||||
| -rw-r--r-- | assets/src/components/share/selector/DataSelector.svelte | 19 |
3 files changed, 65 insertions, 17 deletions
diff --git a/assets/src/components/DataView.svelte b/assets/src/components/DataView.svelte index df6db04..a467319 100644 --- a/assets/src/components/DataView.svelte +++ b/assets/src/components/DataView.svelte @@ -2,21 +2,39 @@ import data from "../state/data"; import EyeOpenedIcon from "./icons/EyeOpenedIcon.svelte"; import EyeClosedIcon from "./icons/EyeClosedIcon.svelte"; + import { isClientShare } from "../state/constant_state"; let hidden = true; + const eyeColor = isClientShare() ? "white" : "black"; + function toggle() { hidden = !hidden; } + + function hideText(text: string): string { + return text + .split("") + .map(c => { + if (c === "\n") { + return "\n"; + } else { + return "●"; + } + }) + .join(""); + } </script> <div class="data-view"> - <input type={hidden ? "password" : "text"} value={$data.data} readonly /> + <div class="textbox"> + {hidden ? hideText($data.data) : $data.data} + </div> <button on:click={toggle} class="icon"> {#if hidden} - <EyeOpenedIcon color="black" /> + <EyeOpenedIcon color={eyeColor} /> {:else} - <EyeClosedIcon color="black" /> + <EyeClosedIcon color={eyeColor} /> {/if} </button> </div> @@ -26,22 +44,46 @@ font-size: 14px; width: 100%; box-sizing: border-box; - padding: 10px 20px; display: flex; - align-items: center; + align-items: flex-start; + + resize: both; + overflow: scroll; + min-height: 40px; + min-width: 300px; + max-width: 500px; + + height: 100px; + + padding: 10px 0 0 14px; + + scrollbar-color: #626262 transparent; } .icon { border: none; background: none; - display: flex; - align-items: center; + + position: sticky; + top: 0; + right: 0; + padding-right: 0; } - input { + .textbox { + font-size: 14px; + font-family: monospace; flex: 1; outline: none; border: none; - padding: 0; + resize: none; + overflow: hidden; + + width: 100%; + + background-color: transparent; + color: inherit; + white-space: pre-wrap; + word-wrap: break-word; } </style> diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte index c0c6f18..9fd0c59 100644 --- a/assets/src/components/SharePage.svelte +++ b/assets/src/components/SharePage.svelte @@ -30,8 +30,7 @@ } .data-view { - background-color: white; - color: black; + border: solid 1px #626262; } </style> </svelte:head> diff --git a/assets/src/components/share/selector/DataSelector.svelte b/assets/src/components/share/selector/DataSelector.svelte index 33d971e..a1c69f9 100644 --- a/assets/src/components/share/selector/DataSelector.svelte +++ b/assets/src/components/share/selector/DataSelector.svelte @@ -25,7 +25,7 @@ {#if type === DataType.TEXT} <form on:submit|preventDefault={submit}> <!-- TODO: Prettier input field --> - <input type="text" bind:value /> + <textarea bind:value /> <button class="start-sharing-button" type="submit"> <ShareIcon color="black" /> Start Sharing @@ -36,13 +36,20 @@ {/if} <style> - input { - border: none; + textarea { font-size: 14px; - color: black; - background-color: white; - padding: 10px 20px; + color: white; + background-color: black; + border: solid 1px #626262; + padding: 10px 14px; box-sizing: border-box; + width: 300px; + max-width: 600px; + } + + textarea:focus { + outline: none; + border: solid 1px white; } .start-sharing-button { |