Skip to content

Commit 00d7a87

Browse files
mckaragozmckaragoz
authored
Stepper: MobileView (#134)
* Stepper Mobile * SpeedDial ActivatorContent
1 parent 0333554 commit 00d7a87

File tree

5 files changed

+92
-26
lines changed

5 files changed

+92
-26
lines changed

‎CodeBeam.MudExtensions/Components/SpeedDial/MudSpeedDial.razor‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,16 @@
22
@inherits MudComponentBase
33

44
<div class="absolute" style="@Stylename" @onmouseenter="RootMouseEnter" @onmouseleave="WaitToClose">
5-
<MudFab Color="@Color" OnClick="MainButtonClick" Icon="@GetIcon()" Size="@Size" />
5+
@if(ActivatorContent != null)
6+
{
7+
<div tabindex="-1" @onclick="MainButtonClick">
8+
@ActivatorContent
9+
</div>
10+
}
11+
else
12+
{
13+
<MudFab Color="@Color" OnClick="MainButtonClick" Icon="@GetIcon()" Size="@Size" />
14+
}
615
<MudPopover class="d-flex align-center justify-center" @onmouseenter="PopoverMouseEnter" @onmouseleave="PopoverMouseLeave" Open="@Open" Paper="false" AnchorOrigin="_anchorOrigin" TransformOrigin="_transformOrigin" RelativeWidth="true">
716
<MudStack Class="@StackClassname" Row="_row">
817
@ChildContent

‎CodeBeam.MudExtensions/Components/SpeedDial/MudSpeedDial.razor.cs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@ public partial class MudSpeedDial : MudComponentBase
5959
[Parameter]
6060
public RenderFragment ChildContent { get; set; }
6161

62+
[Parameter]
63+
public RenderFragment ActivatorContent { get; set; }
64+
6265
Origin _origin = Origin.BottomRight;
6366
[Parameter]
6467
public Origin Origin

‎CodeBeam.MudExtensions/Components/Stepper/MudStepper.razor‎

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,29 @@
55
<CascadingValue Value="this" IsFixed="true">
66
<MudStack Class="@Class" Style="@Style"> @*Row="Vertical"*@
77
<MudStack Row="true" AlignItems="@(HeaderTextView == HeaderTextView.NewLine ? AlignItems.Start : AlignItems.Center)"> @*Row="!Vertical"*@
8+
89
@foreach (MudStep step in _steps)
910
{
10-
if (step.IsResultStep)
11+
if (step.IsResultStep || (MobileView == true && IsStepActive(step) == false))
1112
{
1213
continue;
1314
}
1415
bool active = IsStepActive(step);
1516
<div @onclick="@(Linear ? null : () => SetActiveIndex(step))" Class="@HeaderClassname">
16-
<MudAvatar Class="@((active || step.Status != StepStatus.Continued) ? $"mud-theme-{Color.ToDescriptionString()}" : null)" Variant="@Variant" Size="Size.Small">
17-
@if (step.Status == Enums.StepStatus.Completed)
18-
{
19-
<MudIcon Icon="@Icons.Material.Filled.Done" Size="Size.Small" />
20-
}
21-
else if (step.Status == StepStatus.Skipped)
22-
{
23-
<MudIcon Icon="@Icons.Material.Filled.Remove" Size="Size.Small" />
24-
}
25-
else
26-
{
27-
@(Steps.IndexOf(step) + 1)
28-
}
29-
</MudAvatar>
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" />
21+
}
22+
else if (step.Status == StepStatus.Skipped)
23+
{
24+
<MudIcon Icon="@Icons.Material.Filled.Remove" Size="Size.Small" />
25+
}
26+
else
27+
{
28+
@(Steps.IndexOf(step) + 1)
29+
}
30+
</MudAvatar>
3031
@if (HeaderTextView == HeaderTextView.All || HeaderTextView == HeaderTextView.NewLine || (HeaderTextView == HeaderTextView.OnlyActiveText && active))
3132
{
3233
<div>
@@ -39,11 +40,18 @@
3940
}
4041
</div>
4142

42-
if (_steps.Count - 1 != _steps.IndexOf(step))
43+
if (_steps.Count - 1 != _steps.IndexOf(step) || MobileView == true)
4344
{
4445
<span class="@GetDashClassname(step)"></span>
4546
}
47+
48+
@if (MobileView == true)
49+
{
50+
<MudText Typo="Typo.body2" Color="@Color">@(_steps?.IndexOf(step) + 1) / @(_steps?.Count)</MudText>
51+
}
4652
}
53+
54+
4755
</MudStack>
4856
<MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
4957
<div class="@ContentClassname" style="@ContentStyle">
@@ -64,7 +72,16 @@
6472
}
6573
else
6674
{
67-
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SetActiveIndex(-1))">@LocalizedStrings.Previous</MudButton>
75+
if (IconActionButtons || MobileView)
76+
{
77+
<MudTooltip Text="@LocalizedStrings.Previous" Delay="300">
78+
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Material.Filled.ChevronLeft" OnClick="@(() => SetActiveIndex(-1))" />
79+
</MudTooltip>
80+
}
81+
else
82+
{
83+
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SetActiveIndex(-1))">@LocalizedStrings.Previous</MudButton>
84+
}
6885
}
6986
}
7087

