aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Notification
diff options
context:
space:
mode:
authorFuwn <[email protected]>2024-10-09 00:41:20 -0700
committerFuwn <[email protected]>2024-10-09 00:41:43 -0700
commit998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch)
tree50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Notification
parentfeat(graphql): add badgeCount field (diff)
downloaddue.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.tar.xz
due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.zip
chore(prettier): use spaces instead of tabs
Diffstat (limited to 'src/lib/Notification')
-rw-r--r--src/lib/Notification/Notification.svelte166
-rw-r--r--src/lib/Notification/options.ts24
2 files changed, 95 insertions, 95 deletions
diff --git a/src/lib/Notification/Notification.svelte b/src/lib/Notification/Notification.svelte
index 87f51c76..6764f46e 100644
--- a/src/lib/Notification/Notification.svelte
+++ b/src/lib/Notification/Notification.svelte
@@ -1,102 +1,102 @@
<script lang="ts">
- import settings from '$stores/settings';
- import { onMount } from 'svelte';
+ import settings from '$stores/settings';
+ import { onMount } from 'svelte';
- export let notification: { [key: string]: any } = {};
- export let onRemove: () => void = () => {
- return;
- };
- export let removed = false;
+ export let notification: { [key: string]: any } = {};
+ export let onRemove: () => void = () => {
+ return;
+ };
+ export let removed = false;
- onMount(() => setTimeout(remove, notification.duration));
+ onMount(() => setTimeout(remove, notification.duration));
- const remove = () => {
- removed = true;
+ const remove = () => {
+ removed = true;
- setTimeout(onRemove, 150);
- };
+ setTimeout(onRemove, 150);
+ };
</script>
{#if !$settings.displayDisableNotifications}
- <div
- id="notification-container"
- class={removed ? 'fade-out' : 'fade-in'}
- on:click={remove}
- on:keydown={() => {
- return;
- }}
- role="button"
- tabindex="0"
- >
- {#if notification.description}
- <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
- <details
- open
- id="notification"
- on:click|preventDefault={(event) => event.preventDefault()}
- on:keydown={() => {
- return;
- }}
- >
- <summary>{@html notification.heading}</summary>
+ <div
+ id="notification-container"
+ class={removed ? 'fade-out' : 'fade-in'}
+ on:click={remove}
+ on:keydown={() => {
+ return;
+ }}
+ role="button"
+ tabindex="0"
+ >
+ {#if notification.description}
+ <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+ <details
+ open
+ id="notification"
+ on:click|preventDefault={(event) => event.preventDefault()}
+ on:keydown={() => {
+ return;
+ }}
+ >
+ <summary>{@html notification.heading}</summary>
- {@html notification.description}
- </details>
- {:else}
- <div class="card" id="notification">
- {@html notification.heading}
- </div>
- {/if}
- </div>
+ {@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-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);
+ #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%;
- }
+ widows: 100%;
+ }
- .fade-in {
- animation: fadeInAnimation ease 300ms;
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- }
+ .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;
- }
+ .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 fadeInAnimation {
+ 100% {
+ opacity: 1;
+ }
+ 1% {
+ opacity: 0.01;
+ }
+ 0% {
+ opacity: 0;
+ }
+ }
- @keyframes fadeOutAnimation {
- 0% {
- opacity: 1;
- }
- 99% {
- opacity: 0.01;
- }
- 100% {
- opacity: 0;
- }
- }
+ @keyframes fadeOutAnimation {
+ 0% {
+ opacity: 1;
+ }
+ 99% {
+ opacity: 0.01;
+ }
+ 100% {
+ opacity: 0;
+ }
+ }
</style>
diff --git a/src/lib/Notification/options.ts b/src/lib/Notification/options.ts
index a9896540..3ccb20b9 100644
--- a/src/lib/Notification/options.ts
+++ b/src/lib/Notification/options.ts
@@ -1,19 +1,19 @@
type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
export interface Options {
- heading: string | number;
- description: string | number | undefined;
- position: Position;
- duration: number;
- id: string;
+ heading: string | number;
+ description: string | number | undefined;
+ position: Position;
+ duration: number;
+ id: string;
}
export const options = (preferences: { [key: string]: number | string }): Options => {
- return {
- position: (preferences.position || 'top-right') as Position,
- duration: Number(preferences.duration || 3000),
- heading: preferences.heading || 'Notification',
- description: preferences.description || undefined,
- id: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
- };
+ return {
+ position: (preferences.position || 'top-right') as Position,
+ duration: Number(preferences.duration || 3000),
+ heading: preferences.heading || 'Notification',
+ description: preferences.description || undefined,
+ id: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+ };
};