diff --git a/README.md b/README.md index 8a8a1e8..5ad992f 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,4 @@ An Abp Blazor Theme based [Ant-Design-Blazor](https://github.com/ant-design-blazor/ant-design-blazor) -![left1](img/left1.png) - -![left2](img/left2.png) - -![top1](img/top1.png) - -![top2](img/top2.png) \ No newline at end of file +![introduce](img/introduce.gif) \ No newline at end of file diff --git a/img/introduce.gif b/img/introduce.gif new file mode 100644 index 0000000..17d5b63 Binary files /dev/null and b/img/introduce.gif differ diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/AbpAntDesignThemeOptions.cs b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/AbpAntDesignThemeOptions.cs index 8c1559b..8595be3 100644 --- a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/AbpAntDesignThemeOptions.cs +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/AbpAntDesignThemeOptions.cs @@ -1,4 +1,5 @@ using AntDesign; +using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings; namespace Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme; @@ -16,22 +17,11 @@ public class MenuOptions { public MenuTheme Theme { get; set; } - public MenuPlace Place { get; set; } + public MenuPlacement Placement { get; set; } public MenuOptions() { - Theme = MenuTheme.Light; - Place = MenuPlace.Left; - } - - public MenuMode GetMode() - { - return Place == MenuPlace.Left ? MenuMode.Inline : MenuMode.Horizontal; - } - - public enum MenuPlace - { - Top, - Left + Theme = MenuTheme.Dark; + Placement = MenuPlacement.Left; } } diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/AntDesignSettingDefinitionProvider.cs b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/AntDesignSettingDefinitionProvider.cs new file mode 100644 index 0000000..642287a --- /dev/null +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/AntDesignSettingDefinitionProvider.cs @@ -0,0 +1,15 @@ +using AntDesign; +using Volo.Abp.Settings; + +namespace Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings; + +public class AntDesignSettingDefinitionProvider : SettingDefinitionProvider +{ + public override void Define(ISettingDefinitionContext context) + { + context.Add( + new SettingDefinition(AntDesignSettingNames.MenuPlacement, MenuPlacement.Left.ToString()), + new SettingDefinition(AntDesignSettingNames.MenuTheme, MenuTheme.Dark.ToString()) + ); + } +} diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/AntDesignSettingNames.cs b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/AntDesignSettingNames.cs new file mode 100644 index 0000000..3de0b27 --- /dev/null +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/AntDesignSettingNames.cs @@ -0,0 +1,8 @@ +namespace Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings; + +public class AntDesignSettingNames +{ + public const string MenuPlacement = "AntDesignTheme.Menu.MenuPlacement"; + + public const string MenuTheme = "AntDesignTheme.Menu.Theme"; +} diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/AntDesignSettingsProvider.cs b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/AntDesignSettingsProvider.cs new file mode 100644 index 0000000..2fcca29 --- /dev/null +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/AntDesignSettingsProvider.cs @@ -0,0 +1,40 @@ +using System; +using System.Security.AccessControl; +using System.Threading.Tasks; +using AntDesign; +using AntDesign.Core.Helpers.MemberPath; +using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.Options; +using Volo.Abp.DependencyInjection; +using Volo.Abp.Settings; + +namespace Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings; + +public class AntDesignSettingsProvider : IAntDesignSettingsProvider, IScopedDependency +{ + //TODO use SettingProvider instead of AbpAntDesignThemeOptions + // [Inject] + // protected ISettingProvider SettingProvider { get; set; } + + [Inject] + public IOptions Options { get; set; } + + public delegate Task AntDesignSettingChangedHandler(); + + public event AntDesignSettingChangedHandler SettingChanged; + + public Task GetMenuPlacementAsync() + { + return Task.FromResult(Options.Value.Menu.Placement); + } + + public Task GetMenuThemeAsync() + { + return Task.FromResult(Options.Value.Menu.Theme); + } + + public Task TriggerSettingChanged() + { + return SettingChanged?.Invoke(); + } +} diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/IAntDesignSettingsProvider.cs b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/IAntDesignSettingsProvider.cs new file mode 100644 index 0000000..580c713 --- /dev/null +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/IAntDesignSettingsProvider.cs @@ -0,0 +1,16 @@ +using System; +using System.Threading.Tasks; +using AntDesign; + +namespace Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings; + +public interface IAntDesignSettingsProvider +{ + Task GetMenuPlacementAsync(); + + Task GetMenuThemeAsync(); + + Task TriggerSettingChanged(); + + public event AntDesignSettingsProvider.AntDesignSettingChangedHandler SettingChanged; +} diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/MenuPlacement.cs b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/MenuPlacement.cs new file mode 100644 index 0000000..f5cab45 --- /dev/null +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Settings/MenuPlacement.cs @@ -0,0 +1,7 @@ +namespace Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings; + +public enum MenuPlacement +{ + Top, + Left +} diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/DefaultLayout.razor b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/DefaultLayout.razor index 6efa5cd..9641278 100644 --- a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/DefaultLayout.razor +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/DefaultLayout.razor @@ -1,23 +1,18 @@ @inherits LayoutComponentBase @using Microsoft.Extensions.Options +@using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings @inject IOptions Options -@{ - var sideTheme = Options.Value.Menu.Theme == MenuTheme.Light ? SiderTheme.Light : SiderTheme.Dark; - var light = Options.Value.Menu.Theme == MenuTheme.Light; -} -@if (Options.Value.Menu.Place == MenuOptions.MenuPlace.Top) +@if (Options.Value.Menu.Placement == MenuPlacement.Top) { - var headerTopClass = light ? "ant-design-header-top ant-design-header-top-light" : "ant-design-header-top"; -
+
- + -
@@ -31,19 +26,18 @@ } else { - var headerLeftClass = light ? "ant-design-header-left ant-design-header-left-light" : "ant-design-header-left"; - + -
+
@if (Collapsed) { diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/DefaultLayout.razor.cs b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/DefaultLayout.razor.cs index 1b523f6..8aae13d 100644 --- a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/DefaultLayout.razor.cs +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/DefaultLayout.razor.cs @@ -1,10 +1,48 @@ -namespace Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Themes.AntDesignTheme; +using System.Threading.Tasks; +using AntDesign; +using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings; +using Microsoft.AspNetCore.Components; + +namespace Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Themes.AntDesignTheme; public partial class DefaultLayout { + [Inject] + protected IAntDesignSettingsProvider AntDesignSettingsProvider { get; set; } + protected bool Collapsed { get; set; } - protected void OnCollapse() + protected MenuPlacement MenuPlacement { get; set; } + + protected MenuTheme MenuTheme { get; set; } + + protected string HeaderClass { get; set; } + + protected SiderTheme SiderTheme { get; set; } + + protected override async Task OnInitializedAsync() + { + await SetLayout(); + AntDesignSettingsProvider.SettingChanged += OnSettingChanged; + } + + protected virtual async Task OnSettingChanged() + { + await SetLayout(); + StateHasChanged(); + } + + private async Task SetLayout() + { + MenuTheme = await AntDesignSettingsProvider.GetMenuThemeAsync(); + MenuPlacement = await AntDesignSettingsProvider.GetMenuPlacementAsync(); + + SiderTheme = MenuTheme == MenuTheme.Light ? SiderTheme.Light : SiderTheme.Dark; + HeaderClass = MenuPlacement == MenuPlacement.Top ? "ant-design-header-top" : "ant-design-header-left"; + HeaderClass = MenuTheme == MenuTheme.Light ? $"{HeaderClass} {HeaderClass}-light" : HeaderClass; + } + + protected virtual void OnCollapse() { Collapsed = !Collapsed; } diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/MainMenu.razor b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/MainMenu.razor index ddc4552..c5f7353 100644 --- a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/MainMenu.razor +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/MainMenu.razor @@ -1,4 +1,5 @@ - +@using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings + @if (Menu != null) { foreach (var menu in Menu.Items) diff --git a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/MainMenu.razor.cs b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/MainMenu.razor.cs index 34c1933..b115dd9 100644 --- a/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/MainMenu.razor.cs +++ b/modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/MainMenu.razor.cs @@ -1,5 +1,7 @@ using System; using System.Threading.Tasks; +using AntDesign; +using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Authorization; using Microsoft.Extensions.Options; @@ -13,13 +15,16 @@ public partial class MainMenu : IDisposable [Inject] protected IMenuManager MenuManager { get; set; } - - [Inject] - protected IOptions Options { get; set; } [Inject] protected AuthenticationStateProvider AuthenticationStateProvider { get; set; } + [Parameter] + public MenuPlacement Placement { get; set; } + + [Parameter] + public MenuTheme Theme { get; set; } + [Parameter] public bool Collapsed { get; set; } diff --git a/test/AntDesignUIApp/Pages/Index.razor b/test/AntDesignUIApp/Pages/Index.razor index fc124d2..c9fe55f 100644 --- a/test/AntDesignUIApp/Pages/Index.razor +++ b/test/AntDesignUIApp/Pages/Index.razor @@ -1,6 +1,15 @@ @page "/" +@using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings +
-

hello world

+ +

Menu Placement

+ + + +

Menu Theme

+ +
diff --git a/test/AntDesignUIApp/Pages/Index.razor.cs b/test/AntDesignUIApp/Pages/Index.razor.cs index 87ced08..3af40b9 100644 --- a/test/AntDesignUIApp/Pages/Index.razor.cs +++ b/test/AntDesignUIApp/Pages/Index.razor.cs @@ -1,8 +1,12 @@ -using Lsw.Abp.AntDesignUI; +using AntDesign; +using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme; using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.PageToolbars; +using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings; using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.Options; using Volo.Abp.AspNetCore.Components.Notifications; using Volo.Abp.AspNetCore.Components.Progression; +using BreadcrumbItem = Lsw.Abp.AntDesignUI.BreadcrumbItem; namespace AntDesignUIApp.Pages; @@ -17,6 +21,12 @@ public partial class Index : ComponentBase [Inject] public IUiPageProgressService UiPageProgressService { get; set; } + + [Inject] + protected IOptions Options { get; set; } + + [Inject] + protected IAntDesignSettingsProvider AntDesignSettingsProvider { get; set; } protected override void OnInitialized() { @@ -40,4 +50,16 @@ public partial class Index : ComponentBase await UiPageProgressService.Go(null); }, "double-right"); } + + private async Task ChangeMenuPlacement(MenuPlacement menuPlacement) + { + Options.Value.Menu.Placement = menuPlacement; + await AntDesignSettingsProvider.TriggerSettingChanged(); + } + + private async Task ChangeMenuTheme(MenuTheme menuTheme) + { + Options.Value.Menu.Theme = menuTheme; + await AntDesignSettingsProvider.TriggerSettingChanged(); + } } diff --git a/test/AntDesignUIApp/_Imports.razor b/test/AntDesignUIApp/_Imports.razor index e31a677..8b6f669 100644 --- a/test/AntDesignUIApp/_Imports.razor +++ b/test/AntDesignUIApp/_Imports.razor @@ -8,6 +8,7 @@ @using Microsoft.AspNetCore.Components.WebAssembly.Http @using Microsoft.JSInterop @using AntDesignUIApp +@using AntDesign @using Lsw.Abp.AntDesignUI @using Lsw.Abp.AntDesignUI.Components @using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Layout;