feat(module:avatar): support custom size

close NG-ZORRO#2380
hsuanxyz · Nov 8, 2018 · dcfedcd · dcfedcd
1 parent 3b8f9ea
commit dcfedcd
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 18 deletions.
diff --git a/components/avatar/avatar.spec.ts b/components/avatar/avatar.spec.ts
@@ -102,6 +102,24 @@ describe('avatar', () => {
         expect(dl.query(By.css(`.ant-avatar-${item.cls}`)) !== null).toBe(true);
       });
     }
+
+    it('custom size', () => {
+      context.nzSize = 64;
+      context.nzIcon = null;
+      context.nzSrc = null;
+      fixture.detectChanges();
+      const size = `${64}px`;
+      const hostStyle = dl.nativeElement.querySelector('nz-avatar').style;
+      expect(hostStyle.height === size).toBe(true);
+      expect(hostStyle.width === size).toBe(true);
+      expect(hostStyle.lineHeight === size).toBe(true);
+      expect(hostStyle.fontSize === ``).toBe(true);
+
+      context.nzIcon = 'user';
+      fixture.detectChanges();
+      expect(hostStyle.fontSize === `${context.nzSize / 2}px`).toBe(true);
+    });
+
   });
 
   describe('order: image > icon > text', () => {
@@ -151,7 +169,7 @@ describe('avatar', () => {
 class TestAvatarComponent {
   @ViewChild('comp') comp: NzAvatarComponent;
   nzShape = 'square';
-  nzSize = 'large';
+  nzSize: string | number = 'large';
   nzIcon = 'anticon anticon-user';
   nzText = 'A';
   nzSrc = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==`;

diff --git a/components/avatar/demo/badge.ts b/components/avatar/demo/badge.ts
@@ -4,10 +4,10 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-avatar-badge',
   template: `
   <nz-badge [nzCount]="5" style="margin-right: 24px;">
-    <nz-avatar nzIcon="anticon anticon-user" [nzShape]="'square'"></nz-avatar>
+    <nz-avatar nzIcon="user" [nzShape]="'square'"></nz-avatar>
   </nz-badge>
   <nz-badge nzDot>
-    <nz-avatar nzIcon="anticon anticon-user" [nzShape]="'square'"></nz-avatar>
+    <nz-avatar nzIcon="user" [nzShape]="'square'"></nz-avatar>
   </nz-badge>
   `
 })

diff --git a/components/avatar/demo/basic.ts b/components/avatar/demo/basic.ts
@@ -4,14 +4,16 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-avatar-basic',
   template: `
   <div>
-    <nz-avatar nzSize="large" nzIcon="anticon anticon-user"></nz-avatar>
-    <nz-avatar nzIcon="anticon anticon-user"></nz-avatar>
-    <nz-avatar nzSize="small" nzIcon="anticon anticon-user"></nz-avatar>
+    <nz-avatar [nzSize]="64" nzIcon="user"></nz-avatar>
+    <nz-avatar nzSize="large" nzIcon="user"></nz-avatar>
+    <nz-avatar nzIcon="user"></nz-avatar>
+    <nz-avatar nzSize="small" nzIcon="user"></nz-avatar>
   </div>
   <div>
-    <nz-avatar [nzShape]="'square'" [nzSize]="'large'" [nzIcon]="'anticon anticon-user'"></nz-avatar>
-    <nz-avatar [nzShape]="'square'" [nzIcon]="'anticon anticon-user'"></nz-avatar>
-    <nz-avatar [nzShape]="'square'" [nzSize]="'small'" [nzIcon]="'anticon anticon-user'"></nz-avatar>
+    <nz-avatar [nzShape]="'square'" [nzSize]="64" [nzIcon]="'user'"></nz-avatar>
+    <nz-avatar [nzShape]="'square'" [nzSize]="'large'" [nzIcon]="'user'"></nz-avatar>
+    <nz-avatar [nzShape]="'square'" [nzIcon]="'user'"></nz-avatar>
+    <nz-avatar [nzShape]="'square'" [nzSize]="'small'" [nzIcon]="'user'"></nz-avatar>
   </div>
   `,
   styles: [`

diff --git a/components/avatar/demo/type.ts b/components/avatar/demo/type.ts
@@ -3,12 +3,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-avatar-type',
   template: `
-  <nz-avatar nzIcon="anticon anticon-user"></nz-avatar>
+  <nz-avatar nzIcon="user"></nz-avatar>
   <nz-avatar nzText="U"></nz-avatar>
   <nz-avatar nzText="USER"></nz-avatar>
-  <nz-avatar nzIcon="anticon anticon-user" nzSrc="//zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
+  <nz-avatar nzIcon="user" nzSrc="//zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
   <nz-avatar nzText="U" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
-  <nz-avatar nzIcon="anticon anticon-user" style="background-color:#87d068;"></nz-avatar>
+  <nz-avatar nzIcon="user" style="background-color:#87d068;"></nz-avatar>
   `,
   styles: [`
     :host ::ng-deep .ant-avatar {

diff --git a/components/avatar/doc/index.en-US.md b/components/avatar/doc/index.en-US.md
@@ -14,6 +14,6 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | -------- | ----------- | ---- | ------- |
 | `[nzIcon]` | the `Icon` type for an icon avatar, see `Icon` | string | - |
 | `[nzShape]` | the shape of avatar | `circle` ｜ `square` | `circle` |
-| `[nzSize]` | the size of the avatar | `large` ｜ `small` ｜ `default` | `default` |
+| `[nzSize]` | the size of the avatar | `large` ｜ `small` ｜ `default` ｜ number | `default` |
 | `[nzSrc]` | the address of the image for an image avatar | string | - |
 | `[nzText]` | letter type avatar | string | - |
diff --git a/components/avatar/doc/index.zh-CN.md b/components/avatar/doc/index.zh-CN.md
@@ -15,6 +15,6 @@ title: Avatar
 | --- | --- | --- | --- |
 | `[nzIcon]` | 设置头像的图标类型，参考 `Icon` | string | - |
 | `[nzShape]` | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
-| `[nzSize]` | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
+| `[nzSize]` | 设置头像的大小 | Enum{ 'large', 'small', 'default', number } | `default` |
 | `[nzSrc]` | 图片类头像的资源地址 | string | - |
 | `[nzText]` | 文本类头像 | string | - |
diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts
@@ -1,10 +1,11 @@
 import {
+  Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
-  OnChanges,
+  OnChanges, Renderer2,
   SimpleChanges,
   ViewChild
 } from '@angular/core';
@@ -13,6 +14,7 @@ import { NzUpdateHostClassService } from '../core/services/update-host-class.ser
 import { NzSizeLDSType } from '../core/types/size';
 
 export type NzAvatarShape = 'square' | 'circle';
+export type NzAvatarSize = NzSizeLDSType | number;
 
 @Component({
   selector           : 'nz-avatar',
@@ -44,13 +46,17 @@ export class NzAvatarComponent implements OnChanges {
 
   @Input() nzShape: NzAvatarShape = 'circle';
 
-  @Input() nzSize: NzSizeLDSType = 'default';
+  @Input() nzSize: NzAvatarSize = 'default';
 
   @Input() nzText: string;
 
   @Input() nzSrc: string;
 
-  constructor(private elementRef: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService) {
+  constructor(
+    private elementRef: ElementRef,
+    private cd: ChangeDetectorRef,
+    private updateHostClassService: NzUpdateHostClassService,
+    private  renderer: Renderer2) {
   }
   private el: HTMLElement = this.elementRef.nativeElement;
   private prefixCls = 'ant-avatar';
@@ -63,7 +69,7 @@ export class NzAvatarComponent implements OnChanges {
       [ `${this.prefixCls}-${this.sizeMap[ this.nzSize ]}` ]: this.sizeMap[ this.nzSize ],
       [ `${this.prefixCls}-${this.nzShape}` ]               : this.nzShape,
       [ `${this.prefixCls}-icon` ]                          : this.nzIcon,
-      [ `${this.prefixCls}-image` ]                         : this.nzSrc
+      [ `${this.prefixCls}-image` ]                         : this.hasSrc // downgrade after image error
     };
     this.updateHostClassService.updateHostClass(this.el, classMap);
     this.cd.detectChanges();
@@ -80,6 +86,7 @@ export class NzAvatarComponent implements OnChanges {
       this.hasText = true;
     }
     this.setClass().notifyCalc();
+    this.setSizeStyle();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -88,6 +95,7 @@ export class NzAvatarComponent implements OnChanges {
     this.hasSrc = !!this.nzSrc;
 
     this.setClass().notifyCalc();
+    this.setSizeStyle();
   }
 
   private calcStringSize(): void {
@@ -118,4 +126,16 @@ export class NzAvatarComponent implements OnChanges {
     });
     return this;
   }
+
+  private setSizeStyle(): void {
+    if (typeof this.nzSize === 'string') {
+      return;
+    }
+    this.renderer.setStyle(this.el, 'width', `${this.nzSize}px`);
+    this.renderer.setStyle(this.el, 'height', `${this.nzSize}px`);
+    this.renderer.setStyle(this.el, 'line-height', `${this.nzSize}px`);
+    if (this.hasIcon) {
+      this.renderer.setStyle(this.el, 'font-size', `${this.nzSize / 2}px`);
+    }
+  }
 }