purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removed router animations since they are causing problems on Edge and also they make Fuse feel slower

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-15 16:36:51 +03:00
parent 562ae61098
commit 8db1206c91
5 changed files with 9 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/@fuse/components/theme-options/theme-options.component.html
View File

@ -367,36 +367,6 @@
</div> </div>
<!-- ROUTER ANIMATION -->
<div class="group">
<h2>Router Animation</h2>
<mat-form-field class="w-100-p">
<mat-select class="p-0" formControlName="routerAnimation">
<mat-option value="none">
None
</mat-option>
<mat-option value="slideUp">
Slide up
</mat-option>
<mat-option value="slideDown">
Slide down
</mat-option>
<mat-option value="slideRight">
Slide right
</mat-option>
<mat-option value="slideLeft">
Slide left
</mat-option>
<mat-option value="fadeIn">
Fade in
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form> </form>
</div> </div>

3
src/@fuse/components/theme-options/theme-options.component.ts
View File

@ -81,8 +81,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
background: new FormControl() background: new FormControl()
}) })
}), }),
customScrollbars: new FormControl(), customScrollbars: new FormControl()
routerAnimation : new FormControl()
}); });
// Subscribe to the config changes // Subscribe to the config changes

1
src/@fuse/types/fuse-config.ts
View File

@ -21,5 +21,4 @@ export interface FuseConfig
} }
}; };
customScrollbars: boolean; customScrollbars: boolean;
routerAnimation: 'fadeIn' | 'slideUp' | 'slideDown' | 'slideRight' | 'slideLeft' | 'none';
} }

3
src/app/fuse-config/index.ts
View File

@ -29,6 +29,5 @@ export const fuseConfig: FuseConfig = {
background: 'mat-fuse-dark-900-bg' background: 'mat-fuse-dark-900-bg'
} }
}, },
customScrollbars: true, customScrollbars: true
routerAnimation : 'none'
}; };

117
src/app/layout/components/content/content.component.ts
View File

@ -1,120 +1,17 @@
import { Component, HostBinding, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { takeUntil } from 'rxjs/operators';
import { fuseAnimations } from '@fuse/animations';
import { FuseConfigService } from '@fuse/services/config.service';
@Component({ @Component({
selector: 'content', selector : 'content',
templateUrl: './content.component.html', templateUrl : './content.component.html',
styleUrls: ['./content.component.scss'], styleUrls : ['./content.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None
animations: fuseAnimations
}) })
export class ContentComponent implements OnInit, OnDestroy export class ContentComponent
{ {
fuseConfig: any;
// @HostBinding('@routerTransitionUp')
routeAnimationUp: boolean;
// @HostBinding('@routerTransitionDown')
routeAnimationDown: boolean;
// @HostBinding('@routerTransitionRight')
routeAnimationRight: boolean;
// @HostBinding('@routerTransitionLeft')
routeAnimationLeft: boolean;
// @HostBinding('@routerTransitionFade')
routeAnimationFade: boolean;
// Private
private _unsubscribeAll: Subject<any>;
/** /**
* Constructor * Constructor
*
* @param {ActivatedRoute} _activatedRoute
* @param {FuseConfigService} _fuseConfigService
* @param {Router} _router
*/ */
constructor( constructor()
private _activatedRoute: ActivatedRoute,
private _fuseConfigService: FuseConfigService,
private _router: Router
)
{ {
// Set the defaults
this.routeAnimationUp = false;
this.routeAnimationDown = false;
this.routeAnimationRight = false;
this.routeAnimationLeft = false;
this.routeAnimationFade = false;
// Set the private defaults
this._unsubscribeAll = new Subject();
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Subscribe to the router events for router animations
this._router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
map(() => this._activatedRoute)
)
.subscribe(() =>
{
switch (this.fuseConfig.routerAnimation)
{
case 'fadeIn':
this.routeAnimationFade = !this.routeAnimationFade;
break;
case 'slideUp':
this.routeAnimationUp = !this.routeAnimationUp;
break;
case 'slideDown':
this.routeAnimationDown = !this.routeAnimationDown;
break;
case 'slideRight':
this.routeAnimationRight = !this.routeAnimationRight;
break;
case 'slideLeft':
this.routeAnimationLeft = !this.routeAnimationLeft;
break;
}
});
// Subscribe to config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(
(config) =>
{
this.fuseConfig = config;
}
);
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
} }
} }