diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4e1c0186..6f6b8d91 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,6 +18,7 @@ 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'; +import { FuseConfigService } from './core/services/config.service'; const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { suppressScrollX: true @@ -79,7 +80,8 @@ const appRoutes: Routes = [ ComponentsModule ], providers: [ - FuseSplashScreenService + FuseSplashScreenService, + FuseConfigService ], bootstrap : [ AppComponent diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.html b/src/app/core/components/material-color-picker/material-color-picker.component.html index 43511187..152dc617 100644 --- a/src/app/core/components/material-color-picker/material-color-picker.component.html +++ b/src/app/core/components/material-color-picker/material-color-picker.component.html @@ -1,4 +1,5 @@ + + - - - - - + \ No newline at end of file diff --git a/src/app/core/components/search-bar/search-bar.component.scss b/src/app/core/components/search-bar/search-bar.component.scss index ba8aa4ef..0c2cf178 100644 --- a/src/app/core/components/search-bar/search-bar.component.scss +++ b/src/app/core/components/search-bar/search-bar.component.scss @@ -39,7 +39,6 @@ right: 0; bottom: 0; left: 0; - background: #FFFFFF; z-index: 10; #fuse-search-bar-input { diff --git a/src/app/core/components/search-bar/search-bar.component.ts b/src/app/core/components/search-bar/search-bar.component.ts index 26ef8268..ea295798 100644 --- a/src/app/core/components/search-bar/search-bar.component.ts +++ b/src/app/core/components/search-bar/search-bar.component.ts @@ -1,4 +1,6 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { FuseConfigService } from '../../services/config.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector : 'fuse-search-bar', @@ -8,12 +10,22 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core'; export class FuseSearchBarComponent implements OnInit { collapsed: boolean; - + toolbarColor: string; @Output() onInput: EventEmitter = new EventEmitter(); + onSettingsChanged: Subscription; - constructor() + constructor( + private fuseConfig: FuseConfigService + ) { this.collapsed = true; + this.onSettingsChanged = + this.fuseConfig.onSettingsChanged + .subscribe( + (newSettings) => { + this.toolbarColor = newSettings.colorClasses.toolbar; + } + ); } ngOnInit() diff --git a/src/app/core/components/shortcuts/shortcuts.component.html b/src/app/core/components/shortcuts/shortcuts.component.html index 256dcb29..2cf61b36 100644 --- a/src/app/core/components/shortcuts/shortcuts.component.html +++ b/src/app/core/components/shortcuts/shortcuts.component.html @@ -1,4 +1,4 @@ -
+
@@ -7,7 +7,7 @@
-
+
diff --git a/src/app/core/components/shortcuts/shortcuts.component.ts b/src/app/core/components/shortcuts/shortcuts.component.ts index 49581c5c..e44c49ff 100644 --- a/src/app/core/components/shortcuts/shortcuts.component.ts +++ b/src/app/core/components/shortcuts/shortcuts.component.ts @@ -3,6 +3,7 @@ import { FuseNavigationService } from '../navigation/navigation.service'; import { Subscription } from 'rxjs/Subscription'; import { ObservableMedia } from '@angular/flex-layout'; import { FuseMatchMedia } from '../../services/match-media.service'; +import { FuseConfigService } from '../../services/config.service'; @Component({ selector : 'fuse-shortcuts', @@ -16,7 +17,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy filteredNavigationItems: any[]; searching = false; mobileShortcutsPanelActive = false; + toolbarColor: string; matchMediaSubscription: Subscription; + onSettingsChanged: Subscription; @ViewChild('searchInput') searchInputField; @ViewChild('shortcuts') shortcutsEl: ElementRef; @@ -25,10 +28,19 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy private renderer: Renderer2, private observableMedia: ObservableMedia, private fuseMatchMedia: FuseMatchMedia, - private fuseNavigationService: FuseNavigationService + private fuseNavigationService: FuseNavigationService, + private fuseConfig: FuseConfigService ) { this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(); + + this.onSettingsChanged = + this.fuseConfig.onSettingsChanged + .subscribe( + (newSettings) => { + this.toolbarColor = newSettings.colorClasses.toolbar; + } + ); } ngOnInit() diff --git a/src/app/core/components/theme-options/theme-options.component.html b/src/app/core/components/theme-options/theme-options.component.html index 53de31c8..091188bd 100644 --- a/src/app/core/components/theme-options/theme-options.component.html +++ b/src/app/core/components/theme-options/theme-options.component.html @@ -2,7 +2,7 @@ settings -
+
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss index b7ff8746..1043e90e 100644 --- a/src/app/core/components/theme-options/theme-options.component.scss +++ b/src/app/core/components/theme-options/theme-options.component.scss @@ -1,5 +1,14 @@ @import "src/app/core/scss/fuse"; +@keyframes rotating { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + :host { position: fixed; display: block; @@ -11,7 +20,6 @@ right: 0; top: 0; width: 320px; - height: 480px; transform: translate3d(100%, 0, 0); z-index: 999; @@ -22,6 +30,10 @@ } } + .mat-list .mat-list-item { + font-size: 15px; + } + .open-button { position: absolute; top: 0; @@ -37,6 +49,10 @@ opacity: .75; z-index: 998; + md-icon { + animation: rotating 3s linear infinite; + } + &:hover { opacity: 1; } diff --git a/src/app/core/components/theme-options/theme-options.component.ts b/src/app/core/components/theme-options/theme-options.component.ts index c4a172cb..10d8ba25 100644 --- a/src/app/core/components/theme-options/theme-options.component.ts +++ b/src/app/core/components/theme-options/theme-options.component.ts @@ -1,7 +1,7 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations'; import { Subscription } from 'rxjs/Subscription'; -import { FuseLayoutService } from '../../services/layout.service'; +import { FuseConfigService } from '../../services/config.service'; @Component({ selector : 'fuse-theme-options', @@ -14,24 +14,33 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy @ViewChild('panel') panel; public player: AnimationPlayer; + fuseSettings: any; onSettingsChanged: Subscription; - layoutSettings: { navigation: string, toolbar: string, footer: string }; constructor( private animationBuilder: AnimationBuilder, - private layoutService: FuseLayoutService + private fuseConfig: FuseConfigService ) { this.onSettingsChanged = - this.layoutService.onSettingsChanged + this.fuseConfig.onSettingsChanged .subscribe( (newSettings) => { - this.layoutSettings = newSettings; + this.fuseSettings = newSettings; } ); } + ngOnInit() + { + } + + onSettingsChange() + { + this.fuseConfig.setSettings(this.fuseSettings); + } + closeBar() { this.player = @@ -54,17 +63,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy this.player.play(); } - ngOnInit() - { - } - ngOnDestroy() { this.onSettingsChanged.unsubscribe(); } - - onLayoutSettingsChanged() - { - this.layoutService.onSettingsChanged.next(this.layoutSettings); - } } diff --git a/src/app/core/matColors.ts b/src/app/core/matColors.ts index 9fac8b35..17c42ee6 100644 --- a/src/app/core/matColors.ts +++ b/src/app/core/matColors.ts @@ -634,6 +634,50 @@ const matColors = { A400: 'white', A700: white87 } + }, + 'fuse-dark': { + 50 : '#ECECEE', + 100 : '#C5C6CB', + 200 : '#9EA1A9', + 300 : '#7D818C', + 400 : '#5C616F', + 500 : '#3C4252', + 600 : '#353A48', + 700 : '#2D323E', + 800 : '#262933', + 900 : '#1E2129', + A100 : '#C5C6CB', + A200 : '#9EA1A9', + A400 : '#5C616F', + A700 : '#2D323E', + contrast: { + 50 : black87, + 100 : black87, + 200 : black87, + 300 : 'white', + 400 : 'white', + 500 : white87, + 600 : white87, + 700 : white87, + 800 : white87, + 900 : white87, + A100: black87, + A200: white87, + A400: white87, + A700: white87 + } + }, + white : { + 500 : 'white', + contrast: { + 500: black87 + } + }, + black : { + 500 : 'black', + contrast: { + 500: 'white' + } } }; diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index 905fabf7..f9c6acea 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -14,7 +14,6 @@ import { FusePipesModule } from '../pipes/pipes.module'; import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component'; import { FuseCountdownComponent } from '../components/countdown/countdown.component'; import { FuseNavigationService } from '../components/navigation/navigation.service'; -import { FuseLayoutService } from '../services/layout.service'; import { FuseMatchMedia } from '../services/match-media.service'; import { FuseNavbarService } from '../../main/navbar/navbar.service'; import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service'; @@ -67,7 +66,6 @@ import { FuseMaterialColorPickerComponent } from '../components/material-color-p ], providers : [ FuseNavigationService, - FuseLayoutService, FuseMatchMedia, FuseNavbarService, FuseMdSidenavHelperService diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss index 51050031..7dfe583e 100644 --- a/src/app/core/scss/partials/_colors.scss +++ b/src/app/core/scss/partials/_colors.scss @@ -38,7 +38,8 @@ $matColorsMap: ( grey: $mat-grey, blue-grey: $mat-blue-grey, white: $mat-white, - black: $mat-black + black: $mat-black, + fuse-dark: $mat-fusedark ); // Material color hues list diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts new file mode 100644 index 00000000..d8208c3a --- /dev/null +++ b/src/app/core/services/config.service.ts @@ -0,0 +1,57 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { NavigationStart, Router } from '@angular/router'; + +@Injectable() +export class FuseConfigService +{ + settings: any; + defaultSettings: any; + onSettingsChanged: BehaviorSubject; + + /** + * @param router + */ + constructor(private router: Router) + { + // Set the default settings + this.defaultSettings = { + layout : { + navigation: 'left', // 'right', 'left', 'top', none + toolbar : 'below', // 'above', 'below', none + footer : 'none' // 'above', 'below', none + }, + colorClasses: { + toolbar: 'md-white-500-bg', + navbar : 'md-fuse-dark-500-bg', + footer : 'md-fuse-dark-800-bg' + } + }; + + this.settings = Object.assign({}, this.defaultSettings); + + // Reload the default settings on every navigation start + router.events.subscribe( + (event) => { + if ( event instanceof NavigationStart ) + { + this.setSettings({layout: this.defaultSettings.layout}); + } + } + ); + + // Create the behavior subject + this.onSettingsChanged = new BehaviorSubject(this.settings); + + } + + /** + * Sets settings + * @param settings + */ + setSettings(settings) + { + this.settings = Object.assign({}, this.settings, settings); + this.onSettingsChanged.next(this.settings); + } +} diff --git a/src/app/core/services/layout.service.ts b/src/app/core/services/layout.service.ts deleted file mode 100644 index 12730195..00000000 --- a/src/app/core/services/layout.service.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { Injectable } from '@angular/core'; -import { NavigationStart, Router } from '@angular/router'; -import { BehaviorSubject } from 'rxjs/BehaviorSubject'; - -import 'rxjs/add/operator/filter'; -import 'rxjs/add/operator/map'; -import 'rxjs/add/operator/mergeMap'; - -@Injectable() -export class FuseLayoutService -{ - defaultSettings: { navigation: string, toolbar: string, footer: string }; - onSettingsChanged: BehaviorSubject<{ navigation: string, toolbar: string, footer: string }>; - - /** - * @param router - */ - constructor(private router: Router) - { - // Set the default settings - this.defaultSettings = { - navigation: 'left', // 'right', 'left', 'top', none - toolbar : 'below', // 'above', 'below', none - footer : 'none' // 'above', 'below', none - }; - - // Create the behavior subject - this.onSettingsChanged = new BehaviorSubject(this.defaultSettings); - - // Reload the default settings on every navigation start - router.events.subscribe( - (event) => { - if ( event instanceof NavigationStart ) - { - this.setSettings(this.defaultSettings); - } - } - ); - } - - /** - * Sets settings - * @param settings - */ - setSettings(settings) - { - const newSettings = Object.assign({}, this.defaultSettings, settings); - this.onSettingsChanged.next(newSettings); - } -} diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts index 7bb97d8d..cdd9f2d6 100644 --- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts +++ b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit } from '@angular/core'; - -import { FuseLayoutService } from '../../../../../core/services/layout.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FuseConfigService } from '../../../../../core/services/config.service'; @Component({ selector : 'fuse-forgot-password', @@ -14,14 +13,16 @@ export class FuseForgotPasswordComponent implements OnInit forgotPasswordFormErrors: any; constructor( - private layoutService: FuseLayoutService, + private fuseConfig: FuseConfigService, private formBuilder: FormBuilder ) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); this.forgotPasswordFormErrors = { diff --git a/src/app/main/content/pages/authentication/lock/lock.component.ts b/src/app/main/content/pages/authentication/lock/lock.component.ts index 12340d01..bbd3fe12 100644 --- a/src/app/main/content/pages/authentication/lock/lock.component.ts +++ b/src/app/main/content/pages/authentication/lock/lock.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { FuseLayoutService } from '../../../../../core/services/layout.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FuseConfigService } from '../../../../../core/services/config.service'; @Component({ selector: 'fuse-lock', @@ -14,14 +14,16 @@ export class FuseLockComponent implements OnInit lockFormErrors: any; constructor( - private layoutService: FuseLayoutService, + private fuseConfig: FuseConfigService, private formBuilder: FormBuilder ) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); this.lockFormErrors = { diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.ts b/src/app/main/content/pages/authentication/login-2/login-2.component.ts index 671a1338..22faf546 100644 --- a/src/app/main/content/pages/authentication/login-2/login-2.component.ts +++ b/src/app/main/content/pages/authentication/login-2/login-2.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { FuseLayoutService } from '../../../../../core/services/layout.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FuseConfigService } from '../../../../../core/services/config.service'; @Component({ selector : 'fuse-login-2', @@ -13,12 +13,16 @@ export class FuseLogin2Component implements OnInit loginForm: FormGroup; loginFormErrors: any; - constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder) + constructor( + private fuseConfig: FuseConfigService, + private formBuilder: FormBuilder) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); this.loginFormErrors = { diff --git a/src/app/main/content/pages/authentication/login/login.component.ts b/src/app/main/content/pages/authentication/login/login.component.ts index bb82dad4..a1fcee1b 100644 --- a/src/app/main/content/pages/authentication/login/login.component.ts +++ b/src/app/main/content/pages/authentication/login/login.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { FuseLayoutService } from '../../../../../core/services/layout.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FuseConfigService } from '../../../../../core/services/config.service'; @Component({ selector : 'fuse-login', @@ -14,14 +14,16 @@ export class FuseLoginComponent implements OnInit loginFormErrors: any; constructor( - private layoutService: FuseLayoutService, + private fuseConfig: FuseConfigService, private formBuilder: FormBuilder ) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); this.loginFormErrors = { diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.ts b/src/app/main/content/pages/authentication/register-2/register-2.component.ts index 8f447ee4..85bdec05 100644 --- a/src/app/main/content/pages/authentication/register-2/register-2.component.ts +++ b/src/app/main/content/pages/authentication/register-2/register-2.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { FuseLayoutService } from '../../../../../core/services/layout.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FuseConfigService } from '../../../../../core/services/config.service'; @Component({ selector : 'fuse-register-2', @@ -13,12 +13,16 @@ export class FuseRegister2Component implements OnInit registerForm: FormGroup; registerFormErrors: any; - constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder) + constructor( + private fuseConfig: FuseConfigService, + private formBuilder: FormBuilder) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); this.registerFormErrors = { diff --git a/src/app/main/content/pages/authentication/register/register.component.ts b/src/app/main/content/pages/authentication/register/register.component.ts index c94070b8..563a5efd 100644 --- a/src/app/main/content/pages/authentication/register/register.component.ts +++ b/src/app/main/content/pages/authentication/register/register.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { FuseLayoutService } from '../../../../../core/services/layout.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FuseConfigService } from '../../../../../core/services/config.service'; @Component({ selector : 'fuse-register', @@ -13,12 +13,16 @@ export class FuseRegisterComponent implements OnInit registerForm: FormGroup; registerFormErrors: any; - constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder) + constructor( + private fuseConfig: FuseConfigService, + private formBuilder: FormBuilder) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); this.registerFormErrors = { diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts b/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts index c5d96123..268bcb62 100644 --- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts +++ b/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { FuseLayoutService } from '../../../../../core/services/layout.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FuseConfigService } from '../../../../../core/services/config.service'; @Component({ selector : 'fuse-reset-password', @@ -14,14 +14,16 @@ export class FuseResetPasswordComponent implements OnInit resetPasswordFormErrors: any; constructor( - private layoutService: FuseLayoutService, + private fuseConfig: FuseConfigService, private formBuilder: FormBuilder ) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); this.resetPasswordFormErrors = { diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.ts b/src/app/main/content/pages/coming-soon/coming-soon.component.ts index 5303eb39..4308505c 100644 --- a/src/app/main/content/pages/coming-soon/coming-soon.component.ts +++ b/src/app/main/content/pages/coming-soon/coming-soon.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { FuseConfigService } from '../../../../core/services/config.service'; @Component({ selector : 'fuse-coming-soon', @@ -13,12 +13,17 @@ export class FuseComingSoonComponent implements OnInit comingSoonForm: FormGroup; comingSoonFormErrors: any; - constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder) + constructor( + private fuseConfig: FuseConfigService, + private formBuilder: FormBuilder + ) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); this.comingSoonFormErrors = { diff --git a/src/app/main/content/pages/errors/404/error-404.component.ts b/src/app/main/content/pages/errors/404/error-404.component.ts index e9a113e6..0797035c 100644 --- a/src/app/main/content/pages/errors/404/error-404.component.ts +++ b/src/app/main/content/pages/errors/404/error-404.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { FuseLayoutService } from '../../../../../core/services/layout.service'; +import { FuseConfigService } from '../../../../../core/services/config.service'; @Component({ selector : 'fuse-error-404', @@ -9,12 +9,16 @@ import { FuseLayoutService } from '../../../../../core/services/layout.service'; }) export class FuseError404Component implements OnInit { - constructor(private layoutService: FuseLayoutService) + constructor( + private fuseConfig: FuseConfigService + ) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); } diff --git a/src/app/main/content/pages/errors/500/error-500.component.ts b/src/app/main/content/pages/errors/500/error-500.component.ts index 9d095042..35507c91 100644 --- a/src/app/main/content/pages/errors/500/error-500.component.ts +++ b/src/app/main/content/pages/errors/500/error-500.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { FuseLayoutService } from '../../../../../core/services/layout.service'; +import { FuseConfigService } from '../../../../../core/services/config.service'; @Component({ selector : 'fuse-error-500', @@ -9,12 +9,16 @@ import { FuseLayoutService } from '../../../../../core/services/layout.service'; }) export class FuseError500Component implements OnInit { - constructor(private layoutService: FuseLayoutService) + constructor( + private fuseConfig: FuseConfigService, + ) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); } diff --git a/src/app/main/content/pages/maintenance/maintenance.component.ts b/src/app/main/content/pages/maintenance/maintenance.component.ts index 708824b7..ca814a9d 100644 --- a/src/app/main/content/pages/maintenance/maintenance.component.ts +++ b/src/app/main/content/pages/maintenance/maintenance.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { FuseLayoutService } from '../../../../core/services/layout.service'; +import { FuseConfigService } from '../../../../core/services/config.service'; @Component({ selector : 'fuse-maintenance', @@ -9,12 +9,16 @@ import { FuseLayoutService } from '../../../../core/services/layout.service'; }) export class FuseMaintenanceComponent implements OnInit { - constructor(private layoutService: FuseLayoutService) + constructor( + private fuseConfig: FuseConfigService, + ) { - this.layoutService.setSettings({ - navigation: 'none', - toolbar : 'none', - footer : 'none' + this.fuseConfig.setSettings({ + layout: { + navigation: 'none', + toolbar : 'none', + footer : 'none' + } }); } diff --git a/src/app/main/footer/footer.component.html b/src/app/main/footer/footer.component.html index 86de4cdb..9b3e8393 100644 --- a/src/app/main/footer/footer.component.html +++ b/src/app/main/footer/footer.component.html @@ -1,5 +1,3 @@ - - + Footer - diff --git a/src/app/main/footer/footer.component.scss b/src/app/main/footer/footer.component.scss index e174c23a..cfaf7bde 100644 --- a/src/app/main/footer/footer.component.scss +++ b/src/app/main/footer/footer.component.scss @@ -3,6 +3,11 @@ flex: 0 1 auto; z-index: 3; + .mat-toolbar { + background: inherit; + color: inherit; + } + &.above { position: relative; z-index: 99; diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html index 95114f92..51b3066c 100644 --- a/src/app/main/main.component.html +++ b/src/app/main/main.component.html @@ -3,40 +3,44 @@
- - + +
- + +
- - + + - - + +
- +
- - + + diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index 24aff813..579965e6 100644 --- a/src/app/main/main.component.ts +++ b/src/app/main/main.component.ts @@ -1,6 +1,6 @@ import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; -import { FuseLayoutService } from '../core/services/layout.service'; import { Subscription } from 'rxjs/Subscription'; +import { FuseConfigService } from '../core/services/config.service'; @Component({ selector : 'fuse-main', @@ -11,19 +11,19 @@ import { Subscription } from 'rxjs/Subscription'; export class FuseMainComponent implements OnInit, OnDestroy { onSettingsChanged: Subscription; - layoutSettings: { navigation: string, toolbar: string, footer: string }; + fuseSettings: any; constructor( - private layoutService: FuseLayoutService, private _renderer: Renderer2, - private _elementRef: ElementRef + private _elementRef: ElementRef, + private fuseConfig: FuseConfigService ) { this.onSettingsChanged = - this.layoutService.onSettingsChanged + this.fuseConfig.onSettingsChanged .subscribe( (newSettings) => { - this.layoutSettings = newSettings; + this.fuseSettings = newSettings; } ); } diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html index 9dce6159..f6e4ab6b 100644 --- a/src/app/main/toolbar/toolbar.component.html +++ b/src/app/main/toolbar/toolbar.component.html @@ -1,4 +1,4 @@ - +
diff --git a/src/app/main/toolbar/toolbar.component.scss b/src/app/main/toolbar/toolbar.component.scss index ad4f2658..3d56a105 100644 --- a/src/app/main/toolbar/toolbar.component.scss +++ b/src/app/main/toolbar/toolbar.component.scss @@ -10,6 +10,11 @@ z-index: 2; } + .mat-toolbar { + background: inherit; + color: inherit; + } + .loading-spinner { width: 32px; height: 32px;