animations

Hydrospheredata · Dec 19, 2018 · 237fe66 · 237fe66
2 parents 3a1950f + 997522d
commit 237fe66
Show file tree

Hide file tree

Showing 13 changed files with 173 additions and 7 deletions.
diff --git a/src/modules/applications/applications.module.ts b/src/modules/applications/applications.module.ts
@@ -29,6 +29,7 @@ import {
     DialogUpdateModelVersionComponent
 } from '@applications/components';
 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
     ApplicationsService,
     ApplicationsBuilderService,
@@ -68,6 +69,7 @@ const PRIVATE_COMPONENTS = [
         EffectsModule.forFeature([ApplicationsEffects]),
         ReactiveFormsModule,
         CodemirrorModule,
+        BrowserAnimationsModule,
     ],
     declarations: [
         ...PRIVATE_COMPONENTS,

diff --git a/src/modules/applications/applications.router.ts b/src/modules/applications/applications.router.ts
@@ -22,10 +22,12 @@ import { ApplicationsGuard } from '@applications/services';
                             {
                                 path: ':id',
                                 component: ApplicationsItemDetailComponent,
+                                data: { anim: 'appDetail' },
                             },
                             {
                                 path: ':id/:stageId',
                                 component: ApplicationsStageDetailComponent,
+                                data: { anim: 'appStageDetail' },
                             },
                         ],
                     },

diff --git a/src/modules/applications/components/applications-wrapper/applications-wrapper.component.html b/src/modules/applications/components/applications-wrapper/applications-wrapper.component.html
@@ -7,9 +7,12 @@
 
 <div class="content-wrapper">
     <hydro-sidebar 
+        class='sidebar'
         [sidebarData]="applications" 
         [sidebarTitle]="sidebarTitle" 
         [actionButton]="addButton" 
         [isFilterEnabled]="true"></hydro-sidebar>
-    <router-outlet></router-outlet>
+    <div [@anim]="prepare(out)" class="container" >
+        <router-outlet #out="outlet"></router-outlet>
+    </div>
 </div>
diff --git a/src/modules/applications/components/applications-wrapper/applications-wrapper.component.scss b/src/modules/applications/components/applications-wrapper/applications-wrapper.component.scss
@@ -2,3 +2,12 @@
     width: 100%;
     display: flex;
 }
+
+.sidebar {
+    z-index: 2;
+}
+
+.container {
+    width: 100%;
+    overflow: scroll;
+}
diff --git a/src/modules/applications/components/applications-wrapper/applications-wrapper.component.ts b/src/modules/applications/components/applications-wrapper/applications-wrapper.component.ts
@@ -1,3 +1,4 @@
+import { trigger, transition, animate, style, query, group } from '@angular/animations';
 import { Component, OnDestroy } from '@angular/core';
 
 import * as fromApplications from '@applications/reducers';
@@ -10,12 +11,61 @@ import { Application, Model } from '@shared/models/_index';
 import { DialogService } from '@dialog/dialog.service';
 import { Subscription, Observable } from 'rxjs';
 
+import { RouterOutlet } from '@angular/router';
 import { DialogAddApplicationComponent } from '@applications/components/dialogs';
 
 @Component({
     selector: 'hs-applications-wrapper',
     templateUrl: './applications-wrapper.component.html',
     styleUrls: ['./applications-wrapper.component.scss'],
+    animations: [
+        trigger('anim', [
+            transition('appDetail => appStageDetail', [
+                style({
+                    position: 'relative',
+                }),
+                query(':leave, :enter', [
+                    style({
+                        position: 'absolute',
+                        width: '100%',
+                        top: 0,
+                        left: 0,
+                    }),
+                ]),
+                query(':enter', [
+                   style({left: '100%'}),
+                ]),
+                group([
+                    query(':leave', animate('300ms', style({left: '-100%'}))),
+                    query(':enter', [
+                        animate('300ms', style({left: '0px'})),
+                    ]),
+                ]),
+            ]),
+            transition('appStageDetail => appDetail', [
+                style({
+                    position: 'relative',
+                }),
+                query(':leave, :enter', [
+                    style({
+                        position: 'absolute',
+                        width: '100%',
+                        top: 0,
+                        left: 0,
+                    }),
+                ]),
+                query(':enter', [
+                   style({left: '-100%'}),
+                ]),
+                group([
+                    query(':leave',  animate('300ms', style({left: '100%'}))),
+                    query(' :enter', [
+                        animate('300ms', style({left: '0px'})),
+                    ]),
+                ]),
+            ]),
+        ]),
+    ],
 })
 export class ApplicationsWrapperComponent implements OnDestroy {
     public sidebarTitle = 'Applications';
@@ -40,6 +90,10 @@ export class ApplicationsWrapperComponent implements OnDestroy {
         this.someModelIsFinished ? this.showAddApplicationDialog() : this.showAlert();
     }
 
+    prepare(outlet: RouterOutlet) {
+        return outlet.activatedRouteData && outlet.activatedRouteData.anim;
+    }
+
     ngOnDestroy(): void {
         this.modelsSub.unsubscribe();
     }

diff --git a/src/modules/core/services/loader-state.service.ts b/src/modules/core/services/loader-state.service.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+export interface LoaderState {
+  show: boolean;
+}
+
+@Injectable()
+export class LoaderStateService {
+    private loaderSubject: BehaviorSubject<LoaderState> = new BehaviorSubject<LoaderState>({show: false});
+
+    get loaderState() {
+        return this.loaderSubject.asObservable();
+    }
+
+    showLoader() {
+        this.loaderSubject.next({show: true} as LoaderState);
+    }
+
+    hideLoader() {
+        this.loaderSubject.next({show: false} as LoaderState);
+    }
+
+}
diff --git a/src/modules/models/components/model-details/model-details.component.html b/src/modules/models/components/model-details/model-details.component.html
@@ -1,4 +1,4 @@
-<div class="content">
+<div class="content modelDetail">
     <div class="content-header">
         <div class="content-header__title">{{ (model$ | async)?.name }}</div>
         <button class="button button--secondary button--secondary-remove" (click)="removeModel()">

diff --git a/src/modules/models/components/models-wrapper/models-wrapper.component.html b/src/modules/models/components/models-wrapper/models-wrapper.component.html
@@ -1,4 +1,11 @@
 <div class="content-wrapper">
-    <hydro-sidebar [sidebarData]="models" [sidebarTitle]="sidebarTitle" [isModels]="true" [isFilterEnabled]="true"></hydro-sidebar>
-    <router-outlet></router-outlet>
-</div>
+    <hydro-sidebar 
+        class="sidebar"
+        [sidebarData]="models"
+        [sidebarTitle]="sidebarTitle"
+        [isModels]="true"
+        [isFilterEnabled]="true"></hydro-sidebar>
+    <div [@anim]="prepare(out)" class="container" >
+        <router-outlet #out="outlet"></router-outlet>
+    </div>
+</div>
diff --git a/src/modules/models/components/models-wrapper/models-wrapper.component.scss b/src/modules/models/components/models-wrapper/models-wrapper.component.scss
@@ -2,3 +2,12 @@
     width: 100%;
     display: flex;
 }
