Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ThemeSwitcher component #929

Merged
merged 11 commits into from
Nov 4, 2024
Merged

ThemeSwitcher component #929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4c5d18f
ThemeSwitcher updates
gvreddy04 Nov 2, 2024
48177db
MainLayout and ThemeSwitcher updates
gvreddy04 Nov 3, 2024
b98adb1
Text updates
gvreddy04 Nov 3, 2024
909a654
RCL - Shared components updated
gvreddy04 Nov 3, 2024
87966f6
Route constants updated.
gvreddy04 Nov 3, 2024
8eb3127
Documentation - code cleanup - inprogress
gvreddy04 Nov 4, 2024
04158bb
Demo.RCL - Routing updates
gvreddy04 Nov 4, 2024
8fbcb9e
Demo.RCL - Sections updated
gvreddy04 Nov 4, 2024
fc61ad2
Demo.RCK - Section component updates
gvreddy04 Nov 4, 2024
9683d59
Demo.RCL - section component updates
gvreddy04 Nov 4, 2024
f11d0aa
Demo.RCL - Section component param updates
gvreddy04 Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 2 additions & 22 deletions BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
27 changes: 25 additions & 2 deletions BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 7 additions & 2 deletions BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down Expand Up @@ -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);
}
}
16 changes: 0 additions & 16 deletions BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand Down
31 changes: 18 additions & 13 deletions BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
Loading
Loading