Merge branch 'feat_switch_theme'

ShaoHans · Oct 26, 2024 · 3b1b620 · 3b1b620
2 parents f83c061 + 074bcca
commit 3b1b620
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 35 deletions.
diff --git a/src/Abp.Blazor.Server.RadzenUI/Components/App.razor b/src/Abp.Blazor.Server.RadzenUI/Components/App.razor
@@ -1,8 +1,10 @@
-@using Microsoft.Extensions.Hosting
+@using Microsoft.AspNetCore.Http
+@using Microsoft.Extensions.Hosting
 @using Microsoft.Extensions.Options
 @inject IHostEnvironment Env
 @inject ThemeService ThemeService
 @inject IOptions<AbpRadzenUIOptions> AbpRadzenUIOptions
+@inject IHttpContextAccessor HttpContextAccessor
 
 <!DOCTYPE html>
 <html lang="en" dir="@(ThemeService.RightToLeft == true ? "rtl" : "ltr")">
@@ -13,29 +15,42 @@
     <link href="_content/AbpRadzen.Blazor.Server.UI/css/site.css" rel="stylesheet" />
     <HeadOutlet @rendermode="InteractiveServer" />
     <link rel="preload" href="_content/AbpRadzen.Blazor.Server.UI/fonts/MaterialSymbolsOutlined.woff2" as="font" type="font/woff2">
-    <RadzenTheme Theme="@AbpRadzenUIOptions.Value.Theme.Default" @rendermode="InteractiveServer" />
+    <RadzenTheme Theme="@_theme" @rendermode="InteractiveServer" />
 </head>
 <body class="rz-scrollbars">
-    <Routes @rendermode="InteractiveServer" />
-    <div id="blazor-error-ui">
-        @if (Env.IsDevelopment())
-        {
-            <text>
-                An unhandled exception has occurred. See browser dev tools for details.
-            </text>
-        }
-        else
-        {
-            <text>
-                An error has occurred. This app may no longer respond until reloaded.
-            </text>
-        }
-        <a href="/" class="reload">Reload</a>
-        <a class="dismiss">🗙</a>
-    </div>
+<Routes @rendermode="InteractiveServer" />
+<div id="blazor-error-ui">
+    @if (Env.IsDevelopment())
+    {
+        <text>
+            An unhandled exception has occurred. See browser dev tools for details.
+        </text>
+    }
+    else
+    {
+        <text>
+            An error has occurred. This app may no longer respond until reloaded.
+        </text>
+    }
+    <a href="/" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>
 
-    <script src="_framework/blazor.web.js"></script>
-    <script async src="_content/AbpRadzen.Blazor.Server.UI/js/highlight.pack.js"></script>
-    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
+<script src="_framework/blazor.web.js"></script>
+<script async src="_content/AbpRadzen.Blazor.Server.UI/js/highlight.pack.js"></script>
+<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
 </body>
-</html>
+</html>
+
+@code{
+    string _theme = "material-dark";
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _theme = Utils.AbpRadzenUICookieHelper.GetThemeCookie(HttpContextAccessor.HttpContext!)
+                ?? AbpRadzenUIOptions.Value.Theme.Default;
+    }
+
+}
diff --git a/src/Abp.Blazor.Server.RadzenUI/Components/Layout/ThemeSiderbar.razor b/src/Abp.Blazor.Server.RadzenUI/Components/Layout/ThemeSiderbar.razor
@@ -1,10 +1,13 @@
-@using Microsoft.Extensions.Options
+@using Microsoft.AspNetCore.Http
+@using Microsoft.Extensions.Options
 @inject ThemeService ThemeService
 @inject TooltipService TooltipService
 @inject QueryStringThemeService QueryStringThemeService
 @inject NavigationManager UriHelper
 @inject IOptions<AbpRadzenUIOptions> RadzenUIOptions
 @inject IJSRuntime JSRuntime
+@inject IHttpContextAccessor HttpContextAccessor
+
 
 <RadzenSidebar Responsive="false" @bind-Expanded="@SidebarExpanded" class="rz-sidebar-second" Style="--rz-sidebar-width: 370px; grid-area: rz-config-sidebar; background-color: var(--rz-body-background-color); color: var(--rz-text-color);">
     <RadzenStack class="rz-p-4" Gap="0">
