kanban dashboard: multi-card drag visual feedback

- When dragging a selected card while multiple cards are selected, the
  browser ghost image now shows a 'N cards' badge instead of a single card.
- All selected cards in the original column are dimmed (opacity 0.45 +
  grayscale) during the drag so the user sees the whole set is in-flight.
- Uses React state for the dragged task id; event delegation on the board
  columns container to avoid deep prop threading.
This commit is contained in:
Yi Lok Enoch Lam 2026-05-10 13:21:13 +02:00 committed by Teknium
parent 98c499b235
commit a88f201cd4
2 changed files with 59 additions and 1 deletions

View file

@ -538,6 +538,15 @@
background: color-mix(in srgb, var(--color-ring) 6%, var(--color-card));
}
/* Batch drag source styling cards that are part of the current multi-drag.
The browser ghost image floats; we dim the original DOM nodes so the user
sees the whole set is in-flight. */
.hermes-kanban-card--dragging-source :where(.hermes-kanban-card-content) {
opacity: 0.45;
filter: grayscale(0.6);
transition: opacity 120ms ease, filter 120ms ease;
}
.hermes-kanban-card-check {
width: 0.85rem;
height: 0.85rem;
@ -776,6 +785,22 @@
transition: none;
}
/* ---- Multi-drag ghost ----------------------------------------------- */
.hermes-kanban-drag-ghost {
position: fixed;
left: -9999px;
padding: 0.45rem 0.8rem;
background: var(--color-card);
border: 2px solid var(--color-ring);
border-radius: var(--radius);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-foreground);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
pointer-events: none;
opacity: 0.95;
}
/* ---- Staleness tiers ------------------------------------------------ */