From 9a1de8331cdbf2e6bd3fc894a9f3c8f51d468b69 Mon Sep 17 00:00:00 2001
From: VTHINKXIE <vthinkxie@users.noreply.github.com>
Date: Tue, 22 Aug 2017 17:16:55 +0900
Subject: [PATCH] feat(showcase): auto scroll to top when router change & sync
 code icon with antd (#124)

close #26
---
 src/showcase/app.component.ts                 |  2 ++
 .../share/nz-codebox/nz-codebox.component.ts  |  5 ++-
 src/showcase/share/nz-codebox/nz-codebox.less | 32 +++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/showcase/app.component.ts b/src/showcase/app.component.ts
index d0607ee9a8c..b59be3b1f2c 100644
--- 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
index 2cef2dff2cc..e3a704ae300 100644
--- 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
index e69de29bb2d..234ca7fceec 100644
--- 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;
+}