Browse Source

Enhance MudBlazor UI components with improved dialog focus and layout options

pull/25393/head
maliming 4 months ago
parent
commit
2a5fe38be3
No known key found for this signature in database GPG Key ID: A646B9CB645ECEA4
  1. 35
      framework/src/Volo.Abp.MudBlazorUI/MudBlazorUiPageProgressService.cs
  2. 1
      modules/account/src/Volo.Abp.Account.Blazor.MudBlazor/_Imports.razor
  3. 4
      modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/Components/FeatureManagementModal.razor
  4. 1
      modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/_Imports.razor
  5. 4
      modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/RoleManagement.razor
  6. 10
      modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/UserManagement.razor
  7. 1
      modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/_Imports.razor
  8. 22
      modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/PermissionManagementModal.razor
  9. 6
      modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/ResourcePermissionManagementModal.razor
  10. 1
      modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/_Imports.razor
  11. 2
      modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor
  12. 1
      modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/_Imports.razor
  13. 4
      modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/Pages/TenantManagement/TenantManagement.razor
  14. 1
      modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/_Imports.razor

35
framework/src/Volo.Abp.MudBlazorUI/MudBlazorUiPageProgressService.cs

@ -1,4 +1,5 @@
using System;
using System.Threading;
using System.Threading.Tasks;
using Volo.Abp.AspNetCore.Components.Progression;
using Volo.Abp.DependencyInjection;
@ -6,25 +7,43 @@ using Volo.Abp.DependencyInjection;
namespace Volo.Abp.MudBlazorUI;
[Dependency(ReplaceServices = true)]
public class MudBlazorUiPageProgressService : IUiPageProgressService, IScopedDependency
public class MudBlazorUiPageProgressService : IUiPageProgressService, IScopedDependency, IDisposable
{
/// <summary>
/// An event raised after the progress is changed.
/// </summary>
public event EventHandler<UiPageProgressEventArgs>? ProgressChanged;
protected virtual int HideDelayMs => 250;
private int _activeCount;
private UiPageProgressOptions _lastOptions = new();
private readonly Timer _hideTimer;
public MudBlazorUiPageProgressService()
{
_hideTimer = new Timer(_ => ProgressChanged?.Invoke(this, new UiPageProgressEventArgs(-1, _lastOptions)));
}
public Task Go(int? percentage, Action<UiPageProgressOptions>? options = null)
{
var uiPageProgressOptions = CreateDefaultOptions();
options?.Invoke(uiPageProgressOptions);
var opt = new UiPageProgressOptions();
options?.Invoke(opt);
_lastOptions = opt;
ProgressChanged?.Invoke(this, new UiPageProgressEventArgs(percentage, uiPageProgressOptions));
if (percentage == -1 && Interlocked.Decrement(ref _activeCount) <= 0)
{
Interlocked.Exchange(ref _activeCount, 0);
_hideTimer.Change(HideDelayMs, Timeout.Infinite);
}
else if (percentage == null && Interlocked.Increment(ref _activeCount) == 1)
{
_hideTimer.Change(Timeout.Infinite, Timeout.Infinite);
ProgressChanged?.Invoke(this, new UiPageProgressEventArgs(null, opt));
}
return Task.CompletedTask;
}
protected virtual UiPageProgressOptions CreateDefaultOptions()
{
return new UiPageProgressOptions();
}
public void Dispose() => _hideTimer.Dispose();
}

1
modules/account/src/Volo.Abp.Account.Blazor.MudBlazor/_Imports.razor

@ -3,3 +3,4 @@
@using Volo.Abp.MudBlazorUI
@using Volo.Abp.MudBlazorUI.Components
@using MudBlazor
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout

4
modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/Components/FeatureManagementModal.razor

