Skip to content

Commit 01ba8fe

Browse files
mckaragozmckaragoz
committed
Vertical Mode and Mobile Header Index Text Fix
1 parent 77fc937 commit 01ba8fe

File tree

2 files changed

+94
-67
lines changed

2 files changed

+94
-67
lines changed

‎CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor‎

Lines changed: 68 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -8,85 +8,87 @@
88
}
99

1010
<CascadingValue Value="this" IsFixed="true">
11-
<MudStack Row="@Vertical" Class="@Class" Style="@Style">
12-
<div class="mud-stepper-inner-header-extended" style="@GetStepperStyle()">
13-
<div class="mud-stepper-sub-inner-header-extended" style=@GetStepperSubStyle()>
14-
@{
15-
MudStepExtended? currentStep = null;
16-
}
17-
@foreach (MudStepExtended step in _steps)
18-
{
19-
if (IsStepActive(step))
20-
{
21-
currentStep = step;
11+
<MudStack Class="@Class" Style="@Style">
12+
<MudStack Class="mud-stepper-header-content-wrapper-extended" Row="@Vertical">
13+
<div class="mud-stepper-inner-header-extended" style="@GetStepperStyle()">
14+
<div class="mud-stepper-sub-inner-header-extended" style=@GetStepperSubStyle()>
15+
@{
16+
MudStepExtended? currentStep = null;
2217
}
23-
if (step.IsResultStep || step.IsIntroStep || (MobileView == true && IsStepActive(step) == false))
18+
@foreach (MudStepExtended step in _steps)
2419
{
25-
continue;
26-
}
20+
if (IsStepActive(step))
21+
{
22+
currentStep = step;
23+
}
24+
if (step.IsResultStep || step.IsIntroStep || (MobileView == true && IsStepActive(step) == false))
25+
{
26+
continue;
27+
}
2728

28-
<div class="@GetStepClass()" style="@GetStepPercent()">
29-
<div @onclick="@(Linear ? null : () => GoToStepByReferenceAsync(step))" class="@HeaderClassname">
30-
@{
31-
bool active = IsStepActive(step);
32-
}
33-
@if (step.Template != null)
34-
{
35-
@step.Template(step)
36-
}
37-
else
38-
{
39-
@if (step.Status == StepStatus.Completed)
40-
{
41-
<MudBadge BadgeClass="mud-stepper-badge" Overlap="true" Bordered="true" Color="@Color" Icon="@Icons.Material.Filled.Done">
42-
<MudAvatar Style="@AvatarStylename" Color="@Color" Variant="@Variant" Size="@HeaderSize">
43-
@if (!string.IsNullOrWhiteSpace(step.Icon))
44-
{
45-
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
46-
}
47-
</MudAvatar>
48-
</MudBadge>
29+
<div class="@GetStepClass()" style="@GetStepPercent()">
30+
<div @onclick="@(Linear ? null! : () => GoToStepByReferenceAsync(step))" class="@HeaderClassname">
31+
@{
32+
bool active = IsStepActive(step);
4933
}
50-
else
34+
@if (step.Template != null)
5135
{
52-
Color incompleteColor = (HeaderBadgeView == HeaderBadgeView.GreyOutIncomplete) && !active ? Color.Transparent : @Color;
53-
<MudAvatar Style="@AvatarStylename" Color="@incompleteColor" Variant="@Variant" Size="@HeaderSize">
54-
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
55-
</MudAvatar>
36+
@step.Template(step)
5637
}
57-
@if (HeaderTextView == HeaderTextView.All || HeaderTextView == HeaderTextView.OnlyActiveText)
38+
else
5839
{
59-
<MudText Align="Align.Center" Class="mt-n1">
60-
@if (step.MudStepperExtended.GetActiveIndex() == @step.MudStepperExtended.Steps.IndexOf(@step))
61-
{
62-
<MudText Color="@(step.Status != StepStatus.Continued ? Color : Color.Inherit)"><b>@step.Title</b></MudText>
63-
}
64-
else if (HeaderTextView != HeaderTextView.OnlyActiveText)
65-
{
66-
<MudText Color="@(step.Status != StepStatus.Continued ? Color : Color.Inherit)">@step.Title</MudText>
67-
}
68-
</MudText>
40+
@if (step.Status == StepStatus.Completed)
41+
{
42+
<MudBadge BadgeClass="mud-stepper-badge" Overlap="true" Bordered="true" Color="@Color" Icon="@Icons.Material.Filled.Done">
43+
<MudAvatar Style="@AvatarStylename" Color="@Color" Variant="@Variant" Size="@HeaderSize">
44+
@if (!string.IsNullOrWhiteSpace(step.Icon))
45+
{
46+
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
47+
}
48+
</MudAvatar>
49+
</MudBadge>
50+
}
51+
else
52+
{
53+
Color incompleteColor = (HeaderBadgeView == HeaderBadgeView.GreyOutIncomplete) && !active ? Color.Transparent : @Color;
54+
<MudAvatar Style="@AvatarStylename" Color="@incompleteColor" Variant="@Variant" Size="@HeaderSize">
55+
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
56+
</MudAvatar>
57+
}
58+
@if (HeaderTextView == HeaderTextView.All || HeaderTextView == HeaderTextView.OnlyActiveText)
59+
{
60+
<MudText Align="Align.Center" Class="mt-n1">
61+
@if (step.MudStepperExtended.GetActiveIndex() == @step.MudStepperExtended.Steps.IndexOf(@step))
62+
{
63+
<MudText Color="@(step.Status != StepStatus.Continued ? Color : Color.Inherit)"><b>@step.Title</b></MudText>
64+
}
65+
else if (HeaderTextView != HeaderTextView.OnlyActiveText)
66+
{
67+
<MudText Color="@(step.Status != StepStatus.Continued ? Color : Color.Inherit)">@step.Title</MudText>
68+
}
69+
</MudText>
70+
}
6971
}
70-
}
72+
</div>
7173
</div>
72-
</div>
74+
}
75+
</div>
76+
@if (MobileView == true)
77+
{
78+
<MudText Style="@GetMobileStyle()" Typo="Typo.body2" Color="@Color">@GetMobileStepPositionText()</MudText>
7379
}
80+
<MudProgressLinear Vertical="@Vertical" Color="@Color" Value="@ProgressValue" Min="0" Max="100" Style="@GetProgressLinearStyle()" />
81+
7482
</div>
75-
@if (MobileView == true)
83+
@if (Loading)
7684
{
77-
<MudText Style="@GetMobileStyle()" Typo="Typo.body2" Color="@Color">@(_steps?.IndexOf(currentStep ?? new()) + 1) / @(_steps?.Count)</MudText>
85+
<MudProgressLinear Indeterminate="true" Color="@Color" />
7886
}
79-
<MudProgressLinear Vertical="@Vertical" Color="@Color" Value="@ProgressValue" Min="0" Max="100" Style="@GetProgressLinearStyle()" />
80-
81-
</div>
82-
@if (Loading)
83-
{
84-
<MudProgressLinear Indeterminate="true" Color="@Color" />
85-
}
86-
@StaticContent
87-
<div class="@ContentClassname" style="@ContentStyle">
88-
@ChildContent
89-
</div>
87+
@StaticContent
88+
<div class="@ContentClassname" style="@ContentStyle">
89+
@ChildContent
90+
</div>
91+
</MudStack>
9092
@if (ShowActions && (ShowPreviousButton || ShowNextButton || ShowSkipButton))
9193
{
9294
<div class="@ActionClassname">

‎CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ public partial class MudStepperExtended : MudComponentBase
2929
/// <summary>
3030
///
3131
/// </summary>
32-
protected string? ContentClassname => new CssBuilder($"mud-stepper-content-extended mud-stepper-ani-{_animateGuid.ToString()}")
32+
protected string? ContentClassname => new CssBuilder($"mud-stepper-content-extended mud-width-full mud-stepper-ani-{_animateGuid.ToString()}")
3333
.AddClass(ContentClass)
3434
.Build();
3535

@@ -116,6 +116,31 @@ public partial class MudStepperExtended : MudComponentBase
116116
}
117117
}
118118

119+
/// <summary>
120+
/// Returns a formatted string representing the current step position in the mobile step sequence.
121+
/// </summary>
122+
/// <remarks>The returned string is intended for display in mobile step navigation scenarios,
123+
/// providing users with a clear indication of their progress through the steps.</remarks>
124+
/// <returns>A string in the format "currentStep / totalSteps" indicating the active step position. Returns "Intro /
125+
/// totalSteps" if the intro step is active, "totalSteps / totalSteps" if the result step is active, or an empty
126+
/// string if the position cannot be determined.</returns>
127+
protected internal string GetMobileStepPositionText()
128+
{
129+
int totalSteps = Steps.Count;
130+
131+
if (HasIntroStep() && ActiveIndex == -1)
132+
return $"0 / {totalSteps}";
133+
134+
if (HasResultStep() && ActiveIndex == Steps.Count)
135+
return $"{totalSteps} / {totalSteps}";
136+
137+
if (ActiveIndex >= 0 && ActiveIndex < Steps.Count)
138+
return $"{ActiveIndex + 1} / {totalSteps}";
139+
140+
return string.Empty;
141+
}
142+
143+
119144
/// <summary>
120145
///
121146
/// </summary>

0 commit comments

Comments
 (0)