Skip to content

Commit

Permalink
feat(module:button): support link type (#3503)
Browse files Browse the repository at this point in the history
* feat(module:button): support link type

close #3479

* docs(module:button): fix demo

* feat(module:core): wave directive support disable
  • Loading branch information
hsuanxyz authored and wenqi73 committed Jun 5, 2019
1 parent a53a43a commit 050f141
Show file tree
Hide file tree
Showing 14 changed files with 165 additions and 37 deletions.
1 change: 1 addition & 0 deletions components/button/demo/basic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Component } from '@angular/core';
<button nz-button nzType="default">Default</button>
<button nz-button nzType="dashed">Dashed</button>
<button nz-button nzType="danger">Danger</button>
<button nz-button nzType="link">Link</button>
`,
styles: [
`
Expand Down
1 change: 1 addition & 0 deletions components/button/demo/block.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Component } from '@angular/core';
<button nz-button nzType="default" nzBlock>Default</button>
<button nz-button nzType="dashed" nzBlock>Dashed</button>
<button nz-button nzType="danger" nzBlock>Danger</button>
<button nz-button nzType="link" nzBlock>Link</button>
`,
styles: [
`
Expand Down
3 changes: 3 additions & 0 deletions components/button/demo/disabled.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import { Component } from '@angular/core';
<br />
<button nz-button nzType="dashed">Dashed</button>
<button nz-button nzType="dashed" disabled>Dashed(disabled)</button>
<br />
<button nz-button nzType="link">Link</button>
<button nz-button nzType="link" disabled>Link(disabled)</button>
<div style="padding: 8px 8px 0px; background: rgb(190, 200, 200);">
<button nz-button nzGhost>Ghost</button>
<button nz-button nzGhost disabled>Ghost(disabled)</button>
Expand Down
1 change: 1 addition & 0 deletions components/button/demo/ghost.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Component } from '@angular/core';
<button nz-button nzType="default" nzGhost>Default</button>
<button nz-button nzType="dashed" nzGhost>Dashed</button>
<button nz-button nzType="danger" nzGhost>Danger</button>
<button nz-button nzType="link" nzGhost>Link</button>
</div>
`,
styles: [
Expand Down
1 change: 1 addition & 0 deletions components/button/demo/size.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { Component } from '@angular/core';
<button nz-button [nzSize]="size" nzType="default">Default</button>
<button nz-button [nzSize]="size" nzType="dashed">Dashed</button>
<button nz-button [nzSize]="size" nzType="danger">Danger</button>
<button nz-button [nzSize]="size" nzType="link">Link</button>
<br />
<button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><i nz-icon type="download"></i></button>
<button nz-button nzType="primary" [nzSize]="size" nzShape="round"><i nz-icon type="download"></i>Download</button>
Expand Down
2 changes: 1 addition & 1 deletion components/button/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,5 @@ To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`di
| `[nzLoading]` | set the loading status of button | `boolean` | `false` |
| `[nzShape]` | can be set to `circle` `round` or omitted | `'circle'|'round'` | - |
| `[nzSize]` | can be set to `small` `large` or omitted | `'large'|'small'|'default'` | `'default'` |
| `[nzType]` | can be set to `primary` `dashed` `danger` or omitted (meaning `default`) | `'primary'|'dashed'|'danger'|'default'` | `'default'` |
| `[nzType]` | can be set to `primary` `dashed` `danger` or omitted (meaning `default`) | `'primary'|'dashed'|'danger'|'default'|'link'` | `'default'` |
| `[nzBlock]` | option to fit button width to its parent width | `boolean` | `false` |
2 changes: 1 addition & 1 deletion components/button/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,5 @@ import { NzButtonModule } from 'ng-zorro-antd';
| `[nzLoading]` | 设置按钮载入状态 | `boolean` | `false` |
| `[nzShape]` | 设置按钮形状,可选值为 `circle` `round` 或者不设 | `'circle'|'round'` | - |
| `[nzSize]` | 设置按钮大小,可选值为 `small` `large` 或者不设 | `'large'|'small'|'default'` | `'default'` |
| `[nzType]` | 设置按钮类型,可选值为 `primary` `dashed` `danger` 或者不设 | `'primary'|'dashed'|'danger'|'default'` | `'default'` |
| `[nzType]` | 设置按钮类型,可选值为 `primary` `dashed` `danger` 或者不设 | `'primary'|'dashed'|'danger'|'default'|'link'` | `'default'` |
| `[nzBlock]` | 将按钮宽度调整为其父宽度的选项 | `boolean` | `false` |
2 changes: 1 addition & 1 deletion components/button/nz-button.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import {
} from 'ng-zorro-antd/core';
import { NzIconDirective } from 'ng-zorro-antd/icon';

