diff options
Diffstat (limited to 'assets/src/components/share')
4 files changed, 110 insertions, 48 deletions
diff --git a/assets/src/components/share/DataSelector.svelte b/assets/src/components/share/DataSelector.svelte deleted file mode 100644 index 22a83ba..0000000 --- a/assets/src/components/share/DataSelector.svelte +++ /dev/null @@ -1,47 +0,0 @@ -<script lang="ts"> - import { ChoosingData, getShareState } from "../../state/share"; - import ShareIcon from "../icons/ShareIcon.svelte"; - - let value = ""; - - const submit = () => { - const share = getShareState().state as ChoosingData; - share.submitData(value); - }; - - // TODO: Accept data other than text. -</script> - -<form on:submit|preventDefault={submit}> - <!-- TODO: Prettier input field --> - <input type="text" bind:value /> - <button class="start-sharing-button" type="submit"> - <ShareIcon color="black" /> - Start Sharing - </button> -</form> - -<style> - input { - border: none; - font-size: 14px; - color: black; - background-color: white; - padding: 10px 20px; - box-sizing: border-box; - } - - .start-sharing-button { - border: none; - font-size: 14px; - background-color: white; - color: black; - padding: 10px 14px; - - display: flex; - align-items: center; - gap: 10px; - - margin-top: 20px; - } -</style> diff --git a/assets/src/components/share/ShareStatus.svelte b/assets/src/components/share/ShareStatus.svelte index ba0fea0..cc1993f 100644 --- a/assets/src/components/share/ShareStatus.svelte +++ b/assets/src/components/share/ShareStatus.svelte @@ -1,6 +1,6 @@ <script lang="ts"> import { getShareState, ShareStateType, Sharing } from "../../state/share"; - import DataSelector from "./DataSelector.svelte"; + import DataSelector from "./selector/DataSelector.svelte"; import DataView from "../DataView.svelte"; const state = getShareState().type; diff --git a/assets/src/components/share/selector/DataSelector.svelte b/assets/src/components/share/selector/DataSelector.svelte new file mode 100644 index 0000000..33d971e --- /dev/null +++ b/assets/src/components/share/selector/DataSelector.svelte @@ -0,0 +1,62 @@ +<script lang="ts"> + import { DataType } from "../../../models/data_type"; + import { ChoosingData, getShareState } from "../../../state/share"; + import ShareIcon from "../../icons/ShareIcon.svelte"; + import DataTypePicker from "./DataTypePicker.svelte"; + + let value = ""; + + const submit = () => { + const share = getShareState().state as ChoosingData; + share.submitData(value); + }; + + let type: DataType = DataType.TEXT; + + function setType(t: DataType) { + type = t; + value = ""; + } + + // TODO: Accept data other than text. +</script> + +<DataTypePicker {type} {setType} /> +{#if type === DataType.TEXT} + <form on:submit|preventDefault={submit}> + <!-- TODO: Prettier input field --> + <input type="text" bind:value /> + <button class="start-sharing-button" type="submit"> + <ShareIcon color="black" /> + Start Sharing + </button> + </form> +{:else} + <p>No file sharing yet!</p> +{/if} + +<style> + input { + border: none; + font-size: 14px; + color: black; + background-color: white; + padding: 10px 20px; + box-sizing: border-box; + } + + .start-sharing-button { + border: none; + font-size: 14px; + background-color: white; + color: black; + padding: 10px 14px; + + display: flex; + + align-items: center; + gap: 10px; + + margin-top: 20px; + } +</style> diff --git a/assets/src/components/share/selector/DataTypePicker.svelte b/assets/src/components/share/selector/DataTypePicker.svelte new file mode 100644 index 0000000..204b0c5 --- /dev/null +++ b/assets/src/components/share/selector/DataTypePicker.svelte @@ -0,0 +1,47 @@ +<script lang="ts"> + import { DataType } from "../../../models/data_type"; + + export let type: DataType; + + export let setType: (type: DataType) => void; + + function setText() { + setType(DataType.TEXT); + } + + function setFiles() { + setType(DataType.FILES); + } +</script> + +<div> + <span class:selected={type === DataType.TEXT} on:click={setText}> + Text + </span> + <span class="splitter">|</span> + <span class:selected={type === DataType.FILES} on:click={setFiles}> + Files + </span> +</div> + +<style> + div { + margin-bottom: 20px; + } + + span { + font-size: 16px; + color: #626262; + cursor: pointer; + } + + .splitter { + padding: 0 20px; + cursor: default; + user-select: none; + } + + .selected { + color: white; + } +</style> |