diff --git a/packages/client/src/components/overlay/NotificationDisplay.svelte b/packages/client/src/components/overlay/NotificationDisplay.svelte index 6e8be21647..667f706ff2 100644 --- a/packages/client/src/components/overlay/NotificationDisplay.svelte +++ b/packages/client/src/components/overlay/NotificationDisplay.svelte @@ -19,6 +19,8 @@ type={$notificationStore.type} message={$notificationStore.message} icon={$notificationStore.icon} + dismissable={$notificationStore.dismissable} + on:dismiss={notificationStore.actions.dismiss} /> {/key} diff --git a/packages/client/src/components/overlay/PeekScreenDisplay.svelte b/packages/client/src/components/overlay/PeekScreenDisplay.svelte index 7d3531d236..72ea58c194 100644 --- a/packages/client/src/components/overlay/PeekScreenDisplay.svelte +++ b/packages/client/src/components/overlay/PeekScreenDisplay.svelte @@ -25,8 +25,8 @@ } const proxyNotification = event => { - const { message, type, icon } = event.detail - notificationStore.actions.send(message, type, icon) + const { message, type, icon, autoDismiss } = event.detail + notificationStore.actions.send(message, type, icon, autoDismiss) } const proxyStateUpdate = event => { diff --git a/packages/client/src/stores/notification.js b/packages/client/src/stores/notification.js index 64178328c0..e12eccf210 100644 --- a/packages/client/src/stores/notification.js +++ b/packages/client/src/stores/notification.js @@ -19,7 +19,7 @@ const createNotificationStore = () => { setTimeout(() => (block = false), timeout) } - const send = (message, type = "info", icon) => { + const send = (message, type = "info", icon, autoDismiss = true) => { if (block) { return } @@ -32,6 +32,7 @@ const createNotificationStore = () => { message, type, icon, + autoDismiss, }, }) return @@ -42,12 +43,20 @@ const createNotificationStore = () => { type, message, icon, + dismissable: !autoDismiss, delay: get(store) != null, }) clearTimeout(timeout) - timeout = setTimeout(() => { - store.set(null) - }, NOTIFICATION_TIMEOUT) + if (autoDismiss) { + timeout = setTimeout(() => { + store.set(null) + }, NOTIFICATION_TIMEOUT) + } + } + + const dismiss = () => { + clearTimeout(timeout) + store.set(null) } return { @@ -57,8 +66,9 @@ const createNotificationStore = () => { info: msg => send(msg, "info", "Info"), success: msg => send(msg, "success", "CheckmarkCircle"), warning: msg => send(msg, "warning", "Alert"), - error: msg => send(msg, "error", "Alert"), + error: msg => send(msg, "error", "Alert", false), blockNotifications, + dismiss, }, } }