Skip to content

Commit 6fa1170

Browse files
segfault-segfaultmckaragoz
authored
mudstepper ux updates (#188)
* no message * no message * mudstepper ux updates * mudstepper updates for pr * bug fixes and updates for vertical * mobile vertical updates * localization * Cleanup * Last Cleanup --------- Co-authored-by: segfault <[email protected]> Co-authored-by: mckaragoz <[email protected]>
1 parent 3826fcc commit 6fa1170

File tree

12 files changed

+307
-177
lines changed

12 files changed

+307
-177
lines changed

‎CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/SelectExtended/StepperTest1.razor‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,6 @@
9595
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
9696
}
9797
</MudSelect>
98-
<MudSelect @bind-Value="_headerTextView" Variant="Variant.Outlined" Label="Header Text View">
99-
@foreach (HeaderTextView item in Enum.GetValues<HeaderTextView>())
100-
{
101-
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
102-
}
103-
</MudSelect>
10498
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="(() => _stepper.Reset())">Reset</MudButton>
10599
</MudStack>
106100
</MudItem>
@@ -127,6 +121,7 @@
127121
int _activeIndex = 0;
128122
bool _loading;
129123
bool _showStaticContent = false;
124+
bool _vertical = false;
130125

131126
[Parameter]
132127
public int CheckChangeCount { get; set; }

‎CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStep.razor.cs‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
using System.Text;
99
using System.Threading.Tasks;
1010
using MudExtensions.Extensions;
11+
using Microsoft.AspNetCore.Components.Rendering;
1112

