Skip to content

mudstepper ux updates #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Apr 26, 2023
Merged

mudstepper ux updates #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
b2f77ef
no message
Apr 7, 2023
0166ddf
no message
Apr 7, 2023
6930396
Merge branch 'dev' of https://github.com/segfault-/CodeBeam.MudBlazor…
Apr 11, 2023
b500436
Merge branch 'CodeBeamOrg:dev' into dev
segfault- Apr 12, 2023
d8a7eb2
Merge branch 'CodeBeamOrg:dev' into dev
segfault- Apr 13, 2023
3d86f9f
Merge branch 'CodeBeamOrg:dev' into dev
segfault- Apr 17, 2023
b98f433
mudstepper ux updates
Apr 17, 2023
ab2b831
mudstepper updates for pr
Apr 19, 2023
3cd3934
Merge branch 'CodeBeamOrg:dev' into mudstepper-ux-pr
segfault- Apr 19, 2023
d68a011
Merge branch 'dev' of https://github.com/segfault-/CodeBeam.MudBlazor…
Apr 21, 2023
daefaf3
Merge branch 'CodeBeamOrg:dev' into dev
segfault- Apr 24, 2023
d05959a
Merge branch 'dev' into mudstepper-ux-pr
Apr 24, 2023
8d65a10
bug fixes and updates for vertical
Apr 24, 2023
817fe89
mobile vertical updates
Apr 24, 2023
2b74897
localization
Apr 26, 2023
71dc049
Cleanup
mckaragoz Apr 26, 2023
a4c86ea
Last Cleanup
mckaragoz Apr 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions ...am.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/SelectExtended/StepperTest1.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,6 @@
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
}
</MudSelect>
<MudSelect @bind-Value="_headerTextView" Variant="Variant.Outlined" Label="Header Text View">
@foreach (HeaderTextView item in Enum.GetValues<HeaderTextView>())
{
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
}
</MudSelect>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="(() => _stepper.Reset())">Reset</MudButton>
</MudStack>
</MudItem>
Expand All @@ -127,6 +121,7 @@
int _activeIndex = 0;
bool _loading;
bool _showStaticContent = false;
bool _vertical = false;

[Parameter]
public int CheckChangeCount { get; set; }
Expand Down
22 changes: 21 additions & 1 deletion CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStep.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
using System.Text;
using System.Threading.Tasks;
using MudExtensions.Extensions;
using Microsoft.AspNetCore.Components.Rendering;

