Soften default tables reference chrome

This commit is contained in:
2026-03-21 15:16:55 +01:00
parent 6a5d024029
commit 662640e5bd
4 changed files with 13 additions and 3 deletions

View File

@@ -70,6 +70,7 @@ It is intentionally implementation-focused:
| 2026-03-21 | P3.7 | Completed | Added a dedicated desktop inspector column that reads from the shared selected-cell state and keeps the selected result readable beside the grid. | | 2026-03-21 | P3.7 | Completed | Added a dedicated desktop inspector column that reads from the shared selected-cell state and keeps the selected result readable beside the grid. |
| 2026-03-21 | P3.8 | Completed | Reused the inspector body inside a mobile bottom sheet with its own backdrop and close affordance so touch users keep the same selection-driven inspector model as desktop. | | 2026-03-21 | P3.8 | Completed | Reused the inspector body inside a mobile bottom sheet with its own backdrop and close affordance so touch users keep the same selection-driven inspector model as desktop. |
| 2026-03-21 | P3.9 | Completed | Pulled legend/help out of the always-on canvas component and turned it into an explicitly toggled secondary surface controlled from the context bar. | | 2026-03-21 | P3.9 | Completed | Pulled legend/help out of the always-on canvas component and turned it into an explicitly toggled secondary surface controlled from the context bar. |
| 2026-03-21 | P3.10 | Completed | Softened the default `Reference` mode by replacing repeated curation wording in resting cells with subtle status indicators and by simplifying the top-level guidance copy. |
### Lessons Learned ### Lessons Learned
@@ -109,6 +110,7 @@ It is intentionally implementation-focused:
- The inspector should be its own sibling surface in the page layout, not nested inside the table shell. That keeps the content reusable for both desktop and the later mobile sheet without coupling it to canvas markup. - The inspector should be its own sibling surface in the page layout, not nested inside the table shell. That keeps the content reusable for both desktop and the later mobile sheet without coupling it to canvas markup.
- The inspector content itself should be shared independently of its container. Once the body is separated from the desktop column chrome, the mobile bottom sheet can reuse it with almost no behavioral drift. - The inspector content itself should be shared independently of its container. Once the body is separated from the desktop column chrome, the mobile bottom sheet can reuse it with almost no behavioral drift.
- Help content should not stay embedded in the canvas component once the grid becomes the main task surface. Moving legend rendering back to the page host makes it easier to demote, reposition, or merge with future help surfaces. - Help content should not stay embedded in the canvas component once the grid becomes the main task surface. Moving legend rendering back to the page host makes it easier to demote, reposition, or merge with future help surfaces.
- Hiding maintenance noise in default reference mode is mostly a copy and chrome problem, not a routing or data problem. Replacing repeated curation words with quieter indicators goes further than adding yet another toggle.
## Target Outcomes ## Target Outcomes
@@ -478,7 +480,7 @@ Build the shared interaction infrastructure needed by multiple destinations befo
| `P3.7` | Completed | Desktop now has a dedicated inspector column driven by the shared selected-cell state instead of forcing result reading back into the grid alone. | | `P3.7` | Completed | Desktop now has a dedicated inspector column driven by the shared selected-cell state instead of forcing result reading back into the grid alone. |
| `P3.8` | Completed | Mobile now uses a bottom-sheet inspector that reuses the same selected-cell content as the desktop inspector column. | | `P3.8` | Completed | Mobile now uses a bottom-sheet inspector that reuses the same selected-cell content as the desktop inspector column. |
| `P3.9` | Completed | Legend/help is now on-demand and controlled from the context bar instead of always rendering below the canvas. | | `P3.9` | Completed | Legend/help is now on-demand and controlled from the context bar instead of always rendering below the canvas. |
| `P3.10` | Pending | Hide maintenance and developer noise in default reference mode. | | `P3.10` | Completed | Default `Reference` mode now uses quieter status indicators and calmer guidance copy so the page reads less like a maintenance surface. |
| `P3.11` | Pending | Preserve editor and curation entry points through the inspector. | | `P3.11` | Pending | Preserve editor and curation entry points through the inspector. |
| `P3.12` | Pending | Normalize click/tap/keyboard selection and close the phase with a hardening pass. | | `P3.12` | Pending | Normalize click/tap/keyboard selection and close the phase with a hardening pass. |

View File

@@ -36,7 +36,11 @@
<div class="@GetCellCssClass(cell, displayColumn.GroupKey)" @onclick="() => SelectCell(cell)"> <div class="@GetCellCssClass(cell, displayColumn.GroupKey)" @onclick="() => SelectCell(cell)">
<div class="critical-table-cell-shell"> <div class="critical-table-cell-shell">
<div class="critical-table-cell-actions"> <div class="critical-table-cell-actions">
@if (cell.IsCurated) @if (string.Equals(CurrentMode, TablesReferenceMode.Reference, StringComparison.Ordinal))
{
<StatusIndicator Tone="@(cell.IsCurated ? "success" : "warning")" CssClass="tables-cell-status-indicator" />
}
else if (cell.IsCurated)
{ {
<span class="critical-cell-status-chip is-curated">Curated</span> <span class="critical-cell-status-chip is-curated">Curated</span>
} }

View File

@@ -11,7 +11,7 @@
<button type="button" class="btn btn-link" @onclick="() => OnToggleLegend.InvokeAsync()"> <button type="button" class="btn btn-link" @onclick="() => OnToggleLegend.InvokeAsync()">
@(IsLegendOpen ? "Hide help" : "Reading help") @(IsLegendOpen ? "Hide help" : "Reading help")
</button> </button>
<p class="table-browser-edit-hint">Use the inspector to inspect, curate, or edit the selected result.</p> <p class="table-browser-edit-hint">Select a result to inspect it beside the table.</p>
</div> </div>
</div> </div>

View File

@@ -1710,6 +1710,10 @@ pre,
margin-left: auto; margin-left: auto;
} }
.tables-cell-status-indicator {
min-height: 1rem;
}
.critical-cell-action-button { .critical-cell-action-button {
border: 1px solid rgba(127, 96, 55, 0.18); border: 1px solid rgba(127, 96, 55, 0.18);
border-radius: 999px; border-radius: 999px;