Skip to content

Commit 8c8f7b5

Browse files
giovanninoccogiovanninocco
committed
Update MudBlazor, refactor components, and improve UX
Updated MudBlazor to v7.6.0 across projects. Added `DisableElevation=true` to `MudButton` components in several files. Modified methods to include `CancellationToken` parameters. Adjusted `DialogOptions` to allow backdrop clicks. Replaced `@bind-Checked` with `@bind-Value` for `MudSwitch` and `MudCheckBox` components. Corrected indentation and formatting in multiple files. Added `<MudPopoverProvider />` to `MainLayout.razor`. Fixed base64 padding logic in `JwtAuthenticationService.cs`. Refactored `DarkTheme` and `LightTheme` classes for enhanced theming.
1 parent 8dd1570 commit 8c8f7b5

23 files changed

+137
-105
lines changed

‎src/template/src/Client/Client.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.8" PrivateAssets="all" />
1515
<PackageReference Include="Microsoft.AspNetCore.Localization" Version="2.2.0" />
1616
<PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="8.0.8" />
17-
<PackageReference Include="MudBlazor" Version="6.21.0" />
17+
<PackageReference Include="MudBlazor" Version="7.6.0" />
1818
</ItemGroup>
1919

2020
<ItemGroup>

‎src/template/src/Client/Components/EntityTable/AddEditModal.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,18 @@
3030
</DialogContent>
3131

3232
<DialogActions>
33-
<MudButton DisableElevation Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Cancel" OnClick="MudDialog.Cancel">
33+
<MudButton DisableElevation=true Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Cancel" OnClick="MudDialog.Cancel">
3434
@L["Cancel"]
3535
</MudButton>
3636
@if (IsCreate)
3737
{
38-
<MudButton DisableElevation Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Save" ButtonType="ButtonType.Submit" Color="Color.Success">
38+
<MudButton DisableElevation=true Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Save" ButtonType="ButtonType.Submit" Color="Color.Success">
3939
@L["Save"]
4040
</MudButton>
4141
}
4242
else
4343
{
44-
<MudButton DisableElevation Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Update" ButtonType="ButtonType.Submit" Color="Color.Secondary">
44+
<MudButton DisableElevation=true Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Update" ButtonType="ButtonType.Submit" Color="Color.Secondary">
4545
@L["Update"]
4646
</MudButton>
4747
}

‎src/template/src/Client/Components/EntityTable/EntityTable.razor.cs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,10 @@ private async Task ServerLoadDataAsync()
128128
}
129129
}
130130

131-
private Func<TableState, Task<TableData<TEntity>>>? ServerReloadFunc =>
131+
private Func<TableState, CancellationToken, Task<TableData<TEntity>>>? ServerReloadFunc =>
132132
Context.IsServerContext ? ServerReload : null;
133133

134-
private async Task<TableData<TEntity>> ServerReload(TableState state)
134+
private async Task<TableData<TEntity>> ServerReload(TableState state, CancellationToken cancellationToken)
135135
{
136136
if (!Loading && Context.ServerContext is not null)
137137
{
@@ -308,7 +308,7 @@ private async Task Delete(TEntity entity)
308308
{
309309
{ nameof(DeleteConfirmation.ContentText), string.Format(deleteContent, Context.EntityName, id) }
310310
};
311-
var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.Small, FullWidth = true, DisableBackdropClick = true };
311+
var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.Small, FullWidth = true, BackdropClick = true };
312312
var dialog = DialogService.Show<DeleteConfirmation>(L["Delete"], parameters, options);
313313
var result = await dialog.Result;
314314
if (!result.Canceled)

‎src/template/src/Client/Pages/Catalog/BrandAutocomplete.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ await ApiHelper.ExecuteCallGuardedAsync(
4747
}
4848
}
4949

