apps/photoprism
1
0
Fork 0
mirror of https://github.com/photoprism/photoprism.git synced 2025-09-26 21:01:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

UX: Refactor notification styles in notify.css and notify.vue

Browse Source 
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer
2025-04-14 17:41:05 +02:00
parent 60e41b425b
commit 61ceed0726
2 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/component/notify.vue
View File

@@ -1,18 +1,17 @@
<template>
<teleport to="body">
<div id="p-notify" tabindex="-1">
<div id="notify">
<transition name="fade-transition">
<div
v-if="visible"
:class="'p-notify--' + message.color"
class="v-snackbar v-snackbar--bottom v-snackbar--center p-notify"
class="p-notify v-snackbar"
role="alert"
tabindex="-1"
@click.stop.prevent="showNext"
>
<div class="v-snackbar__wrapper v-snackbar--variant-flat">
<div class="v-snackbar__wrapper">
<span class="v-snackbar__underlay"></span>
<div tabindex="-1" class="v-snackbar__content">
<div class="v-snackbar__content">
<i
v-if="message.icon"
:class="['text-' + message.color, 'mdi-' + message.icon]"
@@ -54,7 +53,7 @@ export default {
defaultColor: "info",
defaultDelay: 2000,
warningDelay: 3000,
errorDelay: 8000,
errorDelay: 6000,
};
},
created() {

16
frontend/src/css/notify.css
View File

@@ -1,6 +1,6 @@
/* Notifications */
#p-notify {
#notify {
position: fixed;
z-index: 2500;
top: auto;
@@ -24,7 +24,7 @@
pointer-events: none;
}
#p-notify .v-snackbar {
#notify .v-snackbar {
margin-left: auto;
margin-right: auto;
width: auto;
@@ -33,7 +33,7 @@
margin-bottom: 24px;
}
#p-notify .v-snackbar .v-snackbar__wrapper {
#notify .v-snackbar .v-snackbar__wrapper {
cursor: pointer;
color: rgba(var(--v-theme-on-surface), 1);
background-color: rgba(var(--v-theme-surface), 0.32);
@@ -44,7 +44,7 @@
border-radius: 9999px;
}
#p-notify .v-snackbar__wrapper .v-snackbar__content {
#notify .v-snackbar__wrapper .v-snackbar__content {
z-index: 2;
display: flex;
gap: 4px;
@@ -58,7 +58,7 @@
margin: 0;
}
#p-notify .v-snackbar__wrapper .v-snackbar__content .p-notify__icon {
#notify .v-snackbar__wrapper .v-snackbar__content .p-notify__icon {
margin: 0;
align-self: center;
font-size: 22px;
@@ -66,7 +66,7 @@
width: 22px;
}
#p-notify .v-snackbar__wrapper .v-snackbar__content .p-notify__text {
#notify .v-snackbar__wrapper .v-snackbar__content .p-notify__text {
flex-grow: 1;
margin: 2px 8px;
padding: 0;
@@ -74,7 +74,7 @@
align-self: center;
}
#p-notify .v-snackbar__wrapper .v-snackbar__content .p-notify__close {
#notify .v-snackbar__wrapper .v-snackbar__content .p-notify__close {
opacity: 0.78;
font-size: 24px;
height: 24px;
@@ -115,7 +115,7 @@
}
@media only screen and (min-width: 600px) {
#p-notify .v-snackbar {
#notify .v-snackbar {
min-width: 280px;
margin-bottom: 16px;
}