From 4e2dea375a6b922068ccca153ba251eb231ba6c7 Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Wed, 20 Jul 2022 13:41:18 +0100 Subject: [PATCH] Allow client notifications to be stacked --- .../overlay/NotificationDisplay.svelte | 19 +++++++++++-------- packages/client/src/stores/notification.js | 17 +++++++++++------ 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/overlay/NotificationDisplay.svelte b/packages/client/src/components/overlay/NotificationDisplay.svelte index 667f706ff2..5b95ab1ed5 100644 --- a/packages/client/src/components/overlay/NotificationDisplay.svelte +++ b/packages/client/src/components/overlay/NotificationDisplay.svelte @@ -6,7 +6,7 @@
{#if $notificationStore} - {#key $notificationStore.id} + {#each $notificationStore as { type, icon, message, id, dismissable } (id)}
notificationStore.actions.dismiss(id)} />
- {/key} + {/each} {/if}
@@ -31,6 +31,8 @@ .notifications { position: fixed; top: 20px; + bottom: 40px; + width: 25%; left: 0; right: 0; margin: 0 auto; @@ -39,7 +41,8 @@ display: flex; flex-direction: column; justify-content: flex-start; - align-items: center; + align-items: end; pointer-events: none; + gap: 10px; } diff --git a/packages/client/src/stores/notification.js b/packages/client/src/stores/notification.js index e12eccf210..37a4dcc5d2 100644 --- a/packages/client/src/stores/notification.js +++ b/packages/client/src/stores/notification.js @@ -8,9 +8,10 @@ const createNotificationStore = () => { let timeout let block = false - const store = writable(null, () => { + const store = writable([], () => { return () => { clearTimeout(timeout) + store.set([]) } }) @@ -37,15 +38,17 @@ const createNotificationStore = () => { }) return } - - store.set({ + store.update(state => { + return [...state, + { id: generate(), type, message, icon, dismissable: !autoDismiss, delay: get(store) != null, - }) + } + ]}) clearTimeout(timeout) if (autoDismiss) { timeout = setTimeout(() => { @@ -54,9 +57,11 @@ const createNotificationStore = () => { } } - const dismiss = () => { + const dismiss = id => { clearTimeout(timeout) - store.set(null) + store.update(state => { + return state.filter(n => n.id !== id) + }) } return {