50-
private async Task<IEnumerable<DefaultIdType>> SearchBrands(string value)
50+
private async Task<IEnumerable<DefaultIdType>> SearchBrands(string value, CancellationToken cancellationToken)
5151
{
5252
var filter = new SearchBrandsRequest
5353
{

‎src/template/src/Client/Pages/Identity/Account/Profile.razor‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@
2626
</MudButton>
2727
@if (!string.IsNullOrEmpty(_imageUrl))
2828
{
29-
<MudButton HtmlTag="label" DisableElevation Variant="Variant.Filled" Color="Color.Info" Size="Size.Small" Target="_blank"
30-
StartIcon="@Icons.Material.Filled.RemoveRedEye" Href="@_imageUrl" Style="margin-left: 5px;">
31-
@L["View"]
32-
</MudButton>
29+
<MudButton HtmlTag="label" DisableElevation=true Variant="Variant.Filled" Color="Color.Info" Size="Size.Small" Target="_blank"
30+
StartIcon="@Icons.Material.Filled.RemoveRedEye" Href="@_imageUrl" Style="margin-left: 5px;">
31+
@L["View"]
32+
</MudButton>
3333

3434
<MudButton HtmlTag="label" DisableElevation Variant="Variant.Filled" Color="Color.Error" Size="Size.Small"
35-
StartIcon="@Icons.Material.Filled.Delete" OnClick="RemoveImageAsync" Style="margin-left: 5px;">
36-
@L["Delete"]
37-
</MudButton>
35+
StartIcon="@Icons.Material.Filled.Delete" OnClick="RemoveImageAsync" Style="margin-left: 5px;">
36+
@L["Delete"]
37+
</MudButton>
3838
}
3939

4040
</div>

‎src/template/src/Client/Pages/Identity/Account/Profile.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ public async Task RemoveImageAsync()
8989
{
9090
{ nameof(DeleteConfirmation.ContentText), deleteContent }
9191
};
92-
var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.Small, FullWidth = true, DisableBackdropClick = true };
92+
var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.Small, FullWidth = true, BackdropClick = true };
9393
var dialog = DialogService.Show<DeleteConfirmation>(L["Delete"], parameters, options);
9494
var result = await dialog.Result;
9595
if (!result.Canceled)

‎src/template/src/Client/Pages/Identity/Roles/RolePermissions.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ else
6666
<MudHighlighter Text="@context.Description" HighlightedText="@_searchString" />
6767
</MudTd>
6868
<MudTd DataLabel="Permission">
69-
<MudCheckBox @bind-Checked="@context.Enabled" Disabled="@(!_canEditRoleClaims)" Color="Color.Secondary">
69+
<MudCheckBox @bind-Value="@context.Enabled" Disabled="@(!_canEditRoleClaims)" Color="Color.Secondary">
7070
</MudCheckBox>
7171
</MudTd>
7272
</RowTemplate>

‎src/template/src/Client/Pages/Identity/Users/UserProfile.razor‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,17 @@ else
2525
</MudCardHeader>
2626
<MudCardContent Class="pa-46" Style="padding:26px!important">
2727
<MudGrid>
28-
<MudSwitch @bind-Checked="@_active" Color="Color.Primary" Label="@_localizer["Active?"]"></MudSwitch>
29-
<MudCheckBox ReadOnly @bind-Checked="@_emailConfirmed" Disabled Label="@_localizer["Email Confirmed?"]" Color="Color.Secondary">
30-
</MudCheckBox>
31-
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto"
32-
OnClick="ToggleUserStatus" ButtonType="ButtonType.Submit">
33-
@_localizer["Save Changes"]
34-
</MudButton>
35-
</MudGrid>
36-
</MudCardContent>
37-
</MudCard>
38-
</MudItem>
28+
<MudSwitch @bind-Value="@_active" Color="Color.Primary" Label="@_localizer["Active?"]"></MudSwitch>
29+
<MudCheckBox ReadOnly @bind-Value="@_emailConfirmed" Disabled Label="@_localizer["Email Confirmed?"]" Color="Color.Secondary">
30+
</MudCheckBox>
31+
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto"
32+
OnClick="ToggleUserStatus" ButtonType="ButtonType.Submit">
33+
@_localizer["Save Changes"]
34+
</MudButton>
35+
</MudGrid>
36+
</MudCardContent>
37+
</MudCard>
38+
</MudItem>
3939
}
4040
</AuthorizeView>
4141
<MudItem xs="12" sm="4" md="4">
@@ -61,10 +61,10 @@ else
6161
@if (!string.IsNullOrEmpty(_imageUrl))
6262
{
6363
<MudButton HtmlTag="label" DisableElevation Variant="Variant.Filled" Color="Color.Info"
64-
Size="Size.Small" Target="_blank" StartIcon="@Icons.Material.Filled.RemoveRedEye" Href="@_imageUrl"
65-
Style="margin-left: 5px;">
66-
@_localizer["View"]
67-
</MudButton>
64+
Size="Size.Small" Target="_blank" StartIcon="@Icons.Material.Filled.RemoveRedEye" Href="@_imageUrl"
65+
Style="margin-left: 5px;">
66+
@_localizer["View"]
67+
</MudButton>
6868
}
6969
</div>
7070