1213
namespace MudExtensions
1314
{
@@ -20,14 +21,24 @@ public partial class MudStep : MudComponentBase, IDisposable
2021
.Build();
2122

2223
[CascadingParameter]
23-
protected MudStepper MudStepper { get; set; }
24+
public MudStepper MudStepper { get; set; }
2425

2526
/// <summary>
2627
/// Step text to show on header.
2728
/// </summary>
2829
[Parameter]
2930
public string Title { get; set; }
3031

32+
33+
public bool IsActive
34+
{
35+
get
36+
{
37+
return MudStepper?.ActiveIndex == this.Number;
38+
}
39+
}
40+
41+
3142
StepStatus _status = StepStatus.Continued;
3243
/// <summary>
3344
/// The step status flag to show step is continued, skipped or completed. Do not set it directly unless you know what you do exactly.
@@ -68,6 +79,15 @@ public StepStatus Status
6879
[Parameter]
6980
public EventCallback<StepStatus> StatusChanged { get; set; }
7081

82+
[Parameter]
83+
public int Number { get; set; }
84+
85+
[Parameter]
86+
public RenderFragment<MudStep> Template { get; set; }
87+
88+
[Parameter]
89+
public string Icon { get; set; }
90+
7191
protected override void OnInitialized()
7292
{
7393
base.OnInitialized();

‎CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepTemplate.razor‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@namespace MudExtensions
2+
@inherits ComponentBase
3+
4+
@if (Step != null)
5+
{
6+
@if (Step.Status == MudExtensions.Enums.StepStatus.Completed)
7+
{
8+
<MudBadge Content="3" Overlap="true" Class="" Icon="@Icons.Material.Filled.Done">
9+
<MudAvatar Class="mud-theme-primary" Style="z-index:20;" Variant="Variant.Filled">
10+
@if(!string.IsNullOrWhiteSpace(Step.Icon))
11+
{
12+
<MudIcon Class="pa-1" Icon="@Step.Icon" Size="Size.Large" />
13+
}
14+
</MudAvatar>
15+
</MudBadge>
16+
<MudText>
17+
18+
@if (Step.MudStepper.GetActiveIndex() == @Step.MudStepper.Steps.IndexOf(@Step))
19+
{
20+
21+
<MudText><b>@Step.Title</b></MudText>
22+
}
23+
else
24+
{
25+
<MudText>@Step.Title</MudText>
26+
}
27+
</MudText>
28+
}
29+
else
30+
{
31+
<MudAvatar Class="mud-theme-primary" Style="z-index:20;" Variant="Variant.Filled">
32+
<MudIcon Class="pa-1" Icon="@Step.Icon" Size="Size.Large" />
33+
</MudAvatar>
34+
<MudText>
35+
36+
@if (Step.MudStepper.GetActiveIndex() == @Step.MudStepper.Steps.IndexOf(@Step))
37+
{
38+
<MudText><b>@Step.Title</b></MudText>
39+
}
40+
else
41+
{
42+
<MudText>@Step.Title</MudText>
43+
}
44+
</MudText>
45+
}
46+
}

‎CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepTemplate.razor.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
using Microsoft.AspNetCore.Components;
2+
3+
namespace MudExtensions
4+
{
5+
public partial class MudStepTemplate : ComponentBase
6+
{
7+
[Parameter]
8+
public MudStep? Step { get; set; }
9+
public MudStepTemplate()
10+
: base()
11+
{
12+
13+
}
14+
}
15+
}

‎CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor‎

Lines changed: 66 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,76 @@
33
@using MudExtensions.Enums
44

55
<CascadingValue Value="this" IsFixed="true">
6-
<MudStack Class="@Class" Style="@Style"> @*Row="Vertical"*@
7-
<MudStack Row="true" AlignItems="@(HeaderTextView == HeaderTextView.NewLine ? AlignItems.Start : AlignItems.Center)"> @*Row="!Vertical"*@
8-
9-
@foreach (MudStep step in _steps)
10-
{
11-
if (step.IsResultStep || (MobileView == true && IsStepActive(step) == false))
12-
{
13-
continue;
6+
<MudStack Row="@Vertical" Class="@Class" Style="@Style">
7+
<div style="@GetStepperStyle()">
8+
<div style=@GetStepperSubStyle()>
9+
@{
10+
MudStep currentStep = null;
1411
}
15-
bool active = IsStepActive(step);
16-
<div @onclick="@(Linear ? null : () => SetActiveIndex(step))" Class="@HeaderClassname">
17-
<MudAvatar Class="@((active || step.Status != StepStatus.Continued) ? $"mud-theme-{Color.ToDescriptionString()}" : null)" Variant="@Variant" Size="Size.Small">
18-
@if (step.Status == Enums.StepStatus.Completed)
19-
{
20-
<MudIcon Icon="@Icons.Material.Filled.Done" Size="Size.Small" />
12+
@foreach (MudStep step in _steps)
13+
{
14+
if (IsStepActive(step))
15+
{
16+
currentStep = step;
17+
}
18+
if (step.IsResultStep || (MobileView == true && IsStepActive(step) == false))
19+
{
20+
continue;
21+
}
22+
23+
<div style="@GetStepPercent()">
24+
<div @onclick="@(Linear ? null : () => SetActiveIndex(step))" class="@HeaderClassname">
25+
@{
26+
bool active = IsStepActive(step);
2127
}
22-
else if (step.Status == StepStatus.Skipped)
28+
@if (step.Template != null)
2329
{
24-
<MudIcon Icon="@Icons.Material.Filled.Remove" Size="Size.Small" />
30+
@step.Template(step)
2531
}
2632
else
2733
{
28-
@(Steps.IndexOf(step) + 1)
29-
}
30-
</MudAvatar>
31-
@if (HeaderTextView == HeaderTextView.All || HeaderTextView == HeaderTextView.NewLine || (HeaderTextView == HeaderTextView.OnlyActiveText && active))
32-
{
33-
<div>
34-
<MudText Align="Align.Center" Color="@(active ? Color : Color.Default)" Style="@(active ? "font-weight: 900" : null)">@step.Title</MudText>
35-
@if (step.Optional == true)
36-
{
37-
<MudText Align="@(HeaderTextView == HeaderTextView.NewLine ? Align.Center : Align.Start)" Typo="Typo.subtitle2" Color="@(active ? Color : Color.Default)" Style="@(active ? "font-weight: 500" : null)">@LocalizedStrings.Optional</MudText>
34+
@if (step.Status == MudExtensions.Enums.StepStatus.Completed)
35+
{
36+
<MudBadge BadgeClass="mud-stepper-badge" Overlap="true" Bordered="true" Color="@Color" Icon="@Icons.Material.Filled.Done">
37+
<MudAvatar Style="@AvatarStylename" Color="@Color" Variant="@Variant" Size="@HeaderSize">
38+
@if (!string.IsNullOrWhiteSpace(step.Icon))
39+
{
40+
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
41+
}
42+
</MudAvatar>
43+
</MudBadge>
44+
}
45+
else
46+
{
47+
<MudAvatar Style="@AvatarStylename" Color="@Color" Variant="@Variant" Size="@HeaderSize">
48+
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
49+
</MudAvatar>
50+
}
51+
@if (HeaderTextView == HeaderTextView.All || HeaderTextView == HeaderTextView.OnlyActiveText)
52+
{
53+
<MudText Class="mt-n1">
54+
@if (step.MudStepper.GetActiveIndex() == @step.MudStepper.Steps.IndexOf(@step))
55+
{
56+
<MudText Color="@(step.Status != StepStatus.Continued ? Color : Color.Inherit)"><b>@step.Title</b></MudText>
57+
}
58+
else if (HeaderTextView != HeaderTextView.OnlyActiveText)
59+
{
60+
<MudText Color="@(step.Status != StepStatus.Continued ? Color : Color.Inherit)">@step.Title</MudText>
61+
}
62+
</MudText>
63+
}
3864
}
3965
</div>
40-
}
41-
</div>
42-
43-
if (_steps.Count - 1 != _steps.IndexOf(step) || MobileView == true)
44-
{
45-
<span class="@GetDashClassname(step)"></span>
46-
}
47-
48-
@if (MobileView == true)
49-
{
50-
<MudText Typo="Typo.body2" Color="@Color">@(_steps?.IndexOf(step) + 1) / @(_steps?.Count)</MudText>
66+
</div>
5167
}
68+
</div>
69+
@if (MobileView == true)
70+
{
71+
<MudText Style="@GetMobileStyle()" Typo="Typo.body2" Color="@Color">@(_steps?.IndexOf(currentStep) + 1) / @(_steps?.Count)</MudText>
5272
}
53-
54-
55-
</MudStack>
73+
<MudProgressLinear Vertical="@Vertical" Color="@Color" Value="@ProgressValue" Min="0" Max="100" Style="@GetProgressLinearStyle()" />
74+
75+
</div>
5676
@if (Loading)
5777
{
5878
<MudProgressLinear Indeterminate="true" Color="@Color" />
@@ -62,9 +82,9 @@
6282
<div class="@ContentClassname" style="@ContentStyle">
6383
@ChildContent
6484
</div>
65-
85+
6686
<div class="d-flex gap-4">
67-
87+
6888
@{
6989
bool showResultStep = ShowResultStep();
7090
}
@@ -99,7 +119,7 @@
99119
{
100120
if (!DisableStepResultIndicator && MobileView == false)
101121
{
102-
<MudButton Color="@Color" Variant="@Variant" Disabled="true">@(Steps[ActiveIndex].Status == StepStatus.Completed ? LocalizedStrings.Completed : LocalizedStrings.Skipped)</MudButton>
122+
<MudButton Color="@Color" Variant="Variant.Text" Disabled="true">@(Steps[ActiveIndex].Status == StepStatus.Completed ? LocalizedStrings.Completed : LocalizedStrings.Skipped)</MudButton>
103123
}
104124
}
105125
else if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Optional == true)
@@ -116,7 +136,7 @@
116136
{
117137
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SkipStep(ActiveIndex))">@LocalizedStrings.Skip</MudButton>
118138
}
119-
139+
120140
}
121141
}
122142
}
@@ -128,7 +148,7 @@
128148
if (IconActionButtons || MobileView)
129149
{
130150
<MudTooltip Text="@GetNextButtonString()" Delay="300">
131-
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Material.Filled.ChevronRight" OnClick="@(() => SetActiveIndex(1))"/>
151+
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Material.Filled.ChevronRight" OnClick="@(() => SetActiveIndex(1))" />
132152
</MudTooltip>
133153
}
134154
else
@@ -148,7 +168,7 @@
148168
{
149169
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => CompleteStep(ActiveIndex))">@GetNextButtonString()</MudButton>
150170
}
151-
171+
152172
}
153173
}
154174

0 commit comments

Comments
 (0)