From 9efb763cd698854a7e47847ac79eaff9ebee954a Mon Sep 17 00:00:00 2001
From: Mel <einebeere@gmail.com>
Date: Sun, 20 Feb 2022 23:55:18 +0100
Subject: Empty requests placeholder

---
 assets/src/components/icons/ZzzIcon.svelte       | 16 ++++++
 assets/src/components/share/EmptyRequests.svelte | 73 ++++++++++++++++++++++++
 assets/src/components/share/RequestList.svelte   |  3 +
 3 files changed, 92 insertions(+)
 create mode 100644 assets/src/components/icons/ZzzIcon.svelte
 create mode 100644 assets/src/components/share/EmptyRequests.svelte

diff --git a/assets/src/components/icons/ZzzIcon.svelte b/assets/src/components/icons/ZzzIcon.svelte
new file mode 100644
index 0000000..858c55d
--- /dev/null
+++ b/assets/src/components/icons/ZzzIcon.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let color: "white" | "black";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+>
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+        d="M11 11v2l-5.327 6H11v2H3v-2l5.326-6H3v-2h8zm10-8v2l-5.327 6H21v2h-8v-2l5.326-6H13V3h8z"
+        fill={color}
+    />
+</svg>
diff --git a/assets/src/components/share/EmptyRequests.svelte b/assets/src/components/share/EmptyRequests.svelte
new file mode 100644
index 0000000..5042ac0
--- /dev/null
+++ b/assets/src/components/share/EmptyRequests.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    import ZzzIcon from "../icons/ZzzIcon.svelte";
+</script>
+
+<ul class="empty-request first">
+    <li class="icon"><ZzzIcon color="white" /></li>
+    <li class="empty-message-title">No requests yet!</li>
+    <li class="empty-message-subtitle">We're looking for them though!</li>
+</ul>
+<ul class="empty-request middle" />
+<ul class="empty-request last" />
+
+<style>
+    .empty-request {
+        padding: 0 20px;
+        line-height: 1.5rem;
+        position: relative;
+        height: 140px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        border: dashed 1px black;
+    }
+
+    ul {
+        list-style: none;
+    }
+
+    .icon {
+        animation: icon-floating 3s ease-in-out infinite;
+    }
+
+    @keyframes icon-floating {
+        0% {
+            transform: translateY(0);
+        }
+
+        50% {
+            transform: translateY(-5px);
+        }
+
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    .empty-message-title {
+        font-size: 18px;
+        color: white;
+    }
+
+    .empty-message-subtitle {
+        font-size: 16px;
+        color: #626262;
+    }
+
+    .first {
+        background: linear-gradient(to bottom, black, black) padding-box,
+            linear-gradient(to bottom, #626262, #626262) border-box;
+    }
+
+    .middle {
+        background: linear-gradient(to bottom, black, black) padding-box,
+            linear-gradient(to bottom, #626262, #6262627f) border-box;
+    }
+
+    .last {
+        background: linear-gradient(to bottom, black, black) padding-box,
+            linear-gradient(to bottom, #6262627f, #62626200) border-box;
+    }
+</style>
diff --git a/assets/src/components/share/RequestList.svelte b/assets/src/components/share/RequestList.svelte
index 1a3b715..c092b7f 100644
--- a/assets/src/components/share/RequestList.svelte
+++ b/assets/src/components/share/RequestList.svelte
@@ -4,6 +4,7 @@
     import type { IncomingRequest } from "../../models/incoming_request";
     import { getShareState, Sharing } from "../../state/share";
     import Request from "./Request.svelte";
+    import EmptyRequests from "./EmptyRequests.svelte";
 
     const sharing = getShareState().state as Sharing;
     const requestMap = sharing.getRequests();
@@ -19,4 +20,6 @@
 
 {#each $requests as request (request.info.token)}
     <Request {request} />
+{:else}
+    <EmptyRequests />
 {/each}
-- 
cgit 1.4.1