Quiet resting cells in tables canvas
This commit is contained in:
@@ -66,6 +66,7 @@ It is intentionally implementation-focused:
|
||||
| 2026-03-21 | P3.3 | Completed | Added rail search, family filters, pinned and recent sections, curated status chips, and keyboard up/down plus Enter handling on top of the new permanent table index rail. |
|
||||
| 2026-03-21 | P3.4 | Completed | Added a sticky context bar with reference-mode tabs, variant and severity selectors, roll-jump state, and active filter chips, then wired those controls into page state and canvas filtering. |
|
||||
| 2026-03-21 | P3.5 | Completed | Reworked the canvas with sticky headers, a sticky roll-band column, row and column emphasis driven by selection and roll-jump state, selected-cell treatment, and a comfortable/dense density toggle. |
|
||||
| 2026-03-21 | P3.6 | Completed | Removed the always-visible cell button stack from resting cells, leaving status-only hints by default and limiting compact edit/curation buttons to the currently selected cell. |
|
||||
|
||||
### Lessons Learned
|
||||
|
||||
@@ -101,6 +102,7 @@ It is intentionally implementation-focused:
|
||||
- Rail keyboard behavior is easiest to maintain when it works from one deduplicated option order, even if the UI shows multiple sections. Keeping one internal option list avoids separate arrow-key state per section.
|
||||
- The context bar controls should own one shared view-state model before the canvas gets more visual treatment. Wiring the filters into the host page now avoids a second refactor when row, column, and cell emphasis land.
|
||||
- Canvas emphasis becomes maintainable once selection, roll-jump, and density are all fed through one explicit state model. That lets the grid respond to context without hiding selection logic inside CSS-only heuristics.
|
||||
- Resting-cell quietness should be enforced structurally, not only visually. Showing actions only for the selected cell prevents future CSS regressions from reintroducing button clutter across the whole grid.
|
||||
|
||||
## Target Outcomes
|
||||
|
||||
@@ -466,7 +468,7 @@ Build the shared interaction infrastructure needed by multiple destinations befo
|
||||
| `P3.3` | Completed | The rail now supports search-as-you-type, family filters, pinned and recent sections, curated status chips, and a deduplicated arrow/Enter keyboard path. |
|
||||
| `P3.4` | Completed | The table surface now has a sticky context bar with mode tabs, variant/severity focus, roll-jump state, and active filter chips wired into host-page view state. |
|
||||
| `P3.5` | Completed | The canvas now supports sticky headers and roll bands, row and column emphasis from selection and roll-jump state, selected-cell treatment, and a comfortable/dense density toggle. |
|
||||
| `P3.6` | Pending | Remove visible resting-state action stacks from non-selected cells. |
|
||||
| `P3.6` | Completed | Resting cells now show only status hints; compact edit/curation buttons appear only for the selected cell. |
|
||||
| `P3.7` | Pending | Add the desktop selection-driven inspector. |
|
||||
| `P3.8` | Pending | Add the mobile bottom-sheet inspector variant. |
|
||||
| `P3.9` | Pending | Move legend/help to an on-demand secondary surface. |
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
if (TryGetCell(rollBand.Label, displayColumn.GroupKey, displayColumn.ColumnKey, out var resolvedCell) && resolvedCell is not null)
|
||||
{
|
||||
var cell = resolvedCell;
|
||||
var isSelectedCell = IsSelectedCell(cell);
|
||||
|
||||
@if (MatchesModeFilter(cell))
|
||||
{
|
||||
@@ -40,6 +41,14 @@
|
||||
<span class="critical-cell-status-chip is-curated">Curated</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="critical-cell-status-chip needs-curation">Needs Curation</span>
|
||||
}
|
||||
|
||||
@if (isSelectedCell)
|
||||
{
|
||||
<div class="critical-cell-selected-actions">
|
||||
@if (!cell.IsCurated)
|
||||
{
|
||||
<button
|
||||
type="button"
|
||||
@@ -47,7 +56,7 @@
|
||||
title="Open the curation preview for this cell."
|
||||
@onclick:stopPropagation="true"
|
||||
@onclick="() => OnOpenCuration.InvokeAsync(cell.ResultId)">
|
||||
Needs Curation
|
||||
Curate
|
||||
</button>
|
||||
}
|
||||
|
||||
@@ -60,6 +69,8 @@
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<CompactCriticalCell
|
||||
Description="@(cell.Description ?? string.Empty)"
|
||||
@@ -317,5 +328,8 @@
|
||||
private Task SelectCell(CriticalTableCellDetail cell) =>
|
||||
OnSelectCell.InvokeAsync(new TablesCellSelection(cell.ResultId, cell.RollBand, cell.ColumnKey, cell.GroupKey));
|
||||
|
||||
private bool IsSelectedCell(CriticalTableCellDetail cell) =>
|
||||
SelectedCell is not null && cell.ResultId == SelectedCell.ResultId;
|
||||
|
||||
private static string BuildColumnSpanStyle(int span) => $"grid-column: span {span};";
|
||||
}
|
||||
|
||||
@@ -1619,6 +1619,13 @@ pre,
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.critical-cell-selected-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.critical-cell-action-button {
|
||||
border: 1px solid rgba(127, 96, 55, 0.18);
|
||||
border-radius: 999px;
|
||||
@@ -1636,7 +1643,7 @@ pre,
|
||||
}
|
||||
|
||||
.critical-cell-action-button.is-edit {
|
||||
margin-left: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.critical-cell-action-button:hover {
|
||||
|
||||
Reference in New Issue
Block a user