From 181347df85a99884b1fb04c7087795e94668af13 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 26 Oct 2024 14:57:41 +0530 Subject: [PATCH 1/5] BlazorBootstrap Layout - updates --- .../Components/Layout/MainLayout.razor | 44 ++++++++++++++++++- .../Layout/MainLayoutBaseFooter.razor | 8 ++-- .../Layout/BlazorBootstrapLayout.razor | 32 ++++++++++++++ .../Layout/BlazorBootstrapLayout.razor.cs | 16 +++++++ .../Layout/BlazorBootstrapLayout.razor.css | 0 5 files changed, 94 insertions(+), 6 deletions(-) create mode 100644 blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor create mode 100644 blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs create mode 100644 blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.css diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor index 2298ef346..e16671691 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor @@ -1,7 +1,47 @@ @namespace BlazorBootstrap.Demo.RCL @inherits MainLayoutBase -
+ + + + + + + + + + + @Body + + + + + If you like Blazor Bootstrap, give it a star on GitHub! + + + + + + + + + + +@*
- + *@ diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor index c35d8360e..913a467ce 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor @@ -1,8 +1,8 @@ @namespace BlazorBootstrap.Demo.RCL @inherits ComponentBase - *@ diff --git a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor new file mode 100644 index 000000000..e1e81bd3b --- /dev/null +++ b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor @@ -0,0 +1,32 @@ +@namespace BlazorBootstrap +@inherits LayoutComponentBase + +
+ + @SidebarSection + +
+ @if (HeaderSection is not null) + { +
+ @HeaderSection +
+ } + +
+
+ @ContentSection +
+
+ + @if (FooterSection is not null) + { + + } + +
+
\ No newline at end of file diff --git a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs new file mode 100644 index 000000000..19856351c --- /dev/null +++ b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs @@ -0,0 +1,16 @@ +namespace BlazorBootstrap; + +public partial class BlazorBootstrapLayout : LayoutComponentBase +{ + [Parameter] + public RenderFragment? SidebarSection { get; set; } + + [Parameter] + public RenderFragment? HeaderSection { get; set; } + + [Parameter] + public RenderFragment? ContentSection { get; set; } + + [Parameter] + public RenderFragment? FooterSection { get; set; } +} diff --git a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.css b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.css new file mode 100644 index 000000000..e69de29bb From b50d47d17b5ec4024ea4448dbaec247079526d88 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 26 Oct 2024 22:24:31 +0530 Subject: [PATCH 2/5] BlazorBootstrapLayout - updates --- .../Components/Layout/MainLayout.razor | 58 ++++-- .../Layout/MainLayoutBaseFooter.razor | 8 +- .../BlazorBootstrapLayoutComponentBase.cs | 165 ++++++++++++++++++ .../Layout/BlazorBootstrapLayout.razor | 23 +-- .../Layout/BlazorBootstrapLayout.razor.cs | 29 ++- blazorbootstrap/wwwroot/blazor.bootstrap.css | 11 ++ 6 files changed, 253 insertions(+), 41 deletions(-) create mode 100644 blazorbootstrap/Components/Core/BlazorBootstrapLayoutComponentBase.cs diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor index e16671691..39a0fc215 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor @@ -1,11 +1,11 @@ @namespace BlazorBootstrap.Demo.RCL @inherits MainLayoutBase - + - - + @Body @@ -26,18 +26,48 @@
- + - +
+
+ + Blazor Bootstrap + Blazor Bootstrap + +
    +
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • +
  • Code licensed Apache License 2.0.
  • +
  • Currently @Version.
  • +
