Listes et contenu

Liste de tâches

stableClasses hb-list hb-list-row hb-list-row--done hb-list-row--comment hb-list-row--ghost hb-list-row--empty hb-list-handle hb-list-check hb-list-icon hb-list-body hb-list-title hb-list-desc hb-list-meta hb-list-add hb-list-side hb-list-side--comment hb-list-date hb-list-date--today hb-list-date--late hb-list-actionsVuetify 2 la date et les personnes s'ouvrent dans un v-menu (v-date-picker, v-list de cases) ; le déplacement par vuedraggable, voir Glisser-déposer

Anatomie d'une ligne

Grille : poignée 20 px · case 22 px · contenu · colonne droite à largeurs fixes (date 112 px · personnes 104 px · actions 64 px), pour que tout s'aligne d'une ligne à l'autre. Au repos une ligne ne montre que du texte ; le survol révèle la poignée, le lien « Description » et les actions ; le clic sur un texte l'édite (texte éditable).

Faite le 06/11/2026 à 09:12

Code

<div class="hb-list">
  <div class="hb-list-row hb-list-row--done">
    <button class="hb-list-handle" aria-label="Déplacer"><i class="material-icons">drag_indicator</i></button>
    <input type="checkbox" class="hb-check hb-list-check" checked aria-label="Faite">
    <div class="hb-list-body"><input class="hb-inline hb-inline-title" value="Relever les températures des vitrines" aria-label="Titre"><span class="hb-list-desc">Faite le 06/11/2026 à 09:12</span></div>
    <div class="hb-list-side"><button class="hb-list-date"><i class="material-icons">event</i>jeu. 6 nov.</button><button class="hb-avatar-stack" aria-label="A. Nguyen"><span class="hb-avatar">AN</span></button><div class="hb-list-actions"><button class="hb-btn hb-btn-icon" aria-label="Dupliquer"><i class="material-icons">content_copy</i></button><button class="hb-btn hb-btn-icon hb-btn-icon-danger" aria-label="Supprimer"><i class="material-icons">delete</i></button></div></div>
  </div>
  <div class="hb-list-row">
    <button class="hb-list-handle" aria-label="Déplacer"><i class="material-icons">drag_indicator</i></button>
    <input type="checkbox" class="hb-check hb-list-check" aria-label="Faite">
    <div class="hb-list-body"><input class="hb-inline hb-inline-title" value="Vérifier les DLC du libre-service" aria-label="Titre"><textarea class="hb-inline hb-inline-desc" rows="1" aria-label="Description">Retirer les produits à J-1 et noter les retraits sur la fiche pertes.</textarea></div>
    <div class="hb-list-side"><button class="hb-list-date hb-list-date--late"><i class="material-icons">event</i>mer. 5 nov.</button><button class="hb-avatar-stack" aria-label="D. Martin, B. Simon et 1 autre"><span class="hb-avatar" style="background:var(--chart-2)">DM</span><span class="hb-avatar" style="background:var(--chart-3)">BS</span><span class="hb-avatar-more">+1</span></button><div class="hb-list-actions"><button class="hb-btn hb-btn-icon" aria-label="Dupliquer"><i class="material-icons">content_copy</i></button><button class="hb-btn hb-btn-icon hb-btn-icon-danger" aria-label="Supprimer"><i class="material-icons">delete</i></button></div></div>
  </div>
  <div class="hb-list-row hb-list-row--comment">
    <button class="hb-list-handle" aria-label="Déplacer"><i class="material-icons">drag_indicator</i></button>
    <span class="hb-list-icon"><i class="material-icons">chat_bubble_outline</i></span>
    <div class="hb-list-body"><input class="hb-inline hb-inline-title" value="Livraison Pomona attendue à 11 h, prévoir de la place en chambre froide." aria-label="Commentaire"></div>
    <div class="hb-list-side hb-list-side--comment"><div class="hb-list-actions"><button class="hb-btn hb-btn-icon" aria-label="Dupliquer"><i class="material-icons">content_copy</i></button><button class="hb-btn hb-btn-icon hb-btn-icon-danger" aria-label="Supprimer"><i class="material-icons">delete</i></button></div></div>
  </div>
  <div class="hb-list-row">
    <button class="hb-list-handle" aria-label="Déplacer"><i class="material-icons">drag_indicator</i></button>
    <input type="checkbox" class="hb-check hb-list-check" aria-label="Faite">
    <div class="hb-list-body"><input class="hb-inline hb-inline-title" value="Préparer le plateau de la semaine" aria-label="Titre"><button class="hb-list-add"><i class="material-icons">add</i>Description</button></div>
    <div class="hb-list-side"><button class="hb-list-date hb-list-date--today"><i class="material-icons">event</i>Aujourd'hui</button><button class="hb-avatar-stack" aria-label="Assigner"><span class="hb-avatar-add"><i class="material-icons">person_add</i></span></button><div class="hb-list-actions"><button class="hb-btn hb-btn-icon" aria-label="Dupliquer"><i class="material-icons">content_copy</i></button><button class="hb-btn hb-btn-icon hb-btn-icon-danger" aria-label="Supprimer"><i class="material-icons">delete</i></button></div></div>
  </div>
</div>

Variantes de ligne

Classe	Rendu
`hb-list-row--done`	titre barré en gris, « Faite le … » en description
`hb-list-row--comment`	fond en retrait, barre accent à gauche, icône bulle à la place de la case, pas de date ni de personnes
`hb-list-row--ghost`	emplacement d'arrivée pendant un glisser-déposer
`hb-list-row--new`	ligne qui vient d'être ajoutée : éclat métier qui s'éteint en 1,6 s, voir Mouvement
`hb-list-row--empty`	état vide : ligne squelette qui garde la forme
`hb-list-date--today`, `--late`	date du jour en couleur métier, dépassée en rouge

Comportement

La poignée déplace (glisser-déposer, ou Flèche haut / bas au clavier), la case coche, le texte édite, la date et les personnes ouvrent un menu, les actions dupliquent ou suppriment (avec confirmation).
Sur écran tactile (hover: none) et sur téléphone, poignée, lien d'ajout et actions sont toujours visibles ; sur téléphone la colonne droite passe sous le texte.
Les boutons d'ajout (« Ajouter une tâche », « Ajouter un commentaire ») sont juste sous la liste, pas dedans.
Sur tablette en rayon, une liste plus simple : Tâche compacte.