Add desktop tables inspector
This commit is contained in:
@@ -67,6 +67,7 @@ It is intentionally implementation-focused:
|
|||||||
| 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.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.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. |
|
| 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. |
|
||||||
|
| 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. |
|
||||||
|
|
||||||
### Lessons Learned
|
### Lessons Learned
|
||||||
|
|
||||||
@@ -103,6 +104,7 @@ It is intentionally implementation-focused:
|
|||||||
- 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.
|
- 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.
|
- 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.
|
- 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.
|
||||||
|
- 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.
|
||||||
|
|
||||||
## Target Outcomes
|
## Target Outcomes
|
||||||
|
|
||||||
@@ -469,7 +471,7 @@ Build the shared interaction infrastructure needed by multiple destinations befo
|
|||||||
| `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.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.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` | Completed | Resting cells now show only status hints; compact edit/curation buttons appear only for the selected cell. |
|
| `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.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` | Pending | Add the mobile bottom-sheet inspector variant. |
|
| `P3.8` | Pending | Add the mobile bottom-sheet inspector variant. |
|
||||||
| `P3.9` | Pending | Move legend/help to an on-demand secondary surface. |
|
| `P3.9` | Pending | Move legend/help to an on-demand secondary surface. |
|
||||||
| `P3.10` | Pending | Hide maintenance and developer noise in default reference mode. |
|
| `P3.10` | Pending | Hide maintenance and developer noise in default reference mode. |
|
||||||
|
|||||||
@@ -83,6 +83,13 @@
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@if (tableDetail is not null)
|
||||||
|
{
|
||||||
|
<aside class="tables-reference-inspector-shell">
|
||||||
|
<TablesInspector SelectedCellDetail="SelectedCellDetail" />
|
||||||
|
</aside>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</section>
|
</section>
|
||||||
@@ -161,6 +168,10 @@
|
|||||||
private bool hasResolvedStoredTableSelection;
|
private bool hasResolvedStoredTableSelection;
|
||||||
private CriticalTableReference? SelectedTableReference =>
|
private CriticalTableReference? SelectedTableReference =>
|
||||||
referenceData?.CriticalTables.FirstOrDefault(item => string.Equals(item.Key, selectedTableSlug, StringComparison.OrdinalIgnoreCase));
|
referenceData?.CriticalTables.FirstOrDefault(item => string.Equals(item.Key, selectedTableSlug, StringComparison.OrdinalIgnoreCase));
|
||||||
|
private CriticalTableCellDetail? SelectedCellDetail =>
|
||||||
|
selectedCell is null
|
||||||
|
? null
|
||||||
|
: tableDetail?.Cells.FirstOrDefault(cell => cell.ResultId == selectedCell.ResultId);
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
protected override async Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
|
|||||||
52
src/RolemasterDb.App/Components/Tables/TablesInspector.razor
Normal file
52
src/RolemasterDb.App/Components/Tables/TablesInspector.razor
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
@if (SelectedCellDetail is null)
|
||||||
|
{
|
||||||
|
<aside class="tables-inspector" aria-label="Selected result inspector">
|
||||||
|
<InspectorSection Title="Inspector" Description="Select a result in the table to inspect its details here.">
|
||||||
|
<p class="tables-inspector-empty">Choose a cell to see its roll band, severity, and readable result without leaving the grid.</p>
|
||||||
|
</InspectorSection>
|
||||||
|
</aside>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var cell = SelectedCellDetail;
|
||||||
|
|
||||||
|
<aside class="tables-inspector" aria-label="Selected result inspector">
|
||||||
|
<InspectorSection Title="Selected Result" Description="Read the selected cell and its context without opening a modal.">
|
||||||
|
<div class="tables-inspector-summary">
|
||||||
|
<div>
|
||||||
|
<p class="tables-inspector-kicker">Roll band</p>
|
||||||
|
<strong>@cell.RollBand</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="tables-inspector-kicker">Severity</p>
|
||||||
|
<strong>@cell.ColumnLabel</strong>
|
||||||
|
</div>
|
||||||
|
@if (!string.IsNullOrWhiteSpace(cell.GroupLabel))
|
||||||
|
{
|
||||||
|
<div>
|
||||||
|
<p class="tables-inspector-kicker">Variant</p>
|
||||||
|
<strong>@cell.GroupLabel</strong>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div>
|
||||||
|
<p class="tables-inspector-kicker">Status</p>
|
||||||
|
<StatusChip Tone="@(cell.IsCurated ? "success" : "warning")">
|
||||||
|
@(cell.IsCurated ? "Curated" : "Needs Curation")
|
||||||
|
</StatusChip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</InspectorSection>
|
||||||
|
|
||||||
|
<InspectorSection Title="Result" Description="The selected critical result stays readable while you browse the grid.">
|
||||||
|
<CompactCriticalCell
|
||||||
|
Description="@(cell.Description ?? string.Empty)"
|
||||||
|
Effects="@(cell.Effects ?? Array.Empty<CriticalEffectLookupResponse>())"
|
||||||
|
Branches="@(cell.Branches ?? Array.Empty<CriticalBranchLookupResponse>())" />
|
||||||
|
</InspectorSection>
|
||||||
|
</aside>
|
||||||
|
}
|
||||||
|
|
||||||
|
@code {
|
||||||
|
[Parameter]
|
||||||
|
public CriticalTableCellDetail? SelectedCellDetail { get; set; }
|
||||||
|
}
|
||||||
@@ -1146,7 +1146,7 @@ pre,
|
|||||||
|
|
||||||
.tables-reference-layout {
|
.tables-reference-layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
|
grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr) minmax(19rem, 24rem);
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
@@ -1341,6 +1341,35 @@ pre,
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tables-reference-inspector-shell {
|
||||||
|
position: sticky;
|
||||||
|
top: calc(var(--shell-header-height) + 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tables-inspector {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tables-inspector-empty {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tables-inspector-summary {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tables-inspector-kicker {
|
||||||
|
margin: 0 0 0.2rem;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
font-size: 0.76rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.table-shell {
|
.table-shell {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 1.2rem;
|
padding: 1.2rem;
|
||||||
@@ -1450,6 +1479,10 @@ pre,
|
|||||||
.tables-reference-rail {
|
.tables-reference-rail {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tables-reference-inspector-shell {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-shell .table-scroll {
|
.table-shell .table-scroll {
|
||||||
|
|||||||
Reference in New Issue
Block a user