feat(module:layout): support zeroTrigger (NG-ZORRO#2938)

* feat(module:layout): support zeroTrigger close NG-ZORRO#1950 close NG-ZORRO#1951 * fix(module:layout): fix runoutside
Ricbet · Apr 9, 2020 · 2c723e5 · 2c723e5
1 parent e6150f7
commit 2c723e5
Show file tree

Hide file tree

Showing 31 changed files with 82 additions and 79 deletions.
diff --git a/components/affix/demo/target.ts b/components/affix/demo/target.ts
@@ -14,12 +14,12 @@ import { Component } from '@angular/core';
   </div>
   `,
   styles: [`
-  :host ::ng-deep .scrollable-container {
+  .scrollable-container {
     height: 100px;
     overflow-y: scroll;
   }
 
-  :host ::ng-deep .background {
+  .background {
     padding-top: 60px;
     height: 300px;
     background-image: url(//zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg);

diff --git a/components/alert/demo/banner.ts b/components/alert/demo/banner.ts
@@ -4,6 +4,17 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-alert-banner',
   template: `
     <nz-alert nzBanner nzMessage="Warning text"></nz-alert>
-  `
+    <nz-alert nzBanner nzMessage="Very long warning text warning text text text text text text text" nzCloseable></nz-alert>
+    <nz-alert nzBanner nzMessage="Warning text without icon" [nzShowIcon]="false"></nz-alert>
+    <nz-alert nzBanner nzType="error" nzMessage="Error text"></nz-alert>
+  `,
+  styles  : [
+      `
+      nz-alert {
+        margin-bottom: 12px;
+      }
+    `
+  ]
 })
-export class NzDemoAlertBannerComponent { }
+export class NzDemoAlertBannerComponent {
+}
diff --git a/components/avatar/demo/basic.ts b/components/avatar/demo/basic.ts
@@ -17,7 +17,7 @@ import { Component } from '@angular/core';
   </div>
   `,
   styles: [`
-    :host ::ng-deep .ant-avatar {
+    nz-avatar {
       margin-top: 16px;
       margin-right: 16px;
     }

diff --git a/components/avatar/demo/type.ts b/components/avatar/demo/type.ts
@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
   <nz-avatar nzIcon="user" style="background-color:#87d068;"></nz-avatar>
   `,
   styles: [`
-    :host ::ng-deep .ant-avatar {
+    nz-avatar {
       margin-top: 16px;
       margin-right: 16px;
     }

diff --git a/components/back-top/demo/basic.ts b/components/back-top/demo/basic.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
     button.
   `,
   styles  : [ `
-    :host ::ng-deep strong {
+    strong {
       color: rgba(64, 64, 64, 0.6);
     }
   ` ]

diff --git a/components/back-top/demo/custom.ts b/components/back-top/demo/custom.ts
@@ -13,11 +13,7 @@ import { Component } from '@angular/core';
     button.
   `,
   styles  : [ `
-    :host ::ng-deep .ant-back-top {
-      bottom: 100px;
-    }
-
-    :host ::ng-deep .ant-back-top-inner {
+    .ant-back-top-inner {
       height: 40px;
       width: 40px;
       line-height: 40px;
@@ -28,7 +24,7 @@ import { Component } from '@angular/core';
       font-size: 20px;
     }
 
-    :host ::ng-deep strong {
+    strong {
       color: #1088e9;
     }
   ` ]

diff --git a/components/back-top/demo/target.ts b/components/back-top/demo/target.ts
@@ -12,21 +12,21 @@ import { Component } from '@angular/core';
     </div>
   `,
   styles  : [ `
-    :host ::ng-deep .long-div {
+    .long-div {
       height: 300px;
       overflow-y: scroll;
       background-image: url(//zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg);
     }
 
-    :host ::ng-deep .long-div-inner {
+    .long-div-inner {
       height: 1500px;
     }
 
-    :host ::ng-deep .long-div .ant-back-top {
+    nz-back-top {
       right: 150px;
     }
 
-    :host ::ng-deep strong {
+    strong {
       color: rgba(64, 64, 64, 0.6);
     }
   ` ]

diff --git a/components/dropdown/demo/placement.ts b/components/dropdown/demo/placement.ts
@@ -91,7 +91,7 @@ import { Component } from '@angular/core';
     </div>`,
   styles  : [
       `
-      :host ::ng-deep .ant-btn {
+      [nz-button] {
         margin-right: 8px;
         margin-bottom: 8px;
       }

diff --git a/components/layout/demo/basic.ts b/components/layout/demo/basic.ts
@@ -41,34 +41,33 @@ import { Component } from '@angular/core';
       text-align: center;
     }
 
-    :host ::ng-deep .ant-layout-header,
-    :host ::ng-deep .ant-layout-footer {
+    nz-header,nz-footer {
       background: #7dbcea;
       color: #fff;
     }
 
-    :host ::ng-deep .ant-layout-footer {
+    nz-footer {
       line-height: 1.5;
     }
 
-    :host ::ng-deep .ant-layout-sider {
+    nz-sider {
       background: #3ba0e9;
       color: #fff;
       line-height: 120px;
     }
 
-    :host ::ng-deep .ant-layout-content {
+    nz-content {
       background: rgba(16, 142, 233, 1);
       color: #fff;
       min-height: 120px;
       line-height: 120px;
     }
 
-    :host > ::ng-deep .ant-layout {
+    nz-layout {
       margin-bottom: 48px;
     }
 
-    :host ::ng-deep .ant-layout:last-child {
+    nz-layout:last-child {
       margin: 0;
     }
   ` ]

diff --git a/components/layout/demo/custom-trigger.ts b/components/layout/demo/custom-trigger.ts
@@ -39,7 +39,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
             Bill is a cat.
           </div>
         </nz-content>
-        <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
+        <nz-footer style="text-align: center;">Ant Design ©2019 Implement By Angular</nz-footer>
       </nz-layout>
     </nz-layout>
     <ng-template #trigger>
@@ -48,19 +48,19 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
   `,
   styles  : [
       `
-      :host ::ng-deep .trigger {
+      .trigger {
         font-size: 18px;
         line-height: 64px;
         padding: 0 24px;
         cursor: pointer;
         transition: color .3s;
       }
 
-      :host ::ng-deep .trigger:hover {
+      .trigger:hover {
         color: #1890ff;
       }
 
-      :host ::ng-deep .logo {
+      .logo {
         height: 32px;
         background: rgba(255, 255, 255, .2);
         margin: 16px;

diff --git a/components/layout/demo/fixed-sider.ts b/components/layout/demo/fixed-sider.ts
@@ -37,7 +37,7 @@ import { Component } from '@angular/core';
           content
         </div>
         </nz-content>
-        <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
+        <nz-footer style="text-align: center;">Ant Design ©2019 Implement By Angular</nz-footer>
       </nz-layout>
     </nz-layout>
   `,

diff --git a/components/layout/demo/fixed.ts b/components/layout/demo/fixed.ts
@@ -20,7 +20,7 @@ import { Component } from '@angular/core';
         </nz-breadcrumb>
         <div style="background:#fff; padding: 24px; min-height: 380px;">Content</div>
       </nz-content>
-      <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
+      <nz-footer style="text-align: center;">Ant Design ©2019 Implement By Angular</nz-footer>
     </nz-layout>
   `,
   styles  : [ `

diff --git a/components/layout/demo/responsive.ts b/components/layout/demo/responsive.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-layout-responsive',
   template: `
     <nz-layout>
-      <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzBreakpoint]="'lg'">
+      <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzBreakpoint]="'lg'" [nzCollapsedWidth]="0" [nzZeroTrigger]="zeroTrigger">
         <div class="logo">
         </div>
         <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed">
@@ -22,13 +22,16 @@ import { Component } from '@angular/core';
             Content
           </div>
         </nz-content>
-        <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
+        <nz-footer style="text-align: center;">Ant Design ©2019 Implement By Angular</nz-footer>
       </nz-layout>
     </nz-layout>
+    <ng-template #zeroTrigger>
+      <i nz-icon type="menu-fold" theme="outline"></i>
+    </ng-template>
   `,
   styles  : [
     `
-      :host ::ng-deep .logo {
+      .logo {
         height: 32px;
         background: rgba(255,255,255,.2);
         margin: 16px;

diff --git a/components/layout/demo/side.ts b/components/layout/demo/side.ts
@@ -37,13 +37,13 @@ import { Component } from '@angular/core';
             Bill is a cat.
           </div>
         </nz-content>
-        <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
+        <nz-footer style="text-align: center;">Ant Design ©2019 Implement By Angular</nz-footer>
       </nz-layout>
     </nz-layout>
   `,
   styles  : [
       `
-      :host ::ng-deep .logo {
+      .logo {
         height: 32px;
         background: rgba(255, 255, 255, .2);
         margin: 16px;

diff --git a/components/layout/demo/top-side.ts b/components/layout/demo/top-side.ts
@@ -52,7 +52,7 @@ import { Component } from '@angular/core';
           </nz-sider>
           <nz-content style="padding: 0 24px; min-height: 280px;">Content</nz-content>
         </nz-layout>
-        <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
+        <nz-footer style="text-align: center;">Ant Design ©2019 Implement By Angular</nz-footer>
       </nz-content>
     </nz-layout>
   `,

diff --git a/components/layout/demo/top.ts b/components/layout/demo/top.ts
@@ -20,7 +20,7 @@ import { Component } from '@angular/core';
         </nz-breadcrumb>
         <div style="background:#fff; padding: 24px; min-height: 280px;">Content</div>
       </nz-content>
-      <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
+      <nz-footer style="text-align: center;">Ant Design ©2019 Implement By Angular</nz-footer>
     </nz-layout>
   `,
   styles  : [

diff --git a/components/layout/doc/index.en-US.md b/components/layout/doc/index.en-US.md
@@ -82,6 +82,7 @@ The sidebar.
 | `[nzCollapsed]` | the collapsed status can be double binding | `boolean` | `false` |
 | `[nzReverseArrow]` | reverse direction of arrow, for a sider that expands from the right | `boolean` | `false` |
 | `[nzTrigger]` | specify the customized trigger, set to null to hide the trigger | `string｜TemplateRef<void>` | - |
+| `[nzZeroTrigger]` | specify the customized trigger when nzCollapsedWidth setting to `0` | `TemplateRef<void>` | - |
 | `[nzWidth]` | width of the sidebar | `number｜string` | `200` |
 | `[nzTheme]` | color theme of the sidebar | `'light'｜'dark'` | `dark` |
 | `(nzCollapsedChange)` | the callback function | `EventEmitter<boolean>` | - |

diff --git a/components/layout/doc/index.zh-CN.md b/components/layout/doc/index.zh-CN.md
@@ -82,7 +82,8 @@ title: Layout
 | `[nzCollapsible]` | 是否可收起 | `boolean` | `false` |
 | `[nzCollapsed]` | 当前收起状态，可双向绑定 | `boolean` | `false` |
 | `[nzReverseArrow]` | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | `boolean` | `false` |
-| `[nzTrigger]` | 自定义 trigger，设置为 null 时隐藏 trigger | `string｜TemplateRef<void>` | - |
+| `[nzTrigger]` | 自定义 trigger，设置为 null 时隐藏 trigger | `TemplateRef<void>` | - |
+| `[nzZeroTrigger]` | 自定义 nzCollapsedWidth 为 0 时的 特殊trigger | `TemplateRef<void>` | - |
 | `[nzWidth]` | 宽度 | `number｜string` | `200` |
 | `[nzTheme]` | 主题颜色 | `'light'｜'dark'` | `dark` |
 | `(nzCollapsedChange)` | 展开-收起时的回调函数 | `EventEmitter<boolean>` | - |

diff --git a/components/layout/nz-layout.spec.ts b/components/layout/nz-layout.spec.ts
@@ -207,7 +207,9 @@ describe('layout', () => {
       fixture.detectChanges();
       discardPeriodicTasks();
       fixture.detectChanges();
-      expect(sider.nativeElement.style.cssText === 'flex: 0 0 80px; max-width: 80px; min-width: 80px; width: 80px;').toBe(true);
+      console.log(sider.nativeElement.style.cssText);
+      expect(sider.nativeElement.style.cssText === 'flex: 0 0 0px; max-width: 0px; min-width: 0px; width: 0px;').toBe(true);
+      expect(sider.nativeElement.querySelector('.ant-layout-sider-zero-width-trigger').firstElementChild.getAttribute('type')).toBe('menu-fold');
     }));
   });
 });
diff --git a/components/layout/nz-sider.component.html b/components/layout/nz-sider.component.html
@@ -1,10 +1,8 @@
 <div class="ant-layout-sider-children">
   <ng-content></ng-content>
 </div>
-<span class="ant-layout-sider-zero-width-trigger"
-  *ngIf="isZeroTrigger"
-  (click)="toggleCollapse()">
-  <i nz-icon type="bars"></i>
+<span class="ant-layout-sider-zero-width-trigger" *ngIf="isZeroTrigger" (click)="toggleCollapse()">
+  <ng-template [ngTemplateOutlet]="nzZeroTrigger || zeroTrigger"></ng-template>
 </span>
 <div class="ant-layout-sider-trigger"
   *ngIf="isSiderTrigger"
@@ -15,4 +13,7 @@
 <ng-template #defaultTrigger>
   <i nz-icon [type]="nzCollapsed ? 'right' : 'left'" *ngIf="!nzReverseArrow"></i>
   <i nz-icon [type]="nzCollapsed ? 'left' : 'right'" *ngIf="nzReverseArrow"></i>
+</ng-template>
+<ng-template #zeroTrigger>
+  <i nz-icon type="bars"></i>
 </ng-template>
diff --git a/components/layout/nz-sider.component.ts b/components/layout/nz-sider.component.ts
@@ -6,7 +6,6 @@ import {
   ElementRef,
   EventEmitter,
   Host,
-  HostBinding,
   Input,
   NgZone,
   OnDestroy,
@@ -37,6 +36,7 @@ export type NzBreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   host               : {
     '[class.ant-layout-sider-zero-width]': 'nzCollapsed && nzCollapsedWidth === 0',
     '[class.ant-layout-sider-light]'     : `nzTheme === 'light'`,
+    '[class.ant-layout-sider-collapsed]' : 'nzCollapsed',
     '[style.flex]'                       : 'flexSetting',
     '[style.max-width.px]'               : 'widthSetting',
     '[style.min-width.px]'               : 'widthSetting',
@@ -58,10 +58,11 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() nzTheme: 'light' | 'dark' = 'dark';
   @Input() nzCollapsedWidth = 80;
   @Input() nzBreakpoint: NzBreakPoint;
+  @Input() nzZeroTrigger: TemplateRef<void>;
+  @Input() @ViewChild('defaultTrigger') nzTrigger: TemplateRef<void>;
   @Input() @InputBoolean() nzReverseArrow = false;
   @Input() @InputBoolean() nzCollapsible = false;
-  @Input() @ViewChild('defaultTrigger') nzTrigger: TemplateRef<void>;
-  @Input() @InputBoolean() @HostBinding('class.ant-layout-sider-collapsed') nzCollapsed = false;
+  @Input() @InputBoolean() nzCollapsed = false;
   @Output() readonly nzCollapsedChange = new EventEmitter();
 
   get flexSetting(): string {
@@ -86,7 +87,9 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
       this.below = matchBelow;
       this.nzCollapsed = matchBelow;
       this.nzCollapsedChange.emit(matchBelow);
-      this.cdr.markForCheck();
+      this.ngZone.run(() => {
+        this.cdr.markForCheck();
+      });
     }
   }
 
@@ -96,11 +99,11 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   get isZeroTrigger(): boolean {
-    return this.nzCollapsible && this.nzTrigger && (this.nzCollapsedWidth === 0) && ((this.nzBreakpoint && this.below) || (!this.nzBreakpoint));
+    return this.nzCollapsible && this.nzTrigger && this.nzCollapsedWidth === 0 && ((this.nzBreakpoint && this.below) || (!this.nzBreakpoint));
   }
 
   get isSiderTrigger(): boolean {
-    return this.nzCollapsible && this.nzTrigger && (this.nzCollapsedWidth !== 0);
+    return this.nzCollapsible && this.nzTrigger && this.nzCollapsedWidth !== 0;
   }
 
   constructor(@Optional() @Host() private nzLayoutComponent: NzLayoutComponent, private mediaMatcher: MediaMatcher, private ngZone: NgZone, private platform: Platform, private cdr: ChangeDetectorRef, renderer: Renderer2, elementRef: ElementRef) {

diff --git a/components/list/demo/infinite-load.ts b/components/list/demo/infinite-load.ts
@@ -36,7 +36,7 @@ import { BehaviorSubject, Observable, Subscription } from 'rxjs';
   `,
   styles: [
     `
-      :host ::ng-deep .demo-infinite-container {
+      .demo-infinite-container {
         height: 300px;
         border: 1px solid #e8e8e8;
         border-radius: 4px;

diff --git a/components/list/demo/loadmore.ts b/components/list/demo/loadmore.ts
@@ -40,10 +40,10 @@ const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,
   </nz-list>
   `,
   styles: [ `
-  :host ::ng-deep .demo-loadmore-list {
+  .demo-loadmore-list {
     min-height: 350px;
   }
-  :host ::ng-deep .loadmore {
+  .loadmore {
     text-align: center;
     margin-top: 12px;
     height: 32px;