From 4c30ede61b1cf1fe15ef72f7399f88ce72f863a8 Mon Sep 17 00:00:00 2001
From: Mel <einebeere@gmail.com>
Date: Sat, 19 Feb 2022 22:48:49 +0100
Subject: Text or Files sharing selector

---
 .../components/share/selector/DataSelector.svelte  | 62 ++++++++++++++++++++++
 .../share/selector/DataTypePicker.svelte           | 47 ++++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 assets/src/components/share/selector/DataSelector.svelte
 create mode 100644 assets/src/components/share/selector/DataTypePicker.svelte

(limited to 'assets/src/components/share/selector')

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>
-- 
cgit 1.4.1