‎src/template/src/Client/Pages/Identity/Users/UserRoles.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ else
5959
<MudHighlighter Text="@context.Description" HighlightedText="@_searchString" />
6060
</MudTd>
6161
<MudTd DataLabel="Role">
62-
<MudCheckBox @bind-Checked="@context.Enabled" Disabled="@(!_canEditUsers)" Color="Color.Secondary">
62+
<MudCheckBox @bind-Value="@context.Enabled" Disabled="@(!_canEditUsers)" Color="Color.Secondary">
6363
</MudCheckBox>
6464
</MudTd>
6565
</RowTemplate>

‎src/template/src/Client/Pages/Index.razor‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@
2424
</MudText>
2525
</MudItem>
2626
<MudItem xs="12" sm="12" md="12">
27-
<div class="mud-typography-align-center">
27+
<div class="mud-typography-align-center">
2828
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="https://genocs-blog.netlify.app/blazor-template/general/getting-started//" Target="_blank" StartIcon="@Icons.Material.Filled.Rocket">@L["Get Started"]</MudButton>
2929
<MudButton Variant="Variant.Outlined" Style="margin-left:5px" Color="Color.Default" Href="https://github.com/Genocs/genocs-library" Target="_blank" StartIcon="@Icons.Custom.Brands.GitHub">@L["Star on GitHub"]</MudButton>
3030
</div>
3131
</MudItem>
3232
<MudItem xs="12" sm="12" md="12">
33-
<MudText Align="Align.Center">@L["Version 6.0"]</MudText>
33+
<MudText Align="Align.Center">@L["Version 6.0"]</MudText>
3434
</MudItem>
3535
<MudItem xs="12" sm="12" md="12">
3636
<MudExpansionPanels>
@@ -39,14 +39,14 @@
3939
<MudButton Variant="Variant.Text" DisableElevation="true" Color="Color.Secondary" Link="https://genocs-blog.netlify.app/general/getting-started" Target="_blank">@L["Read The Guide"]</MudButton>
4040
</MudExpansionPanel>
4141
<MudExpansionPanel Class="mud-elevation-25" Text="@L["Important Links"]" MaxHeight="500">
42-
<MudList Clickable="true">
42+
<MudList T="string" Clickable="true">
4343
<MudListItem Text="@L["Github Repository : Do Not Forget to Leave a Star ;)"]" Href="https://github.com/Genocs/genocs-library" />
4444
<MudListItem Text="@L["Quick Start Guide"]" Href="https://genocs-blog.netlify.app/blazor-template/general/getting-started" />
4545
</MudList>
4646
</MudExpansionPanel>
4747
<MudExpansionPanel Class="mud-elevation-25" Text="@L["Learning Resources"]" MaxHeight="1000">
4848
@L["Here are few articles that should help you get started with Blazor."]
49-
<MudList Clickable="true">
49+
<MudList T="string" Clickable="true">
5050
<MudListItem Text="@L["Blazor For Beginners – Getting Started With Blazor"]" Href="https://genocs-blog.netlify.app/blog/getting-started-with-blazor/" />
5151
<MudListItem Text="@L["Exploring Blazor Project Structure"]" Href="https://genocs-blog.netlify.app/blog/exploring-blazor-project-structure/" />
5252
<MudListItem Text="@L["Onion Architecture In ASP.NET Core With CQRS – Detailed"]" Href="https://genocs-blog.netlify.app/blog/onion-architecture-in-aspnet-core/" />
@@ -56,9 +56,9 @@
5656
<MudListItem Text="@L["Building A Chat Application With Blazor, Identity, And SignalR"]" Href="https://genocs-blog.netlify.app/blog/realtime-chat-application-with-blazor/" />
5757
</MudList>
5858
</MudExpansionPanel>
59-
<MudExpansionPanel Class="mud-elevation-25" Text="@L["User Claims"]">
59+
<MudExpansionPanel Class="mud-elevation-25" Text="@L["User Claims"]">
6060
@L["Application Claims of the currently logged in user."]
61-
<MudList Dense="true">
61+
<MudList T="string" Dense="true">
6262
@if (Claims is not null)
6363
{
6464
@foreach (var claim in Claims)
@@ -71,11 +71,11 @@
7171
</MudListItem>
7272
}
7373
}
74-
</MudList>
74+
</MudList>
7575
</MudExpansionPanel>
7676
</MudExpansionPanels>
7777
</MudItem>
78-
<MudItem xs="12" sm="12" md="12">
78+
<MudItem xs="12" sm="12" md="12">
7979
<MudAlert Style="margin-top:10px;justify-content:center" Severity="Severity.Info"><MudLink Href="https://github.com/Genocs/blazor-template">@L["Liked this Template? Star us on GitHub!"]</MudLink></MudAlert>
8080
</MudItem>
8181
</MudGrid>

0 commit comments

Comments
 (0)