feat: update ng-zorro-antd 1.7.0 (#228)

ng-alain · Oct 23, 2018 · 9a62ea3 · 9a62ea3
1 parent 6198248
commit 9a62ea3
Show file tree

Hide file tree

Showing 81 changed files with 745 additions and 428 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -24,6 +24,7 @@ jobs:
  - env: "MODE=site"
  - env: "DEPLOY_MODE=build"
  - env: "DEPLOY_MODE=build_artifacts"
+ if: branch = master
 matrix:
  allow_failures:
  - env: "DEPLOY_MODE=build_artifacts"

diff --git a/angular.json b/angular.json
@@ -16,7 +16,9 @@
  "main": "src/main.ts",
  "tsConfig": "src/tsconfig.json",
  "polyfills": "src/polyfills.ts",
- "assets": ["src/assets"],
+ "assets": [
+ "src/assets"
+ ],
  "styles": [
  "node_modules/ngx-simplemde/src/index.css",
  "src/styles.less"
@@ -28,7 +30,10 @@
  "node_modules/@antv/data-set/dist/data-set.min.js",
  "node_modules/@antv/g2-plugin-slider/dist/g2-plugin-slider.min.js",
  "node_modules/ajv/dist/ajv.bundle.js",
- "node_modules/qrious/dist/qrious.min.js"
+ "node_modules/qrious/dist/qrious.min.js",
+ "node_modules/ace-builds/src-min/ace.js",
+ "node_modules/ace-builds/src-min/theme-github.js",
+ "node_modules/ace-builds/src-min/mode-json.js"
  ]
  },
  "configurations": {

diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
  "file-saver": "^1.3.8",
  "marked": "^0.3.19",
  "ng-github-button": "^1.0.0",
- "ng-zorro-antd": "^1.6.0",
+ "ng-zorro-antd": "^1.7.0",
  "ng2-ace-editor": "^0.3.8",
  "ngx-color": "^1.3.1",
  "ngx-countdown": "^3.0.0",

diff --git a/packages/abc/edit/edit.component.html b/packages/abc/edit/edit.component.html
@@ -5,7 +5,7 @@
  <span class="se__label-optional">
  {{ optional }}
  <nz-tooltip *ngIf="optionalHelp" [nzTitle]="optionalHelp">
- <i nz-tooltip class="anticon anticon-question-circle-o"></i>
+ <i nz-tooltip nz-icon type="question-circle"></i>
  </nz-tooltip>
  </span>
  </label>

diff --git a/packages/abc/error-collect/error-collect.component.ts b/packages/abc/error-collect/error-collect.component.ts
@@ -22,7 +22,7 @@ import { ErrorCollectConfig } from './error-collect.config';
 @Component({
  selector: 'error-collect, [error-collect]',
  template: `
- <i class="anticon anticon-exclamation-circle"></i>
+ <i nz-icon type="exclamation-circle"></i>
  <span class="pl-sm">{{count}}</span>`,
  host: { '[class.error-collect]': 'true' },
  changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/abc/global-footer/demo/basic.md b/packages/abc/global-footer/demo/basic.md
@@ -15,7 +15,7 @@ import { Component } from '@angular/core';
  <div style="background:#f5f5f5; height: 100%;">
  <div style="height: 280px;"></div>
  <global-footer [links]="links">
- Copyright <i class="anticon anticon-menu-copyright" class="mx-sm"></i>2018<a href="//github.com/cipchk" target="_blank" class="mx-sm">卡色</a>出品
+ Copyright<i nz-icon type="copyright" class="mx-sm"></i>2018<a href="//github.com/cipchk" target="_blank" class="mx-sm">卡色</a>出品
  </global-footer>
  </div>
  `,

diff --git a/packages/abc/global-footer/demo/custom.md b/packages/abc/global-footer/demo/custom.md
@@ -17,10 +17,10 @@ import { Component } from '@angular/core';
  <global-footer>
  <global-footer-item href="https://ng-alain.com/" blankTarget>帮助</global-footer-item>
  <global-footer-item href="https://github.com/ng-alain" blankTarget>
- <i class="anticon anticon-github"></i>
+ <i nz-icon type="github"></i>
  </global-footer-item>
  <global-footer-item href="https://ng-alain.github.io/ng-alain/" blankTarget>预览</global-footer-item>
- Copyright <i class="anticon anticon-menu-copyright" class="mx-sm"></i>2018<a href="//github.com/cipchk" target="_blank" class="mx-sm">卡色</a>出品
+ Copyright<i nz-icon type="copyright" class="mx-sm"></i>2018<a href="//github.com/cipchk" target="_blank" class="mx-sm">卡色</a>出品
  </global-footer>
  </div>
  `,

diff --git a/packages/abc/notice-icon/notice-icon.component.ts b/packages/abc/notice-icon/notice-icon.component.ts
@@ -15,15 +15,15 @@ import { NoticeItem, NoticeIconSelect } from './notice-icon.types';
  selector: 'notice-icon',
  template: `
  <nz-badge *ngIf="data?.length === 0" [nzCount]="count">
- <i class="anticon anticon-bell"></i>
+ <i nz-icon type="bell"></i>
  </nz-badge>
  <nz-popover *ngIf="data?.length > 0"
  [nzVisible]="popoverVisible" (nzVisibleChange)="onVisibleChange($event)" nzTrigger="click"
  nzPlacement="bottomRight"
  nzOverlayClassName="notice-icon">
  <div nz-popover class="alain-default__nav-item notice-icon__item">
  <nz-badge [nzCount]="count">
- <i class="anticon anticon-bell"></i>
+ <i nz-icon type="bell" class="alain-default__nav-item-icon"></i>
  </nz-badge>
  </div>
  <ng-template #nzTemplate>

diff --git a/packages/abc/page-header/demo/standard.md b/packages/abc/page-header/demo/standard.md
@@ -25,19 +25,19 @@ import { Component } from '@angular/core';
  </ng-template>
  <ng-template #logo><img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png"></ng-template>
  <ng-template #action>
-  <nz-button-group>
-  <button nz-button>操作</button>
-  <button nz-button>操作</button>
-  </nz-button-group>
-  <nz-dropdown class="mx-sm">
-  <button nz-button nz-dropdown><i class="anticon anticon-ellipsis"></i></button>
-  <ul nz-menu>
-  <li nz-menu-item>选项一</li>
-  <li nz-menu-item>选项二</li>
-  <li nz-menu-item>选项三</li>
-  </ul>
-  </nz-dropdown>
-  <button nz-button [nzType]="'primary'">主操作</button>
+ <nz-button-group>
+ <button nz-button>操作</button>
+ <button nz-button>操作</button>
+ </nz-button-group>
+ <nz-dropdown class="mx-sm">
+ <button nz-button nz-dropdown><i nz-icon type="ellipsis"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item>选项一</li>
+ <li nz-menu-item>选项二</li>
+ <li nz-menu-item>选项三</li>
+ </ul>
+ </nz-dropdown>
+ <button nz-button [nzType]="'primary'">主操作</button>
  </ng-template>
  <ng-template #content>
  <sv-container size="small" col="2">

diff --git a/packages/abc/qr/demo/design.md b/packages/abc/qr/demo/design.md
@@ -102,9 +102,9 @@ import { Component } from '@angular/core';
 })
 export class DemoComponent {
  value = 'https://ng-alain.com/';
- background = 'white';
+ background = '#fff';
  backgroundAlpha = 1.0;
- foreground = 'black';
+ foreground = '#000';
  foregroundAlpha = 1.0;
  level = 'L';
  mime = 'image/png';

diff --git a/packages/abc/quick-menu/index.md b/packages/abc/quick-menu/index.md
@@ -12,7 +12,7 @@ module: QuickMenuModule
 
 参数 | 说明 | 类型 | 默认值
 ----|------|-----|------
-`[icon]` | 图标 | `string` | `anticon anticon-question-circle-o`
+`[icon]` | 图标 | `string | TemplateRef` | `question-circle`
 `[top]` | 距离顶部 | `number` | `120`
 `[width]` | 打开后宽度 | `number` | `200`
 `[bgColor]` | 背景 | `string` | `#fff`

diff --git a/packages/abc/quick-menu/quick-menu.component.html b/packages/abc/quick-menu/quick-menu.component.html
@@ -0,0 +1,10 @@
+<div class="quick-menu__inner">
+ <div class="quick-menu__ctrl" [ngStyle]="ctrlStyle">
+ <div class="quick-menu__ctrl-icon">
+ <ng-container *ngIf="_icon; else _iconTpl">
+ <i nz-icon [type]="_icon"></i>
+ </ng-container>
+ </div>
+ </div>
+ <ng-content></ng-content>
+</div>
diff --git a/packages/abc/quick-menu/quick-menu.component.ts b/packages/abc/quick-menu/quick-menu.component.ts
@@ -8,32 +8,32 @@ import {
  ChangeDetectorRef,
  Renderer2,
  ElementRef,
+ TemplateRef,
 } from '@angular/core';
 
 import { InputNumber } from '@delon/util';
 
 @Component({
  selector: 'quick-menu',
- template: `
- <div class="quick-menu__inner">
- <div class="quick-menu__ctrl" [ngStyle]="ctrlStyle">
- <i class="quick-menu__ctrl-icon" [ngClass]="icon"></i>
- </div>
- <ng-content></ng-content>
- </div>
- `,
+ templateUrl: './quick-menu.component.html',
  host: { '[class.quick-menu]': 'true' },
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class QuickMenuComponent implements OnInit, OnChanges {
  // #region fields
 
+ _icon = 'question-circle';
+ _iconTpl: TemplateRef<any>;
  @Input()
- icon:
- | string
- | string[]
- | { [key: string]: string } = 'anticon anticon-question-circle-o';
+ set icon(value: string | TemplateRef<any>) {
+ if (value instanceof TemplateRef) {
+ this._icon = null;
+ this._iconTpl = value;
+ } else {
+ this._icon = value;
+ }
+ }
 
  @Input() @InputNumber() top = 120;
 

diff --git a/packages/abc/quick-menu/quick-menu.module.ts b/packages/abc/quick-menu/quick-menu.module.ts
@@ -1,13 +1,14 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
 import { DelonUtilModule } from '@delon/util';
 
 import { QuickMenuComponent } from './quick-menu.component';
 
 const COMPONENTS = [QuickMenuComponent];
 
 @NgModule({
- imports: [CommonModule, DelonUtilModule],
+ imports: [CommonModule, NgZorroAntdModule, DelonUtilModule],
  declarations: [...COMPONENTS],
  exports: [...COMPONENTS],
 })

diff --git a/packages/abc/result/demo/classic.md b/packages/abc/result/demo/classic.md
@@ -37,7 +37,7 @@ import { NzMessageService } from 'ng-zorro-antd';
  <ng-template #createDesc>
  <div style="font-size: 14px; position: relative; left: 38px; text-align: left;">
  <div style="margin-top: 8px; margin-bottom: 4px;">
- 曲丽丽<i class="anticon anticon-dingding-o ml-sm"></i>
+ 曲丽丽<i nz-icon type="dingding" class="ml-sm"></i>
  </div>
  <div style="margin-top: 8px; margin-bottom: 4px;">2016-12-12 12:32</div>
  </div>
@@ -47,7 +47,7 @@ import { NzMessageService } from 'ng-zorro-antd';
  <ng-template #checkedDesc>
  <div style="font-size: 14px; position: relative; left: 38px; text-align: left;">
  <div style="margin-top: 8px; margin-bottom: 4px;">
- 周毛毛<i class="anticon anticon-dingding-o ml-sm" style="color: #00a0e9;"></i>
+ 周毛毛<i nz-icon type="dingding" class="ml-sm" style="color: #00a0e9;"></i>
  </div>
  <div style="margin-top: 8px; margin-bottom: 4px;">
  <a (click)="msg.success('click')">催一下</a>

diff --git a/packages/abc/result/demo/fail.md b/packages/abc/result/demo/fail.md
@@ -19,12 +19,12 @@ import { Component } from '@angular/core';
  <ng-template #resultExtra>
  <div class="mb-md text-lg">您提交的内容有如下错误：</div>
  <div class="mb-md">
- <i class="anticon anticon-close-circle-o text-error pr-sm"></i>您的账户已被冻结
- <a class="ml-md">立即解冻<i class="anticon anticon-right pl-sm"></i></a>
+ <i nz-icon type="close-circle" class="text-error pr-sm"></i>您的账户已被冻结
+ <a class="ml-md">立即解冻<i nz-icon type="right" class="pl-sm"></i></a>
  </div>
  <div>
- <i class="anticon anticon-close-circle-o text-error pr-sm"></i>您的账户还不具备申请资格
- <a class="ml-md">立即升级<i class="anticon anticon-right pl-sm"></i></a>
+ <i nz-icon type="close-circle" class="text-error pr-sm"></i>您的账户还不具备申请资格
+ <a class="ml-md">立即升级<i nz-icon type="right" class="pl-sm"></i></a>
  </div>
  </ng-template>
  <button nz-button [nzType]="'primary'">返回修改</button>

diff --git a/packages/abc/result/result.component.ts b/packages/abc/result/result.component.ts
@@ -3,7 +3,7 @@ import { Component, Input, TemplateRef } from '@angular/core';
 @Component({
  selector: 'result',
  template: `
- <div class="result__icon"><i class="anticon anticon-{{_icon}} result__icon-{{_type}}"></i></div>
+ <div class="result__icon"><i nz-icon class="anticon anticon-{{_icon}} result__icon-{{_type}}"></i></div>
  <div class="result__title"><ng-container *ngIf="_title; else _titleTpl">{{_title}}</ng-container></div>
  <div *ngIf="_description || _descriptionTpl" class="result__desc"><ng-container *ngIf="_description; else _descriptionTpl">{{_description}}</ng-container></div>
  <div *ngIf="_extra || _extraTpl" class="result__extra">

diff --git a/packages/abc/result/result.module.ts b/packages/abc/result/result.module.ts
@@ -1,12 +1,13 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
 
 import { ResultComponent } from './result.component';
 
 const COMPONENTS = [ResultComponent];
 
 @NgModule({
- imports: [CommonModule],
+ imports: [CommonModule, NgZorroAntdModule],
  declarations: [...COMPONENTS],
  exports: [...COMPONENTS],
 })