AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enhance stepper functionality and visual design

Browse Source 
Added new properties to `<MudStepper>` for customization and
visual feedback. Introduced `_completedSteps` to track step
completion dynamically. Updated logic to manage completed
steps and reset state. Improved CSS for stepper appearance,
including step labels, icons, and content differentiation.
These changes improve usability and flexibility of the
stepper component.
This commit is contained in:
tekh
2026-11-09 09:13:58 +01:00
parent 0cf603fc79
commit d7611a6b59
2 changed files with 50 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
View File

@@ -32,6 +32,10 @@
<MudStepper Vertical="true"
NonLinear="false"
ShowResetButton="false"
CurrentStepColor="Color.Info"
CompletedStepColor="Color.Success"
ErrorStepColor="Color.Error"
StepCompleteIcon="@Icons.Material.Filled.CheckCircle"
ActiveIndex="@_currentStep"
Class="sender-create-wizard__stepper">
<ChildContent>
@@ -39,7 +43,9 @@
{
var stepIndex = step;
<MudStep Title="@GetStepTitle(stepIndex)">
<MudStep Title="@GetStepTitle(stepIndex)"
Completed="@_completedSteps.Contains(stepIndex)"
Skippable="@(stepIndex == 3)">
<div class="sender-create-wizard__stepper-description">@GetStepDescription(stepIndex)</div>
@if (stepIndex == _currentStep)
@@ -422,6 +428,7 @@
private bool _isVisible;
private bool _previousVisible;
private int _currentStep;
private readonly HashSet<int> _completedSteps = [];
private string _title = string.Empty;
private int? _selectedEnvelopeTypeId;
@@ -714,6 +721,7 @@
if (!IsLastStep)
{
_completedSteps.Add(_currentStep);
_currentStep++;
if (_currentStep == 1)
@@ -1120,6 +1128,7 @@
private void ResetWizardState()
{
_currentStep = 0;
_completedSteps.Clear();
_validationMessage = null;
_title = string.Empty;

49
EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
View File

@@ -1137,7 +1137,7 @@
}
.sender-create-wizard__stepper .mud-step-label {
color: #1f2937;
color: #334155;
font-size: 0.86rem;
font-weight: 700;
}
@@ -1153,22 +1153,53 @@
.sender-create-wizard__stepper .mud-step-icon {
color: #64748b;
background: #f8fafc;
border: 1px solid rgba(126, 34, 206, 0.25);
border: 1px solid #cbd5e1;
}
.sender-create-wizard__stepper .mud-step-completed .mud-step-icon,
.sender-create-wizard__stepper .mud-step-current .mud-step-icon {
color: #ffffff;
border-color: transparent;
.sender-create-wizard__stepper .mud-step:not(.mud-step-completed) .mud-step-icon {
position: relative;
color: transparent;
background: #e2e8f0;
border-color: #94a3b8;
}
.sender-create-wizard__stepper .mud-step:not(.mud-step-completed) .mud-step-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
border: 2px solid #64748b;
background: #64748b;
transform: translate(-50%, -50%);
}
.sender-create-wizard__stepper .mud-step-current:not(.mud-step-completed) .mud-step-icon::before {
border-color: #0e7490;
background: #22d3ee;
}
.sender-create-wizard__stepper .mud-step-current .mud-step-label {
color: #0f172a;
}
.sender-create-wizard__stepper .mud-step-current .mud-step-icon {
background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.15);
box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.2);
}
.sender-create-wizard__stepper .mud-step-completed .mud-step-icon {
background: #2a5298;
box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}
.sender-create-wizard__stepper .mud-step-completed .mud-step-label {
color: #14532d;
}
.sender-create-wizard__stepper .mud-step-completed .mud-step-content,
.sender-create-wizard__stepper .mud-step-current .mud-step-content {
color: #475569;
}
.sender-create-wizard__stepper-description {