From e0d99876166b37bb00a84f59437f76d00e51bf7a Mon Sep 17 00:00:00 2001 From: Wendell Date: Tue, 9 Oct 2018 19:58:29 +0800 Subject: [PATCH] fix(module:icon): fix broken icons (#2248) * fix(module:icon): fix broken icons * fix select close icon * fix loading style and bad case, change warning message * fix icon test * fix select close icon --- components/alert/nz-alert.component.html | 2 +- components/alert/nz-alert.component.ts | 26 +++++---- .../auto-complete/demo/certain-category.ts | 2 +- .../auto-complete/demo/uncertain-category.ts | 2 +- components/button/nz-button.spec.ts | 6 +-- .../calendar/calendar-input.component.html | 4 +- components/date-picker/picker.component.html | 5 +- components/drawer/nz-drawer.component.html | 4 +- components/drawer/nz-drawer.module.ts | 3 +- components/form/demo/dynamic-form-item.ts | 2 +- components/icon/demo/basic.ts | 2 +- components/icon/doc/index.en-US.md | 4 +- components/icon/doc/index.zh-CN.md | 2 +- components/icon/nz-icon.directive.ts | 53 ++++++++++++------- components/icon/nz-icon.service.ts | 4 ++ components/icon/nz-icon.spec.ts | 8 +-- .../nz-notification.component.html | 4 +- .../nz-select-top-control.component.html | 4 +- components/select/nz-select.component.html | 4 +- components/spin/demo/custom-indicator.ts | 2 +- components/tabs/demo/custom-add-trigger.ts | 2 +- components/tabs/demo/editable-card.ts | 2 +- .../nz-time-picker-panel.component.html | 1 + .../tree-select/nz-tree-select.component.html | 14 +++-- 24 files changed, 101 insertions(+), 61 deletions(-) diff --git a/components/alert/nz-alert.component.html b/components/alert/nz-alert.component.html index 360e08a5f00..c1cd2bc78c3 100644 --- a/components/alert/nz-alert.component.html +++ b/components/alert/nz-alert.component.html @@ -2,7 +2,7 @@ - + diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts index eb2b822b600..5c9b135e9cb 100644 --- a/components/alert/nz-alert.component.ts +++ b/components/alert/nz-alert.component.ts @@ -40,7 +40,7 @@ export class NzAlertComponent implements OnInit { isMessageString: boolean; isCloseTextString: boolean; outerClassMap; - iconClassMap; + iconType; @Output() nzOnClose: EventEmitter = new EventEmitter(); @Input() nzIconType: NgClassType; @@ -145,16 +145,22 @@ export class NzAlertComponent implements OnInit { } updateIconClassMap(): void { - this.iconClassMap = { - 'anticon-close-circle-o' : this.nzDescription && this.nzType === 'error', - 'anticon-check-circle-o' : this.nzDescription && this.nzType === 'success', - 'anticon-info-circle-o' : this.nzDescription && this.nzType === 'info', - 'anticon-exclamation-circle-o' : this.nzDescription && this.nzType === 'warning', - 'anticon-close-circle-fill' : (!this.nzDescription) && this.nzType === 'error', - 'anticon-check-circle-fill' : (!this.nzDescription) && this.nzType === 'success', - 'anticon-info-circle-fill' : (!this.nzDescription) && this.nzType === 'info', - 'anticon-exclamation-circle-fill': (!this.nzDescription) && this.nzType === 'warning' + const iconType = { + 'close-circle-o' : this.nzDescription && this.nzType === 'error', + 'check-circle-o' : this.nzDescription && this.nzType === 'success', + 'info-circle-o' : this.nzDescription && this.nzType === 'info', + 'exclamation-circle-o' : this.nzDescription && this.nzType === 'warning', + 'close-circle-fill' : (!this.nzDescription) && this.nzType === 'error', + 'check-circle-fill' : (!this.nzDescription) && this.nzType === 'success', + 'info-circle-fill' : (!this.nzDescription) && this.nzType === 'info', + 'exclamation-circle-fill': (!this.nzDescription) && this.nzType === 'warning' }; + + Object.keys(iconType).forEach(key => { + if (iconType[ key ]) { + this.iconType = key; + } + }); } ngOnInit(): void { diff --git a/components/auto-complete/demo/certain-category.ts b/components/auto-complete/demo/certain-category.ts index cb2c8c001ce..a828ee1434a 100644 --- a/components/auto-complete/demo/certain-category.ts +++ b/components/auto-complete/demo/certain-category.ts @@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@ - + diff --git a/components/auto-complete/demo/uncertain-category.ts b/components/auto-complete/demo/uncertain-category.ts index e29c3778c48..33b83cef9a4 100644 --- a/components/auto-complete/demo/uncertain-category.ts +++ b/components/auto-complete/demo/uncertain-category.ts @@ -9,7 +9,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; - + diff --git a/components/button/nz-button.spec.ts b/components/button/nz-button.spec.ts index ea4e2b271c5..7edf975f92a 100644 --- a/components/button/nz-button.spec.ts +++ b/components/button/nz-button.spec.ts @@ -167,7 +167,7 @@ describe('button', () => { tick(); fixture.detectChanges(); expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(true); - expect(button.nativeElement.firstElementChild.querySelector('svg').classList.contains('anticon-spin')).toBe(true); + expect(button.nativeElement.firstElementChild.classList.contains('anticon-spin')).toBe(true); expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(true); expect(button.nativeElement.firstElementChild.localName).toBe('i'); tick(5000); @@ -179,7 +179,7 @@ describe('button', () => { const button = buttons[ 3 ]; fixture.detectChanges(); expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(false); - expect(button.nativeElement.firstElementChild.querySelector('svg')).toBe(null); + expect(button.nativeElement.firstElementChild.classList.contains('anticon-apin')).toBe(false); expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(false); expect(button.nativeElement.firstElementChild.localName).toBe('i'); button.nativeElement.click(); @@ -187,7 +187,7 @@ describe('button', () => { tick(); fixture.detectChanges(); expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(true); - expect(button.nativeElement.firstElementChild.querySelector('svg').classList.contains('anticon-spin')).toBe(true); + expect(button.nativeElement.firstElementChild.classList.contains('anticon-spin')).toBe(true); expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(true); expect(button.nativeElement.firstElementChild.localName).toBe('i'); tick(5000); diff --git a/components/date-picker/lib/calendar/calendar-input.component.html b/components/date-picker/lib/calendar/calendar-input.component.html index 9b8dc65182d..a297bdafda0 100644 --- a/components/date-picker/lib/calendar/calendar-input.component.html +++ b/components/date-picker/lib/calendar/calendar-input.component.html @@ -7,5 +7,7 @@ (keyup)="onInputKeyup($event)" /> - + + + \ No newline at end of file diff --git a/components/date-picker/picker.component.html b/components/date-picker/picker.component.html index 3750aadf840..72b790e3b31 100644 --- a/components/date-picker/picker.component.html +++ b/components/date-picker/picker.component.html @@ -49,8 +49,11 @@ diff --git a/components/drawer/nz-drawer.component.html b/components/drawer/nz-drawer.component.html index bd0b994dc45..baa22ad10d6 100644 --- a/components/drawer/nz-drawer.component.html +++ b/components/drawer/nz-drawer.component.html @@ -24,7 +24,9 @@ - +
diff --git a/components/drawer/nz-drawer.module.ts b/components/drawer/nz-drawer.module.ts index 67df6c36f07..3a0da24a967 100644 --- a/components/drawer/nz-drawer.module.ts +++ b/components/drawer/nz-drawer.module.ts @@ -2,12 +2,13 @@ import { OverlayModule } from '@angular/cdk/overlay'; import { PortalModule } from '@angular/cdk/portal'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { NzIconModule } from '../icon/nz-icon.module'; import { NzDrawerComponent } from './nz-drawer.component'; import { NzDrawerService } from './nz-drawer.service'; @NgModule({ - imports : [ CommonModule, OverlayModule, PortalModule ], + imports : [ CommonModule, OverlayModule, PortalModule, NzIconModule ], exports : [ NzDrawerComponent ], declarations : [ NzDrawerComponent ], entryComponents: [ NzDrawerComponent ], diff --git a/components/form/demo/dynamic-form-item.ts b/components/form/demo/dynamic-form-item.ts index abe19e9c3d4..e5099ecd5a4 100644 --- a/components/form/demo/dynamic-form-item.ts +++ b/components/form/demo/dynamic-form-item.ts @@ -15,7 +15,7 @@ import { Passengers - + Please input passenger's name or delete this field. diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts index 2f47ae84854..3e548de9af8 100644 --- a/components/icon/demo/basic.ts +++ b/components/icon/demo/basic.ts @@ -9,7 +9,7 @@ import { Component } from '@angular/core'; -
+

diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md index 02ce2b6cfc7..bed4c737186 100755 --- a/components/icon/doc/index.en-US.md +++ b/components/icon/doc/index.en-US.md @@ -17,8 +17,6 @@ We are still adding two-tone icons right now, syncing to [antd](https://ant.desi ### [nz-icon] -All props of input supported by [w3c standards](https://www.w3schools.com/tags/tag_input.asp) and Angular can used in `nz-input`. - | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | `[type]` | Type of the ant design icon | string | - | @@ -123,7 +121,7 @@ We added a `fetchFromIconfont` method function to help developer using their own ```ts this._iconService.fetchFromIconfont({ - scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' + scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' }); ``` diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md index 19490b6096a..13c6a286fc1 100755 --- a/components/icon/doc/index.zh-CN.md +++ b/components/icon/doc/index.zh-CN.md @@ -120,7 +120,7 @@ export class AppComponent implements OnInit, AfterViewInit { ```ts this._iconService.fetchFromIconfont({ - scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' + scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' }); ``` diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts index a0b4f6b26e2..8328cbd2e80 100644 --- a/components/icon/nz-icon.directive.ts +++ b/components/icon/nz-icon.directive.ts @@ -28,6 +28,7 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, // private _renderer: Renderer2; private _classNameObserver: MutationObserver; + private _el: HTMLElement; /** * In order to make this directive compatible to old API, we had do some ugly stuff here. @@ -38,33 +39,46 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, return; } + const forceSpin = className.indexOf('anticon-spin') > -1; const classArr = className.split(/\s/); - const hasAnticonTag = className.indexOf('anticon') > -1; - const autoSpin = className.indexOf('anticon-loading') > -1; - let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.startsWith('anticon-'))[ 0 ]; + let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.match(/^anticon\-\w/))[ 0 ]; - if (!hasAnticonTag || !anticonType) { + if (!anticonType) { return; } anticonType = anticonType.replace('anticon-', ''); - - // This is misspelled in old versions... - if (anticonType.indexOf('verticle') > -1) { - console.error(`'verticle' is misspelled, would be corrected in the next major version.`); + if (anticonType.includes('verticle')) { anticonType = anticonType.replace('verticle', 'vertical'); + if (!this._iconService.warnedAboutVertical) { + console.warn('[NG-ZORRO]', `'verticle' is misspelled, would be corrected in the next major version.`); + this._iconService.warnedAboutVertical = true; + } + } + if (anticonType.startsWith('cross')) { + anticonType = anticonType.replace('cross', 'close'); + if (!this._iconService.warnedAboutCross) { + console.warn('[NG-ZORRO]', `'cross' icon is replaced by 'close' icon.`); + this._iconService.warnedAboutCross = true; + } } - // Add default outline theme. if (!(anticonType.endsWith('-o') || anticonType.endsWith('-fill') || anticonType.endsWith('-twotone'))) { anticonType += '-o'; } - this.spin = autoSpin || this.spin; + if (anticonType.startsWith('loading') || forceSpin) { + this.spin = true; + } else { + this.spin = false; + } + if (this.type !== anticonType) { this.type = anticonType; - this._changeIcon().then(svg => { + this._changeIcon() + .then(svg => { this._addExtraModifications(svg); - }).catch(() => { - console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en`); + }) + .catch(err => { + console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en\n`, err); }); } } @@ -78,9 +92,9 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, private _addExtraModifications(svg: SVGElement): void { if (this.spin || this.type === 'loading') { - this._renderer.addClass(svg, 'anticon-spin'); + this._renderer.addClass(this._el, 'anticon-spin'); } else { - this._renderer.removeClass(svg, 'anticon-spin'); + this._renderer.removeClass(this._el, 'anticon-spin'); } } @@ -117,19 +131,18 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, * Subscribe to DOM element attribute change events, so when user use ngClass or something the icon changes with it. */ ngOnInit(): void { - const element = this._elementRef.nativeElement as HTMLElement; - if (element && element.className.indexOf('anticon') > -1 && !this.type) { + this._el = this._elementRef.nativeElement; + if (this._el && !this.type) { this._warnAPI(); - this._classChangeHandler(element.className); // In case mutations didn't catch the init status. + this._classChangeHandler(this._el.className); this._classNameObserver = new MutationObserver((mutations: MutationRecord[]) => { mutations .filter((mutation: MutationRecord) => mutation.attributeName === 'class') .forEach((mutation: MutationRecord) => this._classChangeHandler((mutation.target as HTMLElement).className)); }); this._classNameObserver.observe(this._elementRef.nativeElement, { attributes: true }); - } else { - this._renderer.addClass(this._elementRef.nativeElement, 'anticon'); } + this._renderer.addClass(this._elementRef.nativeElement, 'anticon'); } ngOnDestroy(): void { diff --git a/components/icon/nz-icon.service.ts b/components/icon/nz-icon.service.ts index 54835710bb6..5dccda7bbac 100644 --- a/components/icon/nz-icon.service.ts +++ b/components/icon/nz-icon.service.ts @@ -8,6 +8,7 @@ import { CheckCircleOutline, CheckOutline, ClockCircleOutline, + CloseCircleFill, CloseCircleOutline, CloseOutline, DoubleLeftOutline, @@ -40,6 +41,8 @@ export class NzIconService extends IconService { private _iconfontCache = new Set(); warnedAboutAPI = false; + warnedAboutCross = false; // TODO: remove in 2.0 + warnedAboutVertical = false; normalizeSvgElement(svg: SVGElement): void { if (!svg.getAttribute('viewBox')) { @@ -84,6 +87,7 @@ export class NzIconService extends IconService { CheckOutline, ClockCircleOutline, CloseCircleOutline, + CloseCircleFill, CloseOutline, DoubleLeftOutline, DoubleRightOutline, diff --git a/components/icon/nz-icon.spec.ts b/components/icon/nz-icon.spec.ts index 172f1856489..38d8b7f3564 100644 --- a/components/icon/nz-icon.spec.ts +++ b/components/icon/nz-icon.spec.ts @@ -30,19 +30,19 @@ describe('icon', () => { fixture.detectChanges(); tick(1000); fixture.detectChanges(); - expect(icons[ 0 ].nativeElement.querySelector('svg').outerHTML).toContain('anticon-spin'); + expect(icons[ 0 ].nativeElement.classList.contains('anticon-spin')).toBe(true); testComponent.spin = false; fixture.detectChanges(); tick(1000); fixture.detectChanges(); - expect(icons[ 0 ].nativeElement.querySelector('svg').outerHTML).not.toContain('anticon-spin'); + expect(icons[ 0 ].nativeElement.classList.contains('anticon-spin')).toBe(false); })); it('should make loading spin', fakeAsync(() => { fixture.detectChanges(); tick(1000); fixture.detectChanges(); - expect(icons[ 1 ].nativeElement.querySelector('svg').outerHTML).toContain('anticon-spin'); + expect(icons[ 1 ].nativeElement.classList.contains('anticon-spin')).toBe(true); })); }); @@ -103,7 +103,7 @@ describe('icon', () => { fixture.detectChanges(); tick(1000); fixture.detectChanges(); - expect(icons[ 1 ].nativeElement.querySelector('svg').outerHTML).toContain('anticon-spin'); + expect(icons[ 1 ].nativeElement.classList.contains('anticon-spin')).toBe(true); })); }); }); diff --git a/components/notification/nz-notification.component.html b/components/notification/nz-notification.component.html index 850a809baca..84bd9152942 100644 --- a/components/notification/nz-notification.component.html +++ b/components/notification/nz-notification.component.html @@ -20,6 +20,8 @@
- + + + \ No newline at end of file diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html index 592ad5c4cc0..5c50dc032e1 100644 --- a/components/select/nz-select-top-control.component.html +++ b/components/select/nz-select-top-control.component.html @@ -47,7 +47,9 @@ [class.ant-select-selection__choice__disabled]="getPropertyFromValue(value,'nzDisabled')" class="ant-select-selection__choice">
{{ getPropertyFromValue(value, 'nzLabel') || value }}
- + + + diff --git a/components/select/nz-select.component.html b/components/select/nz-select.component.html index 9b9b6a86024..a0ee8d1dff7 100644 --- a/components/select/nz-select.component.html +++ b/components/select/nz-select.component.html @@ -18,7 +18,9 @@ (nzOnSearch)="onSearch($event.value,$event.emit)" (nzListOfSelectedValueChange)="updateListOfSelectedValueFromTopControl($event)"> - + + + diff --git a/components/spin/demo/custom-indicator.ts b/components/spin/demo/custom-indicator.ts index d22cf962a30..c6064611a62 100644 --- a/components/spin/demo/custom-indicator.ts +++ b/components/spin/demo/custom-indicator.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-spin-custom-indicator', template: ` - + ` diff --git a/components/tabs/demo/custom-add-trigger.ts b/components/tabs/demo/custom-add-trigger.ts index 5ccfc66e897..5c541ae0140 100644 --- a/components/tabs/demo/custom-add-trigger.ts +++ b/components/tabs/demo/custom-add-trigger.ts @@ -9,7 +9,7 @@ import { Component } from '@angular/core'; -
{{ tab }}
+
{{ tab }}
 Content of {{ tab }} diff --git a/components/tabs/demo/editable-card.ts b/components/tabs/demo/editable-card.ts index e96bd2c9546..d54eda60319 100644 --- a/components/tabs/demo/editable-card.ts +++ b/components/tabs/demo/editable-card.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core';
{{ tab }} - +
Content of {{ tab }} diff --git a/components/time-picker/nz-time-picker-panel.component.html b/components/time-picker/nz-time-picker-panel.component.html index 306497c8dc0..0ea50e65867 100644 --- a/components/time-picker/nz-time-picker-panel.component.html +++ b/components/time-picker/nz-time-picker-panel.component.html @@ -15,6 +15,7 @@ class="{{ prefixCls }}-clear-btn" [attr.title]="nzClearText" (click)="clear()"> +
diff --git a/components/tree-select/nz-tree-select.component.html b/components/tree-select/nz-tree-select.component.html index d13dff7ad00..27758aeb7a9 100644 --- a/components/tree-select/nz-tree-select.component.html +++ b/components/tree-select/nz-tree-select.component.html @@ -84,8 +84,9 @@ [attr.title]="nzDisplayWith(node)" [class.ant-select-selection__choice__disabled]="node.isDisabled" class="ant-select-selection__choice"> - + + + {{ nzDisplayWith(node) }} @@ -94,7 +95,10 @@ - - + + + + + +
\ No newline at end of file