mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2024-11-21 01:21:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Dumb notification changes

Browse Source 
Not done, also missing fade effects, since vue's transition group was acting up
This commit is contained in:
Nassim Jahnke 2022-06-03 18:35:26 +02:00
parent 41e31970ba
commit 0b32d7babb
No known key found for this signature in database
GPG Key ID: 6BE3B555EBC5982B
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend-new/src/components/Notifications.vue
View File

@ -5,15 +5,19 @@ const notificationStore = useNotificationStore();
</script>
<template>
<div class="fixed h-screen flex bottom-0 left-0 right-0 items-end justify-center pointer-events-none z-60">
<div class="fixed h-screen flex bottom-15 right-10 items-end pointer-events-none z-60">
<div>
<div
v-for="(notification, idx) in notificationStore.notifications"
:key="idx"
class="rounded p-4 mb-2 pointer-events-auto"
:style="{ 'background-color': notification.color }"
class="rounded p-4 px-5 mb-2 pointer-events-auto text-right border-2px bg-slate-700"
:style="{ 'border-color': notification.color }"
>
<span class="inline-flex items-center">
<span class="text-lg mr-2">
<IconMdiAlertOutline v-if="notification.color === 'red'" class="text-red-600" />
<IconMdiCheck v-else-if="notification.color === 'green'" class="text-lime-600" />
</span>
{{ notification.message }}
<IconMdiClose v-if="notification.clearable" class="ml-1 cursor-pointer" @click="notificationStore.remove(notification)" />
</span>

7
frontend-new/src/store/notification.ts
View File

@ -12,6 +12,7 @@ function waitTimeout(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
const defaultTimeout = 4000;
export const useNotificationStore = defineStore("notification", () => {
const notifications = ref<Set<Notification>>(new Set<Notification>());
@ -20,15 +21,15 @@ export const useNotificationStore = defineStore("notification", () => {
if (notification.timeout === -1) {
return;
}
await waitTimeout(notification.timeout || 3000);
await waitTimeout(notification.timeout || defaultTimeout);
remove(notification);
}
async function success(message: string, clearable = true, timeout = 3000) {
async function success(message: string, clearable = true, timeout = defaultTimeout) {
await show({ message, color: "green", clearable, timeout });
}
async function error(message: string, clearable = true, timeout = 3000) {
async function error(message: string, clearable = true, timeout = defaultTimeout) {
await show({ message, color: "red", clearable, timeout });
}