chore: sync class name

NG-ZORRO · Mar 26, 2019 · b9bfa01 · b9bfa01
1 parent 5ca6f9c
commit b9bfa01
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 89 deletions.
diff --git a/components/page-header/doc/index.en-US.md b/components/page-header/doc/index.en-US.md
@@ -20,17 +20,17 @@ Use when you need the user to quickly understand what the current page is and wh
 ### nz-page-header
 | Param | Description | Type | Default value |
 | ----- | ----------- | ---- | ------------- |
-| nzTitle | title string | `string｜TemplateRef<void>` | - |
-| nzSubTitle | subTitle string | `string｜TemplateRef<void>` | - |
-| nzBackIcon | custom back icon | `string｜TemplateRef<void>` | - |
-| nzBack | back icon click event | `EventEmitter<void>` | - |
+| `[nzTitle]` | title string | `string｜TemplateRef<void>` | - |
+| `[nzSubTitle]` | subTitle string | `string｜TemplateRef<void>` | - |
+| `[nzBackIcon]` | custom back icon | `string｜TemplateRef<void>` | - |
+| `[nzBack]` | back icon click event | `EventEmitter<void>` | - |
 
 ### Page header sections
 | Element | Description |
 | ----- | ----------- | ---- | ------------- |
 | `<nz-page-header-title>` | Title section |
-| `<nz-page-header-subtitle>` | Subtitle section |
-| `<nz-page-header-content>` | Content section |
+| `<nz-page-header-subtitle>` | Subtitle section, `[nzTitle]` has high priority |
+| `<nz-page-header-content>` | Content section, `[nzSubTitle]` has high priority |
 | `<nz-page-header-footer>` | Footer section |
 | `<nz-page-header-tags>` |  Tags container after the title |
 | `<nz-page-header-extra>` | Operating area, at the end of the line of the title line |

diff --git a/components/page-header/doc/index.zh-CN.md b/components/page-header/doc/index.zh-CN.md
@@ -21,16 +21,16 @@ subtitle: 页头
 ### nz-page-header
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| nzTitle | title 文字 | `string｜TemplateRef<void>` | - |
-| nzSubTitle | subTitle 文字 | `string｜TemplateRef<void>` | - |
-| nzBackIcon | 自定义 back icon | `string｜TemplateRef<void>` | - |
-| nzBack | 返回按钮的点击事件 | `EventEmitter<void>` | - |
+| `[nzTitle]` | title 文字 | `string｜TemplateRef<void>` | - |
+| `[nzSubTitle]` | subTitle 文字 | `string｜TemplateRef<void>` | - |
+| `[nzBackIcon]` | 自定义 back icon | `string｜TemplateRef<void>` | - |
+| `[nzBack]` | 返回按钮的点击事件 | `EventEmitter<void>` | - |
 
 ### Page header 组成部分
 | 元素 | 说明 |
 | ----- | ----------- | ---- | ------------- |
-| `<nz-page-header-title>` | title 部分 |
-| `<nz-page-header-subtitle>` | subtitle 部分 |
+| `<nz-page-header-title>` | title 部分，`[nzTitle]` 优先级更高 |
+| `<nz-page-header-subtitle>` | subtitle 部分，`[nzSubTitle]` 优先级更高 |
 | `<nz-page-header-content>` | 内容部分 |
 | `<nz-page-header-footer>` | 底部部分 |
 | `<nz-page-header-tags>` |  title 旁的 tag 列表容器 |

diff --git a/components/page-header/nz-page-header-cells.ts b/components/page-header/nz-page-header-cells.ts
@@ -1,54 +1,54 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
   selector: 'nz-page-header-title, [nz-page-header-title]',
-  host    : {
-    'class': 'ant-page-header-title'
+  host: {
+    class: 'ant-page-header-title-view-title'
   }
 })
