Checkpoint: Amélioration complète de l'affichage des pièces jointes dans la gestion des rappels.
**Modifications apportées :** 1. Badge "Non" en rouge (bg-red-50, text-red-700, border-red-200) pour un meilleur contraste visuel avec le vert 2. Tooltip informatif au survol du badge "Oui" affichant le nom du fichier et sa taille en Ko 3. Badge "Oui" cliquable pour télécharger directement la pièce jointe sans ouvrir la fenêtre de modification 4. Effet hover vert clair (hover:bg-green-100) pour indiquer l'interactivité **Résultat :** Interface plus intuitive et fonctionnelle avec code couleur cohérent (vert = présent/actif, rouge = absent/inactif) et actions directes pour améliorer l'expérience utilisateur.
This commit is contained in:
@@ -442,15 +442,24 @@ export default function AdminRappels() {
|
|||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
{rappel.nomFichier && rappel.urlFichier ? (
|
{rappel.nomFichier && rappel.urlFichier ? (
|
||||||
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 flex items-center gap-1.5 w-fit">
|
<a
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-check-circle">
|
href={rappel.urlFichier}
|
||||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
download={rappel.nomFichier}
|
||||||
<polyline points="22 4 12 14.01 9 11.01"/>
|
target="_blank"
|
||||||
</svg>
|
rel="noopener noreferrer"
|
||||||
Oui
|
title={`${rappel.nomFichier} (${rappel.tailleFichier ? (rappel.tailleFichier / 1024).toFixed(1) + ' Ko' : 'Taille inconnue'})`}
|
||||||
</Badge>
|
className="inline-block"
|
||||||
|
>
|
||||||
|
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 flex items-center gap-1.5 w-fit cursor-pointer hover:bg-green-100 transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-check-circle">
|
||||||
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||||||
|
<polyline points="22 4 12 14.01 9 11.01"/>
|
||||||
|
</svg>
|
||||||
|
Oui
|
||||||
|
</Badge>
|
||||||
|
</a>
|
||||||
) : (
|
) : (
|
||||||
<Badge variant="outline" className="bg-gray-50 text-gray-500 border-gray-200 flex items-center gap-1.5 w-fit">
|
<Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 flex items-center gap-1.5 w-fit">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-x-circle">
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-x-circle">
|
||||||
<circle cx="12" cy="12" r="10"/>
|
<circle cx="12" cy="12" r="10"/>
|
||||||
<path d="m15 9-6 6"/>
|
<path d="m15 9-6 6"/>
|
||||||
|
|||||||
8
todo.md
8
todo.md
@@ -922,3 +922,11 @@
|
|||||||
- [x] Ajouter une icône colorée (vert pour OUI, gris pour NON)
|
- [x] Ajouter une icône colorée (vert pour OUI, gris pour NON)
|
||||||
- [x] Tester l'affichage
|
- [x] Tester l'affichage
|
||||||
- [x] Déployer sur le VPS
|
- [x] Déployer sur le VPS
|
||||||
|
|
||||||
|
## Améliorations supplémentaires affichage pièces jointes
|
||||||
|
|
||||||
|
- [x] Changer la couleur du badge "Non" en rouge (au lieu de gris)
|
||||||
|
- [x] Ajouter un tooltip au survol du badge "Oui" avec nom et taille du fichier
|
||||||
|
- [x] Rendre le badge "Oui" cliquable pour télécharger directement la pièce jointe
|
||||||
|
- [x] Tester les fonctionnalités
|
||||||
|
- [x] Déployer sur le VPS
|
||||||
|
|||||||
Reference in New Issue
Block a user