xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact the critical cell editor

Browse Source
This commit is contained in:
Frank Tovar
2026-03-15 03:02:32 +01:00
parent dea0f97e91
commit dc2dbd29a9
3 changed files with 135 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/player_gm_ux_redesign_plan.md
View File

@@ -531,6 +531,10 @@ Acceptance criteria:
### Phase 2: Compact inline cell editor ### Phase 2: Compact inline cell editor
Status:
- implemented in the web app on March 15, 2026
Scope: Scope:
- remove the dedicated preview panel from the critical cell popup - remove the dedicated preview panel from the critical cell popup
@@ -626,4 +630,4 @@ Mitigation:
## Recommended Next Step ## Recommended Next Step
Implement the new Phase 2 next. The compact inline popup editor is now the most visible remaining UX gap after the lookup flow ergonomics pass. Implement the new Phase 3 next. The remaining structural gap is generated-versus-overridden state, so re-parse and future import refreshes can preserve intentional curation instead of treating all edited values the same.

218
src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor
View File

@@ -56,34 +56,11 @@
<p class="error-text critical-editor-error">@SaveErrorMessage</p> <p class="error-text critical-editor-error">@SaveErrorMessage</p>
} }
<section class="critical-editor-section">
<div class="critical-editor-section-header">
<div>
<h4>Result Preview</h4>
<p class="muted">This is the card the table browser will show.</p>
</div>
</div>
<div class="result-card critical-editor-preview-card">
<div class="result-stats">
<span class="stat-pill">Severity: @Model.ColumnLabel</span>
<span class="stat-pill">Roll band: @Model.RollBand</span>
@if (!string.IsNullOrWhiteSpace(Model.GroupLabel))
{
<span class="stat-pill">Variant: @Model.GroupLabel</span>
}
</div>
<CompactCriticalCell
Description="@Model.DescriptionText"
Effects="@BuildPreviewEffects(Model.Effects)"
Branches="@BuildPreviewBranches(Model.Branches)" />
</div>
</section>
<section class="critical-editor-section"> <section class="critical-editor-section">
<div class="critical-editor-section-header"> <div class="critical-editor-section-header">
<div> <div>
<h4>Raw Text</h4> <h4>Raw Text</h4>
<p class="muted">Update the source text, then adjust the visible card fields below.</p> <p class="muted">Update the source text, then correct the visible result rows below.</p>
</div> </div>
<button type="button" class="btn-ritual" @onclick="OnReparse" disabled="@IsSaving || IsReparsing"> <button type="button" class="btn-ritual" @onclick="OnReparse" disabled="@IsSaving || IsReparsing">
@(IsReparsing ? "Re-Parsing..." : "Re-Parse Raw Text") @(IsReparsing ? "Re-Parsing..." : "Re-Parse Raw Text")
@@ -98,7 +75,7 @@
<p class="muted critical-editor-advanced-hint">@GetParserNoteSummary(Model.ValidationMessages.Count)</p> <p class="muted critical-editor-advanced-hint">@GetParserNoteSummary(Model.ValidationMessages.Count)</p>
} }
<div class="field-shell"> <div class="field-shell">
<label>Result Text Override</label> <label>Result Text</label>
<InputTextArea class="input-shell critical-editor-textarea compact" @bind-Value="Model.DescriptionText" /> <InputTextArea class="input-shell critical-editor-textarea compact" @bind-Value="Model.DescriptionText" />
</div> </div>
</section> </section>
@@ -107,9 +84,9 @@
<div class="critical-editor-section-header"> <div class="critical-editor-section-header">
<div> <div>
<h4>Base Effects</h4> <h4>Base Effects</h4>
<p class="muted">These chips appear on the main result.</p> <p class="muted">Edit the badges and values that appear on the main result.</p>
</div> </div>
<button type="button" class="btn-ritual" @onclick="AddBaseEffect">Add Effect</button> <button type="button" class="btn-ritual critical-editor-compact-button" @onclick="AddBaseEffect">Add Effect</button>
</div> </div>
@if (Model.Effects.Count == 0) @if (Model.Effects.Count == 0)
{ {
@@ -117,30 +94,15 @@
} }
else else
{ {
<div class="critical-editor-chip-list"> <div class="critical-editor-inline-list">
@for (var index = 0; index < Model.Effects.Count; index++) @for (var index = 0; index < Model.Effects.Count; index++)
{ {
var effect = Model.Effects[index]; var effect = Model.Effects[index];
var effectIndex = index; <div class="critical-editor-inline-row">
<div class="critical-editor-chip-card"> @InlineEffectRow(effect, () => RemoveBaseEffect(index))
<div class="critical-editor-chip-preview">
<AffixBadgeList Effects="@BuildSinglePreviewEffect(effect)" />
<span class="critical-editor-chip-name">@GetEffectLabel(effect)</span>
</div>
<button type="button" class="btn btn-link" @onclick="() => RemoveBaseEffect(effectIndex)">Remove</button>
</div> </div>
} }
</div> </div>
@for (var index = 0; index < Model.Effects.Count; index++)
{
var effect = Model.Effects[index];
<div class="critical-editor-card nested">
<div class="critical-editor-card-header">
<strong>@GetEffectLabel(effect)</strong>
</div>
@EffectFields(effect)
</div>
} }
} }
</section> </section>
@@ -149,9 +111,9 @@
<div class="critical-editor-section-header"> <div class="critical-editor-section-header">
<div> <div>
<h4>Conditions</h4> <h4>Conditions</h4>
<p class="muted">Use condition cards for alternate outcomes.</p> <p class="muted">Keep alternate outcomes compact and easy to scan.</p>
</div> </div>
<button type="button" class="btn-ritual" @onclick="AddBranch">Add Condition</button> <button type="button" class="btn-ritual critical-editor-compact-button" @onclick="AddBranch">Add Condition</button>
</div> </div>
@if (Model.Branches.Count == 0) @if (Model.Branches.Count == 0)
{ {
@@ -166,58 +128,45 @@
<div class="critical-editor-card-header"> <div class="critical-editor-card-header">
<div> <div>
<strong>@GetBranchTitle(branch, index)</strong> <strong>@GetBranchTitle(branch, index)</strong>
<p class="muted critical-editor-inline-copy">Shown when this condition applies.</p> <p class="muted critical-editor-inline-copy">Shown only when this condition applies.</p>
</div> </div>
<button type="button" class="btn btn-link" @onclick="() => RemoveBranch(index)">Remove</button> <button type="button" class="critical-editor-inline-button" @onclick="() => RemoveBranch(index)">Remove</button>
</div> </div>
<div class="critical-editor-branch-line">
<div class="field-shell"> <div class="field-shell">
<label>Condition</label> <label>Condition</label>
<InputText class="input-shell" @bind-Value="branch.ConditionText" /> <InputText class="input-shell" @bind-Value="branch.ConditionText" />
</div> </div>
<div class="field-shell"> <div class="field-shell critical-editor-branch-outcome">
<label>Outcome Text</label> <label>Outcome Text</label>
<InputTextArea class="input-shell critical-editor-textarea compact" @bind-Value="branch.DescriptionText" /> <InputText class="input-shell" @bind-Value="branch.DescriptionText" />
</div>
</div> </div>
<div class="critical-editor-subsection"> <div class="critical-editor-subsection">
<div class="critical-editor-section-header"> <div class="critical-editor-section-header">
<div> <div>
<h5>Condition Effects</h5> <h5>Condition Effects</h5>
<p class="muted">These chips only appear when the condition is met.</p> <p class="muted">These only appear when the condition is met.</p>
</div> </div>
<button type="button" class="btn-ritual" @onclick="() => AddBranchEffect(branch)">Add Effect</button> <button type="button" class="btn-ritual critical-editor-compact-button" @onclick="() => AddBranchEffect(branch)">Add Effect</button>
</div> </div>
@if (branch.Effects.Count == 0) @if (branch.Effects.Count == 0)
{ {
<p class="muted">No effects on this condition card yet.</p> <p class="muted">No effects on this condition yet.</p>
} }
else else
{ {
<div class="critical-editor-chip-list"> <div class="critical-editor-inline-list">
@for (var effectIndex = 0; effectIndex < branch.Effects.Count; effectIndex++) @for (var effectIndex = 0; effectIndex < branch.Effects.Count; effectIndex++)
{ {
var effect = branch.Effects[effectIndex]; var effect = branch.Effects[effectIndex];
var localEffectIndex = effectIndex; <div class="critical-editor-inline-row">
<div class="critical-editor-chip-card"> @InlineEffectRow(effect, () => RemoveBranchEffect(branch, effectIndex))
<div class="critical-editor-chip-preview">
<AffixBadgeList Effects="@BuildSinglePreviewEffect(effect)" />
<span class="critical-editor-chip-name">@GetEffectLabel(effect)</span>
</div>
<button type="button" class="btn btn-link" @onclick="() => RemoveBranchEffect(branch, localEffectIndex)">Remove</button>
</div> </div>
} }
</div> </div>
@for (var effectIndex = 0; effectIndex < branch.Effects.Count; effectIndex++)
{
var effect = branch.Effects[effectIndex];
<div class="critical-editor-card nested">
<div class="critical-editor-card-header">
<strong>@GetEffectLabel(effect)</strong>
</div>
@EffectFields(effect)
</div>
}
} }
</div> </div>
</div> </div>
@@ -545,27 +494,10 @@
!string.IsNullOrWhiteSpace(effect.SourceText) || !string.IsNullOrWhiteSpace(effect.SourceText) ||
!string.IsNullOrWhiteSpace(effect.SourceType); !string.IsNullOrWhiteSpace(effect.SourceType);
private static IReadOnlyList<CriticalEffectLookupResponse> BuildPreviewEffects(IEnumerable<CriticalEffectEditorModel> effects) => private static IReadOnlyList<CriticalEffectLookupResponse> BuildSingleBadgeEffect(CriticalEffectEditorModel effect) =>
effects.Select(CreatePreviewEffect).ToList(); [CreateBadgeEffect(effect)];
private static IReadOnlyList<CriticalEffectLookupResponse> BuildSinglePreviewEffect(CriticalEffectEditorModel effect) => private static CriticalEffectLookupResponse CreateBadgeEffect(CriticalEffectEditorModel effect) =>
[CreatePreviewEffect(effect)];
private static IReadOnlyList<CriticalBranchLookupResponse> BuildPreviewBranches(IEnumerable<CriticalBranchEditorModel> branches) =>
branches
.OrderBy(branch => branch.SortOrder)
.Select(branch => new CriticalBranchLookupResponse(
branch.BranchKind,
branch.ConditionKey,
branch.ConditionText,
branch.DescriptionText,
branch.RawAffixText,
BuildPreviewEffects(branch.Effects),
branch.RawText,
branch.SortOrder))
.ToList();
private static CriticalEffectLookupResponse CreatePreviewEffect(CriticalEffectEditorModel effect) =>
new( new(
effect.EffectCode, effect.EffectCode,
effect.Target, effect.Target,
@@ -581,9 +513,12 @@
} }
@functions { @functions {
private RenderFragment EffectFields(CriticalEffectEditorModel effect) => @<div class="critical-editor-effect-fields"> private RenderFragment InlineEffectRow(CriticalEffectEditorModel effect, Action onRemove) => @<div class="critical-editor-effect-row">
<div class="form-grid critical-editor-effect-grid"> <div class="critical-editor-effect-row-main">
<div class="field-shell"> <div class="critical-editor-effect-badge">
<AffixBadgeList Effects="@BuildSingleBadgeEffect(effect)" />
</div>
<div class="field-shell critical-editor-effect-kind">
<label>Effect</label> <label>Effect</label>
<select class="input-shell" value="@effect.EffectCode" @onchange="args => HandleEffectCodeChanged(effect, args.Value?.ToString())"> <select class="input-shell" value="@effect.EffectCode" @onchange="args => HandleEffectCodeChanged(effect, args.Value?.ToString())">
@foreach (var option in GetEffectOptions(effect.EffectCode)) @foreach (var option in GetEffectOptions(effect.EffectCode))
@@ -592,66 +527,59 @@
} }
</select> </select>
</div> </div>
@switch (effect.EffectCode) @InlineValueField(effect)
{
case CriticalEffectCodes.DirectHits:
<div class="field-shell">
<label>Hits</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.ValueInteger" />
</div>
break;
case CriticalEffectCodes.StunnedRounds:
case CriticalEffectCodes.MustParryRounds:
case CriticalEffectCodes.NoParryRounds:
<div class="field-shell">
<label>Rounds</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.DurationRounds" />
</div>
break;
case CriticalEffectCodes.BleedPerRound:
<div class="field-shell">
<label>Bleed / Round</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.PerRound" />
</div>
break;
case CriticalEffectCodes.FoePenalty:
case CriticalEffectCodes.AttackerBonusNextRound:
<div class="field-shell">
<label>Modifier</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.Modifier" />
</div>
break;
case CriticalEffectCodes.PowerPointModifier:
<div class="field-shell">
<label>Expression</label>
<InputText class="input-shell" @bind-Value="effect.ValueExpression" />
</div>
break;
default:
<div class="field-shell">
<label>Display Text</label>
<InputText class="input-shell" @bind-Value="effect.SourceText" />
</div>
break;
}
@if (!string.IsNullOrWhiteSpace(effect.BodyPart)) @if (!string.IsNullOrWhiteSpace(effect.BodyPart))
{ {
<div class="field-shell"> <div class="field-shell critical-editor-effect-extra">
<label>Body Part</label> <label>Body Part</label>
<InputText class="input-shell" @bind-Value="effect.BodyPart" /> <InputText class="input-shell" @bind-Value="effect.BodyPart" />
</div> </div>
} }
@if (!string.IsNullOrWhiteSpace(effect.Target)) @if (ShouldShowTargetField(effect))
{ {
<div class="field-shell"> <div class="field-shell critical-editor-effect-extra">
<label>Target</label> <label>Target</label>
<InputText class="input-shell" @bind-Value="effect.Target" /> <InputText class="input-shell" @bind-Value="effect.Target" />
</div> </div>
} }
</div> </div>
<label class="critical-editor-checkbox"> <button type="button" class="critical-editor-inline-button" @onclick="onRemove">Remove</button>
<InputCheckbox class="form-check-input" @bind-Value="effect.IsPermanent" />
<span>Permanent</span>
</label>
</div>; </div>;
private RenderFragment InlineValueField(CriticalEffectEditorModel effect) => @<div class="field-shell critical-editor-effect-value">
@switch (effect.EffectCode)
{
case CriticalEffectCodes.DirectHits:
<label>Hits</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.ValueInteger" />
break;
case CriticalEffectCodes.StunnedRounds:
case CriticalEffectCodes.MustParryRounds:
case CriticalEffectCodes.NoParryRounds:
<label>Rounds</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.DurationRounds" />
break;
case CriticalEffectCodes.BleedPerRound:
<label>Bleed / Round</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.PerRound" />
break;
case CriticalEffectCodes.FoePenalty:
case CriticalEffectCodes.AttackerBonusNextRound:
<label>Modifier</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.Modifier" />
break;
case CriticalEffectCodes.PowerPointModifier:
<label>Expression</label>
<InputText class="input-shell" @bind-Value="effect.ValueExpression" />
break;
default:
<label>Display Text</label>
<InputText class="input-shell" @bind-Value="effect.SourceText" />
break;
}
</div>;
private static bool ShouldShowTargetField(CriticalEffectEditorModel effect) =>
!string.Equals(effect.EffectCode, CriticalEffectCodes.DirectHits, StringComparison.Ordinal) &&
!string.IsNullOrWhiteSpace(effect.Target);
} }

