feat(module:avatar): support for set gap (#5920)

close #5883
NG-ZORRO · Oct 23, 2020 · f3f1aa9 · f3f1aa9
1 parent 5c19bbd
commit f3f1aa9
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 20 deletions.
diff --git a/components/avatar/avatar.component.ts b/components/avatar/avatar.component.ts
@@ -18,7 +18,8 @@ import {
 } from '@angular/core';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
-import { NgClassInterface, NgStyleInterface, NzShapeSCType, NzSizeLDSType } from 'ng-zorro-antd/core/types';
+import { NgClassInterface, NgStyleInterface, NumberInput, NzShapeSCType, NzSizeLDSType } from 'ng-zorro-antd/core/types';
+import { InputNumber } from 'ng-zorro-antd/core/util';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
 
@@ -49,9 +50,12 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
   encapsulation: ViewEncapsulation.None
 })
 export class NzAvatarComponent implements OnChanges {
+  static ngAcceptInputType_nzGap: NumberInput;
+
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   @Input() @WithConfig() nzShape: NzShapeSCType = 'circle';
   @Input() @WithConfig() nzSize: NzSizeLDSType | number = 'default';
+  @Input() @WithConfig() @InputNumber() nzGap = 4;
   @Input() nzText?: string;
   @Input() nzSrc?: string;
   @Input() nzSrcSet?: string;
@@ -110,7 +114,9 @@ export class NzAvatarComponent implements OnChanges {
 
     const childrenWidth = this.textEl!.nativeElement.offsetWidth;
     const avatarWidth = this.el.getBoundingClientRect().width;
-    const scale = avatarWidth - 8 < childrenWidth ? (avatarWidth - 8) / childrenWidth : 1;
+    const offset = this.nzGap * 2 < avatarWidth ? this.nzGap * 2 : 8;
+    const scale = avatarWidth - offset < childrenWidth ? (avatarWidth - offset) / childrenWidth : 1;
+
     this.textStyles = {
       transform: `scale(${scale}) translateX(-50%)`
     };

diff --git a/components/avatar/avatar.spec.ts b/components/avatar/avatar.spec.ts
@@ -112,16 +112,61 @@ describe('avatar', () => {
       context.nzText = 'a';
       fixture.detectChanges();
       tick();
-      const scale = +/(\w+)\(([^)]*)\)/g.exec(dl.nativeElement.querySelector('.ant-avatar-string')!.style.transform!)![2];
+      const scale = getScaleFromCSSTransform(dl.nativeElement.querySelector('.ant-avatar-string')!.style.transform!);
       expect(scale).toBe(1);
     }));
-    it('should be autoset font-size', fakeAsync(() => {
+    it('should be auto set font-size', fakeAsync(() => {
       context.nzText = 'LongUsername';
       fixture.detectChanges();
       tick();
-      const scale = +/(\w+)\(([^)]*)\)/g.exec(dl.nativeElement.querySelector('.ant-avatar-string')!.style.transform!)![2];
+      const scale = getScaleFromCSSTransform(dl.nativeElement.querySelector('.ant-avatar-string')!.style.transform!);
       expect(scale).toBeLessThan(1);
     }));
+
+    describe('nzGap', () => {
+      let firstScale: number;
+      let avatarText: HTMLElement;
+      beforeEach(fakeAsync(() => {
+        context.nzGap = 4;
+        context.nzText = 'Username';
+        fixture.detectChanges();
+        tick();
+        avatarText = dl.nativeElement.querySelector('.ant-avatar-string')!;
+        firstScale = getScaleFromCSSTransform(avatarText.style.transform);
+      }));
+
+      it('should be set gap', fakeAsync(() => {
+        context.nzGap = 8;
+        fixture.detectChanges();
+        tick();
+
+        let scale = getScaleFromCSSTransform(avatarText.style.transform);
+        expect(scale).toBeLessThan(firstScale);
+
+        context.nzGap = 2;
+        fixture.detectChanges();
+        tick();
+
+        scale = getScaleFromCSSTransform(avatarText.style.transform);
+        expect(scale).toBeGreaterThan(firstScale);
+      }));
+
+      it('Should be set to default when the limit is exceeded', fakeAsync(() => {
+        context.nzGap = 1000;
+        fixture.detectChanges();
+        tick();
+
+        let scale = getScaleFromCSSTransform(avatarText.style.transform);
+        expect(scale).toEqual(firstScale);
+
+        context.nzGap = -1000;
+        fixture.detectChanges();
+        tick();
+
+        scale = getScaleFromCSSTransform(avatarText.style.transform);
+        expect(scale).toEqual(1);
+      }));
+    });
   });
 
   describe('#nzShape', () => {
@@ -200,6 +245,10 @@ describe('avatar', () => {
   });
 });
 
