mirror of
https://github.com/MindWorkAI/AI-Studio.git
synced 2026-08-11 20:12:12 +00:00
Refactored the MudStepper component to remove unnecessary actions
This commit is contained in:
parent
ec21d492a4
commit
2b3901ac32
@ -96,7 +96,7 @@ else
|
||||
</MudExpansionPanel>
|
||||
</MudExpansionPanels>
|
||||
|
||||
<MudStepper @bind-ActiveIndex="@this.stepperIndex" CompletedStepColor="Color.Primary" CurrentStepColor="Color.Primary" ErrorStepColor="Color.Error" NonLinear="@false" ShowResetButton="@false" Class="mb-3">
|
||||
<MudStepperWithoutActions @bind-ActiveIndex="@this.stepperIndex" Class="mb-3">
|
||||
<ChildContent>
|
||||
<MudStep Title="@T("Validate plugin")" Completed="@this.PluginCheckCompleted" HasError="@this.IsInstallStepFailed(BuilderInstallStep.CHECK_PLUGIN)">
|
||||
<MudStack Spacing="2" Class="mt-2">
|
||||
@ -249,9 +249,7 @@ else
|
||||
</MudStack>
|
||||
</MudStep>
|
||||
</ChildContent>
|
||||
<ActionContent Context="_">
|
||||
</ActionContent>
|
||||
</MudStepper>
|
||||
</MudStepperWithoutActions>
|
||||
</MudStack>
|
||||
: null;
|
||||
|
||||
|
||||
@ -1,14 +1,8 @@
|
||||
@inherits MSGComponentBase
|
||||
|
||||
<MudExpansionPanels Class="mb-4 visual-briefing-build-progress" Elevation="0">
|
||||
<MudExpansionPanels Class="mb-4" Elevation="0">
|
||||
<MudExpansionPanel Text="@this.BuildProgressTitle" Expanded="@(this.Build?.Status is not VisualBriefingBuildStatus.COMPLETED)">
|
||||
<MudStepper ActiveIndex="@this.BuildStepperIndex"
|
||||
CompletedStepColor="Color.Primary"
|
||||
CurrentStepColor="Color.Primary"
|
||||
ErrorStepColor="Color.Error"
|
||||
NonLinear="@false"
|
||||
OnPreviewInteraction="@PreventBuildStepperInteractionAsync"
|
||||
ShowResetButton="@false">
|
||||
<MudStepperWithoutActions ActiveIndex="@this.BuildStepperIndex" ReadOnly="@true">
|
||||
<ChildContent>
|
||||
@for (var index = 0; index < STAGE_GROUPS.Length; index++)
|
||||
{
|
||||
@ -43,9 +37,6 @@
|
||||
</MudStep>
|
||||
}
|
||||
</ChildContent>
|
||||
@* The build runs on its own. Overriding the actions with empty content keeps MudBlazor from
|
||||
rendering its Previous, Next, Skip, and Complete buttons, which have nothing to do here. *@
|
||||
<ActionContent></ActionContent>
|
||||
</MudStepper>
|
||||
</MudStepperWithoutActions>
|
||||
</MudExpansionPanel>
|
||||
</MudExpansionPanels>
|
||||
@ -164,17 +164,6 @@ public partial class VisualBriefingBuildProgress : MSGComponentBase
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Keeps the status stepper informational while allowing actions inside the active step.
|
||||
/// </summary>
|
||||
/// <param name="args">The interaction to cancel.</param>
|
||||
/// <returns>A completed task.</returns>
|
||||
private static Task PreventBuildStepperInteractionAsync(StepperInteractionEventArgs args)
|
||||
{
|
||||
args.Cancel = true;
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Gets a persistent stage status, defaulting to not started.
|
||||
/// </summary>
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
<MudStepper ActiveIndex="@this.ActiveIndex"
|
||||
ActiveIndexChanged="@this.ActiveIndexChanged"
|
||||
CompletedStepColor="Color.Primary"
|
||||
CurrentStepColor="Color.Primary"
|
||||
ErrorStepColor="Color.Error"
|
||||
NonLinear="@false"
|
||||
ShowResetButton="@false"
|
||||
OnPreviewInteraction="@this.PreviewInteractionAsync"
|
||||
Class="@this.Classname">
|
||||
<ChildContent>
|
||||
@this.ChildContent
|
||||
</ChildContent>
|
||||
@* Empty on purpose: this is what keeps MudBlazor from rendering its Previous, Next, Skip, and
|
||||
Complete buttons. The surrounding action bar still renders and is hidden through app.css. *@
|
||||
<ActionContent Context="_">
|
||||
</ActionContent>
|
||||
</MudStepper>
|
||||
@ -0,0 +1,70 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace AIStudio.Components;
|
||||
|
||||
/// <summary>
|
||||
/// A stepper that leaves the step navigation to the application instead of the user.
|
||||
/// </summary>
|
||||
/// <remarks>
|
||||
/// MudBlazor renders Previous, Next, Skip, and Complete buttons by default. AI Studio drives its
|
||||
/// steppers from application state — a running build, or an install flow that advances when each
|
||||
/// step succeeds — so those buttons have nothing to do and would only look broken when clicked.
|
||||
/// This component removes them once instead of once per assistant, and carries the shared step
|
||||
/// colors so the steppers stay visually consistent.
|
||||
/// </remarks>
|
||||
public partial class MudStepperWithoutActions : ComponentBase
|
||||
{
|
||||
/// <summary>
|
||||
/// Gets or sets the step the stepper points at.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int ActiveIndex { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Gets or sets the callback raised when the active step changed.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback<int> ActiveIndexChanged { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Gets or sets whether the user must not change the active step.
|
||||
/// </summary>
|
||||
/// <remarks>
|
||||
/// Set this when the displayed process runs on its own. The step headers stay visible, but
|
||||
/// clicking them no longer moves the stepper away from the step the application selected.
|
||||
/// </remarks>
|
||||
[Parameter]
|
||||
public bool ReadOnly { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Gets or sets additional CSS classes for the stepper.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string Class { get; set; } = string.Empty;
|
||||
|
||||
/// <summary>
|
||||
/// Gets or sets the steps to render.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// The marker class that lets app.css hide the action bar MudBlazor renders around the actions.
|
||||
/// </summary>
|
||||
private const string MARKER_CLASS = "mud-stepper-without-actions";
|
||||
|
||||
private string Classname => string.IsNullOrWhiteSpace(this.Class) ? MARKER_CLASS : $"{MARKER_CLASS} {this.Class}";
|
||||
|
||||
/// <summary>
|
||||
/// Blocks step changes that the user triggered while the stepper is read-only.
|
||||
/// </summary>
|
||||
/// <param name="args">The interaction to inspect.</param>
|
||||
/// <returns>A completed task.</returns>
|
||||
private Task PreviewInteractionAsync(StepperInteractionEventArgs args)
|
||||
{
|
||||
if (this.ReadOnly)
|
||||
args.Cancel = true;
|
||||
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
}
|
||||
@ -103,10 +103,9 @@
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
/* The visual briefing build stepper only reports progress, so its actions are overridden with empty
|
||||
content. MudBlazor still renders the surrounding action bar, which would leave an empty padded row.
|
||||
Scoped on purpose: the Assistant Builder uses an interactive stepper that needs its buttons. */
|
||||
.visual-briefing-build-progress .mud-stepper-actions {
|
||||
/* MudStepperWithoutActions overrides the stepper actions with empty content. MudBlazor still renders
|
||||
the action bar around them, which would leave an empty padded row below the last step. */
|
||||
.mud-stepper-without-actions .mud-stepper-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user