-export class NzPageHeaderTitleDirective { }
+export class NzPageHeaderTitleDirective {}
 
 @Directive({
   selector: 'nz-page-header-subtitle, [nz-page-header-subtitle]',
-  host    : {
-    'class': 'ant-page-header-sub-title'
+  host: {
+    class: 'ant-page-header-title-view-sub-title'
   }
 })
-export class NzPageHeaderSubtitleDirective { }
+export class NzPageHeaderSubtitleDirective {}
 
 @Directive({
   selector: 'nz-page-header-content, [nz-page-header-content]',
-  host    : {
-    'class': 'ant-page-header-content-view'
+  host: {
+    class: 'ant-page-header-content-view'
   }
 })
-export class NzPageHeaderContentDirective { }
+export class NzPageHeaderContentDirective {}
 
 @Directive({
   selector: 'nz-page-header-tags, [nz-page-header-tags]',
-  host    : {
-    'class': 'ant-page-header-tags'
+  host: {
+    class: 'ant-page-header-title-view-tags'
   }
 })
-export class NzPageHeaderTagDirective { }
+export class NzPageHeaderTagDirective {}
 
 @Directive({
   selector: 'nz-page-header-extra, [nz-page-header-extra]',
-  host    : {
-    'class': 'ant-page-header-extra'
+  host: {
+    class: 'ant-page-header-title-view-extra'
   }
 })
-export class NzPageHeaderExtraDirective { }
+export class NzPageHeaderExtraDirective {}
 
 @Directive({
   selector: 'nz-page-header-footer, [nz-page-header-footer]',
-  host    : {
-    'class': 'ant-page-header-footer'
+  host: {
+    class: 'ant-page-header-footer'
   }
 })
-export class NzPageHeaderFooterDirective { }
+export class NzPageHeaderFooterDirective {}
 
 @Directive({
   selector: 'nz-breadcrumb[nz-page-header-breadcrumb]'
 })
-export class NzPageHeaderBreadcrumbDirective { }
+export class NzPageHeaderBreadcrumbDirective {}
diff --git a/components/page-header/nz-page-header.component.html b/components/page-header/nz-page-header.component.html
@@ -7,11 +7,11 @@
 </div>
 
 <div class="ant-page-header-title-view">
-  <span class="ant-page-header-title" *ngIf="nzTitle">
+  <span class="ant-page-header-title-view-title" *ngIf="nzTitle">
     <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
   </span>
   <ng-content *ngIf="!nzTitle" select="nz-page-header-title, [nz-page-header-title]"></ng-content>
-  <span class="ant-page-header-sub-title" *ngIf="nzSubtitle">
+  <span class="ant-page-header-title-view-sub-title" *ngIf="nzSubtitle">
     <ng-container *nzStringTemplateOutlet="nzSubtitle">{{ nzSubtitle }}</ng-container>
   </span>
   <ng-content *ngIf="!nzSubtitle" select="nz-page-header-subtitle, [nz-page-header-subtitle]"></ng-content>

diff --git a/components/page-header/nz-page-header.component.ts b/components/page-header/nz-page-header.component.ts
@@ -1,28 +1,31 @@
 import {
   ChangeDetectionStrategy,
-  Component, ContentChild,
+  Component,
+  ContentChild,
+  ElementRef,
   EventEmitter,
-  Input, OnChanges,
+  Input,
+  OnChanges,
   OnInit,
-  Output, SimpleChanges,
+  Output,
+  SimpleChanges,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 import { NzPageHeaderFooterDirective } from './nz-page-header-cells';
 
 @Component({
-  selector       : 'nz-page-header',
-  templateUrl    : './nz-page-header.component.html',
-  styleUrls      : [ './nz-page-header.component.less' ],
+  selector: 'nz-page-header',
+  templateUrl: './nz-page-header.component.html',
+  styleUrls: ['./nz-page-header.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation  : ViewEncapsulation.None,
-  host           : {
-    'class'                              : 'ant-page-header',
-    '[class.ant-page-header-have-footer]': 'nzPageHeaderFooter'
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'ant-page-header',
+    '[class.ant-page-header-has-footer]': 'nzPageHeaderFooter'
   }
 })
 export class NzPageHeaderComponent implements OnInit, OnChanges {
-
   isTemplateRefBackIcon = false;
   isStringBackIcon = false;
 
@@ -31,16 +34,13 @@ export class NzPageHeaderComponent implements OnInit, OnChanges {
   @Input() nzSubtitle: string | TemplateRef<void>;
   @Output() readonly nzBack = new EventEmitter<void>();
 
-  @ContentChild(NzPageHeaderFooterDirective) nzPageHeaderFooter;
+  @ContentChild(NzPageHeaderFooterDirective) nzPageHeaderFooter: ElementRef<NzPageHeaderFooterDirective>;
 
-  constructor() {
-  }
+  constructor() {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
   ngOnChanges(changes: SimpleChanges): void {
-
     if (changes.hasOwnProperty('nzBackIcon')) {
       this.isTemplateRefBackIcon = changes.nzBackIcon.currentValue instanceof TemplateRef;
       this.isStringBackIcon = typeof changes.nzBackIcon.currentValue === 'string';
@@ -50,5 +50,4 @@ export class NzPageHeaderComponent implements OnInit, OnChanges {
   onBack(): void {
     this.nzBack.emit();
   }
-
 }
diff --git a/components/page-header/nz-page-header.spec.ts b/components/page-header/nz-page-header.spec.ts
@@ -10,28 +10,26 @@ import { NzPageHeaderComponent } from './nz-page-header.component';
 import { NzPageHeaderModule } from './nz-page-header.module';
 
 describe('NzPageHeaderComponent', () => {
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports     : [ NzPageHeaderModule ],
-      schemas     : [ NO_ERRORS_SCHEMA ],
+      imports: [NzPageHeaderModule],
+      schemas: [NO_ERRORS_SCHEMA],
       declarations: [
         NzDemoPageHeaderBasicComponent,
         NzDemoPageHeaderBreadcrumbComponent,
         NzDemoPageHeaderContentComponent,
         NzDemoPageHeaderActionsComponent
       ]
-    })
-    .compileComponents();
+    }).compileComponents();
   }));
 
   it('should basic work', () => {
     const fixture = TestBed.createComponent(NzDemoPageHeaderBasicComponent);
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
     fixture.detectChanges();
     expect(pageHeader.nativeElement.classList).toContain('ant-page-header');
-    expect(pageHeader.nativeElement.querySelector('.ant-page-header-title')).toBeTruthy();
-    expect(pageHeader.nativeElement.querySelector('.ant-page-header-sub-title')).toBeTruthy();
+    expect(pageHeader.nativeElement.querySelector('.ant-page-header-title-view-title')).toBeTruthy();
+    expect(pageHeader.nativeElement.querySelector('.ant-page-header-title-view-sub-title')).toBeTruthy();
   });
 
   it('should breadcrumb work', () => {
@@ -55,8 +53,10 @@ describe('NzPageHeaderComponent', () => {
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
     fixture.detectChanges();
     expect(pageHeader.nativeElement.classList).toContain('ant-page-header-have-footer');
-    expect(pageHeader.nativeElement.querySelector('nz-page-header-extra.ant-page-header-extra')).toBeTruthy();
-    expect(pageHeader.nativeElement.querySelector('nz-page-header-tags.ant-page-header-tags')).toBeTruthy();
+    expect(
+      pageHeader.nativeElement.querySelector('nz-page-header-extra.ant-page-header-title-view-extra')
+    ).toBeTruthy();
+    expect(pageHeader.nativeElement.querySelector('nz-page-header-tags.ant-page-header-title-view-tags')).toBeTruthy();
     expect(pageHeader.nativeElement.querySelector('nz-page-header-footer.ant-page-header-footer')).toBeTruthy();
   });
 
@@ -86,5 +86,4 @@ describe('NzPageHeaderComponent', () => {
     fixture.detectChanges();
     expect(context.onBack).toHaveBeenCalled();
   });
-
 });
diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less
@@ -5,63 +5,63 @@
 
 .@{pageheader-prefix-cls} {
   .reset-component;
-  padding: 16px 32px;
   position: relative;
+  padding: 16px 32px;
   background: @component-background;
 
-  &.@{pageheader-prefix-cls}-have-footer {
+  &.@{pageheader-prefix-cls}-has-footer {
     padding: 20px 32px;
     padding-bottom: 0;
   }
 
-  .@{pageheader-prefix-cls}-back-icon {
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 16px;
-    padding: 4px 0;
+  &-back-icon {
     display: inline-block;
+    padding: 4px 0;
+    font-size: 16px;
+    line-height: 100%;
+    cursor: pointer;
+    i:hover {
+      color: @primary-color;
+    }
   }
 
-  .ant-divider {
-    margin: 0 12px;
+  .@{ant-prefix}-divider {
     height: 14px;
-    margin-top: 3px;
-    vertical-align: top;
+    margin: 0 12px;
   }
 
   .@{ant-prefix}-breadcrumb {
     margin-bottom: 12px;
   }
 
-  .@{pageheader-prefix-cls}-title-view {
+  &-title-view {
     display: inline-block;
-    line-height: 24px;
-    .@{pageheader-prefix-cls}-title {
-      line-height: 24px;
+    &-title {
       display: inline-block;
-      font-size: 16px;
+      padding-right: 12px;
       color: @heading-color;
       font-weight: bold;
-      padding-right: 12px;
+      font-size: 16px;
+      line-height: 1.4;
     }
 
-    .@{pageheader-prefix-cls}-sub-title {
-      font-size: 14px;
+    &-sub-title {
       display: inline-block;
-      color: @text-color-secondary;
-      line-height: 24px;
       padding-right: 12px;
+      color: @text-color-secondary;
+      font-size: 14px;
+      line-height: 1.8;
     }
 
-    .@{pageheader-prefix-cls}-tags {
-      vertical-align: top;
+    &-tags {
       display: inline-block;
+      vertical-align: top;
     }
 
-    .@{pageheader-prefix-cls}-extra {
+    &-extra {
       position: absolute;
-      right: 32px;
       top: 16px;
+      right: 32px;
       > * {
         margin-right: 8px;
       }
@@ -71,11 +71,11 @@
     }
   }
 
-  .@{pageheader-prefix-cls}-content-view {
+  &-content-view {
     padding-top: 12px;
   }
 
-  .@{pageheader-prefix-cls}-footer {
+  &-footer {
     margin: 0 -8px;
     padding-top: 24px;
     .@{ant-prefix}-tabs-bar {