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>
|
||||
{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">
|
||||
<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
|
||||
href={rappel.urlFichier}
|
||||
download={rappel.nomFichier}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={`${rappel.nomFichier} (${rappel.tailleFichier ? (rappel.tailleFichier / 1024).toFixed(1) + ' Ko' : 'Taille inconnue'})`}
|
||||
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">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="m15 9-6 6"/>
|
||||
|
||||
Reference in New Issue
Block a user