+function getScaleFromCSSTransform(transform: string): number {
+  return +/(\w+)\(([^)]*)\)/g.exec(transform)![2];
+}
+
 @Component({
   template: `
     <nz-avatar
@@ -208,6 +257,7 @@ describe('avatar', () => {
       [nzSize]="nzSize"
       [nzIcon]="nzIcon"
       [nzText]="nzText"
+      [nzGap]="nzGap"
       [nzSrc]="nzSrc"
       [nzSrcSet]="nzSrcSet"
       [nzAlt]="nzAlt"
@@ -219,6 +269,7 @@ class TestAvatarComponent {
   @ViewChild('comp', { static: false }) comp!: NzAvatarComponent;
   nzShape = 'square';
   nzSize: string | number = 'large';
+  nzGap = 4;
   nzIcon: string | null = 'user';
   nzText: string | null = 'A';
   nzSrc: string | null = imageBase64;

diff --git a/components/avatar/demo/dynamic.ts b/components/avatar/demo/dynamic.ts
@@ -1,21 +1,44 @@
 import { Component } from '@angular/core';
 
-const userList = ['U', 'Lucy', 'Tom', 'Edward'];
+const userList = ['Lucy', 'U', 'Tom', 'Edward'];
 const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
 
 @Component({
   selector: 'nz-demo-avatar-dynamic',
   template: `
-    <nz-avatar [ngStyle]="{ 'background-color': color }" [nzText]="text" nzSize="large" style="vertical-align: middle;"></nz-avatar>
-    <button nz-button [nzType]="'dashed'" (click)="change()" style="margin-left: 16px; vertical-align: middle;">
-      <span>Change</span>
-    </button>
-  `
+    <div>
+      <label>
+        Gap:
+        <nz-input-number [nzMin]="0" [nzMax]="16" [nzStep]="1" [(ngModel)]="gap"></nz-input-number>
+      </label>
+      <button nz-button (click)="change()">
+        <span>Change Text</span>
+      </button>
+    </div>
+
+    <nz-avatar
+      [nzGap]="gap"
+      [ngStyle]="{ 'background-color': color }"
+      [nzText]="text"
+      nzSize="large"
+      style="vertical-align: middle;"
+    ></nz-avatar>
+  `,
+  styles: [
+    `
+      div {
+        margin-bottom: 16px;
+      }
+      button {
+        margin-left: 8px;
+      }
+    `
+  ]
 })
 export class NzDemoAvatarDynamicComponent {
   text: string = userList[3];
   color: string = colorList[3];
-
+  gap = 4;
   change(): void {
     let idx = userList.indexOf(this.text);
     ++idx;

diff --git a/components/avatar/demo/module b/components/avatar/demo/module
@@ -1,6 +1,7 @@
+import { CommonModule } from '@angular/common';
 import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzButtonModule } from 'ng-zorro-antd/button';
-import { CommonModule } from '@angular/common';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 
-export const moduleList = [ CommonModule, NzAvatarModule, NzBadgeModule, NzButtonModule ];
+export const moduleList = [ CommonModule, NzAvatarModule, NzBadgeModule, NzButtonModule, NzInputNumberModule ];
diff --git a/components/avatar/doc/index.en-US.md b/components/avatar/doc/index.en-US.md
@@ -17,11 +17,12 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 
 | Property | Description | Type | Default | Global Config |
 | -------- | ----------- | ---- | ------- | ------------- |
-| `[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' \| number` | `'default'` | ✅ |
-| `[nzSrc]` | the address of the image for an image avatar | `string` | - |
+| `[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' \| number` | `'default'` | ✅ |
+| `[nzGap]` | Letter type unit distance between left and right sides | `number` | `4` | ✅ |
+| `[nzSrc]` | The address of the image for an image avatar | `string` | - |
 | `[nzSrcSet]` | a list of sources to use for different screen resolutions | string | - |
 | `[nzAlt]` | This attribute defines the alternative text describing the image | string | - |
-| `[nzText]` | letter type avatar | `string` | - |
-| `(nzError)` | handler when img load error, call the `preventDefault` method to prevent default fallback behavior | `EventEmitter<Event>` | - |
+| `[nzText]` | Letter type avatar | `string` | - |
+| `(nzError)` | Handler when img load error, call the `preventDefault` method to prevent default fallback behavior | `EventEmitter<Event>` | - |
diff --git a/components/avatar/doc/index.zh-CN.md b/components/avatar/doc/index.zh-CN.md
@@ -21,6 +21,7 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 | `[nzIcon]` | 设置头像的图标类型，参考 `Icon` | `string` | - |
 | `[nzShape]` | 指定头像的形状 | `'circle' \| 'square'` | `'circle'` | ✅ |
 | `[nzSize]` | 设置头像的大小 | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ |
+| `[nzGap]` | 字符类型距离左右两侧边界单位像素 | `number` | `4` | ✅ |
 | `[nzSrc]` | 图片类头像的资源地址 | `string` | - |
 | `[nzSrcSet]` | 设置图片类头像响应式资源地址 | string | - |
 | `[nzAlt]` | 图像无法显示时的替代文本 | string | - |

diff --git a/components/core/config/config.ts b/components/core/config/config.ts
@@ -65,6 +65,7 @@ export interface AlertConfig {
 export interface AvatarConfig {
   nzShape?: NzShapeSCType;
   nzSize?: NzSizeLDSType | number;
+  nzGap?: number;
 }
 
 export interface AnchorConfig {