@@ -82,7 +99,7 @@
8299
{
83100
if ((ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued) || (ActiveIndex == Steps.Count - 1 && HasResultStep() == false && IsAllStepsCompleted()))
84101
{
85-
if (!DisableStepResultIndicator)
102+
if (!DisableStepResultIndicator && MobileView == false)
86103
{
87104
<MudButton Color="@Color" Variant="@Variant" Disabled="true">@(Steps[ActiveIndex].Status == StepStatus.Completed ? LocalizedStrings.Completed : LocalizedStrings.Skipped)</MudButton>
88105
}
@@ -91,7 +108,17 @@
91108
{
92109
if (!DisableSkipButton)
93110
{
94-
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SkipStep(ActiveIndex))">@LocalizedStrings.Skip</MudButton>
111+
if (IconActionButtons || MobileView)
112+
{
113+
<MudTooltip Text="@LocalizedStrings.Skip" Delay="300">
114+
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Material.Filled.SkipNext" OnClick="@(() => SkipStep(ActiveIndex))" />
115+
</MudTooltip>
116+
}
117+
else
118+
{
119+
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SkipStep(ActiveIndex))">@LocalizedStrings.Skip</MudButton>
120+
}
121+
95122
}
96123
}
97124
}
@@ -104,7 +131,17 @@
104131
}
105132
else
106133
{
107-
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => CompleteStep(ActiveIndex))">@GetNextButtonString()</MudButton>
134+
if (IconActionButtons || MobileView)
135+
{
136+
<MudTooltip Text="@GetNextButtonString()" Delay="300">
137+
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Material.Filled.ChevronRight" OnClick="@(() => CompleteStep(ActiveIndex))" />
138+
</MudTooltip>
139+
}
140+
else
141+
{
142+
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => CompleteStep(ActiveIndex))">@GetNextButtonString()</MudButton>
143+
}
144+
108145
}
109146
}
110147

‎CodeBeam.MudExtensions/Components/Stepper/MudStepper.razor.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,18 @@ protected string GetDashClassname(MudStep step)
9696
[Parameter]
9797
public bool DisableStepResultIndicator { get; set; }
9898

99+
/// <summary>
100+
///
101+
/// </summary>
102+
[Parameter]
103+
public bool MobileView { get; set; }
104+
105+
/// <summary>
106+
/// If true, action buttons have icons instead of text to gain more space.
107+
/// </summary>
108+
[Parameter]
109+
public bool IconActionButtons { get; set; }
110+
99111
/// <summary>
100112
/// The predefined Mud color for header and action buttons.
101113
/// </summary>

