From b0f68f82881a29e9b5174ed160e8e9f71ca1dcd7 Mon Sep 17 00:00:00 2001 From: capdiem Date: Mon, 8 Jan 2024 13:38:57 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20refactor:=20improve=20the=20perform?= =?UTF-8?q?ance=20(#680)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ExpansionAppWrapper.razor | 167 ++++++++++++++---- .../ExpansionAppWrapper.razor.cs | 28 +++ .../ExpansionNavWrapper.razor | 107 ----------- .../ExpansionNavWrapper.razor.cs | 70 -------- .../GlobalNavigations/GlobalNavigation.razor | 7 +- src/Masa.Stack.Components/wwwroot/css/app.css | 87 +++++++-- 6 files changed, 240 insertions(+), 226 deletions(-) delete mode 100644 src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor delete mode 100644 src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor.cs diff --git a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor b/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor index b3b78021..ead22fc5 100644 --- a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor +++ b/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor @@ -3,42 +3,141 @@ @{ var disableAppOper = Value.MetaData.Situation == ExpansionMenuSituation.Preview || Value.MetaData.Situation == ExpansionMenuSituation.Favorite; + var indeterminate = Value.State == ExpansionMenuState.Indeterminate; + var appSelected = Value.State == ExpansionMenuState.Selected; } -
- -
- - @Value.Name - - @if (!disableAppOper) +
+
+ + @Value.Name + + @if (!disableAppOper) + { + + + var icon = appSelected ? "mdi-check" : (indeterminate ? "mdi-minus-box" : "mdi-checkbox-blank-outline"); + + + + } +
+
+ @foreach (var navGroup in Value.Children) + { +
+ @RenderNestNav(navGroup) +
+ } +
+
+ +@code { + + private RenderFragment RenderNestNav(ExpansionMenu menu) => __builder => + { + @RenderNav(menu) + + if (menu.Children.Count != 0) + { + foreach (var child in menu.Children) { - - - var indeterminate = Value.State == ExpansionMenuState.Indeterminate; - var appSelected = Value.State == ExpansionMenuState.Selected; - if (!context.Hover && indeterminate) - { - mdi-minus-box - } -
- @T("SelectAll") - -
+ @RenderNestNav(child) } -
- -
- @foreach (var nav in Value.Children) + } + }; + + private RenderFragment RenderNav(ExpansionMenu menu) => __builder => { -
- + var indeterminate = menu.State == ExpansionMenuState.Indeterminate; + var selected = menu.State == ExpansionMenuState.Selected; + var isFavorite = menu.State == ExpansionMenuState.Favorite; + + var classBuilder = new StringBuilder(); + classBuilder.Append("expansion-nav "); + if (menu.Type == ExpansionMenuType.Element) + { + classBuilder.Append("expansion-element "); + } + + if (menu.MetaData.Situation == ExpansionMenuSituation.Preview) + { + classBuilder.Append("preview "); + } + + if (indeterminate || selected || isFavorite) + { + classBuilder.Append("active "); + } + + // if (menu.Disabled) + // { + // classBuilder.Append("disabled "); + // } + +
+ @if (menu.Type == ExpansionMenuType.Nav) + { + +
+
+ @DT(menu.Name) +
+ + @if (menu.MetaData.Situation == ExpansionMenuSituation.Authorization) + { + var icon = selected ? "mdi-check" : (indeterminate ? "mdi-minus-box" : "mdi-checkbox-blank-outline"); + + + + } + else if (menu.MetaData.Situation == ExpansionMenuSituation.Favorite) + { + + mdi-star + + } +
+ + } + else if (menu.Type == ExpansionMenuType.Element) + { +
+
+
+ @DT(menu.Name) +
+ + @if (!menu.Disabled && menu.MetaData.Situation == ExpansionMenuSituation.Authorization) + { + + + } +
+
+ } + + @if (menu.GetNavDeep() == 0 && menu.Children.Any(child => !child.Hidden)) + { +
+ }
- } -
-
+ }; + +} diff --git a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor.cs b/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor.cs index 381ae54c..18f99172 100644 --- a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor.cs +++ b/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor.cs @@ -15,4 +15,32 @@ private async Task ItemOperClick() { await OnItemOperClick.InvokeAsync(Value); } + + private static string GetClass(ExpansionMenu menu) + { + var css = new string[3]; + css[0] = "clear-before-opacity"; + + switch (menu.GetNavDeep()) + { + case 0: + css[1] = "neutral-text-regular-secondary font-14-bold"; + css[2] = "nav-item"; + break; + case 1: + css[1] = "neutral-text-secondary font-14"; + css[2] = "sub-nav-item"; + break; + case 2: + css[1] = "neutral-text-secondary font-14"; + css[2] = "action-item"; + break; + default: + css[1] = "neutral-text-secondary font-14"; + css[2] = "action-item2"; + break; + } + + return string.Join(" ", css); + } } diff --git a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor b/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor deleted file mode 100644 index e7b1ffec..00000000 --- a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor +++ /dev/null @@ -1,107 +0,0 @@ -@namespace Masa.Stack.Components.Shared.GlobalNavigations -@inherits MasaComponentBase - -@{ - var indeterminate = Value.State == ExpansionMenuState.Indeterminate; - var selected = Value.State == ExpansionMenuState.Selected; - var isFavorite = Value.State == ExpansionMenuState.Favorite; -} - -
- - @if (Value.Type == ExpansionMenuType.Nav) - { - -
-
- @DT(Value.Name) -
- -
- @if (context.Hover) - { - @if (Value.MetaData.Situation == ExpansionMenuSituation.Authorization) - { - - } - else if (Value.MetaData.Situation == ExpansionMenuSituation.Favorite) - { - - mdi-star - - } - } - else if (!context.Hover && Value.MetaData.Situation != ExpansionMenuSituation.Preview) - { - switch (Value.State) - { - case ExpansionMenuState.Selected: - mdi-check - break; - case ExpansionMenuState.Impersonal: - mdi-close - break; - case ExpansionMenuState.Indeterminate: - mdi-minus-box - break; - case ExpansionMenuState.Favorite: - mdi-star - break; - } - } -
-
- - } - else if (Value.Type == ExpansionMenuType.Element) - { -
-
-
- @DT(Value.Name) -
- - @if (!Value.Disabled) - { -
- -
- @if (!context.Hover) - { - switch (Value.State) - { - case ExpansionMenuState.Selected: - mdi-check - break; - case ExpansionMenuState.Impersonal: - mdi-close - break; - } - } - } -
-
- } - - - @if (Value.GetNavDeep() == 0 && Value.Children.Any(child => !child.Hidden)) - { -
- } -
- - -@foreach (var child in Value.Children) -{ - -} diff --git a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor.cs b/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor.cs deleted file mode 100644 index b64d5567..00000000 --- a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor.cs +++ /dev/null @@ -1,70 +0,0 @@ -namespace Masa.Stack.Components.Shared.GlobalNavigations; - -public partial class ExpansionNavWrapper : MasaComponentBase -{ - [Parameter] - public ExpansionMenu Value { get; set; } = null!; - - [Parameter] - public EventCallback OnItemClick { get; set; } - - [Parameter] - public EventCallback OnItemOperClick { get; set; } - - private string GetClass(bool hover) - { - var css = new string[4]; - css[0] = "clear-before-opacity"; - - switch (Value.GetNavDeep()) - { - case 0: - css[1] = "neutral-text-regular-secondary font-14-bold"; - css[2] = "nav-item"; - css[3] = hover ? "font-14-bold neutral-text-hell fill-hover" : ""; - break; - case 1: - css[1] = "neutral-text-secondary font-14"; - css[2] = "sub-nav-item"; - css[3] = hover ? "btn neutral-text-emphasis fill-hover" : ""; - break; - default: - css[1] = "neutral-text-secondary font-14"; - css[2] = "action-item"; - css[3] = hover ? "btn neutral-text-emphasis fill-hover" : ""; - break; - } - - return string.Join(" ", css); - } - - private string GetActiveClass() - { - switch (Value.GetNavDeep()) - { - case 1: - return "neutral-text-hell"; - case 2: - case 3: - return "neutral-text-emphasis"; - default: - return string.Empty; - } - } - - private async Task ItemClick() - { - if (OnItemClick.HasDelegate) - { - await OnItemClick.InvokeAsync(Value); - } - } - - private async Task ItemOperClick() - { - if (OnItemOperClick.HasDelegate) - { - await OnItemOperClick.InvokeAsync(Value); - } - } -} diff --git a/src/Masa.Stack.Components/Shared/GlobalNavigations/GlobalNavigation.razor b/src/Masa.Stack.Components/Shared/GlobalNavigations/GlobalNavigation.razor index 248811c8..b6d11d6c 100644 --- a/src/Masa.Stack.Components/Shared/GlobalNavigations/GlobalNavigation.razor +++ b/src/Masa.Stack.Components/Shared/GlobalNavigations/GlobalNavigation.razor @@ -105,11 +105,8 @@
@if (_menu is null) { -
- - - -
+ + } else { diff --git a/src/Masa.Stack.Components/wwwroot/css/app.css b/src/Masa.Stack.Components/wwwroot/css/app.css index 304cff5e..1c6cb7ca 100644 --- a/src/Masa.Stack.Components/wwwroot/css/app.css +++ b/src/Masa.Stack.Components/wwwroot/css/app.css @@ -55,6 +55,8 @@ body, .masa-stack-components { .masa-stack-components .global-nav .global-nav-right { width: calc(100% - 300px); + display: flex; + flex-direction: column; } .masa-stack-components .global-nav .global-nav-header { @@ -73,7 +75,9 @@ body, .masa-stack-components { .masa-stack-components .global-nav .global-nav-content { display: flex; - flex-direction: column; + height: 100%; + padding-right: 24px; + padding-bottom: 24px; } .global-nav-content__wrapper { @@ -117,11 +121,6 @@ body, .masa-stack-components { background-color: transparent !important; } - .masa-stack-components .global-nav .global-nav-content__side { - width: 300px; - margin-right: 8px; - } - .masa-stack-components .global-nav-content__main .app { -webkit-column-break-inside: avoid; page-break-inside: avoid; @@ -179,6 +178,11 @@ body, .masa-stack-components { color: #7681AB; } + .masa-stack-components .global-nav .nav .action-item2 { + padding: 0 8px 0 32px; + color: #7681AB; + } + .masa-stack-components .global-nav .m-timeline { margin-left: -36px; padding-top: 0; @@ -913,16 +917,79 @@ body, .masa-stack-components { box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !important; } -.expansion-nav__action { - width: 28px; - height: 28px; - margin: 6px 0 6px 0; +.expansion-nav:not(.preview) { + cursor: pointer; +} + +.expansion-nav:not(.disabled) .expansion-nav__action { + display: none; +} + +.expansion-nav.active .expansion-nav__action.mdi-minus-box, .expansion-nav:not(.active):hover .expansion-nav__action.mdi-minus-box { + display: inline-flex; +} + +.expansion-nav.active .expansion-nav__action.mdi-check, .expansion-nav:not(.active):hover .expansion-nav__action.mdi-check { + display: inline-flex; +} + +.expansion-nav:not(.active):hover .expansion-nav__action.mdi-checkbox-blank-outline { + display: inline-flex; +} + +.expansion-nav.active .expansion-nav__action.mdi-star, .expansion-nav:not(.active):hover .expansion-nav__action.mdi-star { + display: inline-flex; +} + +.expansion-app .expansion-nav__action { + display: none; +} + +.expansion-app.active .expansion-nav__action.mdi-minus-box, .expansion-app:not(.active):hover .expansion-nav__action.mdi-minus-box { + display: inline-flex; +} + +.expansion-app.active .expansion-nav__action.mdi-check, .expansion-app:not(.active):hover .expansion-nav__action.mdi-check { + display: inline-flex; +} + +.expansion-app:not(.active):hover .expansion-nav__action.mdi-checkbox-blank-outline { + display: inline-flex; } .expansion-nav__checkbox { margin-right: -6px ; } +.global-nav-content__loader { + display: flex; + height: 100%; + width: calc(100% - 256px);; +} + +.global-nav-content__loader .m-skeleton-loader__image { + height: 100%; + width: 100%; + margin-right: 8px; + border-radius: 4px; +} + +.global-nav-content__loader .m-skeleton-loader__image:last-child { + margin-right: 0; +} + +.global-nav-content__toc-loader { + width: 256px; + height: 100%; +} + +.global-nav-content__toc-loader .m-skeleton-loader__image { + height: 100%; + width: 100%; + margin-left: 8px; + border-radius: 4px; +} + @media (min-width: 1264px) { .masa-app-bar:not(.app--sized) { left: 300px !important;