From 5222734ce8b4770e74b35b434c9fa35f935ecb99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 10 Jan 2022 22:03:41 +0100
Subject: [PATCH] [ui] create/add preliminaries

---
 ui/src/App.svelte                      |  3 +
 ui/src/components/DropAdd.svelte       | 76 ++++++++++++++++++++++++++
 ui/src/components/layout/Header.svelte | 21 ++++++-
 3 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/components/DropAdd.svelte

diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 6b47a4d..3260efb 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -6,6 +6,7 @@
   import Home from "./views/Home.svelte";
   import Browse from "./views/Browse.svelte";
   import Search from "./views/Search.svelte";
+  import DropAdd from "./components/DropAdd.svelte";
 
   const history = createHistory(createHashSource());
 
@@ -33,6 +34,8 @@
   <Footer on:resize={setBottomMargin} />
 </Router>
 
+<DropAdd />
+
 <style global lang="scss">
   @use "normalize.css/normalize.css";
   @use "styles/colors-app";
diff --git a/ui/src/components/DropAdd.svelte b/ui/src/components/DropAdd.svelte
new file mode 100644
index 0000000..6895046
--- /dev/null
+++ b/ui/src/components/DropAdd.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+  import Icon from "./utils/Icon.svelte";
+
+  let dragging = false;
+
+  function onDrop(ev: DragEvent) {
+    console.log(ev.dataTransfer);
+    dragging = false;
+  }
+
+  function onDragEnter(ev: DragEvent) {
+    console.log("dragstart!");
+  }
+
+  function onDragOver(ev: DragEvent) {
+    dragging = true;
+  }
+
+  function onDragLeave(ev: DragEvent) {
+    console.log("dragleave!");
+    dragging = false;
+  }
+</script>
+
+<svelte:body
+  on:dragenter|preventDefault={onDragEnter}
+  on:dragover|preventDefault={onDragOver}
+  on:dragleave|preventDefault={onDragLeave}
+  on:drop|preventDefault={onDrop} />
+
+<div class="dropindicator" class:dragging>
+  <div class="content">
+    <div class="icon">
+      <Icon name="current-location" />
+    </div>
+    <p>Drop an URL, an image or a file here!</p>
+  </div>
+</div>
+
+<style>
+  .dropindicator {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.75);
+
+    display: none;
+  }
+
+  .dragging {
+    display: unset;
+  }
+
+  .content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    background: rgba(0, 0, 0, 0.9);
+
+    color: var(--foreground);
+    border: solid 0.25em var(--foreground);
+    border-radius: 0.5em;
+    padding: 1.5em;
+
+    text-align: center;
+    font-size: 32px;
+  }
+
+  .icon {
+    font-size: 128px;
+  }
+</style>
diff --git a/ui/src/components/layout/Header.svelte b/ui/src/components/layout/Header.svelte
index ebbcf5f..7819878 100644
--- a/ui/src/components/layout/Header.svelte
+++ b/ui/src/components/layout/Header.svelte
@@ -29,10 +29,17 @@
     </Link>
   </h1>
   <div class="input">
-    <Input placeholder="Search" value={searchQuery} on:input={onInput}>
+    <Input
+      placeholder="Search or add..."
+      value={searchQuery}
+      on:input={onInput}
+    >
       <Icon name="search" slot="prefix" />
     </Input>
   </div>
+  <button class="add-button">
+    <Icon name="plus-circle" />
+  </button>
 </div>
 
 <style lang="scss">
@@ -73,5 +80,17 @@
       margin-left: 1em;
       flex-grow: 1;
     }
+
+    .add-button {
+      border: 1px solid var(--foreground);
+      border-radius: 4px;
+      background: var(--background-lighter);
+      color: var(--foreground);
+      margin: 0 0.5em;
+      padding: 0.25em 1em;
+      line-height: 1;
+      display: block;
+      cursor: pointer;
+    }
   }
 </style>