fix(animations): making hierarchical route animations default

xmlking · Nov 25, 2018 · 0f5c7c7 · 0f5c7c7
1 parent 32f9f88
commit 0f5c7c7
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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',