youwen5/jankboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: make notifications larger

Browse source
This commit is contained in:
Youwen Wu 2024-02-26 11:17:00 -08:00
parent 379795bb0c
commit f05a32d0d5
1 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
client/src/lib/Notifications/notifications.ts
View file

@ -1,147 +1,147 @@
import { toast } from "svelte-french-toast"; import { toast } from 'svelte-french-toast'
import type { ToastOptions } from "svelte-french-toast"; import type { ToastOptions } from 'svelte-french-toast'
import InfoIcon from "./InfoIcon.svelte"; import InfoIcon from './InfoIcon.svelte'
import { Howl } from "howler"; import { Howl } from 'howler'
import WarnIcon from "./WarnIcon.svelte"; import WarnIcon from './WarnIcon.svelte'
interface NotificationOptions extends ToastOptions { interface NotificationOptions extends ToastOptions {
withAudio?: boolean; withAudio?: boolean
src?: string; src?: string
onComplete?: () => void; onComplete?: () => void
} }
// get colors from https://tailwindcss.com/docs/customizing-colors // get colors from https://tailwindcss.com/docs/customizing-colors
export class Notifications { export class Notifications {
private static readonly defaultDuration = 3000; private static readonly defaultDuration = 3000
public static success(message: string, options?: NotificationOptions) { public static success(message: string, options?: NotificationOptions) {
if (options?.withAudio && !options.src) if (options?.withAudio && !options.src)
throw new Error("No audio source provided"); throw new Error('No audio source provided')
const onComplete = () => { const onComplete = () => {
if (options?.onComplete) options.onComplete(); if (options?.onComplete) options.onComplete()
}; }
const sendToast = (duration: number) => { const sendToast = (duration: number) => {
toast.success(message, { toast.success(message, {
style: 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, duration,
...options, ...options,
}); })
}; }
if (options?.withAudio && options?.src) { if (options?.withAudio && options?.src) {
let sound: Howl; let sound: Howl
sound = new Howl({ sound = new Howl({
src: [options.src], src: [options.src],
preload: true, preload: true,
autoplay: true, autoplay: true,
onload: () => { onload: () => {
let duration = sound.duration() * 1000; let duration = sound.duration() * 1000
sendToast(duration); sendToast(duration)
setTimeout(onComplete, duration); setTimeout(onComplete, duration)
}, },
}); })
} else { } else {
sendToast(this.defaultDuration); sendToast(this.defaultDuration)
setTimeout(onComplete, this.defaultDuration); setTimeout(onComplete, this.defaultDuration)
} }
} }
public static error(message: string, options?: NotificationOptions) { public static error(message: string, options?: NotificationOptions) {
if (options?.withAudio && !options.src) if (options?.withAudio && !options.src)
throw new Error("No audio source provided"); throw new Error('No audio source provided')
const onComplete = () => { const onComplete = () => {
if (options?.onComplete) options.onComplete(); if (options?.onComplete) options.onComplete()
}; }
const sendToast = (duration: number) => { const sendToast = (duration: number) => {
toast.error(message, { toast.error(message, {
style: 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, duration,
...options, ...options,
}); })
}; }
if (options?.withAudio && options?.src) { if (options?.withAudio && options?.src) {
let sound: Howl; let sound: Howl
sound = new Howl({ sound = new Howl({
src: [options.src], src: [options.src],
preload: true, preload: true,
autoplay: true, autoplay: true,
onload: () => { onload: () => {
let duration = sound.duration() * 1000; let duration = sound.duration() * 1000
sendToast(duration); sendToast(duration)
setTimeout(onComplete, duration); setTimeout(onComplete, duration)
}, },
}); })
} else { } else {
sendToast(this.defaultDuration); sendToast(this.defaultDuration)
setTimeout(onComplete, this.defaultDuration); setTimeout(onComplete, this.defaultDuration)
} }
} }
public static info(message: string, options?: NotificationOptions) { public static info(message: string, options?: NotificationOptions) {
const onComplete = () => { const onComplete = () => {
if (options?.onComplete) options.onComplete(); if (options?.onComplete) options.onComplete()
}; }
const sendToast = (duration: number) => { const sendToast = (duration: number) => {
toast(message, { toast(message, {
style: 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, icon: InfoIcon,
duration, duration,
...options, ...options,
}); })
}; }
if (options?.withAudio && options?.src) { if (options?.withAudio && options?.src) {
let sound: Howl; let sound: Howl
sound = new Howl({ sound = new Howl({
src: [options.src], src: [options.src],
preload: true, preload: true,
autoplay: true, autoplay: true,
onload: () => { onload: () => {
let duration = sound.duration() * 1000; let duration = sound.duration() * 1000
sendToast(duration); sendToast(duration)
setTimeout(onComplete, duration); setTimeout(onComplete, duration)
}, },
}); })
} else { } else {
sendToast(this.defaultDuration); sendToast(this.defaultDuration)
setTimeout(onComplete, this.defaultDuration); setTimeout(onComplete, this.defaultDuration)
} }
} }
public static warn(message: string, options?: NotificationOptions) { public static warn(message: string, options?: NotificationOptions) {
const onComplete = () => { const onComplete = () => {
if (options?.onComplete) options.onComplete(); if (options?.onComplete) options.onComplete()
}; }
const sendToast = (duration: number) => { const sendToast = (duration: number) => {
toast(message, { toast(message, {
style: 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, icon: WarnIcon,
duration, duration,
...options, ...options,
}); })
}; }
if (options?.withAudio && options?.src) { if (options?.withAudio && options?.src) {
let sound: Howl; let sound: Howl
sound = new Howl({ sound = new Howl({
src: [options.src], src: [options.src],
preload: true, preload: true,
autoplay: true, autoplay: true,
onload: () => { onload: () => {
let duration = sound.duration() * 1000; let duration = sound.duration() * 1000
sendToast(duration); sendToast(duration)
setTimeout(onComplete, duration); setTimeout(onComplete, duration)
}, },
}); })
} else { } else {
sendToast(this.defaultDuration); sendToast(this.defaultDuration)
setTimeout(onComplete, this.defaultDuration); setTimeout(onComplete, this.defaultDuration)
} }
} }
public static playAudio(src: string, onComplete: () => void = () => {}) { public static playAudio(src: string, onComplete: () => void = () => {}) {
@ -150,8 +150,8 @@ export class Notifications {
preload: true, preload: true,
autoplay: true, autoplay: true,
onload: () => { onload: () => {
setTimeout(onComplete, 1000 * sound.duration()); setTimeout(onComplete, 1000 * sound.duration())
}, },
}); })
} }
} }