diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index cb31e9a7..491dd3a0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,31 +1,14 @@
-import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
+import { Component } from '@angular/core';
+import { FuseSplashScreenService } from './core/services/splash-screen.service';
@Component({
- selector : 'body',
+ selector : 'fuse-root',
templateUrl: './app.component.html',
styleUrls : ['./app.component.scss']
})
-export class AppComponent implements OnInit
+export class AppComponent
{
- constructor(
- private _renderer: Renderer2,
- private _elementRef: ElementRef
- )
+ constructor(private fuseSplashScreen: FuseSplashScreenService)
{
}
-
- addClass(className: string)
- {
- this._renderer.addClass(this._elementRef.nativeElement, className);
- }
-
- removeClass(className: string)
- {
- this._renderer.removeClass(this._elementRef.nativeElement, className);
- }
-
- ngOnInit()
- {
-
- }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6413d7bd..4e1c0186 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -17,6 +17,7 @@ import { FuseMainModule } from './main/main.module';
import { PagesModule } from './main/content/pages/pages.module';
import { UIModule } from './main/content/ui/ui.module';
import { ComponentsModule } from './main/content/components/components.module';
+import { FuseSplashScreenService } from './core/services/splash-screen.service';
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
@@ -77,6 +78,9 @@ const appRoutes: Routes = [
UIModule,
ComponentsModule
],
+ providers: [
+ FuseSplashScreenService
+ ],
bootstrap : [
AppComponent
]
diff --git a/src/app/core/services/splash-screen.service.ts b/src/app/core/services/splash-screen.service.ts
new file mode 100644
index 00000000..4ac990c4
--- /dev/null
+++ b/src/app/core/services/splash-screen.service.ts
@@ -0,0 +1,65 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import { NavigationEnd, Router } from '@angular/router';
+
+@Injectable()
+export class FuseSplashScreenService
+{
+ splashScreenEl;
+ public player: AnimationPlayer;
+
+ constructor(
+ private animationBuilder: AnimationBuilder,
+ @Inject(DOCUMENT) private document: any,
+ private router: Router
+ )
+ {
+ this.splashScreenEl = this.document.body.querySelector('#fuse-splash-screen');
+
+ const hideOnLoad = this.router.events.subscribe((event) => {
+ if ( event instanceof NavigationEnd )
+ {
+ setTimeout(() => {
+ this.hide();
+ hideOnLoad.unsubscribe();
+ }, 0);
+ }
+ }
+ );
+ }
+
+ show()
+ {
+ this.player =
+ this.animationBuilder
+ .build([
+ style({
+ opacity: '0',
+ zIndex : '99999'
+ }),
+ animate('400ms ease', style({opacity: '1'}))
+ ]).create(this.splashScreenEl);
+
+ setTimeout(() => {
+ this.player.play();
+ }, 0);
+ }
+
+ hide()
+ {
+ this.player =
+ this.animationBuilder
+ .build([
+ style({opacity: '1'}),
+ animate('400ms ease', style({
+ opacity: '0',
+ zIndex : '-10'
+ }))
+ ]).create(this.splashScreenEl);
+
+ setTimeout(() => {
+ this.player.play();
+ }, 0);
+ }
+}
diff --git a/src/app/main/content/content.component.ts b/src/app/main/content/content.component.ts
index 5c1f0514..2f85f599 100644
--- a/src/app/main/content/content.component.ts
+++ b/src/app/main/content/content.component.ts
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
-// import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { NavigationEnd, Router } from '@angular/router';
@Component({
@@ -10,8 +10,8 @@ import { NavigationEnd, Router } from '@angular/router';
export class FuseContentComponent implements OnInit
{
constructor(
- private router: Router
- // private perfectScrollbarDirective: PerfectScrollbarDirective
+ private router: Router,
+ private perfectScrollbarDirective: PerfectScrollbarDirective
)
{
@@ -23,7 +23,7 @@ export class FuseContentComponent implements OnInit
if ( event instanceof NavigationEnd )
{
setTimeout(() => {
- // this.perfectScrollbarDirective.scrollToTop();
+ this.perfectScrollbarDirective.scrollToTop();
}, 0);
}
}
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index f92d4acf..24aff813 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
import { FuseLayoutService } from '../core/services/layout.service';
import { Subscription } from 'rxjs/Subscription';
@@ -13,7 +13,11 @@ export class FuseMainComponent implements OnInit, OnDestroy
onSettingsChanged: Subscription;
layoutSettings: { navigation: string, toolbar: string, footer: string };
- constructor(private layoutService: FuseLayoutService)
+ constructor(
+ private layoutService: FuseLayoutService,
+ private _renderer: Renderer2,
+ private _elementRef: ElementRef
+ )
{
this.onSettingsChanged =
this.layoutService.onSettingsChanged
@@ -32,4 +36,14 @@ export class FuseMainComponent implements OnInit, OnDestroy
{
this.onSettingsChanged.unsubscribe();
}
+
+ addClass(className: string)
+ {
+ this._renderer.addClass(this._elementRef.nativeElement, className);
+ }
+
+ removeClass(className: string)
+ {
+ this._renderer.removeClass(this._elementRef.nativeElement, className);
+ }
}
diff --git a/src/app/main/main.module.ts b/src/app/main/main.module.ts
index 48f3e516..629067bf 100644
--- a/src/app/main/main.module.ts
+++ b/src/app/main/main.module.ts
@@ -1,6 +1,8 @@
import { NgModule } from '@angular/core';
-import { SharedModule } from '../core/modules/shared.module';
import { RouterModule } from '@angular/router';
+
+import { SharedModule } from '../core/modules/shared.module';
+
import { FuseMainComponent } from './main.component';
import { FuseContentComponent } from './content/content.component';
import { FuseFooterComponent } from './footer/footer.component';
diff --git a/src/app/main/navbar/navbar.component.scss b/src/app/main/navbar/navbar.component.scss
index 21763a0d..9dc8eae4 100644
--- a/src/app/main/navbar/navbar.component.scss
+++ b/src/app/main/navbar/navbar.component.scss
@@ -1,6 +1,6 @@
@import "../../core/scss/fuse";
-body {
+fuse-main {
&.fuse-nav-bar-folded {
diff --git a/src/app/main/navbar/navbar.component.ts b/src/app/main/navbar/navbar.component.ts
index e484b976..0f0ab62c 100644
--- a/src/app/main/navbar/navbar.component.ts
+++ b/src/app/main/navbar/navbar.component.ts
@@ -1,9 +1,9 @@
import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { AppComponent } from '../../app.component';
import { Subscription } from 'rxjs/Subscription';
import { FuseMatchMedia } from '../../core/services/match-media.service';
import { FuseNavbarService } from './navbar.service';
import { ObservableMedia } from '@angular/flex-layout';
+import { FuseMainComponent } from '../main.component';
@Component({
selector : 'fuse-navbar',
@@ -22,7 +22,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
matchMediaWatcher: Subscription;
constructor(
- private bodyEl: AppComponent,
+ private fuseMainComponentEl: FuseMainComponent,
private fuseMatchMedia: FuseMatchMedia,
private navBarService: FuseNavbarService,
public media: ObservableMedia
@@ -117,14 +117,14 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
activateFolded()
{
this.isFoldedActive = true;
- this.bodyEl.addClass('fuse-nav-bar-folded');
+ this.fuseMainComponentEl.addClass('fuse-nav-bar-folded');
this.isFoldedOpen = false;
}
deActivateFolded()
{
this.isFoldedActive = false;
- this.bodyEl.removeClass('fuse-nav-bar-folded');
+ this.fuseMainComponentEl.removeClass('fuse-nav-bar-folded');
this.isFoldedOpen = false;
}
@@ -144,13 +144,13 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
{
if ( this.isClosed )
{
- this.bodyEl.addClass('fuse-nav-bar-opened');
- this.bodyEl.removeClass('fuse-nav-bar-closed');
+ this.fuseMainComponentEl.addClass('fuse-nav-bar-opened');
+ this.fuseMainComponentEl.removeClass('fuse-nav-bar-closed');
}
else
{
- this.bodyEl.addClass('fuse-nav-bar-closed');
- this.bodyEl.removeClass('fuse-nav-bar-opened');
+ this.fuseMainComponentEl.addClass('fuse-nav-bar-closed');
+ this.fuseMainComponentEl.removeClass('fuse-nav-bar-opened');
}
}
diff --git a/src/app/main/toolbar/toolbar.component.ts b/src/app/main/toolbar/toolbar.component.ts
index eea278d6..705af425 100644
--- a/src/app/main/toolbar/toolbar.component.ts
+++ b/src/app/main/toolbar/toolbar.component.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { FuseSplashScreenService } from '../../core/services/splash-screen.service';
@Component({
selector : 'fuse-toolbar',
@@ -16,7 +17,6 @@ export class FuseToolbarComponent
constructor(private router: Router)
{
-
this.userStatusOptions = [
{
'title': 'Online',
diff --git a/src/index.html b/src/index.html
index 94e155d9..7ef42e29 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,8 +14,209 @@
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+