From 2e6a612ae14c36ab22907111e7c3751a4c6ac337 Mon Sep 17 00:00:00 2001 From: vthinkxie Date: Mon, 19 Nov 2018 18:01:12 +0800 Subject: [PATCH] refactor(module:checkbox): support checkbox onPush (#2478) * docs: update NG-ZORRO logo (#2425) * fix(module:collapse): can't fold up active panel with accordion (#2440) close #2437 * chore: update styles(ant-design 3.10.7) (#2432) * refactor(module:checkbox): support checkbox onPush --- components/alert/nz-alert.component.ts | 6 ++- components/avatar/style/index.less | 6 +++ components/badge/nz-badge.component.ts | 4 +- .../button/nz-button-group.component.ts | 3 +- components/button/nz-button.component.ts | 4 +- components/button/style/index.less | 13 ++++- components/button/style/mixin.less | 4 +- components/card/nz-card-loading.component.ts | 5 +- components/card/nz-card-meta.component.ts | 5 +- components/card/nz-card-tab.component.ts | 8 +-- components/card/nz-card.component.ts | 13 ++++- components/card/style/index.less | 4 +- components/checkbox/doc/index.zh-CN.md | 2 + .../checkbox/nz-checkbox-group.component.html | 5 +- .../checkbox/nz-checkbox-group.component.ts | 26 +++++---- .../checkbox/nz-checkbox-wrapper.component.ts | 4 +- .../checkbox/nz-checkbox.component.html | 14 +++-- components/checkbox/nz-checkbox.component.ts | 53 +++++++++++++------ components/checkbox/nz-checkbox.spec.ts | 4 ++ components/checkbox/style/mixin.less | 48 ++++++++++------- components/collapse/nz-collapse.component.ts | 5 +- components/collapse/nz-collapse.spec.ts | 26 +++++++++ components/divider/style/index.less | 1 + components/dropdown/style/index.less | 4 ++ components/form/style/index.less | 14 +++-- components/list/style/index.less | 3 -- components/menu/style/dark.less | 2 +- components/modal/style/modal.less | 2 +- components/progress/style/index.less | 4 +- components/radio/style/index.less | 1 - components/select/style/index.less | 1 + components/slider/style/index.less | 1 + components/style/themes/default.less | 6 +-- components/table/style/index.less | 39 ++++++++------ components/table/style/size.less | 31 ++++++++--- components/tabs/style/index.less | 37 +++++++------ components/time-picker/style/index.less | 2 +- logo.svg | 1 + 38 files changed, 263 insertions(+), 148 deletions(-) create mode 100644 logo.svg diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts index 795f38bf925..7f75d4bc37c 100644 --- a/components/alert/nz-alert.component.ts +++ b/components/alert/nz-alert.component.ts @@ -5,7 +5,8 @@ import { Input, OnInit, Output, - TemplateRef + TemplateRef, + ViewEncapsulation } from '@angular/core'; import { fadeAnimation } from '../core/animation/fade-animations'; import { NgClassType } from '../core/types/ng-class'; @@ -16,9 +17,10 @@ import { toBoolean } from '../core/util/convert'; animations : [ fadeAnimation ], templateUrl : './nz-alert.component.html', changeDetection : ChangeDetectionStrategy.OnPush, + encapsulation : ViewEncapsulation.None, preserveWhitespaces: false, styles : [ - `:host { + `nz-alert { display: block; }` ] diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less index 9caf0095983..da52c414dc3 100644 --- a/components/avatar/style/index.less +++ b/components/avatar/style/index.less @@ -49,6 +49,12 @@ line-height: @size; } + &-string { + position: absolute; + left: 50%; + transform-origin: 0 center; + } + &.@{avatar-prefix-cls}-icon { font-size: @font-size; } diff --git a/components/badge/nz-badge.component.ts b/components/badge/nz-badge.component.ts index c8af6f0f0de..c7a360bfd18 100644 --- a/components/badge/nz-badge.component.ts +++ b/components/badge/nz-badge.component.ts @@ -7,7 +7,8 @@ import { Input, OnInit, Renderer2, - ViewChild + ViewChild, + ViewEncapsulation } from '@angular/core'; import { AnimationCurves } from '../core/animation/animation'; @@ -22,6 +23,7 @@ export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' | @Component({ selector : 'nz-badge', preserveWhitespaces: false, + encapsulation : ViewEncapsulation.None, changeDetection : ChangeDetectionStrategy.OnPush, animations : [ trigger('zoomAnimation', [ diff --git a/components/button/nz-button-group.component.ts b/components/button/nz-button-group.component.ts index b019d49feb6..cf3cbf780a5 100644 --- a/components/button/nz-button-group.component.ts +++ b/components/button/nz-button-group.component.ts @@ -1,10 +1,11 @@ -import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { NzUpdateHostClassService } from '../core/services/update-host-class.service'; import { NzSizeLDSType } from '../core/types/size'; @Component({ selector : 'nz-button-group', changeDetection : ChangeDetectionStrategy.OnPush, + encapsulation : ViewEncapsulation.None, preserveWhitespaces: false, providers : [ NzUpdateHostClassService ], templateUrl : './nz-button-group.component.html' diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts index d2d96c372fb..2bed43eea4a 100644 --- a/components/button/nz-button.component.ts +++ b/components/button/nz-button.component.ts @@ -12,7 +12,8 @@ import { OnInit, QueryList, Renderer2, - ViewChild + ViewChild, + ViewEncapsulation } from '@angular/core'; import { NzUpdateHostClassService } from '../core/services/update-host-class.service'; @@ -31,6 +32,7 @@ export type NzButtonShape = 'circle' | null ; providers : [ NzUpdateHostClassService ], preserveWhitespaces: false, changeDetection : ChangeDetectionStrategy.OnPush, + encapsulation : ViewEncapsulation.None, templateUrl : './nz-button.component.html' }) export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { diff --git a/components/button/style/index.less b/components/button/style/index.less index 8057a0a3fab..bd929d5a0c6 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -12,7 +12,10 @@ // Button styles // ----------------------------- .@{btn-prefix-cls} { - line-height: @line-height-base; + // Fixing https://github.com/ant-design/ant-design/issues/12978 + // It is a render problem of chrome, which is only happened in the codesandbox demo + // 0.001px solution works and I don't why + line-height: @line-height-base - 0.001; .btn; .btn-default; @@ -21,6 +24,7 @@ > i, > span { pointer-events: none; + display: inline-block; } &-primary { @@ -149,7 +153,7 @@ letter-spacing: .34em; } - &-two-chinese-chars > * { + &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) { letter-spacing: .34em; margin-right: -.34em; } @@ -177,6 +181,11 @@ .christmas&-primary&-sm:before { background-size: 56px; } + + // https://github.com/ant-design/ant-design/issues/12681 + &:empty { + vertical-align: top; + } } a.@{btn-prefix-cls} { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 23a088920e4..2848772fdac 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -25,7 +25,7 @@ .button-variant-primary(@color; @background) { .button-color(@color; @background; @background); text-shadow: 0 -1px 0 rgba(0, 0, 0, .12); - box-shadow: 0 2px 0 rgba(0, 0, 0, .035); + box-shadow: 0 2px 0 rgba(0, 0, 0, .045); &:hover, &:focus { @@ -118,7 +118,6 @@ > .@{btnClassName}, > span > .@{btnClassName} { position: relative; - line-height: @btn-height-base - 2px; &:hover, &:focus, @@ -182,7 +181,6 @@ &:not([disabled]):active { outline: 0; - transition: none; box-shadow: none; } diff --git a/components/card/nz-card-loading.component.ts b/components/card/nz-card-loading.component.ts index 076278dcf4d..92f455dac2e 100644 --- a/components/card/nz-card-loading.component.ts +++ b/components/card/nz-card-loading.component.ts @@ -1,15 +1,16 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; @Component({ selector : 'nz-card-loading', templateUrl : './nz-card-loading.component.html', preserveWhitespaces: false, changeDetection : ChangeDetectionStrategy.OnPush, + encapsulation : ViewEncapsulation.None, host : { '[class.ant-card-loading-content]': 'true' }, styles : [ ` - :host { + nz-card-loading { display: block; } ` ] diff --git a/components/card/nz-card-meta.component.ts b/components/card/nz-card-meta.component.ts index 8303d8c6ca7..4f3a9c3b77b 100755 --- a/components/card/nz-card-meta.component.ts +++ b/components/card/nz-card-meta.component.ts @@ -1,12 +1,13 @@ -import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core'; @Component({ selector : 'nz-card-meta', preserveWhitespaces: false, changeDetection : ChangeDetectionStrategy.OnPush, + encapsulation : ViewEncapsulation.None, templateUrl : './nz-card-meta.component.html', styles : [ ` - :host { + nz-card-meta { display: block; } ` ], diff --git a/components/card/nz-card-tab.component.ts b/components/card/nz-card-tab.component.ts index 783304d7f7f..65ab14a8da7 100644 --- a/components/card/nz-card-tab.component.ts +++ b/components/card/nz-card-tab.component.ts @@ -1,8 +1,10 @@ -import { Component, TemplateRef, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; @Component({ - selector : 'nz-card-tab', - templateUrl: './nz-card-tab.component.html' + selector : 'nz-card-tab', + encapsulation : ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl : './nz-card-tab.component.html' }) export class NzCardTabComponent { @ViewChild(TemplateRef) template: TemplateRef; diff --git a/components/card/nz-card.component.ts b/components/card/nz-card.component.ts index 43b20cbf8ce..00e93bfb149 100755 --- a/components/card/nz-card.component.ts +++ b/components/card/nz-card.component.ts @@ -1,4 +1,12 @@ -import { ChangeDetectionStrategy, Component, ContentChild, HostBinding, Input, TemplateRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ContentChild, + HostBinding, + Input, + TemplateRef, + ViewEncapsulation +} from '@angular/core'; import { InputBoolean } from '../core/util/convert'; import { NzCardTabComponent } from './nz-card-tab.component'; @@ -6,9 +14,10 @@ import { NzCardTabComponent } from './nz-card-tab.component'; selector : 'nz-card', preserveWhitespaces: false, changeDetection : ChangeDetectionStrategy.OnPush, + encapsulation : ViewEncapsulation.None, templateUrl : './nz-card.component.html', styles : [ ` - :host { + nz-card { display: block; } ` ], diff --git a/components/card/style/index.less b/components/card/style/index.less index 6696d1a7825..9ecb1f2c304 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -39,6 +39,7 @@ &-wrapper { display: flex; + align-items: center; } &-title { @@ -46,9 +47,8 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - display: flex; - align-items: center; flex: 1; + display: inline-block; } .@{ant-prefix}-tabs { diff --git a/components/checkbox/doc/index.zh-CN.md b/components/checkbox/doc/index.zh-CN.md index f2c53c1824d..2d6006586f4 100755 --- a/components/checkbox/doc/index.zh-CN.md +++ b/components/checkbox/doc/index.zh-CN.md @@ -44,6 +44,8 @@ title: Checkbox ### [nz-checkbox] +通过ViewChild或其他方式获得 `nz-checkbox` 实例 + | 名称 | 描述 | | ---- | ----------- | | focus() | 获取焦点 | diff --git a/components/checkbox/nz-checkbox-group.component.html b/components/checkbox/nz-checkbox-group.component.html index 5d7ced2adee..4892c28e96d 100644 --- a/components/checkbox/nz-checkbox-group.component.html +++ b/components/checkbox/nz-checkbox-group.component.html @@ -1,7 +1,6 @@ -