mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-20 21:59:04 +02:00
UX: Titre 'À faire' + Source RSS + Tri todos + Notifications internes
1. Titre 'À faire' au lieu de 'Quick Tasks' - Changé public/index.html ligne 126 - Meilleure localisation française 2. Affichage source RSS au lieu du modèle IA - Ajout colonne feed_title à rss_summaries (migration auto) - Backend stocke feed_title lors de la génération - GET /api/rss/summaries retourne feed_title - Frontend affiche 📰 Source + 📅 Date au lieu du modèle - Plus pertinent pour l'utilisateur 3. Tri automatique des todos : actives en premier - renderTodos() trie : actives avant complétées - Si même statut : tri par ID décroissant (récentes en premier) - Sort: a.completed ? 1 : -1 4. Système de notifications internes - Remplacé TOUS les alert() par showNotification() - Types : success, error, warning, info - Animations : slide-in/slide-out depuis la droite - Auto-fermeture après 4 secondes - Bouton de fermeture manuelle - Position : top-right, z-index 300 - Icônes SVG selon le type - Couleurs : vert (success), rouge (error), jaune (warning), bleu (info) Frontend - Notifications: - showNotification(message, type, duration) - closeNotification(notification) - Container fixe en haut à droite - Empilage vertical des notifications - Escape HTML automatique CSS - Nouveaux styles: - .notifications-container (fixed, top-right) - .notification + variations par type - Animations slideInRight / slideOutRight - Border-left colorée selon le type - Responsive et accessible Impact utilisateur: ✓ Plus de popups système alert() invasives ✓ Notifications élégantes et non-bloquantes ✓ Feedback visuel clair avec icônes et couleurs ✓ Source RSS affichée au lieu du modèle IA ✓ Todos actives toujours en haut ✓ Interface 100% en français Files: - public/index.html: Titre + container notifications - public/css/skeleton.css: Styles notifications - public/js/complete-app.js: showNotification() + remplacement 40+ alert() - config/database.js: Migration feed_title - routes/rss.routes.js: Stockage et retour feed_title
This commit is contained in:
5 files changed
+260
-47
No files matched your search
Vendored
+119
@@ -174,3 +174,122 @@
|
||||
font-size: var(--font-size-sm);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Système de notifications */
|
||||
.notifications-container {
|
||||
position: fixed;
|
||||
top: calc(var(--header-height) + 20px);
|
||||
right: 20px;
|
||||
z-index: 300;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-width: 400px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px 20px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
opacity: 0;
|
||||
transform: translateX(400px);
|
||||
animation: slideInRight 0.3s ease-out forwards;
|
||||
pointer-events: auto;
|
||||
min-width: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.notification.closing {
|
||||
animation: slideOutRight 0.3s ease-in forwards;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notification-success {
|
||||
border-left: 4px solid var(--color-success);
|
||||
}
|
||||
|
||||
.notification-success .notification-icon {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.notification-error {
|
||||
border-left: 4px solid var(--color-danger);
|
||||
}
|
||||
|
||||
.notification-error .notification-icon {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.notification-warning {
|
||||
border-left: 4px solid var(--color-warning);
|
||||
}
|
||||
|
||||
.notification-warning .notification-icon {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.notification-info {
|
||||
border-left: 4px solid var(--color-info);
|
||||
}
|
||||
|
||||
.notification-info .notification-icon {
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.notification-close {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 4px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
transition: all var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notification-close:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(400px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(400px);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user