‎ComponentViewer.Docs/Pages/Examples/StepperExample1.razor‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
<MudStepper @ref="_stepper" ContentStyle="min-height: 400px" Linear="_linear" Vertical="_vertical" Color="_color" Variant="_variant"
99
DisableAnimation="_disableAnimation" DisablePreviousButton="_disablePreviousButton" DisableNextButton="_disableNextButton"
1010
DisableSkipButton="_disableSkipButton" DisableStepResultIndicator="_disableStepResultIndicator" HeaderTextView="_headerTextView"
11-
PreventStepChange="new Func<StepChangeDirection, bool>(CheckChange)" LocalizedStrings="GetLocalizedStrings()">
11+
PreventStepChange="new Func<StepChangeDirection, bool>(CheckChange)" LocalizedStrings="GetLocalizedStrings()"
12+
MobileView="_mobileView" IconActionButtons="_iconActionButtons">
1213
<ChildContent>
1314
<MudStep Title="Customer Info" StatusChanged="StatusChanged">
1415
<MudForm @ref="_form">
@@ -49,7 +50,7 @@
4950
<ActionContent>
5051
@if (!_stepper.IsAllStepsCompleted())
5152
{
52-
<MudButton Color="Color.Secondary" Variant="_variant" OnClick="@(() => NavigationManager.NavigateTo("/"))">Cancel</MudButton>
53+
<MudButton Color="Color.Secondary" Variant="_variant" OnClick="@(() => Snackbar.Add("Custom cancel button clicked.", Severity.Info))">Cancel</MudButton>
5354
}
5455
<MudSpacer />
5556
</ActionContent>
@@ -64,9 +65,11 @@
6465
<MudCheckBox @bind-Checked="_disableNextButton" Color="Color.Primary" Label="Disable Next Step Action Button" Dense="true" />
6566
<MudCheckBox @bind-Checked="_disableSkipButton" Color="Color.Primary" Label="Disable Skip Step Action Button" Dense="true" />
6667
<MudCheckBox @bind-Checked="_disableStepResultIndicator" Color="Color.Primary" Label="Disable Step Result Indicator" Dense="true" />
67-
<MudSwitch @bind-Checked="_addResultStep" Color="Color.Primary" Label="Has Result Step" />
68-
<MudSwitch @bind-Checked="_checkValidationBeforeComplete" Color="Color.Primary" Label="Check Validation Before Complete Step" />
69-
<MudSwitch @bind-Checked="_customLocalization" Color="Color.Primary" Label="Custom Localization (German)" />
68+
<MudSwitchM3 @bind-Checked="_mobileView" Color="Color.Primary" Label="Mobile View" />
69+
<MudSwitchM3 @bind-Checked="_iconActionButtons" Color="Color.Primary" Label="IconActionButtons" />
70+
<MudSwitchM3 @bind-Checked="_addResultStep" Color="Color.Primary" Label="Has Result Step" />
71+
<MudSwitchM3 @bind-Checked="_checkValidationBeforeComplete" Color="Color.Primary" Label="Check Validation Before Complete Step" />
72+
<MudSwitchM3 @bind-Checked="_customLocalization" Color="Color.Primary" Label="Custom Localization (German)" />
7073
<MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant">
7174
@foreach (Variant item in Enum.GetValues<Variant>())
7275
{
@@ -96,6 +99,8 @@
9699
MudForm _form2;
97100
bool _checkValidationBeforeComplete = false;
98101
bool _linear;
102+
bool _mobileView;
103+
bool _iconActionButtons;
99104
Variant _variant = Variant.Filled;
100105
HeaderTextView _headerTextView = HeaderTextView.All;
101106
bool _disableAnimation = false;

0 commit comments

Comments
 (0)