blob: f2b6ac4494918a233af8330dbcd9e3e2d79608b5 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<script lang="ts">
import { preventDefault } from 'svelte/legacy';
import settings from '$stores/settings';
import { onMount } from 'svelte';
interface Props {
notification?: { [key: string]: any };
onRemove?: () => void;
removed?: boolean;
}
let { notification = {}, onRemove = () => {
return;
}, removed = $bindable(false) }: Props = $props();
onMount(() => setTimeout(remove, notification.duration));
const remove = () => {
removed = true;
setTimeout(onRemove, 150);
};
</script>
{#if !$settings.displayDisableNotifications}
<div
id="notification-container"
class={removed ? 'fade-out' : 'fade-in'}
onclick={remove}
onkeydown={() => {
return;
}}
role="button"
tabindex="0"
>
{#if notification.description}
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<details
open
id="notification"
onclick={preventDefault((event) => event.preventDefault())}
onkeydown={() => {
return;
}}
>
<summary>{@html notification.heading}</summary>
{@html notification.description}
</details>
{:else}
<div class="card" id="notification">
{@html notification.heading}
</div>
{/if}
</div>
{/if}
<style>
#notification-container {
margin: 1rem 1rem 0 0;
float: right;
cursor: pointer;
}
#notification {
background-color: var(--base001);
box-shadow: rgba(0, 0, 11, 0.2) 0px 7px 29px 0px, 0 0 0 4px var(--base0E);
widows: 100%;
}
.fade-in {
animation: fadeInAnimation ease 300ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.fade-out {
animation: fadeOutAnimation ease 150ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
100% {
opacity: 1;
}
1% {
opacity: 0.01;
}
0% {
opacity: 0;
}
}
@keyframes fadeOutAnimation {
0% {
opacity: 1;
}
99% {
opacity: 0.01;
}
100% {
opacity: 0;
}
}
</style>
|