Board cards: the status changed from a pencil menu at the card's corner #845

New issue

Closed

opened 2026-10-10 16:01:20 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-10 16:01:20 +00:00

Owner

Replace the status select on each board card with a Lucide pencil button at the card's top-right, beside the title, opening a dropdown menu of statuses.

What exists today

templates/applications/partials/application_card.html:65-76: a POST form with <select name="status" data-autosubmit aria-label="Status of … at …">, options with icons, built into Basecoat's custom select by app.js (buildSelect, :3651); a <noscript> Move button. A pointer choice saves on change, a keyboard choice on Enter, Tab or blur (#227), explained by #board-move-help (board.html:43-49). The server answers with a redirect (applications/views.py:677-721).
Dragging a card reuses that select: app.js:1011 finds select[name='status'] and :1037-1046 sets it and submits its form.
pencil is a synced icon (assets/icons.txt:61). c-dropdown-menu (templates/cotton/dropdown_menu.html) takes a trigger, align="end", items as <button role="menuitem"> in <form role="none"> — one POST form per status — and works without scripts (native popover). cotton/reminder_actions.html:48-78 is the pattern.

What would change

The card is relative; the pencil sits top-right with the title padded clear of it; the menu has one item per status, the current one marked (menuitemradio with aria-checked), each with its status icon.
The trigger keeps the per-card name (Change the status of … at …).
Dragging submits a status without the select: a hidden form per card, or the drop posts directly.
#board-move-help rewritten for the menu.

Decisions

The application page keeps its select. Recommended: the change is the board's, where space is short.
Without scripts the popover still opens, so the same menu serves; recommended, dropping the <noscript> button.

Tests: the moved by its menu browser tests (tests/e2e/test_board_fold.py:1002, :1290).

Checked against main at 8c3d03570. From the maintainer's improvements list of 2026-10-07.

Replace the status select on each board card with a Lucide `pencil` button at the card's top-right, beside the title, opening a dropdown menu of statuses. ## What exists today - `templates/applications/partials/application_card.html:65-76`: a POST form with `<select name="status" data-autosubmit aria-label="Status of … at …">`, options with icons, built into Basecoat's custom select by `app.js` (`buildSelect`, `:3651`); a `<noscript>` *Move* button. A pointer choice saves on change, a keyboard choice on Enter, Tab or blur (#227), explained by `#board-move-help` (`board.html:43-49`). The server answers with a redirect (`applications/views.py:677-721`). - **Dragging a card reuses that select**: `app.js:1011` finds `select[name='status']` and `:1037-1046` sets it and submits its form. - `pencil` is a synced icon (`assets/icons.txt:61`). `c-dropdown-menu` (`templates/cotton/dropdown_menu.html`) takes a trigger, `align="end"`, items as `<button role="menuitem">` in `<form role="none">` — one POST form per status — and works without scripts (native popover). `cotton/reminder_actions.html:48-78` is the pattern. ## What would change - The card is `relative`; the pencil sits top-right with the title padded clear of it; the menu has one item per status, the current one marked (`menuitemradio` with `aria-checked`), each with its status icon. - The trigger keeps the per-card name (*Change the status of … at …*). - Dragging submits a status without the select: a hidden form per card, or the drop posts directly. - `#board-move-help` rewritten for the menu. ## Decisions - **The application page** keeps its select. Recommended: the change is the board's, where space is short. - **Without scripts** the popover still opens, so the same menu serves; recommended, dropping the `<noscript>` button. Tests: the *moved by its menu* browser tests (`tests/e2e/test_board_fold.py:1002`, `:1290`). Checked against `main` at `8c3d03570`. From the maintainer's improvements list of 2026-10-07.

tiagoagueda added this to the 0.6.0 milestone

2026-10-10 16:01:20 +00:00

tiagoagueda added the

accessibility

enhancement

interface

labels

2026-10-10 16:01:20 +00:00

tiagoagueda self-assigned this

2026-10-10 17:49:59 +00:00

tiagoagueda commented

2026-10-11 10:32:23 +00:00