helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

web(feat): Add support for actions when clicking notifications (#966)

Browse source 
* feat(web): Add button to close notification popups

* feat(web): Add support for actions on notification click

* feat(web): Open CLI docs when clicking asset upload count message

* test(web): Add action field to notification-card tests

* chore(web): Formatting

* feat(web): Allow HTML in notification message

* feat(web): Do not use link element in file upload count notification

* feat(web): Prevent notification discard button from triggering action

* feat(web): Add noop action support for notifications

* chore(web): Remove unused function argument
This commit is contained in:
bo0tzz 2022-11-17 06:11:15 +01:00 • committed by GitHub
parent 70cd313082
commit afae5fd972
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web/src/lib/components/shared-components/notification/notification-card.svelte
View file

@ -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);
}
};
</script>
<div
transition:fade={{ duration: 250 }}
style:background-color={backgroundColor()}
style:border={borderStyle()}
class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4"
class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4 hover:cursor-pointer"
on:click={handleClick}
>
<div class="flex gap-2 place-items-center">
<svelte:component this={icon} color={primaryColor()} size="20" />
<h2 style:color={primaryColor()} class="font-medium" data-testid="title">
{notificationInfo.type.toString()}
</h2>
<div class="flex justify-between">
<div class="flex gap-2 place-items-center">
<svelte:component this={icon} color={primaryColor()} size="20" />
<h2 style:color={primaryColor()} class="font-medium" data-testid="title">
{notificationInfo.type.toString()}
</h2>
</div>
<button on:click|stopPropagation={discard}>
<svelte:component this={WindowClose} size="20" />
</button>
</div>
<p class="text-sm pl-[28px] pr-[16px]" data-testid="message">{notificationInfo.message}</p>
<p class="text-sm pl-[28px] pr-[16px]" data-testid="message">{@html notificationInfo.message}</p>
</div>