Skip to content

Commit

Permalink
⚡ refactor: improve the performance (#680)
Browse files Browse the repository at this point in the history
@capdiem
capdiem authored Jan 8, 2024
1 parent 321cc56 commit b0f68f8
Showing 6 changed files with 240 additions and 226 deletions.
167 changes: 133 additions & 34 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor
View file
Original file line number Diff line number Diff line change
@@ -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;
}
<div class="app" style="@GetIsDisplayStyle(!Value.Hidden)">
<MHover Disabled="disableAppOper" Class="masa-text-highlight-1 mb-0 d-flex justify-space-between">
<div @attributes="@context.Attrs" class="d-flex">
<span class="masa-text-2-2 d-inline-block text-truncate">
@Value.Name
</span>
@if (!disableAppOper)
<div class="app"
style="@GetIsDisplayStyle(!Value.Hidden)">
<div class="d-flex align-center mx-2 expansion-app @(indeterminate || appSelected ? "active" : null)">
<span class="masa-text-2-2 d-inline-block t ext-truncate">
@Value.Name
</span>
@if (!disableAppOper)
{
<MSpacer />

var icon = appSelected ? "mdi-check" : (indeterminate ? "mdi-minus-box" : "mdi-checkbox-blank-outline");

<MIcon Small
Color="primary"
OnClick="@ItemOperClick"
Style="height: 16px"
Class="@($"expansion-nav__action mdi {icon}")">
</MIcon>
}
</div>
<div Class="mt-4">
@foreach (var navGroup in Value.Children)
{
<div class="nav m-list--dense" style="background:white; @GetIsDisplayStyle(!navGroup.Hidden)">
@RenderNestNav(navGroup)
</div>
}
</div>
</div>

@code {

private RenderFragment RenderNestNav(ExpansionMenu menu) => __builder =>
{
@RenderNav(menu)

if (menu.Children.Count != 0)
{
foreach (var child in menu.Children)
{
<MSpacer />

var indeterminate = Value.State == ExpansionMenuState.Indeterminate;
var appSelected = Value.State == ExpansionMenuState.Selected;
if (!context.Hover && indeterminate)
{
<MIcon Small Class="mr-1" Color="primary">mdi-minus-box</MIcon>
}
<div class="d-flex" style="@GetIsDisplayStyle(context.Hover)">
<span class="masa-text-3-1">@T("SelectAll")</span>
<MSimpleCheckbox Color="primary"
Ripple="false"
Value="@(indeterminate || appSelected)"
ValueChanged="@ItemOperClick"
Indeterminate=indeterminate
Class="masa-icon-size-20"
Style="flex: none;margin-right: -4px;" />
</div>
@RenderNestNav(child)
}
</div>
</MHover>
<div Class="mt-4">
@foreach (var nav in Value.Children)
}
};

private RenderFragment RenderNav(ExpansionMenu menu) => __builder =>
{
<div class="nav m-list--dense" style="background:white; @GetIsDisplayStyle(!nav.Hidden)">
<ExpansionNavWrapper Value="nav" OnItemClick="OnItemClick" OnItemOperClick="OnItemOperClick"></ExpansionNavWrapper>
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 ");
// }
<div class="@classBuilder.ToString()"
style="@GetIsDisplayStyle(!menu.Hidden)">
@if (menu.Type == ExpansionMenuType.Nav)
{
<a class="m-list-item theme--light @(menu.Disabled ? "m-list-item--disabled" : "") @GetClass(menu)"
@onclick="@(() => OnItemClick.InvokeAsync(menu))">
<div class="d-flex align-center full-width">
<div style="font-weight: 500; font-size: 14px; @(menu.State == ExpansionMenuState.Selected ? "color: #323D6F;" : "")">
@DT(menu.Name)
</div>
<MSpacer />
@if (menu.MetaData.Situation == ExpansionMenuSituation.Authorization)
{
var icon = selected ? "mdi-check" : (indeterminate ? "mdi-minus-box" : "mdi-checkbox-blank-outline");

<MIcon Small
Color="primary"
Class="@($"expansion-nav__action mdi {icon}")">
</MIcon>
}
else if (menu.MetaData.Situation == ExpansionMenuSituation.Favorite)
{
<MIcon Small
Color="@(isFavorite ? "#FFB547" : "")"
Class="expansion-nav__action"
OnClick="@(() => OnItemOperClick.InvokeAsync(menu))"
OnClickStopPropagation>
mdi-star
</MIcon>
}
</div>
</a>
}
else if (menu.Type == ExpansionMenuType.Element)
{
<div class="m-list-item theme--light @(menu.Disabled ? "m-list-item--disabled" : "") @GetClass(menu)"
style="@GetIsDisplayStyle(menu.MetaData.Situation == ExpansionMenuSituation.Authorization)"
@onclick="@(() => OnItemClick.InvokeAsync(menu))">
<div class="d-flex align-center full-width">
<div style="font-weight: 500; font-size: 14px; @(menu.State == ExpansionMenuState.Selected ? "color: #323D6F;" : "")">
@DT(menu.Name)
</div>
<MSpacer />
@if (!menu.Disabled && menu.MetaData.Situation == ExpansionMenuSituation.Authorization)
{
<MIcon Small
Color="primary"
Class="@($"expansion-nav__action mdi {(selected ? "mdi-check" : "mdi-checkbox-blank-outline")}")">
</MIcon>
}
</div>
</div>
}

@if (menu.GetNavDeep() == 0 && menu.Children.Any(child => !child.Hidden))
{
<div class="mx-2" data-count="@menu.Children.Count(child => !child.Hidden)" style="border: 1px dashed #E4E8F3;"></div>
}
</div>
}
</div>
</div>
};

}
28 changes: 28 additions & 0 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
107 changes: 0 additions & 107 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor
View file

This file was deleted.

70 changes: 0 additions & 70 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor.cs
View file

This file was deleted.

7 changes: 2 additions & 5 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/GlobalNavigation.razor
View file
Original file line number Diff line number Diff line change
@@ -105,11 +105,8 @@
<div class="global-nav-content">
@if (_menu is null)
{
<div class="d-flex" style=" width: calc(100% - 256px);">
<MSkeletonLoader Class="transparent full-width mr-2" Type="list-item@3" />
<MSkeletonLoader Class="transparent full-width mr-2" Type="list-item@3" />
<MSkeletonLoader Class="transparent full-width" Type="list-item@3" />
</div>
<MSkeletonLoader Type="image,image,image" Class="global-nav-content__loader"></MSkeletonLoader>
<MSkeletonLoader Type="image" Class="global-nav-content__toc-loader"></MSkeletonLoader>
}
else
{
87 changes: 77 additions & 10 deletions src/Masa.Stack.Components/wwwroot/css/app.css
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit b0f68f8

Please sign in to comment.