From 0f5c7c7d100bcc2db8d91162b67084aa0753595a Mon Sep 17 00:00:00 2001
From: xmlking <xmlking@gmail.com>
Date: Sun, 25 Nov 2018 11:49:34 -0800
Subject: [PATCH] fix(animations): making hierarchical route animations default

---
 libs/animations/src/lib/route.animation.ts               | 8 ++++----
 libs/core/src/lib/core.module.ts                         | 2 +-
 .../dashboard-layout/dashboard-layout.component.ts       | 4 ++--
 .../src/lib/containers/overview/overview.component.html  | 9 ++++++---
 libs/dashboard/src/lib/dashboard.module.ts               | 6 +++---
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/libs/animations/src/lib/route.animation.ts b/libs/animations/src/lib/route.animation.ts
index bcc6df2a6..ff9ba0cd9 100644
--- a/libs/animations/src/lib/route.animation.ts
+++ b/libs/animations/src/lib/route.animation.ts
@@ -39,11 +39,11 @@ export const hierarchicalRouteAnimation = trigger('routeAnimation', [
     query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 }), { optional: true }),
     // animate the leave page away
     group([
-      query(':leave', [animate('0.3s cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(-100%)' }))], {
+      query(':leave', [animate('500ms ease-in-out', style({ transform: 'translateX(-100%)' }))], {
         optional: true,
       }),
       // and now reveal the enter
-      query(':enter', animate('0.3s cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(0)' })), {
+      query(':enter', animate('500ms ease-in-out', style({ transform: 'translateX(0)' })), {
         optional: true,
       }),
       // query('@fadeAnimation', animateChild(), {optional: true}),
@@ -55,11 +55,11 @@ export const hierarchicalRouteAnimation = trigger('routeAnimation', [
     query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 }), { optional: true }),
     // animate the leave page away
     group([
-      query(':leave', [animate('0.3s cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(100%)' }))], {
+      query(':leave', [animate('500ms ease-in-out', style({ transform: 'translateX(100%)' }))], {
         optional: true,
       }),
       // and now reveal the enter
-      query(':enter', animate('0.3s cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(0)' })), {
+      query(':enter', animate('500ms ease-in-out', style({ transform: 'translateX(0)' })), {
         optional: true,
       }),
       // query('@fadeAnimation', animateChild() , {optional: true}),
diff --git a/libs/core/src/lib/core.module.ts b/libs/core/src/lib/core.module.ts
index 45f01ab1d..0e1af19ba 100644
--- a/libs/core/src/lib/core.module.ts
+++ b/libs/core/src/lib/core.module.ts
@@ -65,7 +65,7 @@ library.add(faTwitter, faGithub, faGoogle);
     environment.envName === 'mock'
       ? HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {
           passThruUnknownUrl: true,
-          // delay: 500,
+          delay: 1000,
           // apiBase: 'api'
         })
       : [],
diff --git a/libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts b/libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts
index 02a44e06c..f766732ec 100644
--- a/libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts
+++ b/libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts
@@ -15,8 +15,8 @@ import { WINDOW } from '@ngx-starter-kit/core';
   selector: 'ngx-dashboard-layout',
   templateUrl: './dashboard-layout.component.html',
   styleUrls: ['./dashboard-layout.component.scss'],
-  animations: [routeAnimation],
-  // animations: [hierarchicalRouteAnimation],
+  // animations: [routeAnimation],
+  animations: [hierarchicalRouteAnimation],
   // encapsulation: ViewEncapsulation.None
 })
 export class DashboardLayoutComponent implements OnInit, OnDestroy {
diff --git a/libs/dashboard/src/lib/containers/overview/overview.component.html b/libs/dashboard/src/lib/containers/overview/overview.component.html
index 26a8d9806..422207a86 100644
--- a/libs/dashboard/src/lib/containers/overview/overview.component.html
+++ b/libs/dashboard/src/lib/containers/overview/overview.component.html
@@ -1,19 +1,22 @@
 <ngx-breadcrumbs title="Overview" [crumbs]="crumbs"></ngx-breadcrumbs>
 
 <div fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutGap="32px grid">
+  <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
+    <mat-card><a routerLink="/dashboard/grid/grid-list">Grid List</a></mat-card>
+  </div>
   <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
     <mat-card><a routerLink="/dashboard/grid/crud-table">CRUD Table</a></mat-card>
   </div>
   <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
-    <mat-card><a routerLink="/dashboard/grid/grid-list">Grid List</a></mat-card>
+    <mat-card><a routerLink="/dashboard/experiments/layout">Layout</a></mat-card>
   </div>
   <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
     <mat-card><a routerLink="/dashboard/experiments/animations">Animations</a></mat-card>
   </div>
   <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
-    <mat-card><a routerLink="/dashboard/experiments/layout">Layout</a></mat-card>
+    <mat-card><a routerLink="/dashboard/widgets">Widgets</a></mat-card>
   </div>
   <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
-    <mat-card><a routerLink="/home">Home</a></mat-card>
+    <mat-card><a routerLink="/dashboard/settings">Settings</a></mat-card>
   </div>
 </div>
diff --git a/libs/dashboard/src/lib/dashboard.module.ts b/libs/dashboard/src/lib/dashboard.module.ts
index 992fd128a..109af09ff 100644
--- a/libs/dashboard/src/lib/dashboard.module.ts
+++ b/libs/dashboard/src/lib/dashboard.module.ts
@@ -34,7 +34,7 @@ import { ProfileComponent } from './containers/profile/profile.component';
         data: { title: 'Dashboard', depth: 1 },
         children: [
           {
-            path: 'overview',
+            path: '',
             component: OverviewComponent,
             data: { title: 'Overview' },
           },
@@ -49,9 +49,9 @@ import { ProfileComponent } from './containers/profile/profile.component';
             data: { title: 'Settings', depth: '2' },
           },
           {
-            path: '',
+            path: 'widgets',
             loadChildren: '@ngx-starter-kit/widgets#WidgetsModule',
-            data: { title: 'Widgets', preload: true },
+            data: { title: 'Widgets', depth: '2', preload: false },
           },
           {
             path: 'grid',