export type NzButtonType = 'primary' | 'dashed' | 'danger' | 'default';
export type NzButtonType = 'primary' | 'dashed' | 'danger' | 'default' | 'link';
export type NzButtonShape = 'circle' | 'round' | null;

@Component({
Expand Down
12 changes: 4 additions & 8 deletions components/button/nz-button.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ describe('button', () => {
expect(buttons[1].nativeElement.classList.contains('ant-btn-default')).toBe(true);
expect(buttons[2].nativeElement.classList.contains('ant-btn-dashed')).toBe(true);
expect(buttons[3].nativeElement.classList.contains('ant-btn-danger')).toBe(true);
expect(buttons[4].nativeElement.classList.contains('ant-btn-link')).toBe(true);
});
});

Expand Down Expand Up @@ -115,10 +116,7 @@ describe('button', () => {

it('should have correct style', () => {
fixture.detectChanges();
expect(buttons[0].nativeElement.classList.contains('ant-btn-background-ghost')).toBe(true);
expect(buttons[1].nativeElement.classList.contains('ant-btn-background-ghost')).toBe(true);
expect(buttons[2].nativeElement.classList.contains('ant-btn-background-ghost')).toBe(true);
expect(buttons[3].nativeElement.classList.contains('ant-btn-background-ghost')).toBe(true);
expect(buttons.every(button => button.nativeElement.classList.contains('ant-btn-background-ghost'))).toBe(true);
});
});

Expand Down Expand Up @@ -299,11 +297,9 @@ describe('button', () => {
expect(buttons[1].nativeElement.classList.contains('ant-btn-default')).toBe(true);
expect(buttons[2].nativeElement.classList.contains('ant-btn-dashed')).toBe(true);
expect(buttons[3].nativeElement.classList.contains('ant-btn-danger')).toBe(true);
expect(buttons[4].nativeElement.classList.contains('ant-btn-link')).toBe(true);

expect(buttons[0].nativeElement.classList.contains('ant-btn-block')).toBe(true);
expect(buttons[1].nativeElement.classList.contains('ant-btn-block')).toBe(true);
expect(buttons[2].nativeElement.classList.contains('ant-btn-block')).toBe(true);
expect(buttons[3].nativeElement.classList.contains('ant-btn-block')).toBe(true);
expect(buttons.every(button => button.nativeElement.classList.contains('ant-btn-block'))).toBe(true);
});
});

Expand Down
21 changes: 17 additions & 4 deletions components/button/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@
.btn-danger;
}

&-link {
.btn-link;
}

&-round {
.btn-round(@btn-prefix-cls);
}
Expand All @@ -90,8 +94,8 @@
border-radius: inherit;
opacity: 0.35;
transition: opacity 0.2s;
pointer-events: none;
content: '';
pointer-events: none;
}

.@{iconfont-css-prefix} {
Expand All @@ -107,14 +111,17 @@
}
}

&&-loading {
position: relative;
pointer-events: none;
}

&&-loading::before {
display: block;
}

&&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
position: relative;
padding-left: 29px;
pointer-events: none;
.@{iconfont-css-prefix}:not(:last-child) {
margin-left: -14px;
}
Expand Down Expand Up @@ -162,6 +169,12 @@
.button-variant-ghost(@btn-danger-color);
}

&-background-ghost&-link {
.button-variant-ghost(@link-color; transparent);

color: @component-background;
}

&-two-chinese-chars::first-letter {
letter-spacing: 0.34em;
}
Expand Down Expand Up @@ -189,4 +202,4 @@ a.@{btn-prefix-cls} {
&-sm {
line-height: @btn-height-sm - 2px;
}
}
}
39 changes: 31 additions & 8 deletions components/button/style/mixin.less
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
border-radius: @border-radius;
}

