colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: amélioration du système de notifications

Browse Source 
- Correction de l'affichage du texte dans le toast (suppression de w-0/truncate)
- Déplacement des toasts en bas à gauche avec animation slide depuis la gauche
- Inversion de l'ordre des éléments : bouton fermeture > texte > icône > bande couleur
- Fix timing : ChapterScrapingStarted synchrone pour notif "démarrage" avant le scraping
- Ajout make notify-test pour tester les 4 types de notifications

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2026-03-12 18:55:15 +01:00
parent 41ca08f20e
commit e5c319db79
3 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
assets/vue/app/shared/components/ui/NotificationToast.vue
View File

@@ -1,32 +1,21 @@
<template>
<div class="fixed top-4 right-4 z-50 space-y-2">
<div class="fixed bottom-4 left-4 z-50 flex flex-col-reverse gap-2">
<TransitionGroup
name="notification"
tag="div"
class="space-y-2"
class="flex flex-col-reverse gap-2"
>
<div
v-for="notification in notifications"
:key="notification.id"
:class="[
'max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden',
'max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden',
getNotificationClass(notification.type)
]"
>
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<component :is="getIcon(notification.type)" :class="[
'h-6 w-6',
getIconClass(notification.type)
]" />
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900">
{{ notification.message }}
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<div class="flex-shrink-0 mr-3">
<button
@click="removeNotification(notification.id)"
class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@@ -35,6 +24,17 @@
<XMarkIcon class="h-5 w-5" />
</button>
</div>
<div class="flex-1 pt-0.5 min-w-0">
<p class="text-sm font-medium text-gray-900 break-words">
{{ notification.message }}
</p>
</div>
<div class="flex-shrink-0 ml-3">
<component :is="getIcon(notification.type)" :class="[
'h-6 w-6',
getIconClass(notification.type)
]" />
</div>
</div>
</div>
</div>
@@ -66,10 +66,10 @@ const getIcon = (type) => {
const getNotificationClass = (type) => {
const classes = {
success: 'border-l-4 border-green-400',
error: 'border-l-4 border-red-400',
warning: 'border-l-4 border-yellow-400',
info: 'border-l-4 border-blue-400'
success: 'border-r-4 border-green-400',
error: 'border-r-4 border-red-400',
warning: 'border-r-4 border-yellow-400',
info: 'border-r-4 border-blue-400'
};
return classes[type] || classes.info;
};
@@ -93,11 +93,11 @@ const getIconClass = (type) => {
.notification-enter-from {
opacity: 0;
transform: translateX(100%);
transform: translateX(-100%);
}
.notification-leave-to {
opacity: 0;
transform: translateX(100%);
transform: translateX(-100%);
}
</style>