feat(module:message): support nzTop (#3047)

* feat(module:message): support nzTop

* fix: types

* fix: add new test case of nzTop & nzBottom

* fix: lint

* docs: add unit

close #3041

components/message/doc/index.en-US.md

@@ -64,6 +64,7 @@ Methods for destruction are also provided:
 | nzMaxStack | The maximum number of messages that can be displayed at the same time | `number` | `8` |
 | nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true` | `boolean` | `true` |
 | nzAnimate | Whether to turn on animation | `boolean` | `true` |
+| nzTop | Distance from top | `number｜string` | `24` |
 
 ### NzMessageDataFilled
 

components/message/doc/index.zh-CN.md

@@ -65,6 +65,7 @@ title: Message
 | nzMaxStack | 同一时间可展示的最大提示数量 | `number` | `8` |
 | nzPauseOnHover | 鼠标移上时禁止自动移除 | `boolean` | `true` |
 | nzAnimate | 开关动画效果 | `boolean` | `true` |
+| nzTop | 消息距离顶部的位置 | `number｜string` | `24` |
 
 ### NzMessageDataFilled
 

components/message/nz-message-config.ts

@@ -1,14 +1,13 @@
 import { InjectionToken } from '@angular/core';
 
 export interface NzMessageConfig {
-  // For all messages as default config (can override when dynamically created)
-  nzDuration?: number;
-  nzPauseOnHover?: boolean;
   nzAnimate?: boolean;
-  // For message container only
+  nzDuration?: number;
   nzMaxStack?: number;
-  /* tslint:disable-next-line:no-any */
-  [index: string]: any;
+  nzPauseOnHover?: boolean;
+  nzTop?: number | string;
+
+  [index: string]: any; // tslint:disable-line:no-any
 }
 
 export const NZ_MESSAGE_DEFAULT_CONFIG = new InjectionToken<NzMessageConfig>('NZ_MESSAGE_DEFAULT_CONFIG');
@@ -18,9 +17,10 @@ export const NZ_MESSAGE_CONFIG = new InjectionToken<NzMessageConfig>('NZ_MESSAGE
 export const NZ_MESSAGE_DEFAULT_CONFIG_PROVIDER = {
   provide : NZ_MESSAGE_DEFAULT_CONFIG,
   useValue: {
-    nzDuration    : 3000,
     nzAnimate     : true,
+    nzDuration    : 3000,
+    nzMaxStack    : 7,
     nzPauseOnHover: true,
-    nzMaxStack    : 7
+    nzTop         : 24
   }
 };

components/message/nz-message-container.component.html

@@ -1,3 +1,3 @@
-<div class="ant-message">
+<div class="ant-message" [style.top]="top">
   <nz-message *ngFor="let message of messages; let i = index" [nzMessage]="message" [nzIndex]="i"></nz-message>
 </div>

components/message/nz-message-container.component.ts

@@ -1,8 +1,24 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Optional, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  Optional,
+  ViewEncapsulation
+} from '@angular/core';
 import { Subject } from 'rxjs';
 
-import { NzMessageConfig, NZ_MESSAGE_CONFIG, NZ_MESSAGE_DEFAULT_CONFIG } from './nz-message-config';
-import { NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definitions';
+import { toCssPixel } from '../core/util';
+
+import {
+  NzMessageConfig,
+  NZ_MESSAGE_CONFIG,
+  NZ_MESSAGE_DEFAULT_CONFIG
+} from './nz-message-config';
+import {
+  NzMessageDataFilled,
+  NzMessageDataOptions
+} from './nz-message.definitions';
 
 @Component({
   changeDetection    : ChangeDetectionStrategy.OnPush,
@@ -14,6 +30,7 @@ import { NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definiti
 export class NzMessageContainerComponent {
   messages: NzMessageDataFilled[] = [];
   config: Required<NzMessageConfig>;
+  top: string | null;
 
   constructor(
     protected cdr: ChangeDetectorRef,
@@ -25,6 +42,8 @@ export class NzMessageContainerComponent {
 
   setConfig(config: NzMessageConfig): void {
     this.config = { ...this.config, ...config };
+    this.top = toCssPixel(this.config.nzTop);
+    this.cdr.markForCheck();
   }
 
   /**

components/message/nz-message.spec.ts

@@ -14,13 +14,13 @@ describe('NzMessage', () => {
   let messageService: NzMessageService;
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
-  let demoAppFixture: ComponentFixture<DemoAppComponent>;
+  let demoAppFixture: ComponentFixture<NzTestMessageBasicComponent>;
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [ NzMessageModule, NoopAnimationsModule ],
-      declarations: [ DemoAppComponent ],
-      providers: [ { provide: NZ_MESSAGE_CONFIG, useValue: { nzMaxStack: 2 } } ] // Override default config
+      declarations: [ NzTestMessageBasicComponent ],
+      providers: [ { provide: NZ_MESSAGE_CONFIG, useValue: { nzMaxStack: 2, nzTop: 24 } } ]
     });
 
     TestBed.compileComponents();
@@ -37,7 +37,7 @@ describe('NzMessage', () => {
   });
 
   beforeEach(() => {
-    demoAppFixture = TestBed.createComponent(DemoAppComponent);
+    demoAppFixture = TestBed.createComponent(NzTestMessageBasicComponent);
   });
 
   it('should open a message box with success', (() => {
@@ -155,21 +155,28 @@ describe('NzMessage', () => {
 
   it('should emit event when message close', fakeAsync(() => {
     let onCloseFlag = false;
-
     const msg = messageService.create('loading', 'CLOSE');
     msg.onClose!.subscribe(() => {
       onCloseFlag = true;
     });
-
     demoAppFixture.detectChanges();
     tick(50000);
-
     expect(onCloseFlag).toBeTruthy();
   }));
+
+  it('should container top to configured', fakeAsync(() => {
+    messageService.create('top', 'CHANGE');
+    demoAppFixture.detectChanges();
+
+    const messageContainerElement = overlayContainerElement.querySelector('.ant-message') as HTMLElement;
+    expect(messageContainerElement.style.top).toBe('24px');
+
+    tick(50000);
+  }));
 });
 
 @Component({
   selector: 'nz-demo-app-component',
   template: ``
 })
-export class DemoAppComponent {}
+export class NzTestMessageBasicComponent {}

components/notification/nz-notification-config.ts

@@ -3,8 +3,8 @@ import { InjectionToken } from '@angular/core';
 import { NzMessageConfig } from '../message/nz-message-config';
 
 export interface NzNotificationConfig extends NzMessageConfig {
-  nzTop?: string;
-  nzBottom?: string;
+  nzTop?: string | number;
+  nzBottom?: string | number;
   nzPlacement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | string;
 }
 

components/notification/nz-notification-container.component.html

@@ -1,8 +1,12 @@
 <div
   class="ant-notification ant-notification-{{config.nzPlacement}}"
-  [style.top]="(config.nzPlacement==='topLeft'||config.nzPlacement=='topRight')? config.nzTop:null"
-  [style.bottom]="(config.nzPlacement==='bottomLeft'||config.nzPlacement=='bottomRight')? config.nzBottom:null"
-  [style.right]="(config.nzPlacement==='bottomRight'||config.nzPlacement=='topRight')?'0px':null"
-  [style.left]="(config.nzPlacement==='topLeft'||config.nzPlacement=='bottomLeft')?'0px':null">
-  <nz-notification *ngFor="let message of messages; let i = index" [nzMessage]="message" [nzIndex]="i"></nz-notification>
+  [style.top]="(config.nzPlacement === 'topLeft' || config.nzPlacement === 'topRight') ? top : null"
+  [style.bottom]="(config.nzPlacement === 'bottomLeft' || config.nzPlacement === 'bottomRight') ? bottom : null"
+  [style.right]="(config.nzPlacement === 'bottomRight' || config.nzPlacement === 'topRight') ? '0px' : null"
+  [style.left]="(config.nzPlacement === 'topLeft' || config.nzPlacement === 'bottomLeft') ? '0px' : null">
+  <nz-notification
+    *ngFor="let message of messages; let i = index"
+    [nzMessage]="message"
+    [nzIndex]="i">
+  </nz-notification>
 </div>

components/notification/nz-notification-container.component.ts

@@ -8,9 +8,18 @@ import {
 } from '@angular/core';
 import { Subject } from 'rxjs';
 
+import { toCssPixel } from '../core/util';
 import { NzMessageContainerComponent } from '../message/nz-message-container.component';
-import { NzNotificationConfig, NZ_NOTIFICATION_CONFIG, NZ_NOTIFICATION_DEFAULT_CONFIG } from './nz-notification-config';
-import { NzNotificationDataFilled, NzNotificationDataOptions } from './nz-notification.definitions';
+
+import {
+  NzNotificationConfig,
+  NZ_NOTIFICATION_CONFIG,
+  NZ_NOTIFICATION_DEFAULT_CONFIG
+} from './nz-notification-config';
+import {
+  NzNotificationDataFilled,
+  NzNotificationDataOptions
+} from './nz-notification.definitions';
 
 @Component({
   changeDetection    : ChangeDetectionStrategy.OnPush,
@@ -20,6 +29,14 @@ import { NzNotificationDataFilled, NzNotificationDataOptions } from './nz-notifi
   templateUrl        : './nz-notification-container.component.html'
 })
 export class NzNotificationContainerComponent extends NzMessageContainerComponent {
+  config: Required<NzNotificationConfig>;
+  bottom: string | null;
+
+  /**
+   * @override
+   */
+  messages: Array<Required<NzNotificationDataFilled>> = [];
+
   constructor(
     cdr: ChangeDetectorRef,
     @Optional() @Inject(NZ_NOTIFICATION_DEFAULT_CONFIG) defaultConfig: NzNotificationConfig,
@@ -29,14 +46,26 @@ export class NzNotificationContainerComponent extends NzMessageContainerComponen
   }
 
   /**
-   * A list of notifications displayed on the screen.
    * @override
    */
-  messages: Array<Required<NzNotificationDataFilled>> = [];
+  setConfig(config: NzNotificationConfig): void {
+    const newConfig = this.config = { ...this.config, ...config };
+    const placement = this.config.nzPlacement;
+
+    this.top = placement === 'topLeft' || placement === 'topRight'
+      ? toCssPixel(newConfig.nzTop)
+      : null;
+    this.bottom = placement === 'bottomLeft' || placement === 'bottomRight'
+      ? toCssPixel(newConfig.nzBottom)
+      : null;
+
+    this.cdr.markForCheck();
+  }
 
   /**
    * Create a new notification.
-   * If there's a notification whose `nzKey` is same with `nzKey` in `NzNotificationDataFilled`, replace its content instead of create a new one.
+   * If there's a notification whose `nzKey` is same with `nzKey` in `NzNotificationDataFilled`,
+   * replace its content instead of create a new one.
    * @override
    * @param notification
    */
@@ -59,7 +88,10 @@ export class NzNotificationContainerComponent extends NzMessageContainerComponen
     this.cdr.detectChanges();
   }
 
-  private replaceNotification(old: NzNotificationDataFilled, _new: NzNotificationDataFilled): void {
+  private replaceNotification(
+    old: NzNotificationDataFilled,
+    _new: NzNotificationDataFilled
+  ): void {
     old.title = _new.title;
     old.content = _new.content;
     old.template = _new.template;