fix(module:tabs): fix tabs style error (#2673)

NG-ZORRO · Dec 22, 2018 · 458c062 · 458c062
1 parent 46fbee5
commit 458c062
Show file tree

Hide file tree

Showing 6 changed files with 297 additions and 240 deletions.
diff --git a/components/tabs/nz-tabs-nav.component.html b/components/tabs/nz-tabs-nav.component.html
@@ -19,8 +19,10 @@
         [class.ant-tabs-nav-animated]="nzAnimated"
         #navListElement
         (cdkObserveContent)="onContentChanges()">
+        <div>
+          <ng-content></ng-content>
+        </div>
         <div nz-tabs-ink-bar [hidden]="nzHideBar" [nzAnimated]="nzAnimated" [nzPositionMode]="nzPositionMode" style="display: block;"></div>
-        <ng-content></ng-content>
       </div>
     </div>
   </div>

diff --git a/components/tabs/nz-tabs-nav.component.ts b/components/tabs/nz-tabs-nav.component.ts
@@ -77,7 +77,9 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
     this._tabPositionMode = value;
     this.alignInkBarToSelectedTab();
     if (this.nzShowPagination) {
-      this.updatePagination();
+      Promise.resolve().then(() => {
+        this.updatePagination();
+      });
     }
   }
 
@@ -175,9 +177,7 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
   }
 
   checkPaginationEnabled(): void {
-    this.showPaginationControls =
-      this.tabListScrollWidthHeightPix > this.elementRefOffSetWidthHeight;
-
+    this.showPaginationControls = this.tabListScrollWidthHeightPix > this.elementRefOffSetWidthHeight;
     if (!this.showPaginationControls) {
       this.scrollDistance = 0;
     }

diff --git a/components/tabs/nz-tabs.spec.ts b/components/tabs/nz-tabs.spec.ts
@@ -1,7 +1,6 @@
 import { Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { fakeAsync, flush, tick, TestBed } from '@angular/core/testing';
+import { fakeAsync, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { dispatchFakeEvent } from '../core/testing';
 
 import { NzTabsModule } from './nz-tabs.module';
 import { NzTabSetComponent } from './nz-tabset.component';
@@ -449,26 +448,17 @@ describe('tabs', () => {
       expect(testComponent.select02).toHaveBeenCalledTimes(0);
       expect(testComponent.deselect02).toHaveBeenCalledTimes(0);
     }));
-    it('should prevent focus scroll', fakeAsync(() => {
-      fixture.detectChanges();
-      expect(tabs.nativeElement.scrollLeft).toBe(0);
-      const input: HTMLInputElement = tabs.nativeElement.querySelector('button');
-      input.focus();
-      expect(tabs.nativeElement.scrollLeft > 0).toBe(true);
-      dispatchFakeEvent(tabs.nativeElement, 'scroll');
-      flush();
-      fixture.detectChanges();
-      expect(tabs.nativeElement.scrollLeft).toBe(0);
-    }));
   });
 
   describe('init nzTabPosition to left', () => {
-    it('should next and prev buttons display abnormal', () => {
+    it('should next and prev buttons display abnormal', fakeAsync(() => {
       const fixture = TestBed.createComponent(NzTestTabsTabPositionLeftComponent);
       fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
       const tabs = fixture.debugElement.query(By.directive(NzTabSetComponent));
       expect(tabs.nativeElement.querySelector('.ant-tabs-nav-container').classList).not.toContain('ant-tabs-nav-container-scrolling');
-    });
+    }));
   });
 });
 

diff --git a/components/tabs/nz-tabset.component.html b/components/tabs/nz-tabset.component.html
@@ -1,5 +1,13 @@
 <div
   class="ant-tabs-bar"
+  [class.ant-tabs-card-bar]="nzType === 'card'"
+  [class.ant-tabs-top-bar]="nzTabPosition === 'top'"
+  [class.ant-tabs-bottom-bar]="nzTabPosition === 'bottom'"
+  [class.ant-tabs-left-bar]="nzTabPosition === 'left'"
+  [class.ant-tabs-right-bar]="nzTabPosition === 'right'"
+  [class.ant-tabs-small-bar]="nzSize === 'small'"
+  [class.ant-tabs-default-bar]="nzSize === 'default'"
+  [class.ant-tabs-large-bar]="nzSize === 'large'"
   nz-tabs-nav
   role="tablist"
   tabindex="0"
@@ -24,9 +32,12 @@
     <ng-container *nzStringTemplateOutlet="tab.nzTitle">{{ tab.nzTitle }}</ng-container>
   </div>
 </div>
-<div
-  class="ant-tabs-content"
+<div class="ant-tabs-content"
   #tabContent
+  [class.ant-tabs-top-content]="nzTabPosition === 'top'"
+  [class.ant-tabs-bottom-content]="nzTabPosition === 'bottom'"
+  [class.ant-tabs-left-content]="nzTabPosition === 'left'"
+  [class.ant-tabs-right-content]="nzTabPosition === 'right'"
   [class.ant-tabs-content-animated]="tabPaneAnimated"
   [class.ant-tabs-content-no-animated]="!tabPaneAnimated"
   [style.margin-left.%]="tabPaneAnimated&&(-nzSelectedIndex*100)">

diff --git a/components/tabs/nz-tabset.component.ts b/components/tabs/nz-tabset.component.ts
@@ -47,9 +47,6 @@ export type NzTabType = 'line' | 'card';
   encapsulation      : ViewEncapsulation.None,
   providers          : [ NzUpdateHostClassService ],
   templateUrl        : './nz-tabset.component.html',
-  host               : {
-    '(scroll)': 'onScroll($event)'
-  },
   styles             : [ `
     nz-tabset {
       display: block;
@@ -235,18 +232,6 @@ export class NzTabSetComponent implements AfterContentChecked, OnInit, AfterView
     this.listOfNzTabComponent.splice(this.listOfNzTabComponent.indexOf(value), 1);
   }
 
-  // From https://github.com/react-component/tabs/blob/master/src/Tabs.js
-  // Prevent focus to make the Tabs scroll offset
-  onScroll($event: Event): void {
-    const target: Element = $event.target as Element;
-    if (target.scrollLeft > 0) {
-      target.scrollLeft = 0;
-      if (this.document && this.document.activeElement) {
-        (this.document.activeElement as HTMLElement).blur();
-      }
-    }
-  }
-
   // tslint:disable-next-line:no-any
   constructor(private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService, private elementRef: ElementRef, @Optional() @Inject(DOCUMENT) private document: any) {
   }