feat(ui): readable order card — status as background tint, corner ✕ (#58)
Closes #46 F8-03 — повышаем читаемость карточки приказа: перенос длинного текста, статус в фоне карточки через --color-{success,danger,warning}-subtle, маленький угловой ✕ всегда видимый.
This commit was merged in pull request #58.
This commit is contained in:
@@ -105,6 +105,25 @@ the same row, the overlay reapplies, and re-submitting is
|
||||
idempotent on the engine side (the rename already matches the
|
||||
stored value).
|
||||
|
||||
### Visual encoding on the order tab
|
||||
|
||||
The order tab's row carries a `status-{status}` class that tints the
|
||||
card background through the design-token subtle palette: `applied`
|
||||
reads as `--color-success-subtle`, `invalid` / `rejected` / `conflict`
|
||||
as `--color-danger-subtle`, and `draft` / `valid` / `submitting` as
|
||||
`--color-warning-subtle` (the "not yet acknowledged by the server"
|
||||
group, including the offline mode). The textual status name stays in
|
||||
the DOM as a `.sr-only` node so screen readers and the existing
|
||||
`order-command-status-N` testids still observe it. Card text sits at
|
||||
`0.8rem` — the same scale the calculator tab uses for its body labels
|
||||
— so the order list reads as part of the same sidebar density rather
|
||||
than its own larger surface. Long labels wrap inside the card
|
||||
(`overflow-wrap: anywhere`) instead of being truncated. The per-row
|
||||
delete control is a tiny framed `✕` flush against the card's
|
||||
top-right corner (no offset, sized to fit the corner padding-space)
|
||||
— always visible, never hover-only, and labelled by
|
||||
`game.sidebar.order.command_delete` for assistive tech.
|
||||
|
||||
## Discriminated union shape
|
||||
|
||||
`OrderCommand` is a discriminated union on the `kind` field:
|
||||
|
||||
@@ -17,6 +17,16 @@ export default defineConfig({
|
||||
baseURL: "http://localhost:5173",
|
||||
trace: "retain-on-failure",
|
||||
screenshot: "only-on-failure",
|
||||
// Force `prefers-reduced-motion: reduce` for every spec. The
|
||||
// production UI honours the preference (e.g. report-toc swaps
|
||||
// `scrollIntoView({behavior: "smooth"})` for `"auto"`), so
|
||||
// running the e2e suite in this mode keeps anchor scrolls and
|
||||
// other animations synchronous — which avoids the long-standing
|
||||
// `report-sections › every TOC anchor lands its section in view`
|
||||
// flake where the smooth-scroll for sections near the bottom of
|
||||
// the page failed to settle within Playwright's 5 s viewport
|
||||
// wait under CI load.
|
||||
contextOptions: { reducedMotion: "reduce" },
|
||||
},
|
||||
projects: [
|
||||
{ name: "chromium-desktop", use: { ...devices["Desktop Chrome"] } },
|
||||
|
||||
@@ -7,10 +7,14 @@ button.
|
||||
Phase 14 wires the auto-sync pipeline directly into the draft
|
||||
store: every successful `add` / `remove` / `move` triggers a
|
||||
`submitOrder` call so the server always mirrors the local draft.
|
||||
This view shows the resulting per-command status (`valid`,
|
||||
`submitting`, `applied`, `rejected`) and a small status bar at the
|
||||
bottom that surfaces the latest sync result. The earlier explicit
|
||||
Submit button is gone — there is no separate "send" step anymore.
|
||||
Per-command status (`valid`, `submitting`, `applied`, `rejected`,
|
||||
`conflict`, `invalid`) is conveyed by the card's background tint
|
||||
(`status-{status}` class → `--color-{success,danger,warning}-subtle`),
|
||||
while the textual status name stays in the DOM as an `sr-only`
|
||||
node so screen readers and the existing tests still observe it.
|
||||
A small status bar at the bottom surfaces the latest sync result.
|
||||
The earlier explicit Submit button is gone — there is no separate
|
||||
"send" step anymore.
|
||||
|
||||
Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
|
||||
(Playwright) and via direct store / mocked-client construction
|
||||
@@ -188,7 +192,7 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
|
||||
{#each draft.commands as cmd, index (cmd.id)}
|
||||
{@const status = statusOf(cmd)}
|
||||
<li
|
||||
class="command"
|
||||
class="command status-{status}"
|
||||
data-testid="order-command-{index}"
|
||||
data-command-status={status}
|
||||
>
|
||||
@@ -197,7 +201,7 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
|
||||
{describe(cmd)}
|
||||
</span>
|
||||
<span
|
||||
class="status status-{status}"
|
||||
class="sr-only"
|
||||
data-testid="order-command-status-{index}"
|
||||
>
|
||||
{i18n.t(statusKeyMap[status])}
|
||||
@@ -206,9 +210,11 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
|
||||
type="button"
|
||||
class="delete"
|
||||
data-testid="order-command-delete-{index}"
|
||||
aria-label={i18n.t("game.sidebar.order.command_delete")}
|
||||
title={i18n.t("game.sidebar.order.command_delete")}
|
||||
onclick={() => draft?.remove(cmd.id)}
|
||||
>
|
||||
{i18n.t("game.sidebar.order.command_delete")}
|
||||
<span aria-hidden="true">✕</span>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
@@ -275,53 +281,38 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.command {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: baseline;
|
||||
gap: 0.4rem;
|
||||
padding: 0.3rem 1.1rem 0.3rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.3;
|
||||
background: var(--color-surface-overlay);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.command.status-applied {
|
||||
background: var(--color-success-subtle);
|
||||
}
|
||||
.command.status-invalid,
|
||||
.command.status-rejected,
|
||||
.command.status-conflict {
|
||||
background: var(--color-danger-subtle);
|
||||
}
|
||||
.command.status-draft,
|
||||
.command.status-valid,
|
||||
.command.status-submitting {
|
||||
background: var(--color-warning-subtle);
|
||||
}
|
||||
.index {
|
||||
color: var(--color-text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.label {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.status-applied {
|
||||
color: var(--color-success);
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
.status-rejected {
|
||||
color: var(--color-danger);
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
.status-invalid {
|
||||
color: var(--color-warning);
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
.status-submitting {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.status-conflict {
|
||||
color: var(--color-warning);
|
||||
border-color: var(--color-warning);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.banner {
|
||||
margin: 0 0 0.5rem;
|
||||
@@ -341,16 +332,26 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.delete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
font-size: 0.65rem;
|
||||
line-height: 1;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: 0 3px 0 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.delete:hover {
|
||||
.delete:hover,
|
||||
.delete:focus-visible {
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
@@ -76,6 +76,24 @@ describe("order-tab", () => {
|
||||
expect(ui.getByTestId("order-command-status-0")).toHaveTextContent(
|
||||
"invalid",
|
||||
);
|
||||
// The status is encoded into the card's background via a
|
||||
// `status-*` class, so the visual cue survives even after
|
||||
// the textual badge moved into an `sr-only` node.
|
||||
expect(ui.getByTestId("order-command-0")).toHaveClass("status-invalid");
|
||||
draft.dispose();
|
||||
});
|
||||
|
||||
test("delete button exposes an accessible label and is always present", async () => {
|
||||
const { draft, context } = await makeDraft([
|
||||
{ kind: "placeholder", id: "id-1", label: "first" },
|
||||
]);
|
||||
const ui = render(OrderTab, { context });
|
||||
const button = ui.getByTestId("order-command-delete-0");
|
||||
expect(button).toBeVisible();
|
||||
expect(button).toHaveAttribute(
|
||||
"aria-label",
|
||||
i18n.t("game.sidebar.order.command_delete"),
|
||||
);
|
||||
draft.dispose();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user