+
+.sidebar {
+    z-index: 2;
+}
+
+.container {
+    width: 100%;
+    overflow: scroll;
+}
diff --git a/src/modules/models/components/models-wrapper/models-wrapper.component.spec.ts b/src/modules/models/components/models-wrapper/models-wrapper.component.spec.ts
@@ -1,5 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { SharedModule } from '@shared/shared.module';
 import { MockStoreProvider } from '@testing/mocks';
@@ -15,6 +16,7 @@ describe('ModelsWrapperComponent', () => {
             imports: [
                 SharedModule,
                 RouterTestingModule,
+                BrowserAnimationsModule,
             ],
             providers: [
                 MockStoreProvider,

diff --git a/src/modules/models/components/models-wrapper/models-wrapper.component.ts b/src/modules/models/components/models-wrapper/models-wrapper.component.ts
@@ -1,11 +1,61 @@
+import { trigger, transition, animate, style, query, group } from '@angular/animations';
 import { Component, OnInit } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 import * as fromModels from '@models/reducers';
 import { Store } from '@ngrx/store';
 
 @Component({
     selector: 'hydro-models-wrapper',
     templateUrl: './models-wrapper.component.html',
     styleUrls: ['./models-wrapper.component.scss'],
+    animations: [
+        trigger('anim', [
+            transition('modelDetail => modelVerDetail', [
+                style({
+                    position: 'relative',
+                }),
+                query(':leave, :enter', [
+                    style({
+                        position: 'absolute',
+                        width: '100%',
+                        top: 0,
+                        left: 0,
+                    }),
+                ]),
+                query(':enter', [
+                   style({left: '100%'}),
+                ]),
+                group([
+                    query(':leave', animate('300ms', style({left: '-100%'}))),
+                    query(':enter', [
+                        animate('300ms', style({left: '0px'})),
+                    ]),
+                ]),
+            ]),
+            transition('modelVerDetail => modelDetail', [
+                style({
+                    position: 'relative',
+                }),
+                query(':leave, :enter', [
+                    style({
+                        position: 'absolute',
+                        width: '100%',
+                        top: 0,
+                        left: 0,
+                    }),
+                ]),
+                query(':enter', [
+                   style({left: '-100%'}),
+                ]),
+                group([
+                    query(':leave',  animate('300ms', style({left: '100%'}))),
+                    query(' :enter', [
+                        animate('300ms', style({left: '0px'})),
+                    ]),
+                ]),
+            ]),
+        ]),
+    ],
 })
 export class ModelsWrapperComponent implements OnInit {
 
@@ -20,4 +70,7 @@ export class ModelsWrapperComponent implements OnInit {
         this.models = this.store.select(fromModels.getAllModels);
     }
 
+    prepare(outlet: RouterOutlet) {
+        return outlet.activatedRouteData && outlet.activatedRouteData.anim;
+    }
 }
diff --git a/src/modules/models/models.module.ts b/src/modules/models/models.module.ts
@@ -12,14 +12,13 @@ import {
     ModelDetailsComponent,
     ModelVersionDetailsComponent,
 } from '@models/components';
+import { DialogDeleteModelComponent } from '@models/components/dialogs';
 import { ModelEffects } from '@models/effects';
 import { reducers } from '@models/reducers';
 import { ModelsService, ModelDetailsGuard } from '@models/services';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
 import { ProfilesModule } from '@profiles/profiles.module';
-
-import { DialogDeleteModelComponent } from '@models/components/dialogs';
 @NgModule({
     imports: [
         ModelsRoutingModule,

diff --git a/src/modules/models/models.router.ts b/src/modules/models/models.router.ts
@@ -24,10 +24,12 @@ import { ModelDetailsGuard } from '@models/services';
                     {
                         path: ':modelId',
                         component: ModelDetailsComponent,
+                        data: { anim: 'modelDetail'},
                     },
                     {
                         path: ':modelId/:modelVersionId',
                         component: ModelVersionDetailsComponent,
+                        data: {anim: 'modelVerDetail'},
                     },
                 ],
             },