From 313ccb7e9996fa95c5743d0257f302b9f11a5024 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sat, 16 Nov 2024 19:55:24 -0800 Subject: [PATCH] refactor(Layout): adjust z-index value for Modal (#4686) --- .../Components/Layout/PageLayout.razor.cs | 2 - .../Components/Samples/Menus.razor | 6 +- .../Components/Samples/Menus.razor.css | 67 +------------------ .../wwwroot/css/site.css | 11 --- .../Components/Layout/Layout.razor.cs | 2 +- .../Components/Layout/Layout.razor.scss | 22 ++++-- test/UnitTest/Components/LayoutTest.cs | 10 ++- 7 files changed, 29 insertions(+), 91 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs index cc1113e9e6c..aee61e9b12b 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs @@ -10,8 +10,6 @@ namespace BootstrapBlazor.Server.Components.Layout; /// public sealed partial class PageLayout { - private bool IsOpen { get; set; } - private string? Theme { get; set; } private string? LayoutClassString => CssBuilder.Default("layout-demo") diff --git a/src/BootstrapBlazor.Server/Components/Samples/Menus.razor b/src/BootstrapBlazor.Server/Components/Samples/Menus.razor index c3c864ec6ef..c4aca4ac654 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Menus.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Menus.razor @@ -64,7 +64,7 @@
-
+
@Localizer["MenusClickShrinkSpanSpan"]
@@ -80,7 +80,9 @@
Main
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css index 60357bdda5b..a887a2a7ed8 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css +++ b/src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css @@ -1,66 +1,3 @@ -.layout-menu-demo ::deep .layout-side { - background-color: var(--bs-body-bg); - color: var(--bs-body-color); - height: 100%; - border-right: 1px solid var(--bs-border-color); +.layout-menu-demo { + border: 1px solid var(--bs-border-color); } - -.layout-menu-demo ::deep .menu.is-vertical:not(.is-collapsed) { - width: 156px; -} - -.layout-menu-demo ::deep .menu-demo-header { - background-color: rgba(var(--bs-body-color-rgb), .12); - line-height: 50px; - color: var(--bs-body-color); - flex: 1; - padding-left: 80px; -} - -.layout-menu-demo ::deep .layout-banner { - display: flex; - align-items: center; - padding: 0 .625rem; - background-color: rgba(var(--bs-body-color-rgb), .12); - height: 50px; - font-size: 1.5rem; -} - - .layout-menu-demo ::deep .layout-banner img { - width: 38px; - border-radius: var(--bs-border-radius); - margin-inline-end: .5rem; - border: 1px solid #c0c4cc; - background-color: #787878; - } - -.layout-menu-demo ::deep .layout-side.is-collapsed .layout-banner .layout-title { - width: 0; - overflow: hidden; - white-space: nowrap; -} - -.layout-menu-demo ::deep .layout-menu { - height: 371px; - padding: 6px 0; - color: var(--bs-body-color); -} - -.layout-menu-demo ::deep .layout-title { - color: var(--bs-body-color); -} - -.layout-menu-demo ::deep .layout-header .layout-header-bar { - position: absolute; - margin: 9px 14px; -} - -.layout-menu-demo ::deep .layout-footer { - background-color: rgba(var(--bs-body-color-rgb), .12); - text-align: center; -} - - .layout-menu-demo ::deep .layout-footer > a { - color: #000; - line-height: 30px; - } diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css index 7716eea2174..d7d1bfd2c34 100644 --- a/src/BootstrapBlazor.Server/wwwroot/css/site.css +++ b/src/BootstrapBlazor.Server/wwwroot/css/site.css @@ -274,20 +274,9 @@ code { .layout-demo { --bb-layout-sidebar-banner-background: var(--bb-primary-color); - --bb-layout-title-color: #fff; --bb-layout-header-background: var(--bb-primary-color); - --bb-layout-header-color: #fff; } - .layout-demo .widget { - --bb-widget-toggle-color: #fff; - margin-inline-end: 1rem; - } - - .layout-demo .layout-avatar-right { - border-radius: 50%; - } - .card-body > section:not(:first-child) { margin-top: 1rem; } diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.cs b/src/BootstrapBlazor/Components/Layout/Layout.razor.cs index 674a2c370ae..17034f0e43f 100644 --- a/src/BootstrapBlazor/Components/Layout/Layout.razor.cs +++ b/src/BootstrapBlazor/Components/Layout/Layout.razor.cs @@ -241,13 +241,13 @@ public partial class Layout : IHandlerException .AddClass("has-footer", ShowFooter && Footer != null) .AddClass("is-collapsed", IsCollapsed) .AddClass("is-fixed-tab", IsFixedTabHeader && UseTabSet) + .AddClass("is-page", IsPage) .AddClassFromAttributes(AdditionalAttributes) .Build(); private string? StyleString => CssBuilder.Default() .AddClass("--bb-layout-header-height: 0px;", Header == null) .AddClass("--bb-layout-footer-height: 0px;", ShowFooter == false || Footer == null) - .AddClass("--bb-layout-height: 100vh;", IsPage && UseTabSet && IsFixedTabHeader) .AddStyleFromAttributes(AdditionalAttributes) .Build(); diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.scss b/src/BootstrapBlazor/Components/Layout/Layout.razor.scss index 889b7168f78..052bdf5a8b5 100644 --- a/src/BootstrapBlazor/Components/Layout/Layout.razor.scss +++ b/src/BootstrapBlazor/Components/Layout/Layout.razor.scss @@ -39,11 +39,19 @@ --bb-layout-menu-user-border-color: #{$bb-layout-menu-user-border-color}; --bb-layout-menu-item-hover-bg: #{$bb-layout-menu-item-hover-bg}; display: flex; - height: var(--bb-layout-height, 100%); + min-height: var(--bb-layout-height, 100%); width: 100%; flex-direction: column; position: relative; + &.is-page { + --bb-layout-height: 100vh; + + .layout-main { + min-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height)) + } + } + .layout-banner { display: flex; align-items: center; @@ -139,7 +147,7 @@ align-items: center; padding: 0 1rem; position: sticky; - z-index: 1090; + z-index: 1035; border-bottom: 1px solid var(--bb-layout-header-border-color); &.is-fixed { @@ -197,7 +205,7 @@ .layout-right { overflow: hidden; - height: 100vh; + height: var(--bb-layout-height); } .layout-footer { @@ -207,7 +215,7 @@ .has-sidebar { .layout-main { overflow: hidden; - height: calc(100vh - var(--bb-layout-header-height)); + height: calc(var(--bb-layout-height) - var(--bb-layout-header-height)); } } } @@ -222,7 +230,7 @@ border-top: 1px solid var(--bs-border-color); &.is-fixed { - z-index: 1090; + z-index: 1035; position: sticky; bottom: 0; } @@ -230,7 +238,7 @@ &.is-fixed-tab { .layout-main { - height: calc(100% - var(--bb-layout-header-height) - var(--bb-layout-footer-height)); + height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height)); } .tabs-body { @@ -278,7 +286,7 @@ &.is-fixed-header { position: sticky; top: 0; - height: 100vh; + height: var(--bb-layout-height); } } } diff --git a/test/UnitTest/Components/LayoutTest.cs b/test/UnitTest/Components/LayoutTest.cs index 9537273025d..9ee244f41ab 100644 --- a/test/UnitTest/Components/LayoutTest.cs +++ b/test/UnitTest/Components/LayoutTest.cs @@ -68,10 +68,14 @@ public void IsPage_OK() var cut = Context.RenderComponent(pb => { pb.Add(a => a.IsPage, true); - pb.Add(a => a.UseTabSet, true); - pb.Add(a => a.IsFixedTabHeader, true); }); - Assert.Contains("--bb-layout-height: 100vh;", cut.Markup); + Assert.Contains("is-page", cut.Markup); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.IsPage, false); + }); + Assert.DoesNotContain("is-page", cut.Markup); } [Fact]