fix(theme:layout): fix display service cascade

hbyunzai · Feb 17, 2023 · 4d1209f · 4d1209f
1 parent 301a2e7
commit 4d1209f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/packages/bis/layout/layout-basic/layout-basic.component.ts b/packages/bis/layout/layout-basic/layout-basic.component.ts
@@ -136,7 +136,7 @@ class YunzaiLayoutBasicComponent implements OnInit, OnDestroy {
     if (!this.state.display.nav) {
       cascadingStyleSheet = {
         ...cascadingStyleSheet,
-        top: 0
+        top: '0px'
       };
     }
     if (!this.state.display.aside) {
@@ -207,6 +207,13 @@ class YunzaiLayoutBasicComponent implements OnInit, OnDestroy {
     this.layoutDisplayService.listen('reuseTab', (display: boolean) => {
       this.state.display.reusetab = display;
     });
+    this.layoutDisplayService.listen('nav', (display: boolean) => {
+      this.state.display.nav = display;
+    });
+
+    this.layoutDisplayService.listen('aside', (display: boolean) => {
+      this.state.display.aside = display;
+    });
   }
 
   ngOnDestroy(): void {

diff --git a/packages/theme/layout-default/layout.component.ts b/packages/theme/layout-default/layout.component.ts
@@ -39,11 +39,7 @@ import { LayoutDefaultOptions } from './types';
     <div class="yunzai-default__progress-bar" *ngIf="isFetching"></div>
     <layout-default-header *ngIf="!opt.hideHeader && displayNav" [items]="headerItems"></layout-default-header>
     <ng-container *ngIf="displayAside">
-      <div
-        *ngIf="!opt.hideAside"
-        class="yunzai-default__aside"
-        [ngStyle]="!displayAside ? { 'margin-top': '0px' } : {}"
-      >
+      <div *ngIf="!opt.hideAside" class="yunzai-default__aside" [ngStyle]="asideStyle">
         <div class="yunzai-default__aside-wrap">
           <div class="yunzai-default__aside-inner">
             <ng-container *ngTemplateOutlet="asideUser"></ng-container>
@@ -60,10 +56,7 @@ import { LayoutDefaultOptions } from './types';
         </div>
       </div>
     </ng-container>
-    <section
-      class="yunzai-default__content"
-      [ngStyle]="{ 'margin-top': !displayNav ? '0px' : '', 'margin-left': !displayAside ? '0px' : '' }"
-    >
+    <section class="yunzai-default__content" [ngStyle]="contentStyle">
       <ng-container *ngTemplateOutlet="content"></ng-container>
       <ng-content></ng-content>
     </section>
@@ -87,6 +80,19 @@ export class LayoutDefaultComponent implements OnInit, OnDestroy {
   @Input() content: TemplateRef<void> | null = null;
   @Input() customError?: string | null;
 
+  get contentStyle(): any {
+    return {
+      'margin-top': !this.displayNav ? '0px' : '',
+      'margin-left': !this.displayAside ? '0px' : ''
+    };
+  }
+
+  get asideStyle(): any {
+    return {
+      'margin-top': !this.displayNav ? '0px' : ''
+    };
+  }
+
   displayNav = true;
   displayAside = true;