@@ -182,16 +185,18 @@
 
     void ChangeTheme(object value)
     {
-        ThemeService.SetTheme($"{value}");
+        //ThemeService.SetTheme($"{value}");
+        var relativeUrl = UriHelper.Uri.RemovePreFix(UriHelper.BaseUri).EnsureStartsWith('/').EnsureStartsWith('~');
+        UriHelper.NavigateTo(
+            $"Theme/Switch?value={value}&returnUrl={relativeUrl}",
+            forceLoad: true
+        );
     }
 
     void WcagColorsTooltip(ElementReference elementReference, TooltipOptions? options = null) => TooltipService.Open(elementReference, ds =>
     @<div Style="width: 280px; white-space: normal; padding: 20px;">
         <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H4" Style="color: currentColor;">WCAG Compliant Colors</RadzenText>
         <RadzenText TextStyle="TextStyle.Body2" Style="color: currentColor;">Enable to preview themes with WCAG 2.2 AA compliant color swatches.</RadzenText>
-        @*<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-mt-4">
-            <NavLink class="rz-button rz-button-sm rz-secondary rz-text-align-center" href="/accessibility#wcag-colors">See how to use</NavLink>
-        </RadzenStack>*@
     </div>, options);
 
     void RtlTooltip(ElementReference elementReference, TooltipOptions? options = null) => TooltipService.Open(elementReference, ds =>
@@ -204,18 +209,11 @@
     @<div Style="width: 280px; white-space: normal; padding: 20px;">
         <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H4" Style="color: currentColor;">Use Premium Themes</RadzenText>
         <RadzenText TextStyle="TextStyle.Body2" Style="color: currentColor;">Premium themes can be used with an active Radzen Professional or Enterprise subscription.</RadzenText>
-        @*<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-mt-4">
-            <NavLink class="rz-button rz-button-sm rz-primary rz-text-align-center" href="https://www.radzen.com/pricing/blazor-components/" target="_blank">See Pricing</NavLink>
-            <NavLink class="rz-button rz-button-sm rz-secondary rz-text-align-center" href="/themes">Learn more</NavLink>
-        </RadzenStack>*@
     </div>, options);
 
     void FreeThemesTooltip(ElementReference elementReference, TooltipOptions? options = null) => TooltipService.Open(elementReference, ds =>
     @<div Style="width: 200px; white-space: normal; padding: 20px;">
         <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H4" Style="color: currentColor;">Use Free Themes</RadzenText>
         <RadzenText TextStyle="TextStyle.Body2" Style="color: currentColor;">These themes are free for commercial use.</RadzenText>
-        @*<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-mt-4">
-            <NavLink class="rz-button rz-button-sm rz-secondary rz-text-align-center" href="/themes">Learn more</NavLink>
-        </RadzenStack>*@
     </div>, options);
 }
diff --git a/src/Abp.Blazor.Server.RadzenUI/Controllers/ThemeController.cs b/src/Abp.Blazor.Server.RadzenUI/Controllers/ThemeController.cs
@@ -0,0 +1,15 @@
+using Abp.RadzenUI.Utils;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+
+namespace Abp.RadzenUI.Controllers;
+
+public class ThemeController : AbpControllerBase
+{
+    [HttpGet("/theme/switch")]
+    public IActionResult SwitchAsync(string value, string returnUrl = "~/")
+    {
+        AbpRadzenUICookieHelper.SetThemeCookie(HttpContext, value);
+        return Redirect(returnUrl);
+    }
+}
diff --git a/src/Abp.Blazor.Server.RadzenUI/Utils/AbpRadzenUICookieHelper.cs b/src/Abp.Blazor.Server.RadzenUI/Utils/AbpRadzenUICookieHelper.cs
@@ -0,0 +1,25 @@
+using Microsoft.AspNetCore.Http;
+
+namespace Abp.RadzenUI.Utils;
+
+public static class AbpRadzenUICookieHelper
+{
+    private static string ThemeKey = ".AbpRadzenUI.Theme";
+
+    public static void SetThemeCookie(HttpContext context, string theme)
+    {
+        context.Response.Cookies.Append(ThemeKey, theme, new CookieOptions
+        {
+            Path = "/",
+            HttpOnly = false,
+            IsEssential = true,
+            Expires = DateTimeOffset.Now.AddYears(10)
+        });
+    }
+
+    public static string? GetThemeCookie(HttpContext context)
+    {
+        context.Request.Cookies.TryGetValue(ThemeKey, out var theme);
+        return theme;
+    }
+}