namespace MudExtensions
{
Expand All @@ -20,14 +21,24 @@ public partial class MudStep : MudComponentBase, IDisposable
.Build();

[CascadingParameter]
protected MudStepper MudStepper { get; set; }
public MudStepper MudStepper { get; set; }

/// <summary>
/// Step text to show on header.
/// </summary>
[Parameter]
public string Title { get; set; }


public bool IsActive
{
get
{
return MudStepper?.ActiveIndex == this.Number;
}
}


StepStatus _status = StepStatus.Continued;
/// <summary>
/// The step status flag to show step is continued, skipped or completed. Do not set it directly unless you know what you do exactly.
Expand Down Expand Up @@ -68,6 +79,15 @@ public StepStatus Status
[Parameter]
public EventCallback<StepStatus> StatusChanged { get; set; }

[Parameter]
public int Number { get; set; }

[Parameter]
public RenderFragment<MudStep> Template { get; set; }

[Parameter]
public string Icon { get; set; }

protected override void OnInitialized()
{
base.OnInitialized();
Expand Down
46 changes: 46 additions & 0 deletions CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepTemplate.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
@namespace MudExtensions
@inherits ComponentBase

@if (Step != null)
{
@if (Step.Status == MudExtensions.Enums.StepStatus.Completed)
{
<MudBadge Content="3" Overlap="true" Class="" Icon="@Icons.Material.Filled.Done">
<MudAvatar Class="mud-theme-primary" Style="z-index:20;" Variant="Variant.Filled">
@if(!string.IsNullOrWhiteSpace(Step.Icon))
{
<MudIcon Class="pa-1" Icon="@Step.Icon" Size="Size.Large" />
}
</MudAvatar>
</MudBadge>
<MudText>

@if (Step.MudStepper.GetActiveIndex() == @Step.MudStepper.Steps.IndexOf(@Step))
{

<MudText><b>@Step.Title</b></MudText>
}
else
{
<MudText>@Step.Title</MudText>
}
</MudText>
}
else
{
<MudAvatar Class="mud-theme-primary" Style="z-index:20;" Variant="Variant.Filled">
<MudIcon Class="pa-1" Icon="@Step.Icon" Size="Size.Large" />
</MudAvatar>
<MudText>

@if (Step.MudStepper.GetActiveIndex() == @Step.MudStepper.Steps.IndexOf(@Step))
{
<MudText><b>@Step.Title</b></MudText>
}
else
{
<MudText>@Step.Title</MudText>
}
</MudText>
}
}
15 changes: 15 additions & 0 deletions CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepTemplate.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Components;

namespace MudExtensions
{
public partial class MudStepTemplate : ComponentBase
{
[Parameter]
public MudStep? Step { get; set; }
public MudStepTemplate()
: base()
{

}
}
}
112 changes: 66 additions & 46 deletions CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,76 @@
@using MudExtensions.Enums

<CascadingValue Value="this" IsFixed="true">
<MudStack Class="@Class" Style="@Style"> @*Row="Vertical"*@
<MudStack Row="true" AlignItems="@(HeaderTextView == HeaderTextView.NewLine ? AlignItems.Start : AlignItems.Center)"> @*Row="!Vertical"*@

@foreach (MudStep step in _steps)
{
if (step.IsResultStep || (MobileView == true && IsStepActive(step) == false))
{
continue;
<MudStack Row="@Vertical" Class="@Class" Style="@Style">
<div style="@GetStepperStyle()">
<div style=@GetStepperSubStyle()>
@{
MudStep currentStep = null;
}
bool active = IsStepActive(step);
<div @onclick="@(Linear ? null : () => SetActiveIndex(step))" Class="@HeaderClassname">
<MudAvatar Class="@((active || step.Status != StepStatus.Continued) ? $"mud-theme-{Color.ToDescriptionString()}" : null)" Variant="@Variant" Size="Size.Small">
@if (step.Status == Enums.StepStatus.Completed)
{
<MudIcon Icon="@Icons.Material.Filled.Done" Size="Size.Small" />
@foreach (MudStep step in _steps)
{
if (IsStepActive(step))
{
currentStep = step;
}
if (step.IsResultStep || (MobileView == true && IsStepActive(step) == false))
{
continue;
}

<div style="@GetStepPercent()">
<div @onclick="@(Linear ? null : () => SetActiveIndex(step))" class="@HeaderClassname">
@{
bool active = IsStepActive(step);
}
else if (step.Status == StepStatus.Skipped)
@if (step.Template != null)
{
<MudIcon Icon="@Icons.Material.Filled.Remove" Size="Size.Small" />
@step.Template(step)
}
else
{
@(Steps.IndexOf(step) + 1)
}
</MudAvatar>
@if (HeaderTextView == HeaderTextView.All || HeaderTextView == HeaderTextView.NewLine || (HeaderTextView == HeaderTextView.OnlyActiveText && active))
{
<div>
<MudText Align="Align.Center" Color="@(active ? Color : Color.Default)" Style="@(active ? "font-weight: 900" : null)">@step.Title</MudText>
@if (step.Optional == true)
{
<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>
@if (step.Status == MudExtensions.Enums.StepStatus.Completed)
{
<MudBadge BadgeClass="mud-stepper-badge" Overlap="true" Bordered="true" Color="@Color" Icon="@Icons.Material.Filled.Done">
<MudAvatar Style="@AvatarStylename" Color="@Color" Variant="@Variant" Size="@HeaderSize">
@if (!string.IsNullOrWhiteSpace(step.Icon))
{
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
}
</MudAvatar>
</MudBadge>
}
else
{
<MudAvatar Style="@AvatarStylename" Color="@Color" Variant="@Variant" Size="@HeaderSize">
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
</MudAvatar>
}
@if (HeaderTextView == HeaderTextView.All || HeaderTextView == HeaderTextView.OnlyActiveText)
{
<MudText Class="mt-n1">
@if (step.MudStepper.GetActiveIndex() == @step.MudStepper.Steps.IndexOf(@step))
{
<MudText Color="@(step.Status != StepStatus.Continued ? Color : Color.Inherit)"><b>@step.Title</b></MudText>
}
else if (HeaderTextView != HeaderTextView.OnlyActiveText)
{
<MudText Color="@(step.Status != StepStatus.Continued ? Color : Color.Inherit)">@step.Title</MudText>
}
</MudText>
}
}
</div>
}
</div>

if (_steps.Count - 1 != _steps.IndexOf(step) || MobileView == true)
{
<span class="@GetDashClassname(step)"></span>
}

@if (MobileView == true)
{
<MudText Typo="Typo.body2" Color="@Color">@(_steps?.IndexOf(step) + 1) / @(_steps?.Count)</MudText>
</div>
}
</div>
@if (MobileView == true)
{
<MudText Style="@GetMobileStyle()" Typo="Typo.body2" Color="@Color">@(_steps?.IndexOf(currentStep) + 1) / @(_steps?.Count)</MudText>
}

</MudStack>
<MudProgressLinear Vertical="@Vertical" Color="@Color" Value="@ProgressValue" Min="0" Max="100" Style="@GetProgressLinearStyle()" />

</div>
@if (Loading)
{
<MudProgressLinear Indeterminate="true" Color="@Color" />
Expand All @@ -62,9 +82,9 @@
<div class="@ContentClassname" style="@ContentStyle">
@ChildContent
</div>

<div class="d-flex gap-4">

@{
bool showResultStep = ShowResultStep();
}
Expand Down Expand Up @@ -99,7 +119,7 @@
{
if (!DisableStepResultIndicator && MobileView == false)
{
<MudButton Color="@Color" Variant="@Variant" Disabled="true">@(Steps[ActiveIndex].Status == StepStatus.Completed ? LocalizedStrings.Completed : LocalizedStrings.Skipped)</MudButton>
<MudButton Color="@Color" Variant="Variant.Text" Disabled="true">@(Steps[ActiveIndex].Status == StepStatus.Completed ? LocalizedStrings.Completed : LocalizedStrings.Skipped)</MudButton>
}
}
else if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Optional == true)
Expand All @@ -116,7 +136,7 @@
{
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SkipStep(ActiveIndex))">@LocalizedStrings.Skip</MudButton>
}

}
}
}
Expand All @@ -128,7 +148,7 @@
if (IconActionButtons || MobileView)
{
<MudTooltip Text="@GetNextButtonString()" Delay="300">
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Material.Filled.ChevronRight" OnClick="@(() => SetActiveIndex(1))"/>
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Material.Filled.ChevronRight" OnClick="@(() => SetActiveIndex(1))" />
</MudTooltip>
}
else
Expand All @@ -148,7 +168,7 @@
{
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => CompleteStep(ActiveIndex))">@GetNextButtonString()</MudButton>
}

}
}

Expand Down
Loading