feat(abc:notice-icon): add centered property (#1546)

Author: cipchk

packages/abc/notice-icon/index.en-US.md

@@ -17,6 +17,7 @@ Used on the navigation toolbar as a unified notification center for the entire p
 | `[data]` | Data | `NoticeItem[]` | - |
 | `[count]` | Total number of messages on the icon | `number` | - |
 | `[loading]` | Pop up card loading status | `boolean` | `false` |
+| `[centered]` | Whether the tab is centered | `boolean` | `false` |
 | `(select)` | Click the callback of the list item | `EventEmitter<NoticeIconSelect>` | - |
 | `(clear)` | Callback for clicking the clear button | `EventEmitter<string>` | - |
 | `[popoverVisible]` | Manual control of Popover display | `boolean` | `false` |

packages/abc/notice-icon/index.zh-CN.md

@@ -17,6 +17,7 @@ module: import { NoticeIconModule } from '@delon/abc/notice-icon';
 | `[data]` | 数据 | `NoticeItem[]` | - |
 | `[count]` | 图标上的消息总数 | `number` | - |
 | `[loading]` | 弹出卡片加载状态 | `boolean` | `false` |
+| `[centered]` | 标签页是否居中 | `boolean` | `false` |
 | `(select)` | 点击列表项的回调 | `EventEmitter<NoticeIconSelect>` | - |
 | `(clear)` | 点击清空按钮的回调 | `EventEmitter<string>` | - |
 | `[popoverVisible]` | 手动控制Popover显示 | `boolean` | `false` |

packages/abc/notice-icon/notice-icon.component.html

@@ -13,14 +13,14 @@
   (nzVisibleChange)="onVisibleChange($event)"
   nzTrigger="click"
   nzPlacement="bottomRight"
-  nzOverlayClassName="header-dropdown notice-icon"
+  [nzOverlayClassName]="overlayCls"
   [nzDropdownMenu]="noticeMenu"
 >
   <ng-template [ngTemplateOutlet]="badgeTpl"></ng-template>
 </div>
 <nz-dropdown-menu #noticeMenu="nzDropdownMenu">
   <nz-spin [nzSpinning]="loading" [nzDelay]="0">
-    <nz-tabset nzSelectedIndex="0">
+    <nz-tabset nzSelectedIndex="0" [nzCentered]="centered">
       <nz-tab *ngFor="let i of data" [nzTitle]="i.title">
         <notice-icon-tab
           [locale]="locale"

packages/abc/notice-icon/notice-icon.component.ts

@@ -31,6 +31,7 @@ export class NoticeIconComponent implements OnInit, OnChanges, OnDestroy {
   static ngAcceptInputType_count: NumberInput;
   static ngAcceptInputType_loading: BooleanInput;
   static ngAcceptInputType_popoverVisible: BooleanInput;
+  static ngAcceptInputType_centered: BooleanInput;
 
   private i18n$!: Subscription;
   locale: LocaleData = {};
@@ -41,10 +42,15 @@ export class NoticeIconComponent implements OnInit, OnChanges, OnDestroy {
   @Input() @InputBoolean() popoverVisible = false;
   @Input() btnClass?: NgClassType;
   @Input() btnIconClass?: NgClassType;
+  @Input() @InputBoolean() centered = false;
   @Output() readonly select = new EventEmitter<NoticeIconSelect>();
   @Output() readonly clear = new EventEmitter<string>();
   @Output() readonly popoverVisibleChange = new EventEmitter<boolean>();
 
+  get overlayCls(): string {
+    return `header-dropdown notice-icon${!this.centered ? ' notice-icon__tab-left' : ''}`;
+  }
+
   constructor(private i18n: DelonLocaleService, private cdr: ChangeDetectorRef) {}
 
   onVisibleChange(result: boolean): void {

packages/abc/notice-icon/notice-icon.spec.ts

@@ -98,6 +98,15 @@ describe('abc: notice-icon', () => {
         done();
       }, CLICKTIME);
     });
+    it('#centered', done => {
+      context.centered = true;
+      context.popoverVisible = true;
+      fixture.detectChanges();
+      setTimeout(() => {
+        expect(document.querySelectorAll('.notice-icon__tab-left').length).toBe(0);
+        done();
+      }, CLICKTIME);
+    });
   });
 
   it('#i18n', done => {
@@ -123,6 +132,7 @@ describe('abc: notice-icon', () => {
       [data]="data"
       [count]="count"
       [loading]="loading"
+      [centered]="centered"
       (select)="select($event)"
       (clear)="clear($event)"
       [(popoverVisible)]="popoverVisible"
@@ -178,6 +188,7 @@ class TestComponent {
   ];
   count = 10;
   loading = false;
+  centered = false;
   popoverVisible?: boolean;
   select(): void {}
   clear(): void {}

packages/abc/notice-icon/style/index.less

@@ -17,22 +17,16 @@
     &-bar {
       margin-bottom: 4px;
     }
+  }
 
-    &-nav {
-      .@{ant-prefix}-tabs-tab {
-        margin-right: 32px;
-        padding: 12px 16px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      &-scroll {
-        text-align: center;
+  &__tab-left {
+    .@{ant-prefix}-tabs-nav-list {
+      .@{ant-prefix}-tabs-tab:first-child {
+        margin-left: @tabs-horizontal-gutter;
       }
     }
   }
+
   .@{ant-prefix}-list {
     max-height: 400px;
     overflow: auto;