From f05a32d0d5c5f866a4d298d4eeb741e0674a836f Mon Sep 17 00:00:00 2001 From: Youwen Wu Date: Mon, 26 Feb 2024 11:17:00 -0800 Subject: [PATCH] style: make notifications larger --- client/src/lib/Notifications/notifications.ts | 122 +++++++++--------- 1 file changed, 61 insertions(+), 61 deletions(-) diff --git a/client/src/lib/Notifications/notifications.ts b/client/src/lib/Notifications/notifications.ts index 9263dc1..097c2bb 100644 --- a/client/src/lib/Notifications/notifications.ts +++ b/client/src/lib/Notifications/notifications.ts @@ -1,147 +1,147 @@ -import { toast } from "svelte-french-toast"; -import type { ToastOptions } from "svelte-french-toast"; -import InfoIcon from "./InfoIcon.svelte"; -import { Howl } from "howler"; -import WarnIcon from "./WarnIcon.svelte"; +import { toast } from 'svelte-french-toast' +import type { ToastOptions } from 'svelte-french-toast' +import InfoIcon from './InfoIcon.svelte' +import { Howl } from 'howler' +import WarnIcon from './WarnIcon.svelte' interface NotificationOptions extends ToastOptions { - withAudio?: boolean; - src?: string; - onComplete?: () => void; + withAudio?: boolean + src?: string + onComplete?: () => void } // get colors from https://tailwindcss.com/docs/customizing-colors export class Notifications { - private static readonly defaultDuration = 3000; + private static readonly defaultDuration = 3000 public static success(message: string, options?: NotificationOptions) { if (options?.withAudio && !options.src) - throw new Error("No audio source provided"); + throw new Error('No audio source provided') const onComplete = () => { - if (options?.onComplete) options.onComplete(); - }; + if (options?.onComplete) options.onComplete() + } const sendToast = (duration: number) => { toast.success(message, { style: - "padding: 25px; font-size: 1.5rem; background-color: #15803d; color: #fafafa; gap: 0.5rem; user-select: none;", + 'padding: 25px; font-size: 1.5rem; background-color: #15803d; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw; margin-top: 30px;', duration, ...options, - }); - }; + }) + } if (options?.withAudio && options?.src) { - let sound: Howl; + let sound: Howl sound = new Howl({ src: [options.src], preload: true, autoplay: true, onload: () => { - let duration = sound.duration() * 1000; - sendToast(duration); - setTimeout(onComplete, duration); + let duration = sound.duration() * 1000 + sendToast(duration) + setTimeout(onComplete, duration) }, - }); + }) } else { - sendToast(this.defaultDuration); - setTimeout(onComplete, this.defaultDuration); + sendToast(this.defaultDuration) + setTimeout(onComplete, this.defaultDuration) } } public static error(message: string, options?: NotificationOptions) { if (options?.withAudio && !options.src) - throw new Error("No audio source provided"); + throw new Error('No audio source provided') const onComplete = () => { - if (options?.onComplete) options.onComplete(); - }; + if (options?.onComplete) options.onComplete() + } const sendToast = (duration: number) => { toast.error(message, { style: - "padding: 25px; font-size: 1.5rem; background-color: #dc2626; color: #fafafa; gap: 0.5rem; user-select: none;", + 'padding: 25px; width-200px; font-size: 1.5rem; background-color: #dc2626; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw; margin-top: 30px;', duration, ...options, - }); - }; + }) + } if (options?.withAudio && options?.src) { - let sound: Howl; + let sound: Howl sound = new Howl({ src: [options.src], preload: true, autoplay: true, onload: () => { - let duration = sound.duration() * 1000; - sendToast(duration); - setTimeout(onComplete, duration); + let duration = sound.duration() * 1000 + sendToast(duration) + setTimeout(onComplete, duration) }, - }); + }) } else { - sendToast(this.defaultDuration); - setTimeout(onComplete, this.defaultDuration); + sendToast(this.defaultDuration) + setTimeout(onComplete, this.defaultDuration) } } public static info(message: string, options?: NotificationOptions) { const onComplete = () => { - if (options?.onComplete) options.onComplete(); - }; + if (options?.onComplete) options.onComplete() + } const sendToast = (duration: number) => { toast(message, { style: - "padding: 25px; font-size: 1.5rem; gap: 0.5rem; user-select: none;", + 'padding: 25px; font-size: 1.5rem; gap: 0.5rem; user-select: none; max-width-600px; max-width: 70vw; margin-top: 30px;', icon: InfoIcon, duration, ...options, - }); - }; + }) + } if (options?.withAudio && options?.src) { - let sound: Howl; + let sound: Howl sound = new Howl({ src: [options.src], preload: true, autoplay: true, onload: () => { - let duration = sound.duration() * 1000; - sendToast(duration); - setTimeout(onComplete, duration); + let duration = sound.duration() * 1000 + sendToast(duration) + setTimeout(onComplete, duration) }, - }); + }) } else { - sendToast(this.defaultDuration); - setTimeout(onComplete, this.defaultDuration); + sendToast(this.defaultDuration) + setTimeout(onComplete, this.defaultDuration) } } public static warn(message: string, options?: NotificationOptions) { const onComplete = () => { - if (options?.onComplete) options.onComplete(); - }; + if (options?.onComplete) options.onComplete() + } const sendToast = (duration: number) => { toast(message, { style: - "padding: 25px; font-size: 1.5rem; background-color: #f59e0b; color: #fafafa; gap: 0.5rem; user-select: none;", + 'padding: 25px; font-size: 1.5rem; background-color: #f59e0b; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw; margin-top: 30px;', icon: WarnIcon, duration, ...options, - }); - }; + }) + } if (options?.withAudio && options?.src) { - let sound: Howl; + let sound: Howl sound = new Howl({ src: [options.src], preload: true, autoplay: true, onload: () => { - let duration = sound.duration() * 1000; - sendToast(duration); - setTimeout(onComplete, duration); + let duration = sound.duration() * 1000 + sendToast(duration) + setTimeout(onComplete, duration) }, - }); + }) } else { - sendToast(this.defaultDuration); - setTimeout(onComplete, this.defaultDuration); + sendToast(this.defaultDuration) + setTimeout(onComplete, this.defaultDuration) } } public static playAudio(src: string, onComplete: () => void = () => {}) { @@ -150,8 +150,8 @@ export class Notifications { preload: true, autoplay: true, onload: () => { - setTimeout(onComplete, 1000 * sound.duration()); + setTimeout(onComplete, 1000 * sound.duration()) }, - }); + }) } }