88
src/RolemasterDb.App/wwwroot/app.css
View File

@@ -788,21 +788,12 @@ textarea {
background: rgba(252, 248, 238, 0.96); background: rgba(252, 248, 238, 0.96);
} }
.critical-editor-preview-card {
display: grid;
gap: 0.85rem;
}
.critical-editor-preview-card .critical-cell-description {
font-size: 1.05rem;
}
.critical-editor-textarea { .critical-editor-textarea {
min-height: 7rem; min-height: 7rem;
} }
.critical-editor-textarea.compact { .critical-editor-textarea.compact {
min-height: 4.5rem; min-height: 3.5rem;
} }
.critical-editor-textarea.json { .critical-editor-textarea.json {
@@ -810,7 +801,7 @@ textarea {
} }
.critical-editor-textarea.tall { .critical-editor-textarea.tall {
min-height: 10rem; min-height: 8rem;
} }
.critical-editor-error { .critical-editor-error {
@@ -825,42 +816,56 @@ textarea {
margin: 0; margin: 0;
} }
.critical-editor-chip-list { .critical-editor-inline-list {
display: grid; display: grid;
gap: 0.65rem; gap: 0.55rem;
} }
.critical-editor-chip-card { .critical-editor-inline-row {
display: block;
}
.critical-editor-effect-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.75rem; gap: 0.75rem;
padding: 0.65rem 0.8rem; padding: 0.65rem 0.75rem;
border-radius: 14px; border-radius: 14px;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(127, 96, 55, 0.12); border: 1px solid rgba(127, 96, 55, 0.12);
} }
.critical-editor-chip-preview { .critical-editor-effect-row-main {
display: flex; display: grid;
align-items: center; gap: 0.65rem;
gap: 0.55rem; grid-template-columns: minmax(88px, auto) minmax(180px, 1.3fr) minmax(130px, 0.8fr);
flex-wrap: wrap; align-items: end;
flex: 1 1 auto;
}
.critical-editor-effect-badge {
min-width: 0; min-width: 0;
} }
.critical-editor-chip-preview .affix-badge-list { .critical-editor-effect-badge .affix-badge-list {
margin-top: 0; margin-top: 0;
} }
.critical-editor-chip-name { .critical-editor-effect-kind,
font-family: var(--font-heading); .critical-editor-effect-value,
color: #5b4327; .critical-editor-effect-extra {
min-width: 0;
} }
.critical-editor-effect-fields { .critical-editor-branch-line {
display: grid; display: grid;
gap: 0.75rem; gap: 0.65rem;
grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr);
}
.critical-editor-branch-outcome {
min-width: 0;
} }
.critical-editor-validation-list { .critical-editor-validation-list {
@@ -883,7 +888,7 @@ textarea {
.critical-editor-advanced { .critical-editor-advanced {
border-radius: 18px; border-radius: 18px;
border: 1px solid rgba(127, 96, 55, 0.14); border: 1px solid rgba(127, 96, 55, 0.14);
background: rgba(247, 239, 225, 0.42); background: rgba(247, 239, 225, 0.3);
overflow: hidden; overflow: hidden;
} }
@@ -912,7 +917,7 @@ textarea {
.critical-editor-advanced-body { .critical-editor-advanced-body {
display: grid; display: grid;
gap: 0.85rem; gap: 0.85rem;
padding: 0 1rem 1rem; padding: 0 0.9rem 0.9rem;
} }
.critical-editor-diagnostic-grid { .critical-editor-diagnostic-grid {
@@ -971,15 +976,21 @@ textarea {
text-align: right; text-align: right;
} }
.critical-editor-effect-grid { .critical-editor-inline-button {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: none;
background: transparent;
color: var(--accent);
padding: 0.2rem 0.1rem;
white-space: nowrap;
} }
.critical-editor-checkbox { .critical-editor-inline-button:hover {
display: inline-flex; color: #6e4320;
align-items: center; }
gap: 0.5rem;
color: #5d4429; .critical-editor-compact-button {
padding: 0.55rem 0.9rem;
box-shadow: none;
} }
@media (max-width: 640.98px) { @media (max-width: 640.98px) {
@@ -1013,7 +1024,7 @@ textarea {
align-items: stretch; align-items: stretch;
} }
.critical-editor-chip-card, .critical-editor-effect-row,
.critical-editor-card-header, .critical-editor-card-header,
.critical-editor-section-header, .critical-editor-section-header,
.critical-editor-advanced-summary, .critical-editor-advanced-summary,
@@ -1022,6 +1033,11 @@ textarea {
align-items: stretch; align-items: stretch;
} }
.critical-editor-effect-row-main,
.critical-editor-branch-line {
grid-template-columns: 1fr;
}
.critical-editor-diagnostic-values { .critical-editor-diagnostic-values {
justify-items: start; justify-items: start;
text-align: left; text-align: left;