Add IAntDesignSettingsProvider

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)
+![introduce](img/introduce.gif)

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;
     }
 }

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())
+        );
+    }
+}

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";
+}

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<AbpAntDesignThemeOptions> Options { get; set; }
+    
+    public delegate Task AntDesignSettingChangedHandler();
+    
+    public event AntDesignSettingChangedHandler SettingChanged;
+
+    public Task<MenuPlacement> GetMenuPlacementAsync()
+    {
+        return Task.FromResult(Options.Value.Menu.Placement);
+    }
+
+    public Task<MenuTheme> GetMenuThemeAsync()
+    {
+        return Task.FromResult(Options.Value.Menu.Theme);
+    }
+
+    public Task TriggerSettingChanged()
+    {
+        return SettingChanged?.Invoke();
+    }
+}

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<MenuPlacement> GetMenuPlacementAsync();
+
+    Task<MenuTheme> GetMenuThemeAsync();
+
+    Task TriggerSettingChanged();
+    
+    public event AntDesignSettingsProvider.AntDesignSettingChangedHandler SettingChanged;
+}

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
+}

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<AbpAntDesignThemeOptions> 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";
     <Layout Class="ant-design-layout">
-        <Header Class="@headerTopClass">
+        <Header Class="@HeaderClass">
             <Branding/>
-            <MainMenu Collapsed="@Collapsed"/>
+            <MainMenu Placement="@MenuPlacement" Theme="@MenuTheme" Collapsed="@Collapsed"/>
             <Row Justify="end">
                 <NavToolbar/>
             </Row>
-            
         </Header>
         <Content Class="ant-design-content">
             <PageAlert/>
@@ -31,19 +26,18 @@
 }
 else
 {
-    var headerLeftClass = light ? "ant-design-header-left ant-design-header-left-light" : "ant-design-header-left";
     <Layout Class="ant-design-layout">
         <Sider
             Class="ant-design-side"
-            Theme="@sideTheme"
+            Theme="@SiderTheme"
             Collapsible
             NoTrigger
             Collapsed=Collapsed>
             <Branding Collapsed="@Collapsed"/>
-            <MainMenu Collapsed="@Collapsed"/>
+            <MainMenu Placement="@MenuPlacement" Theme="@MenuTheme" Collapsed="@Collapsed"/>
         </Sider>
         <Layout Class="ant-design-layout">
-            <Header Class="@headerLeftClass">
+            <Header Class="@HeaderClass">
                 <div style="float: left">
                     @if (Collapsed)
                     {

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;
     }

modules/Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme/Themes/AntDesignTheme/MainMenu.razor

@@ -1,4 +1,5 @@
-<Menu Mode="@Options.Value.Menu.GetMode()" Theme="@Options.Value.Menu.Theme" InlineCollapsed="@Collapsed">
+@using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings
+<Menu Mode="@(Placement == MenuPlacement.Left? MenuMode.Inline: MenuMode.Horizontal)" Theme="@Theme" InlineCollapsed="@Collapsed">
     @if (Menu != null)
     {
         foreach (var menu in Menu.Items)

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<AbpAntDesignThemeOptions> 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; }
 

test/AntDesignUIApp/Pages/Index.razor

@@ -1,6 +1,15 @@
 @page "/"
+@using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Settings
 
 <AbpPageHeader Title="Index" BreadcrumbItems="@BreadcrumbItems" Toolbar="@Toolbar"/>
+
 <div class="page-content">
-    <p>hello world</p>
+    
+    <h4>Menu Placement</h4>
+    <Button Type="@ButtonType.Primary" OnClick="() => ChangeMenuPlacement(MenuPlacement.Top)">Top</Button>
+    <Button Type="@ButtonType.Primary" OnClick="() => ChangeMenuPlacement(MenuPlacement.Left)">Left</Button>
+    
+    <h4>Menu Theme</h4>
+    <Button Type="@ButtonType.Primary" OnClick="() => ChangeMenuTheme(MenuTheme.Dark)">Dark</Button>
+    <Button Type="@ButtonType.Primary" OnClick="() => ChangeMenuTheme(MenuTheme.Light)">Light</Button>
 </div>

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<AbpAntDesignThemeOptions> 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();
+    }
 }

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;