From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Sun, 19 Sep 2021 19:43:11 +0200
Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the
 node app and the NeoRuntime

---
 src_frontend/Components/Notifs/Notif.svelte        | 126 +++++++++++++++++++++
 .../Components/Notifs/NotifsWrapper.svelte         |  33 ++++++
 2 files changed, 159 insertions(+)
 create mode 100644 src_frontend/Components/Notifs/Notif.svelte
 create mode 100644 src_frontend/Components/Notifs/NotifsWrapper.svelte

(limited to 'src_frontend/Components/Notifs')

diff --git a/src_frontend/Components/Notifs/Notif.svelte b/src_frontend/Components/Notifs/Notif.svelte
new file mode 100644
index 0000000..c8ef807
--- /dev/null
+++ b/src_frontend/Components/Notifs/Notif.svelte
@@ -0,0 +1,126 @@
+<script>
+    import { fade, fly } from "svelte/transition";
+    import { removeNotif } from "../../stores/notifs";
+    import { elasticOut } from "svelte/easing";
+    export let nid;
+    export let text = "";
+    export let title;
+    export let type;
+    export let transitionType = "fly";
+    function customTransition(
+      node,
+      { duration = 400, x = 0, y = 0, opacity = 0 }
+    ) {
+      return {
+        duration,
+        css: (t, u) => {
+          // t = 0 to 1, u = (1 - t)
+          if (transitionType === "fly")
+            return `
+            transform: translate(${x * (1 - t)}px,${y * (1 - t)}px); 
+            opacity: ${t};
+          `;
+          else
+            return `
+            opacity: ${t};
+          `;
+        }
+      };
+    }
+  </script>
+  
+  <style>
+    .notification {
+      max-width: 300px;
+      padding: 16px;
+      padding-right: 0;
+      margin: 10px 0;
+      box-shadow: 0 3px 6px rgb(0, 0, 0, 0.3);
+      border-radius: 4px;
+      display: flex;
+      justify-content: space-between;
+      z-index: 1000;
+    }
+    .notification.default {
+      background: rgb(194, 194, 194);
+      color: black;
+      border: 1px solid rgb(150, 150, 150);
+      border-left: 4px solid rgb(150, 150, 150);
+    }
+    .notification.danger {
+      background: rgb(255, 72, 72);
+      border: 1px solid rgb(235, 15, 15);
+      border-left: 4px solid rgb(235, 15, 15);
+      color: white;
+    }
+    .notification.success {
+      background: rgb(23, 153, 12);
+      border: 1px solid rgb(15, 116, 6);
+      border-left: 4px solid rgb(15, 116, 6);
+      color: white;
+    }
+    .notification.warning {
+      background: rgb(255, 144, 69);
+      border: 1px solid rgb(238, 103, 12);
+      border-left: 4px solid rgb(238, 103, 12);
+      color: white;
+    }
+    .notification.info {
+      background: rgb(69, 150, 255);
+      border: 1px solid rgb(8, 97, 214);
+      border-left: 4px solid rgb(8, 97, 214);
+      color: white;
+    }
+    .notification .notification__content {
+      padding-right: 16px;
+    }
+    .notification .notification__content--title {
+      font-weight: 500;
+      font-size: 0.9rem;
+      text-transform: uppercase;
+      margin: 0;
+      margin-bottom: 5px;
+    }
+    .notification .notification__content--text {
+      font-size: 0.9rem;
+      margin: 0;
+      word-wrap: break-word;
+      overflow: hidden;
+    }
+    .notification .notification__close {
+      font-size: 1rem;
+      font-weight: bold;
+      margin: 0;
+      text-align: right;
+      text-transform: uppercase;
+      padding: 0 6px;
+      border-left: 1px solid rgba(0, 0, 0, 0.199);
+      display: flex;
+      align-items: center;
+      /* justify-content: center; */
+    }
+    .notification.info .notification__close,
+    .notification.danger .notification__close,
+    .notification.warning .notification__close,
+    .notification.success .notification__close {
+      color: white;
+      border-left-color: rgba(255, 255, 255, 0.438);
+    }
+    .notification .notification__close span {
+      cursor: pointer;
+    }
+  </style>
+  
+  <div
+    class="notification {type || 'default'}"
+    transition:customTransition={{ x: 50, duration: 200 }}>
+    <div class="notification__content">
+      {#if title}
+        <h1 class="notification__content--title">{title}</h1>
+      {/if}
+      <p class="notification__content--text">{text}</p>
+    </div>
+    <div class="notification__close">
+      <span on:click={() => removeNotif(nid)}>&times;</span>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src_frontend/Components/Notifs/NotifsWrapper.svelte b/src_frontend/Components/Notifs/NotifsWrapper.svelte
new file mode 100644
index 0000000..e68e2e2
--- /dev/null
+++ b/src_frontend/Components/Notifs/NotifsWrapper.svelte
@@ -0,0 +1,33 @@
+<script>
+    import { notifs } from "../../stores/notifs";
+    import Notif from "./Notif.svelte";
+    export let position = "bottom-center";
+    $: transitionType = position === "bottom-center" ? "fade" : "fly";
+</script>
+
+<style>
+.notifications {
+    position: absolute;
+    z-index: 999;
+}
+.bottom-center {
+    bottom: 20px;
+    left: 5vw;
+    width: 90vw;
+}
+.top-right {
+    top: 20px;
+    right: 20px;
+}
+</style>
+
+<div class="notifications {position}">
+{#each $notifs as notification (notification.id)}
+    <Notif
+    nid={notification.id}
+    text={notification.text}
+    title={notification.title}
+    type={notification.type}
+    {transitionType} />
+{/each}
+</div>
\ No newline at end of file
-- 
cgit v1.2.3