ThemeSwitcher component (#929)

* ThemeSwitcher updates * RCL - Shared components updated * Route constants added
vikramlearning · Nov 4, 2024 · 8e44b84 · 8e44b84
1 parent 38037a7
commit 8e44b84
Show file tree

Hide file tree

Showing 89 changed files with 3,681 additions and 3,008 deletions.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor
@@ -67,28 +67,8 @@
                         <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
                         <hr class="d-lg-none my-2 text-white-50">
                     </li>
-                    <li class="nav-item dropdown">
-                        <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (light)">
-                            <span class="blazorbootstrap-theme-indicator"><i class="bi bi-sun-fill"></i></span>
-                            <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
-                        </button>
-                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
-                            <li class="blazorbootstrap-theme-item px-1">
-                                <button type="button" class="dropdown-item d-flex align-items-center active rounded" data-bs-theme-value="light" aria-pressed="true" @onclick="SetLightTheme">
-                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto"></i>
-                                </button>
-                            </li>
-                            <li class="blazorbootstrap-theme-item px-1">
-                                <button type="button" class="dropdown-item d-flex align-items-center rounded" data-bs-theme-value="dark" aria-pressed="false" @onclick="SetDarkTheme">
-                                    <i class="bi bi-moon-stars-fill me-2"></i>Dark<i class="bi bi-check2 d-none ms-auto"></i>
-                                </button>
-                            </li>
-                            <li class="blazorbootstrap-theme-item px-1">
-                                <button type="button" class="dropdown-item d-flex align-items-center rounded" data-bs-theme-value="auto" aria-pressed="false" @onclick="SetAutoTheme">
-                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 d-none ms-auto"></i>
-                                </button>
-                            </li>
-                        </ul>
+                    <li class="nav-item">
+                        <ThemeSwitcher />
                     </li>
                 </ul>
             </div>

diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor
@@ -3,15 +3,38 @@
 
 <BlazorBootstrapLayout>
     <HeaderSection>
-        <ThemeSwitcher />
+        <div>
+            <a class="nav-link py-2 px-2" href="@githubUrl" target="_blank" rel="noopener">
+                <i class="bi bi-github"></i>
+            </a>
+        </div>
+        <div>
+            <a class="nav-link py-2 px-2" href="@twitterUrl" target="_blank" rel="noopener">
+                <i class="bi bi-twitter-x"></i>
+            </a>
+        </div>
+        <div>
+            <a class="nav-link py-2 px-2" href="@linkedInUrl" target="_blank" rel="noopener">
+                <i class="bi bi-linkedin"></i>
+            </a>
+        </div>
+        <div>
+            <a class="nav-link py-2 px-2 pe-3" href="@openCollectiveUrl" target="_blank" rel="noopener">
+                <i class="bi bi-opencollective"></i>
+            </a>
+        </div>
+        <div>
+            <div class="vr mt-2"></div>
+        </div>
+        <ThemeSwitcher Class="ps-3 ps-lg-2" OnThemeChanged="OnThemeChanged" />
     </HeaderSection>
     <SidebarSection>
         <Sidebar2 Href="/"
                   ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
                   Title="Blazor Bootstrap"
                   BadgeText="@Version"
                   DataProvider="Sidebar2DataProvider"
-                  WidthUnit="Unit.Px"/>
+                  WidthUnit="Unit.Px" />
     </SidebarSection>
 
     <ContentSection>

diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs
@@ -17,7 +17,7 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "301", Text = "Images", Href = "/images", IconName = IconName.Image, ParentId = "3" },
 
             new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success },
-            new (){ Id = "400", Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" },
+            new (){ Id = "400", Text = "Auto Complete", Href = "/form/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" },
             new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" },
             new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" },
             new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" },
@@ -90,12 +90,17 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "605", Text = "Scatter Chart", Href = "/charts/scatter-chart", IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
 
             new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
-            new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" },
+            new (){ Id = "700", Text = "Modal Service", Href = "/services/modal-service", IconName = IconName.WindowStack, ParentId = "7" },
 
             new(){ Id = "19", Text = "Utilities", IconName = IconName.GearWideConnected, IconColor = IconColor.Info },
             new (){ Id = "1900", Text = "Color Utility", Href = "/utils/color-utility", IconName = IconName.Palette2, ParentId = "19" },
         };
 
         return navItems;
     }
+
+    private void OnThemeChanged(string themeName)
+    {
+        JS.InvokeVoidAsync("updateDemoCodeThemeCss", themeName);
+    }
 }
diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs
@@ -20,14 +20,6 @@ public class MainLayoutBase : LayoutComponentBase
 
     [Inject] protected IJSRuntime JS { get; set; } = default!;
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-            await JS.InvokeVoidAsync("initializeTheme");
-
-        await base.OnAfterRenderAsync(firstRender);
-    }
-
     protected override void OnInitialized()
     {
         version = $"v{Configuration["version"]}"; // example: v0.6.1
@@ -43,14 +35,6 @@ protected override void OnInitialized()
         base.OnInitialized();
     }
 
-    internal Task SetAutoTheme() => SetTheme("system");
-
-    internal Task SetDarkTheme() => SetTheme("dark");
-
-    internal Task SetLightTheme() => SetTheme("light");
-
-    internal async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName);
-
     internal virtual async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
     {
         if (navItems is null)

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor
@@ -1,21 +1,26 @@
-@page "/ai/open-ai-chat"
+@attribute [Route(pageUrl)]
 
-<PageTitle>@title</PageTitle>
+<PageMetaTags PageUrl="@pageUrl"
+              Title="@metaTitle"
+              Description="@metaDescription"
+              ImageUrl="@imageUrl" />
 
-<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
-
-<h1>Blazor Open AI Chat</h1>
-<div class="lead mb-3">Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.</div>
+<PageHero Heading="@pageTitle">
+    <LeadSection>@pageDescription</LeadSection>
+</PageHero>
 
 <CarbonAds />
 
-<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
-<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
-<Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
+<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
+    <div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
+    <Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
+</Section>
 
 @code{
-    private string pageUrl = "/ai/open-ai-chat";
-    private string title = "Blazor Open AI Chat Component";
-    private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
-    private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
+    private const string pageUrl = RouteConstants.Demos_AI_Chat_Documentation;
+    private const string pageTitle = "Blazor Open AI Chat Component";
+    private const string pageDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
+    private const string metaTitle = "Blazor Open AI Chat Component";
+    private const string metaDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
+    private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
 }