fix(module:grid): fix grid responsive bug (#4906)

NG-ZORRO · Mar 19, 2020 · d6828ed · d6828ed
1 parent b567539
commit d6828ed
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 51 deletions.
diff --git a/components/grid/demo/gutter.ts b/components/grid/demo/gutter.ts
@@ -3,44 +3,41 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-grid-gutter',
   template: `
-    <div class="gutter-example">
-      <div nz-row nzGutter="16">
-        <div nz-col class="gutter-row" nzSpan="6">
-          <div class="gutter-box">col-6</div>
-        </div>
-        <div nz-col class="gutter-row" nzSpan="6">
-          <div class="gutter-box">col-6</div>
-        </div>
-        <div nz-col class="gutter-row" nzSpan="6">
-          <div class="gutter-box">col-6</div>
-        </div>
-        <div nz-col class="gutter-row" nzSpan="6">
-          <div class="gutter-box">col-6</div>
-        </div>
-      </div>
+    <nz-divider nzOrientation="left" nzText="Horizontal"></nz-divider>
+    <div nz-row [nzGutter]="16">
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
     </div>
-    <div class="gutter-example">
-      <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
-        <div nz-col class="gutter-row" nzSpan="6">
-          <div class="gutter-box">col-6</div>
-        </div>
-        <div nz-col class="gutter-row" nzSpan="6">
-          <div class="gutter-box">col-6</div>
-        </div>
-        <div nz-col class="gutter-row" nzSpan="6">
-          <div class="gutter-box">col-6</div>
-        </div>
-        <div nz-col class="gutter-row" nzSpan="6">
-          <div class="gutter-box">col-6</div>
-        </div>
-      </div>
+    <nz-divider nzOrientation="left" nzText="Responsive"></nz-divider>
+    <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+    </div>
+    <nz-divider nzOrientation="left" nzText="Vertical"></nz-divider>
+    <div nz-row [nzGutter]="[16, 24]">
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
+      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
     </div>
   `,
   styles: [
     `
-      .gutter-box {
-        background: #00a0e9;
-        padding: 5px 0;
+      nz-divider {
+        color: #333;
+        fontweight: normal;
+      }
+      .inner-box {
+        background: #0092ff;
+        padding: 8px 0;
       }
     `
   ]

diff --git a/components/grid/demo/module b/components/grid/demo/module
@@ -1,4 +1,5 @@
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { NzSliderModule } from 'ng-zorro-antd/slider';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
 
-export const moduleList = [ NzGridModule, NzSliderModule ];
+export const moduleList = [ NzGridModule, NzSliderModule, NzDividerModule ];
diff --git a/components/grid/demo/playground.ts b/components/grid/demo/playground.ts
@@ -45,10 +45,11 @@ import { Component } from '@angular/core';
         margin-bottom: 16px;
       }
       .grid-config {
-        background: #00a0e9;
         height: 120px;
+        font-size: 14px;
         line-height: 120px;
-        font-size: 13px;
+        background: #0092ff;
+        border-radius: 4px;
       }
     `
   ]

diff --git a/components/grid/row.directive.ts b/components/grid/row.directive.ts
@@ -42,13 +42,19 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
   actualGutter$ = new ReplaySubject<[number, number]>(1);
   destroy$ = new Subject();
 
-  getGutter(breakPoint: NzBreakpointKey): [number, number] {
+  getGutter(): [number, number] {
     const results: [number, number] = [0, 0];
     const gutter = this.nzGutter || 0;
     const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
     normalizedGutter.forEach((g, index) => {
       if (typeof g === 'object') {
-        results[index] = (g![breakPoint] as number) || 0;
+        results[index] = 0;
+        Object.keys(gridResponsiveMap).map((screen: string) => {
+          const bp = screen as NzBreakpointKey;
+          if (this.mediaMatcher.matchMedia(gridResponsiveMap[bp]).matches && g[bp]) {
+            results[index] = g![bp] as number;
+          }
+        });
       } else {
         results[index] = g || 0;
       }
@@ -57,14 +63,7 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
   }
 
   setGutterStyle(): void {
-    let breakPoint: NzBreakpointKey | null = null;
-    Object.keys(gridResponsiveMap).map((screen: string) => {
-      const bp = screen as NzBreakpointKey;
-      if (this.mediaMatcher.matchMedia(gridResponsiveMap[bp]).matches) {
-        breakPoint = bp;
-      }
-    });
-    const [horizontalGutter, verticalGutter] = this.getGutter(breakPoint!);
+    const [horizontalGutter, verticalGutter] = this.getGutter();
     this.actualGutter$.next([horizontalGutter, verticalGutter]);
     const renderGutter = (name: string, gutter: number) => {
       const nativeElement = this.elementRef.nativeElement;

diff --git a/components/typography/text-copy.component.ts b/components/typography/text-copy.component.ts
@@ -31,7 +31,7 @@ import { takeUntil } from 'rxjs/operators';
     <button
       nz-tooltip
       nz-trans-button
-      [nzTitle]="copied ? locale?.copied : locale?.copy"
+      [nzTooltipTitle]="copied ? locale?.copied : locale?.copy"
       class="ant-typography-copy"
       [class.ant-typography-copy-success]="copied"
       (click)="onClick()"

diff --git a/components/typography/text-edit.component.ts b/components/typography/text-edit.component.ts
@@ -20,17 +20,17 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 import { NzAutosizeDirective } from 'ng-zorro-antd/input';
 
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 @Component({
   selector: 'nz-text-edit',
   exportAs: 'nzTextEdit',
   template: `
-    <button *ngIf="!editing" [nzTitle]="locale?.edit" nz-tooltip nz-trans-button class="ant-typography-edit" (click)="onClick()">
+    <button *ngIf="!editing" [nzTooltipTitle]="locale?.edit" nz-tooltip nz-trans-button class="ant-typography-edit" (click)="onClick()">
       <i nz-icon nzType="edit"></i>
     </button>
     <ng-container *ngIf="editing">