feat(showcase): auto scroll to top when router change & sync code ico…

…n with antd (#124) close #26
NG-ZORRO · Aug 22, 2017 · 9a1de83 · 9a1de83
1 parent 81cbae9
commit 9a1de83
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/src/showcase/app.component.ts b/src/showcase/app.component.ts
@@ -2,6 +2,7 @@ import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { ROUTER_LIST } from './router';
+
 @Component({
   selector     : 'app-root',
   encapsulation: ViewEncapsulation.None,
@@ -43,6 +44,7 @@ export class AppComponent implements OnInit {
         if (this.router.url !== '/' + this.searchComponent) {
           this.searchComponent = null;
         }
+        window.scrollTo(0, 0);
       }
     });
   }

diff --git a/src/showcase/share/nz-codebox/nz-codebox.component.ts b/src/showcase/share/nz-codebox/nz-codebox.component.ts
@@ -17,7 +17,10 @@ import { DOCUMENT } from '@angular/common';
         </div>
         <ng-content select="[intro]"></ng-content>
         <nz-tooltip [nzTitle]="nzExpanded?'收起代码':'展开代码'">
-          <img nz-tooltip alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/NBjNKmzFsnATotIWoZmP.svg" class="collapse" (click)="nzExpanded=!nzExpanded">
+          <span class="code-expand-icon" nz-tooltip (click)="nzExpanded=!nzExpanded">
+            <img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" [class.code-expand-icon-show]="nzExpanded" [class.code-expand-icon-hide]="!nzExpanded">
+            <img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" [class.code-expand-icon-show]="!nzExpanded" [class.code-expand-icon-hide]="nzExpanded">
+          </span>
         </nz-tooltip>
       </section>
       <section class="highlight-wrapper" [ngClass]="{'highlight-wrapper-expand':nzExpanded}">

diff --git a/src/showcase/share/nz-codebox/nz-codebox.less b/src/showcase/share/nz-codebox/nz-codebox.less
@@ -0,0 +1,32 @@
+.code-expand-icon {
+  position: absolute;
+  right: 16px;
+  bottom: 23px;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+}
+
+.ant-tooltip-open .code-expand-icon-show {
+  opacity: 1;
+}
+
+.code-expand-icon-hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.code-expand-icon-show {
+  opacity: .55;
+  pointer-events: auto;
+}
+
+.code-expand-icon-hide, .code-expand-icon-show {
+  transition: all .4s;
+  user-select: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+}