diff --git a/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts b/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts index 6c2cf77e49..551f4fd230 100644 --- a/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts +++ b/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts @@ -15,7 +15,8 @@ describe('NotificationCard component', () => { id: 1234, message: 'Notification message', timeout: 1000, - type: NotificationType.Info + type: NotificationType.Info, + action: { type: 'discard' } } }); @@ -29,7 +30,8 @@ describe('NotificationCard component', () => { id: 1234, message: 'Notification message', timeout: 1000, - type: NotificationType.Info + type: NotificationType.Info, + action: { type: 'discard' } } }); diff --git a/web/src/lib/components/shared-components/notification/notification-card.svelte b/web/src/lib/components/shared-components/notification/notification-card.svelte index 289f10f56e..dbff5b9e48 100644 --- a/web/src/lib/components/shared-components/notification/notification-card.svelte +++ b/web/src/lib/components/shared-components/notification/notification-card.svelte @@ -2,6 +2,7 @@ import { fade } from 'svelte/transition'; import CloseCircleOutline from 'svelte-material-icons/CloseCircleOutline.svelte'; import InformationOutline from 'svelte-material-icons/InformationOutline.svelte'; + import WindowClose from 'svelte-material-icons/WindowClose.svelte'; import { ImmichNotification, @@ -51,26 +52,42 @@ let removeNotificationTimeout: NodeJS.Timeout | undefined = undefined; onMount(() => { - removeNotificationTimeout = setTimeout(() => { - notificationController.removeNotificationById(notificationInfo.id); - }, notificationInfo.timeout); - + removeNotificationTimeout = setTimeout(discard, notificationInfo.timeout); return () => clearTimeout(removeNotificationTimeout); }); + + const discard = () => { + notificationController.removeNotificationById(notificationInfo.id); + }; + + const handleClick = () => { + const action = notificationInfo.action; + if (action.type == 'discard') { + discard(); + } else if (action.type == 'link') { + window.open(action.target); + } + };
-
- -

- {notificationInfo.type.toString()} -

+
+
+ +

+ {notificationInfo.type.toString()} +

+
+
-

{notificationInfo.message}

+

{@html notificationInfo.message}

diff --git a/web/src/lib/components/shared-components/notification/notification.ts b/web/src/lib/components/shared-components/notification/notification.ts index 98002ec8e8..8dccdd653e 100644 --- a/web/src/lib/components/shared-components/notification/notification.ts +++ b/web/src/lib/components/shared-components/notification/notification.ts @@ -9,9 +9,15 @@ export class ImmichNotification { id = new Date().getTime(); type!: NotificationType; message!: string; + action!: NotificationAction; timeout = 3000; } +type DiscardAction = { type: 'discard' }; +type NoopAction = { type: 'noop' }; +type LinkAction = { type: 'link'; target: string }; +export type NotificationAction = DiscardAction | NoopAction | LinkAction; + export class ImmichNotificationDto { /** * Notification type @@ -28,7 +34,13 @@ export class ImmichNotificationDto { * Timeout in miliseconds */ timeout?: number; + + /** + * The action to take when the notification is clicked + */ + action?: NotificationAction; } + function createNotificationList() { const notificationList = writable([]); @@ -37,6 +49,7 @@ function createNotificationList() { newNotification.message = notificationInfo.message; newNotification.type = notificationInfo.type; newNotification.timeout = notificationInfo.timeout || 3000; + newNotification.action = notificationInfo.action || { type: 'discard' }; notificationList.update((currentList) => [...currentList, newNotification]); }; diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts index 043ff93197..4da661b090 100644 --- a/web/src/lib/utils/file-uploader.ts +++ b/web/src/lib/utils/file-uploader.ts @@ -44,8 +44,9 @@ export const openFileUploadDialog = (uploadType: UploadType) => { notificationController.show({ type: NotificationType.Error, message: `Cannot upload more than 50 files at a time - you are uploading ${files.length} files. - Please use the CLI tool if you need to upload more than 50 files.`, - timeout: 5000 + Please check out the bulk upload documentation if you need to upload more than 50 files.`, + timeout: 10000, + action: { type: 'link', target: 'https://immich.app/docs/usage/bulk-upload' } }); return;