.button-disabled() {
.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
&-disabled,
&.disabled,
&[disabled] {
Expand All @@ -16,7 +16,8 @@
&:focus,
&:active,
&.active {
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
.button-color(@color; @background; @border);

text-shadow: none;
box-shadow: none;
}
Expand All @@ -25,6 +26,7 @@

.button-variant-primary(@color; @background) {
.button-color(@color; @background; @background);

text-shadow: @btn-text-shadow;
box-shadow: @btn-primary-shadow;

Expand Down Expand Up @@ -84,16 +86,26 @@
}
.button-disabled();
}
.button-variant-ghost(@color) {
.button-color(@color; transparent; @color);
.button-variant-ghost(@color; @border: @color) {
.button-color(@color; transparent; @border);
text-shadow: none;
&:hover,
&:focus {
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
& when (@border = transparent) {
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
}
& when not(@border = transparent) {
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
}
}
&:active,
&.active {
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
& when (@border = transparent) {
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
}
& when not(@border = transparent) {
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
}
}
.button-disabled();
}
Expand Down Expand Up @@ -220,6 +232,17 @@
.btn-danger() {
.button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
}
// link button style
.btn-link() {
.button-variant-other(@link-color, transparent, transparent);
box-shadow: none;
&:hover,
&:focus,
&:active {
border-color: transparent;
}
.button-disabled(@disabled-color; transparent; transparent);
}
// round button
.btn-round(@btnClassName: btn) {
.button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base + 2px; @btn-circle-size);
Expand Down Expand Up @@ -247,7 +270,7 @@
.button-size(@btn-circle-size-sm; 0; @font-size-base; 50%);
}
}
// Horizontal button groups styl
// Horizontal button groups style
// --------------------------------------------------
.btn-group(@btnClassName: btn) {
.button-group-base(@btnClassName);
Expand Down Expand Up @@ -322,4 +345,4 @@
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
19 changes: 9 additions & 10 deletions components/core/wave/nz-wave-renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,13 @@ export class NzWaveRenderer {
private styleForPseudo: HTMLStyleElement | null;
private extraNode: HTMLDivElement | null;
private lastTime = 0;

private platform = new Platform();
get waveAttributeName(): string {
return this.insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
}

constructor(private triggerElement: HTMLElement, private ngZone: NgZone, private insertExtraNode: boolean) {
const platform = new Platform();
if (platform.isBrowser) {
this.bindTriggerEvent();
}
this.bindTriggerEvent();
}

onClick = (event: MouseEvent) => {
Expand All @@ -40,11 +37,13 @@ export class NzWaveRenderer {
};

bindTriggerEvent(): void {
this.ngZone.runOutsideAngular(() => {
if (this.triggerElement) {
this.triggerElement.addEventListener('click', this.onClick, true);
}
});
if (this.platform.isBrowser) {
this.ngZone.runOutsideAngular(() => {
if (this.triggerElement) {
this.triggerElement.addEventListener('click', this.onClick, true);
}
});
}
}

removeTriggerEvent(): void {
Expand Down
25 changes: 25 additions & 0 deletions components/core/wave/nz-wave.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,14 @@ export class NzWaveDirective implements OnInit, OnDestroy {
private waveRenderer: NzWaveRenderer;
private waveDisabled: boolean = false;

get disabled(): boolean {
return this.waveDisabled;
}

get rendererRef(): NzWaveRenderer {
return this.waveRenderer;
}

constructor(
private ngZone: NgZone,
private elementRef: ElementRef,
Expand Down Expand Up @@ -76,4 +84,21 @@ export class NzWaveDirective implements OnInit, OnDestroy {
this.waveRenderer = new NzWaveRenderer(this.elementRef.nativeElement, this.ngZone, this.nzWaveExtraNode);
}
}

disable(): void {
this.waveDisabled = true;
if (this.waveRenderer) {
this.waveRenderer.removeTriggerEvent();
this.waveRenderer.removeStyleAndExtraNode();
}
}

enable(): void {
this.waveDisabled = false;
if (this.waveRenderer) {
this.waveRenderer.bindTriggerEvent();
} else {
this.renderWaveIfEnabled();
}
}
}
Loading

0 comments on commit 050f141

Please sign in to comment.