@ -5,7 +5,7 @@
@using Volo.Abp.FeatureManagement.Localization
@inherits AbpFeatureManagementComponentBase
<MudDialog @bind-Visible="@_isVisible" Options="@(new DialogOptions { BackdropClick = false, MaxWidth = MaxWidth.Large, FullWidth = true, CloseOnEscapeKey = true })">
<MudDialog DefaultFocus="DefaultFocus.None" @bind-Visible="@_isVisible" Options="@(new DialogOptions { BackdropClick = false, MaxWidth = MaxWidth.Large, FullWidth = true, CloseOnEscapeKey = true })">
<TitleContent>
<MudText Typo="Typo.h6">@L["Features"]@ProviderKeyDisplayName</MudText>
</TitleContent>
@ -16,7 +16,7 @@
}
else
{
<MudTabs @bind-ActivePanelIndex="@_activeTabIndex" Variant="Variant.Pills" Position="Position.Left"
<MudTabs KeepPanelsAlive="true" @bind-ActivePanelIndex="@_activeTabIndex" Variant="Variant.Pills" Position="Position.Left"
PanelClass="pa-4">
@foreach (var group in Groups)
{

1
modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/_Imports.razor

@ -1,4 +1,5 @@
@using Microsoft.AspNetCore.Components.Web
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
@using MudBlazor
@using Volo.Abp.MudBlazorUI

4
modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/RoleManagement.razor

@ -33,7 +33,7 @@
@* ************************* CREATE DIALOG ************************* *@
@if (HasCreatePermission)
{
<MudDialog @ref="_createDialog" Options="@CreateDialogOptions">
<MudDialog DefaultFocus="DefaultFocus.FirstChild" @ref="_createDialog" Options="@CreateDialogOptions">
<TitleContent>
<MudText Typo="Typo.h6">@L["NewRole"]</MudText>
</TitleContent>
@ -58,7 +58,7 @@
@* ************************* EDIT DIALOG ************************* *@
@if (HasUpdatePermission)
{
<MudDialog @ref="_editDialog" Options="@EditDialogOptions">
<MudDialog DefaultFocus="DefaultFocus.FirstChild" @ref="_editDialog" Options="@EditDialogOptions">
<TitleContent>
<MudText Typo="Typo.h6">@L["Edit"]</MudText>
</TitleContent>

10
modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/UserManagement.razor

@ -44,16 +44,17 @@
@* ************************* CREATE DIALOG ************************* *@
@if (HasCreatePermission)
{
<MudDialog @ref="_createDialog" Options="@CreateDialogOptions">
<MudDialog DefaultFocus="DefaultFocus.None" @ref="_createDialog" Options="@CreateDialogOptions">
<TitleContent>
<MudText Typo="Typo.h6">@L["NewUser"]</MudText>
</TitleContent>
<DialogContent>
<MudForm @ref="@CreateFormRef" Model="@NewEntity">
<MudTabs @bind-ActivePanelIndex="@_createTabIndex" PanelClass="pa-4">
<MudTabs @bind-ActivePanelIndex="@_createTabIndex" PanelClass="pa-4" KeepPanelsAlive="true">
<MudTabPanel Text="@L["UserInformations"]">
<MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.UserName"
Label="@L["DisplayName:UserName"]"
AutoFocus="true"
Required="true"
RequiredError="@L["The {0} field is required.", L["DisplayName:UserName"]]" />
<MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.Name"
@ -108,17 +109,18 @@
@* ************************* EDIT DIALOG ************************* *@
@if (HasUpdatePermission)
{
<MudDialog @ref="_editDialog" Options="@EditDialogOptions">
<MudDialog DefaultFocus="DefaultFocus.None" @ref="_editDialog" Options="@EditDialogOptions">
<TitleContent>
<MudText Typo="Typo.h6">@L["Edit"]</MudText>
</TitleContent>
<DialogContent>
<MudForm @ref="@EditFormRef" Model="@EditingEntity">
<input type="hidden" @bind-value="@EditingEntity.ConcurrencyStamp" />
<MudTabs @bind-ActivePanelIndex="@_editTabIndex" PanelClass="pa-4">
<MudTabs @bind-ActivePanelIndex="@_editTabIndex" PanelClass="pa-4" KeepPanelsAlive="true">
<MudTabPanel Text="@L["UserInformations"]">
<MudTextField Margin="Margin.Dense" @bind-Value="@EditingEntity.UserName"
Label="@L["DisplayName:UserName"]"
AutoFocus="true"
Required="true"
RequiredError="@L["The {0} field is required.", L["DisplayName:UserName"]]" />
<MudTextField Margin="Margin.Dense" @bind-Value="@EditingEntity.Name"

1
modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/_Imports.razor

@ -1,6 +1,7 @@
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Forms
@using Volo.Abp.AspNetCore.Components.Web
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
@using Volo.Abp.MudBlazorUI
@using Volo.Abp.MudBlazorUI.Components
@using global::MudBlazor

22
modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/PermissionManagementModal.razor

@ -3,7 +3,7 @@
@using JetBrains.Annotations
@using Volo.Abp.PermissionManagement.Localization
<MudDialog @bind-Visible="@_isVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Large, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
<MudDialog DefaultFocus="DefaultFocus.None" @bind-Visible="@_isVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Large, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
<TitleContent>
<MudText Typo="Typo.h6">@L["Permissions"] - @_entityDisplayName</MudText>
</TitleContent>
@ -18,11 +18,11 @@
Immediate="true" />
</MudItem>
<MudItem xs="12" sm="4" Class="d-flex align-items-center">
<MudCheckBox Color="Color.Primary" UncheckedColor="Color.Default" T="bool"
<MudCheckBox Color="Color.Primary" UncheckedColor="Color.Default" T="bool?"
TriState="true"
Disabled="@_selectAllDisabled"
Value="@GrantAll"
Indeterminate="@GrantAny"
ValueChanged="@(async (bool b) => await GrantAllAsync(b))"
Value="@(GrantAny ? (bool?)null : (bool?)GrantAll)"
ValueChanged="@(async (bool? b) => await GrantAllAsync(b == true))"
Label="@L["SelectAllInAllTabs"]" />
</MudItem>
</MudGrid>
@ -32,7 +32,7 @@
@if (_groups != null && _groups.Any())
{
<MudTabs @bind-ActivePanelIndex="@_activeTabIndex"
<MudTabs KeepPanelsAlive="true" @bind-ActivePanelIndex="@_activeTabIndex"
Variant="Variant.Pills"
Position="Position.Left"
PanelClass="pa-4">
@ -41,11 +41,13 @@
<MudTabPanel Text="@($"{group.DisplayName} ({group.Permissions.Count(x => x.IsGranted)})")">
<div>
<MudCheckBox Color="Color.Primary" UncheckedColor="Color.Default"
T="bool"
T="bool?"
TriState="true"
Disabled="@(IsPermissionGroupDisabled(group))"
Value="@(group.Permissions.All(x => x.IsGranted))"
Indeterminate="@(group.Permissions.Any(x => x.IsGranted) && !group.Permissions.All(x => x.IsGranted))"
ValueChanged="@(async (bool b) => await GroupGrantAllChanged(b, group))"
Value="@(group.Permissions.Any(x => x.IsGranted) && !group.Permissions.All(x => x.IsGranted)
? (bool?)null
: (bool?)group.Permissions.All(x => x.IsGranted))"
ValueChanged="@(async (bool? b) => await GroupGrantAllChanged(b == true, group))"
Label="@L["SelectAllInThisTab"]" />
<MudDivider Class="my-2" />

6
modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/ResourcePermissionManagementModal.razor

@ -1,7 +1,7 @@
@using global::MudBlazor
@inherits Volo.Abp.AspNetCore.Components.AbpComponentBase
<MudDialog @bind-Visible="@_isVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.ExtraLarge, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
<MudDialog DefaultFocus="DefaultFocus.FirstChild" @bind-Visible="@_isVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.ExtraLarge, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
<TitleContent>
<MudText Typo="Typo.h6">@L["ResourcePermissions"] - @ResourceDisplayName</MudText>
</TitleContent>
@ -82,7 +82,7 @@
@* Create Resource Permission Dialog *@
@if (_createDialogVisible)
{
<MudDialog @bind-Visible="@_createDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
<MudDialog DefaultFocus="DefaultFocus.FirstChild" @bind-Visible="@_createDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
<TitleContent>
<MudText Typo="Typo.h6">@L["AddResourcePermission"]</MudText>
</TitleContent>
@ -127,7 +127,7 @@
@* Edit Resource Permission Dialog *@
@if (_editDialogVisible)
{
<MudDialog @bind-Visible="@_editDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
<MudDialog DefaultFocus="DefaultFocus.FirstChild" @bind-Visible="@_editDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
<TitleContent>
<MudText Typo="Typo.h6">@L["UpdateResourcePermission"]</MudText>
</TitleContent>

1
modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/_Imports.razor

@ -1,3 +1,4 @@
@using Microsoft.AspNetCore.Components.Web
@using Volo.Abp.AspNetCore.Components.Web
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
@using MudBlazor

2
modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor

@ -73,7 +73,7 @@
@if (HasSendTestEmailPermission)
{
<MudDialog @bind-Visible="@_sendTestEmailDialogVisible" Options="@(new DialogOptions { BackdropClick = false, MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true })">
<MudDialog DefaultFocus="DefaultFocus.FirstChild" @bind-Visible="@_sendTestEmailDialogVisible" Options="@(new DialogOptions { BackdropClick = false, MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true })">
<TitleContent>
<MudText Typo="Typo.h6">@L["SendTestEmail"]</MudText>
</TitleContent>

1
modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/_Imports.razor

@ -1,4 +1,5 @@
@using Microsoft.AspNetCore.Components.Web
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
@using MudBlazor
@using Volo.Abp.MudBlazorUI

4
modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/Pages/TenantManagement/TenantManagement.razor

@ -32,7 +32,7 @@
@* ************************* CREATE MODAL ************************* *@
@if (HasCreatePermission)
{
<MudDialog @ref="_createDialog" Options="@CreateDialogOptions">
<MudDialog DefaultFocus="DefaultFocus.FirstChild" @ref="_createDialog" Options="@CreateDialogOptions">
<TitleContent>
<MudText Typo="Typo.h6">@L["NewTenant"]</MudText>
</TitleContent>
@ -69,7 +69,7 @@
@* ************************* EDIT MODAL ************************* *@
@if (HasUpdatePermission)
{
<MudDialog @ref="_editDialog" Options="@EditDialogOptions">
<MudDialog DefaultFocus="DefaultFocus.FirstChild" @ref="_editDialog" Options="@EditDialogOptions">
<TitleContent>
<MudText Typo="Typo.h6">@L["Edit"]</MudText>
</TitleContent>

1
modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/_Imports.razor

@ -1,4 +1,5 @@
@using Microsoft.AspNetCore.Components.Web
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
@using MudBlazor
@using Volo.Abp.MudBlazorUI

Loading…
Cancel
Save