+
+
+
Links
+ +
+ +
+
Community
+ +
+
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor index 913a467ce..c35d8360e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor @@ -1,8 +1,8 @@ @namespace BlazorBootstrap.Demo.RCL @inherits ComponentBase -@* diff --git a/blazorbootstrap/Components/Core/BlazorBootstrapLayoutComponentBase.cs b/blazorbootstrap/Components/Core/BlazorBootstrapLayoutComponentBase.cs new file mode 100644 index 000000000..d4fd797d5 --- /dev/null +++ b/blazorbootstrap/Components/Core/BlazorBootstrapLayoutComponentBase.cs @@ -0,0 +1,165 @@ +using Microsoft.Extensions.Configuration; + +namespace BlazorBootstrap; + +public abstract class BlazorBootstrapLayoutComponentBase : LayoutComponentBase, IDisposable, IAsyncDisposable +{ + #region Fields and Constants + + private bool isAsyncDisposed; + + private bool isDisposed; + + #endregion + + #region Methods + + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + IsRenderComplete = true; + + await base.OnAfterRenderAsync(firstRender); + } + + /// + protected override void OnInitialized() + { + Id ??= IdUtility.GetNextId(); + + base.OnInitialized(); + } + + public static string BuildClassNames(params (string? cssClass, bool when)[] cssClassList) + { + var list = new HashSet(); + + if (cssClassList is not null && cssClassList.Any()) + foreach (var (cssClass, when) in cssClassList) + if (!string.IsNullOrWhiteSpace(cssClass) && when) + list.Add(cssClass); + + if (list.Any()) + return string.Join(" ", list); + + return string.Empty; + } + + public static string BuildClassNames(string? userDefinedCssClass, params (string? cssClass, bool when)[] cssClassList) + { + var list = new HashSet(); + + if (cssClassList is not null && cssClassList.Any()) + foreach (var (cssClass, when) in cssClassList) + if (!string.IsNullOrWhiteSpace(cssClass) && when) + list.Add(cssClass); + + if (!string.IsNullOrWhiteSpace(userDefinedCssClass)) + list.Add(userDefinedCssClass.Trim()); + + if (list.Any()) + return string.Join(" ", list); + + return string.Empty; + } + + public static string BuildStyleNames(string? userDefinedCssStyle, params (string? cssStyle, bool when)[] cssStyleList) + { + var list = new HashSet(); + + if (cssStyleList is not null && cssStyleList.Any()) + foreach (var (cssStyle, when) in cssStyleList) + if (!string.IsNullOrWhiteSpace(cssStyle) && when) + list.Add(cssStyle); + + if (!string.IsNullOrWhiteSpace(userDefinedCssStyle)) + list.Add(userDefinedCssStyle.Trim()); + + if (list.Any()) + return string.Join(';', list); + + return string.Empty; + } + + /// + /// + public void Dispose() + { + Dispose(true); + GC.SuppressFinalize(this); + } + + /// + /// + public async ValueTask DisposeAsync() + { + await DisposeAsyncCore(true).ConfigureAwait(false); + + Dispose(false); + GC.SuppressFinalize(this); + } + + protected virtual void Dispose(bool disposing) + { + if (!isDisposed) + { + if (disposing) + { + // cleanup + } + + isDisposed = true; + } + } + + protected virtual ValueTask DisposeAsyncCore(bool disposing) + { + if (!isAsyncDisposed) + { + if (disposing) + { + // cleanup + } + + isAsyncDisposed = true; + } + + return ValueTask.CompletedTask; + } + + #endregion + + #region Properties, Indexers + + [Parameter(CaptureUnmatchedValues = true)] public Dictionary AdditionalAttributes { get; set; } = default!; + + [Parameter] public string? Class { get; set; } + + protected virtual string? ClassNames => Class; + + [Inject] protected IConfiguration Configuration { get; set; } = default!; + + public ElementReference Element { get; set; } + + [Parameter] public string? Id { get; set; } + + protected bool IsRenderComplete { get; private set; } + + [Inject] protected IJSRuntime JSRuntime { get; set; } = default!; + + [Parameter] public string? Style { get; set; } + + protected virtual string? StyleNames => Style; + + #endregion + + #region Other + + ~BlazorBootstrapLayoutComponentBase() + { + Dispose(false); + } + + #endregion +} diff --git a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor index e1e81bd3b..fbc86571f 100644 --- a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor +++ b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor @@ -1,32 +1,27 @@ @namespace BlazorBootstrap -@inherits LayoutComponentBase +@inherits BlazorBootstrapLayoutComponentBase -
+
@SidebarSection -
+
@if (HeaderSection is not null) { -
+
@HeaderSection
} -
-
- @ContentSection -
+
+ @ContentSection
- + @if (FooterSection is not null) { -
\ No newline at end of file diff --git a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs index 19856351c..d7d472062 100644 --- a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs +++ b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs @@ -1,16 +1,27 @@ namespace BlazorBootstrap; -public partial class BlazorBootstrapLayout : LayoutComponentBase +public partial class BlazorBootstrapLayout : BlazorBootstrapLayoutComponentBase { - [Parameter] - public RenderFragment? SidebarSection { get; set; } + #region Properties, Indexers - [Parameter] - public RenderFragment? HeaderSection { get; set; } + protected override string? ClassNames => BuildClassNames(Class, ("bb-page", true)); - [Parameter] - public RenderFragment? ContentSection { get; set; } + [Parameter] public RenderFragment? ContentSection { get; set; } + [Parameter] public string? ContentSectionCssClass { get; set; } + protected string? ContentSectionCssClassNames => BuildClassNames(ContentSectionCssClass, ("px-4 py-2", true)); - [Parameter] - public RenderFragment? FooterSection { get; set; } + [Parameter] public RenderFragment? FooterSection { get; set; } + [Parameter] public string? FooterSectionCssClass { get; set; } + protected string? FooterSectionCssClassNames => BuildClassNames(ContentSectionCssClass, ("bb-footer p-4 mt-4", true)); + + + [Parameter] public RenderFragment? HeaderSection { get; set; } + + [Parameter] public string? HeaderSectionCssClass { get; set; } + + protected string? HeaderSectionCssClassNames => BuildClassNames(HeaderSectionCssClass, ("bb-top-row px-4", true)); + + [Parameter] public RenderFragment? SidebarSection { get; set; } + + #endregion } diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.css b/blazorbootstrap/wwwroot/blazor.bootstrap.css index 5e532d082..047277b75 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.css +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.css @@ -627,3 +627,14 @@ main { .pdf-viewer-dropdown-toggle::after { content: inherit !important; } + +/* layout */ +.bb-footer a { + color: var(--bs-body-color); + text-decoration: none +} + +.bb-footer a:hover, .bb-footer a:focus { + color: var(--bs-link-hover-color); + text-decoration: underline; +} From a686b107d73cd694ddb6cb8ad90edba334a59cec Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 26 Oct 2024 22:27:29 +0530 Subject: [PATCH 3/5] BlazorBootstrapLayout - updates --- .../Components/Layout/BlazorBootstrapLayout.razor.cs | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs index d7d472062..3c9f1c4db 100644 --- a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs +++ b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs @@ -8,17 +8,14 @@ public partial class BlazorBootstrapLayout : BlazorBootstrapLayoutComponentBase [Parameter] public RenderFragment? ContentSection { get; set; } [Parameter] public string? ContentSectionCssClass { get; set; } - protected string? ContentSectionCssClassNames => BuildClassNames(ContentSectionCssClass, ("px-4 py-2", true)); + protected string? ContentSectionCssClassNames => BuildClassNames(ContentSectionCssClass, ("p-4", true)); [Parameter] public RenderFragment? FooterSection { get; set; } [Parameter] public string? FooterSectionCssClass { get; set; } - protected string? FooterSectionCssClassNames => BuildClassNames(ContentSectionCssClass, ("bb-footer p-4 mt-4", true)); - - + protected string? FooterSectionCssClassNames => BuildClassNames(FooterSectionCssClass, ("bb-footer p-4", true)); + [Parameter] public RenderFragment? HeaderSection { get; set; } - [Parameter] public string? HeaderSectionCssClass { get; set; } - protected string? HeaderSectionCssClassNames => BuildClassNames(HeaderSectionCssClass, ("bb-top-row px-4", true)); [Parameter] public RenderFragment? SidebarSection { get; set; } From 4f7d631ecfda8ed8e669fef9be0bd2236cb54e5f Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 26 Oct 2024 22:33:12 +0530 Subject: [PATCH 4/5] BlazorBootstrapLayout - updates --- .../Components/Layout/MainLayout.razor | 41 +------------------ .../Layout/BlazorBootstrapLayout.razor.cs | 4 +- 2 files changed, 4 insertions(+), 41 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor index 39a0fc215..b2e10e015 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor @@ -1,8 +1,7 @@ @namespace BlazorBootstrap.Demo.RCL @inherits MainLayoutBase - + @@ -71,40 +70,4 @@ -@*
- - *@ + diff --git a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs index 3c9f1c4db..f9dc56f8c 100644 --- a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs +++ b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs @@ -11,11 +11,11 @@ public partial class BlazorBootstrapLayout : BlazorBootstrapLayoutComponentBase protected string? ContentSectionCssClassNames => BuildClassNames(ContentSectionCssClass, ("p-4", true)); [Parameter] public RenderFragment? FooterSection { get; set; } - [Parameter] public string? FooterSectionCssClass { get; set; } + [Parameter] public string? FooterSectionCssClass { get; set; } = "bg-body-tertiary"; protected string? FooterSectionCssClassNames => BuildClassNames(FooterSectionCssClass, ("bb-footer p-4", true)); [Parameter] public RenderFragment? HeaderSection { get; set; } - [Parameter] public string? HeaderSectionCssClass { get; set; } + [Parameter] public string? HeaderSectionCssClass { get; set; } = "d-flex justify-content-end"; protected string? HeaderSectionCssClassNames => BuildClassNames(HeaderSectionCssClass, ("bb-top-row px-4", true)); [Parameter] public RenderFragment? SidebarSection { get; set; } From 3ef658c61ff22ab5ea3b9fa2ffbc4a25c873b4be Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 28 Oct 2024 20:54:42 +0530 Subject: [PATCH 5/5] ThemeSwitcher component initial setup --- .../Components/Layout/MainLayout.razor | 2 +- .../ThemeSwitcher/ThemeSwitcher.razor | 24 +++++ .../ThemeSwitcher/ThemeSwitcher.razor.cs | 28 ++++++ .../ThemeSwitcher/ThemeSwitcher.razor.css | 0 .../ThemeSwitcher/ThemeSwitcherJsInterop.cs | 50 ++++++++++ blazorbootstrap/Config.cs | 1 + .../blazor.bootstrap.theme-switcher.js | 99 +++++++++++++++++++ 7 files changed, 203 insertions(+), 1 deletion(-) create mode 100644 blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor create mode 100644 blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor.cs create mode 100644 blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor.css create mode 100644 blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcherJsInterop.cs create mode 100644 blazorbootstrap/wwwroot/blazor.bootstrap.theme-switcher.js diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor index b2e10e015..25b9d8b0a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor @@ -3,7 +3,7 @@ - +