🆕 feat: Global navigation waterfall layout (#726)

* feat: Global navigation waterfall layout * style：Remove duplicate styles
masastack · Aug 12, 2024 · 975d7d4 · 975d7d4
1 parent f5e420d
commit 975d7d4
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 10 deletions.
diff --git a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionMenuWrapper.razor b/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionMenuWrapper.razor
@@ -8,8 +8,8 @@
             @foreach (var category in Value.Children)
             {
                 <div class="apps" style="@GetIsDisplayStyle(!category.Hidden)">
-                    <div class="category_title_app">
-                        <div class="masa-text-1-2__title title_category py-4" id="@($"{idPrefix}_{category.Id}")">@category.Name</div>
+                    <div class="masa-text-1-2__title title_category py-4" id="@($"{idPrefix}_{category.Id}")">@category.Name</div>
+                    <div class="category_title_app @($"{idPrefix}_{category.Id}")">
                         @foreach (var app in category.Children)
                         {
                             <ExpansionAppWrapper RenderLayer="RenderLayer" Value="app" OnItemClick="ItemClick" OnItemOperClick="ItemOperClick" />

diff --git a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionMenuWrapper.razor.cs b/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionMenuWrapper.razor.cs
@@ -24,6 +24,25 @@ public partial class ExpansionMenuWrapper : MasaComponentBase
 
     private string CssSelectorForScroll => string.IsNullOrWhiteSpace(CssForScroll) ? string.Empty : "." + CssForScroll;
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            if (Value is not null)
+            {
+                await MasonryInitAsync();
+            }
+        }
+    }
+
+    protected virtual async Task MasonryInitAsync()
+    {
+        foreach (var category in Value.Children)
+        {
+            await JsRuntime.InvokeVoidAsync("MasaStackComponents.masonryInit", $".{idPrefix}_{category.Id}", ".app", 24);
+        }
+    }
+
     protected virtual async Task ItemClick(ExpansionMenu menu)
     {
         if (Value.MetaData.Situation == ExpansionMenuSituation.Authorization)

diff --git a/src/Masa.Stack.Components/wwwroot/css/app.css b/src/Masa.Stack.Components/wwwroot/css/app.css
@@ -91,12 +91,12 @@ h1:focus {
         }
 
         .masa-stack-components .global-nav .global-nav-content__main {
-            -moz-column-count: 3; /* Firefox */
-            -webkit-column-count: 3; /* Safari 和 Chrome */
-            column-count: 3;
-            -moz-column-gap: 24px; /* Firefox */
-            -webkit-column-gap: 24px; /* Safari 和 Chrome */
-            column-gap: 24px;
+            /*-moz-column-count: 3;*/ /* Firefox */
+            /*-webkit-column-count: 3;*/ /* Safari 和 Chrome */
+            /*column-count: 3;
+            -moz-column-gap: 24px;*/ /* Firefox */
+            /*-webkit-column-gap: 24px;*/ /* Safari 和 Chrome */
+            /*column-gap: 24px;*/
         }
 
             .masa-stack-components .global-nav .global-nav-content__main .title_category_active {
@@ -127,20 +127,27 @@ h1:focus {
         break-inside: avoid-column;
         background: #F6F8FD;
         padding: 16px;
+
+        width: calc(33.33% - 16px);
+        margin-bottom: 24px;
     }
 
     .masa-stack-components .global-nav-content__main .category_title_app {
         -webkit-column-break-inside: avoid;
         page-break-inside: avoid;
         break-inside: avoid-column;
+
+        display: flex;
+        flex-wrap: wrap;
+        gap: 24px; /* 设置行间距和列间距 */
     }
 
-    .masa-stack-components .global-nav .apps .category_title_app :nth-child(2):not([style*="display:none"]).app {
+    .masa-stack-components .global-nav .apps .category_title_app :not([style*="display:none"]).app {
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
     }
 
-    .masa-stack-components .global-nav .apps .category_title_app .app:last-child:not([style*="display:none"]) {
+    .masa-stack-components .global-nav .apps .category_title_app .app:not([style*="display:none"]) {
         border-bottom-right-radius: 20px;
         border-bottom-left-radius: 20px;
     }

diff --git a/src/Masa.Stack.Components/wwwroot/js/components.js b/src/Masa.Stack.Components/wwwroot/js/components.js
@@ -138,6 +138,16 @@ window.MasaStackComponents.getTimezoneOffset = function() {
     return new Date().getTimezoneOffset();
 }
 
+window.MasaStackComponents.masonryInit = (selector, itemSelector, gutter) => {
+    const elem = document.querySelector(selector);
+    new Masonry(elem, {
+        itemSelector: itemSelector,
+        columnWidth: itemSelector,
+        gutter: gutter,
+        percentPosition: true
+    });
+}
+
 function debounce(fn, wait) {
     let timer = null;
     return function (...args) {

diff --git a/tests/MasaWebApp/Pages/_Layout.cshtml b/tests/MasaWebApp/Pages/_Layout.cshtml
@@ -29,6 +29,7 @@
     <script src="_content/Masa.Stack.Components/js/components.js"></script>
     <script src="https://cdn.masastack.com/npm/aliyun/aliyun-oss-sdk.min.js"></script>
     <script src="_content/Masa.Stack.Components/js/oss/upload.js"></script>
+    <script src="https://cdn.masastack.com/npm/masonry/masonry.pkgd.min.js"></script>
 </body>
 
 </html>