Skip to content

Commit 8e44b84

Browse files
gvreddy04gvreddy04
authored
ThemeSwitcher component (#929)
* ThemeSwitcher updates * RCL - Shared components updated * Route constants added
1 parent 38037a7 commit 8e44b84

File tree

89 files changed

+3681
-3008
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+3681
-3008
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -67,28 +67,8 @@
6767
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
6868
<hr class="d-lg-none my-2 text-white-50">
6969
</li>
70-
<li class="nav-item dropdown">
71-
<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)">
72-
<span class="blazorbootstrap-theme-indicator"><i class="bi bi-sun-fill"></i></span>
73-
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
74-
</button>
75-
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
76-
<li class="blazorbootstrap-theme-item px-1">
77-
<button type="button" class="dropdown-item d-flex align-items-center active rounded" data-bs-theme-value="light" aria-pressed="true" @onclick="SetLightTheme">
78-
<i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto"></i>
79-
</button>
80-
</li>
81-
<li class="blazorbootstrap-theme-item px-1">
82-
<button type="button" class="dropdown-item d-flex align-items-center rounded" data-bs-theme-value="dark" aria-pressed="false" @onclick="SetDarkTheme">
83-
<i class="bi bi-moon-stars-fill me-2"></i>Dark<i class="bi bi-check2 d-none ms-auto"></i>
84-
</button>
85-
</li>
86-
<li class="blazorbootstrap-theme-item px-1">
87-
<button type="button" class="dropdown-item d-flex align-items-center rounded" data-bs-theme-value="auto" aria-pressed="false" @onclick="SetAutoTheme">
88-
<i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 d-none ms-auto"></i>
89-
</button>
90-
</li>
91-
</ul>
70+
<li class="nav-item">
71+
<ThemeSwitcher />
9272
</li>
9373
</ul>
9474
</div>

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,38 @@
33

44
<BlazorBootstrapLayout>
55
<HeaderSection>
6-
<ThemeSwitcher />
6+
<div>
7+
<a class="nav-link py-2 px-2" href="@githubUrl" target="_blank" rel="noopener">
8+
<i class="bi bi-github"></i>
9+
</a>
10+
</div>
11+
<div>
12+
<a class="nav-link py-2 px-2" href="@twitterUrl" target="_blank" rel="noopener">
13+
<i class="bi bi-twitter-x"></i>
14+
</a>
15+
</div>
16+
<div>
17+
<a class="nav-link py-2 px-2" href="@linkedInUrl" target="_blank" rel="noopener">
18+
<i class="bi bi-linkedin"></i>
19+
</a>
20+
</div>
21+
<div>
22+
<a class="nav-link py-2 px-2 pe-3" href="@openCollectiveUrl" target="_blank" rel="noopener">
23+
<i class="bi bi-opencollective"></i>
24+
</a>
25+
</div>
26+
<div>
27+
<div class="vr mt-2"></div>
28+
</div>
29+
<ThemeSwitcher Class="ps-3 ps-lg-2" OnThemeChanged="OnThemeChanged" />
730
</HeaderSection>
831
<SidebarSection>
932
<Sidebar2 Href="/"
1033
ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
1134
Title="Blazor Bootstrap"
1235
BadgeText="@Version"
1336
DataProvider="Sidebar2DataProvider"
14-
WidthUnit="Unit.Px"/>
37+
WidthUnit="Unit.Px" />
1538
</SidebarSection>
1639

1740
<ContentSection>

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ internal override IEnumerable<NavItem> GetNavItems()
1717
new (){ Id = "301", Text = "Images", Href = "/images", IconName = IconName.Image, ParentId = "3" },
1818

1919
new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success },
20-
new (){ Id = "400", Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" },
20+
new (){ Id = "400", Text = "Auto Complete", Href = "/form/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" },
2121
new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" },
2222
new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" },
2323
new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" },
@@ -90,12 +90,17 @@ internal override IEnumerable<NavItem> GetNavItems()
9090
new (){ Id = "605", Text = "Scatter Chart", Href = "/charts/scatter-chart", IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
9191

9292
new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
93-
new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" },
93+
new (){ Id = "700", Text = "Modal Service", Href = "/services/modal-service", IconName = IconName.WindowStack, ParentId = "7" },
9494

9595
new(){ Id = "19", Text = "Utilities", IconName = IconName.GearWideConnected, IconColor = IconColor.Info },
9696
new (){ Id = "1900", Text = "Color Utility", Href = "/utils/color-utility", IconName = IconName.Palette2, ParentId = "19" },
9797
};
9898

9999
return navItems;
100100
}
101+
102+
private void OnThemeChanged(string themeName)
103+
{
104+
JS.InvokeVoidAsync("updateDemoCodeThemeCss", themeName);
105+
}
101106
}

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,6 @@ public class MainLayoutBase : LayoutComponentBase
2020

2121
[Inject] protected IJSRuntime JS { get; set; } = default!;
2222

23-
protected override async Task OnAfterRenderAsync(bool firstRender)
24-
{
25-
if (firstRender)
26-
await JS.InvokeVoidAsync("initializeTheme");
27-
28-
await base.OnAfterRenderAsync(firstRender);
29-
}
30-
3123
protected override void OnInitialized()
3224
{
3325
version = $"v{Configuration["version"]}"; // example: v0.6.1
@@ -43,14 +35,6 @@ protected override void OnInitialized()
4335
base.OnInitialized();
4436
}
4537

46-
internal Task SetAutoTheme() => SetTheme("system");
47-
48-
internal Task SetDarkTheme() => SetTheme("dark");
49-
50-
internal Task SetLightTheme() => SetTheme("light");
51-
52-
internal async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName);
53-
5438
internal virtual async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
5539
{
5640
if (navItems is null)

‎BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
1-
@page "/ai/open-ai-chat"
1+
@attribute [Route(pageUrl)]
22

3-
<PageTitle>@title</PageTitle>
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
47

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6-
7-
<h1>Blazor Open AI Chat</h1>
8-
<div class="lead mb-3">Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.</div>
8+
<PageHero Heading="@pageTitle">
9+
<LeadSection>@pageDescription</LeadSection>
10+
</PageHero>
911

1012
<CarbonAds />
1113

12-
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
13-
<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>
14-
<Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
14+
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
15+
<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>
16+
<Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
17+
</Section>
1518

1619
@code{
17-
private string pageUrl = "/ai/open-ai-chat";
18-
private string title = "Blazor Open AI Chat Component";
19-
private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
20-
private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
20+
private const string pageUrl = RouteConstants.Demos_AI_Chat_Documentation;
21+
private const string pageTitle = "Blazor Open AI Chat Component";
22+
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
23+
private const string metaTitle = "Blazor Open AI Chat Component";
24+
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
25+
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
2126
}

0 commit comments

Comments
 (0)