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

---
 assets/src/components/share/DataSelector.svelte    | 47 ----------------
 assets/src/components/share/ShareStatus.svelte     |  2 +-
 .../components/share/selector/DataSelector.svelte  | 62 ++++++++++++++++++++++
 .../share/selector/DataTypePicker.svelte           | 47 ++++++++++++++++
 assets/src/models/data_type.ts                     |  4 ++
 5 files changed, 114 insertions(+), 48 deletions(-)
 delete mode 100644 assets/src/components/share/DataSelector.svelte
 create mode 100644 assets/src/components/share/selector/DataSelector.svelte
 create mode 100644 assets/src/components/share/selector/DataTypePicker.svelte
 create mode 100644 assets/src/models/data_type.ts

(limited to 'assets')

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>
diff --git a/assets/src/models/data_type.ts b/assets/src/models/data_type.ts
new file mode 100644
index 0000000..fdc5340
--- /dev/null
+++ b/assets/src/models/data_type.ts
@@ -0,0 +1,4 @@
+export enum DataType {
+    TEXT,
+    FILES,
+}
-- 
cgit 1.4.1