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],
 })