dashboard: cancel-X on queued rebuild_queue rows (closes #575)
Backend route POST /api/rebuild-queue/{id}/cancel already exists
(refuses Running / terminal entries with {cancelled: false}). This
adds the operator-facing affordance:
- small circular X button on the right edge of each row whose
state === 'queued'. Running / done / failed rows don't render
it, so the operator never clicks a button that the backend
would refuse.
- uses the same data-async + data-confirm pattern as the
reminder cancel form — global submit handler does POST +
spinner + error toast for free.
- successful cancel flips the row queued -> cancelled via the
live RebuildQueueChanged snapshot, so the button disappears
on the next paint without an explicit refresh.
CSS keeps it quiet by default (muted border, transparent
background) and lights red on hover / focus, matching the
.btn-deny family without claiming a full button-width slot
that would push the row layout around.
This commit is contained in:
parent
71abf2471e
commit
036bf6c3c1
2 changed files with 66 additions and 0 deletions
|
|
@ -830,6 +830,44 @@ code {
|
|||
font-size: 0.8em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* #575: cancel-X for queued rebuild_queue entries. Quiet by default
|
||||
(sits at the far right via margin-left: auto), lights red on hover.
|
||||
Renders only when `state === 'queued'` per renderQueueEntry's
|
||||
guard — Running / terminal rows don't get the affordance. Mirrors
|
||||
the side-panel-close glyph shape (✗) without the full B6N-style
|
||||
`btn-deny` width so it stays unobtrusive in a list row. */
|
||||
.rqe-cancel {
|
||||
margin-left: auto;
|
||||
}
|
||||
.rqe-cancel-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--purple-dim);
|
||||
color: var(--muted);
|
||||
border-radius: 999px;
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
font-size: 0.85em;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.rqe-cancel-btn:hover:not(:disabled),
|
||||
.rqe-cancel-btn:focus-visible {
|
||||
color: var(--red);
|
||||
border-color: var(--red);
|
||||
box-shadow: 0 0 8px -2px var(--red);
|
||||
outline: none;
|
||||
}
|
||||
.rqe-cancel-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.history-note {
|
||||
margin-left: 1.8em;
|
||||
margin-top: 0.2em;
|
||||
|
|
|
|||
Loading…
Reference in a new issue