From 0e1142b3ccb46b555c6222ac1017e528b8a6a2af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 22 Jan 2021 12:31:56 +0100
Subject: [PATCH] adds notification toast capability to the client

---
 .../client/src/components/ClientApp.svelte    |  4 +-
 .../src/components/NotificationDisplay.svelte | 58 +++++++++++++++++++
 packages/standard-components/src/Icon.svelte  |  9 +--
 3 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index b0337bd53f..ece44ab3ee 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -2,6 +2,7 @@
   import { writable } from "svelte/store"
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
+  import NotificationDisplay from './NotificationDisplay.svelte'
   import SDK from "../sdk"
   import { createDataStore, initialise, screenStore, notificationStore } from "../store"
 
@@ -23,4 +24,5 @@
 
 {#if loaded && $screenStore.activeLayout}
   <Component definition={$screenStore.activeLayout.props} />
-{/if}
\ No newline at end of file
+{/if}
+<NotificationDisplay />
\ No newline at end of file
diff --git a/packages/client/src/components/NotificationDisplay.svelte b/packages/client/src/components/NotificationDisplay.svelte
index e69de29bb2..2bae13bfc9 100644
--- a/packages/client/src/components/NotificationDisplay.svelte
+++ b/packages/client/src/components/NotificationDisplay.svelte
@@ -0,0 +1,58 @@
+<script>
+    import { fly } from "svelte/transition"
+    import { getContext } from "svelte"
+    const notifications = getContext("notification")
+  
+    export let themes = {
+      danger: "#E26D69",
+      success: "#84C991",
+      warning: "#f0ad4e",
+      info: "#5bc0de",
+      default: "#aaaaaa",
+    }
+  </script>
+  
+  <div class="notifications">
+    {#each $notifications as notification (notification.id)}
+      <div
+        class="toast"
+        style="background: {themes[notification.type]};"
+        transition:fly={{ y: -30 }}>
+        <div class="content">{notification.message}</div>
+        {#if notification.icon}<i class={notification.icon} />{/if}
+      </div>
+    {/each}
+  </div>
+  
+  <style>
+    .notifications {
+      position: fixed;
+      top: 10px;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      padding: 0;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      pointer-events: none;
+    }
+  
+    .toast {
+      flex: 0 0 auto;
+      margin-bottom: 10px;
+      border-radius: var(--border-radius-s);
+      /* The toasts now support being auto sized, so this static width could be removed */
+      width: 40vw;
+    }
+  
+    .content {
+      padding: 10px;
+      display: block;
+      color: white;
+      font-weight: 500;
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index 8b5db301a6..d175bfd6b0 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -3,9 +3,6 @@
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
-  const notification = getContext("notification")
-
-  $: console.log($notification)
 
   export let icon = ""
   export let size = "fa-lg"
@@ -20,8 +17,4 @@
 </script>
 
 <i use:styleable={styles}
-  class="{icon} {size}" />
-
-  <button on:click={() => {
-    notification.send('Hello!')
-  }}></button>
\ No newline at end of file
+  class="{icon} {size}" />
\ No newline at end of file