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

FuseMaterialColorPicker enhanced

Browse Source 
+ Navbar, Footer, Toolbar color options added to theme-options
+ FuseLayoutService moved to FuseConfigService
This commit is contained in:
mustafahlvc 2017-08-22 13:45:07 +03:00
parent f39464199e
commit 2eb9b3f09e
34 changed files with 357 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -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

2
src/app/core/components/material-color-picker/material-color-picker.component.html
View File

@ -1,4 +1,5 @@
<button md-icon-button
class="mat-elevation-z1"
[mdMenuTriggerFor]="colorMenu"
(onMenuOpen)="onMenuOpen()"
[ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
@ -64,6 +65,7 @@
class="colors" perfect-scrollbar>
<div class="color"
*ngFor="let hue of hues"
[fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
[ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'"
(click)="selectHue(hue)"
fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>

3
src/app/core/components/material-color-picker/material-color-picker.component.scss
View File

@ -10,7 +10,8 @@
position: relative;
overflow: hidden;
min-height: 258px;
height: 258px;
height: 308px;
background-color: #f7f7f7;
.view {
position: absolute;

13
src/app/core/components/material-color-picker/material-color-picker.component.ts
View File

@ -20,7 +20,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
@Input() selectedHue = '';
@Input() selectedFg = '';
@Input() value: any;
@Output() valueChange = new EventEmitter();
@Output() onValueChange = new EventEmitter();
@Output() selectedPaletteChange = new EventEmitter();
@Output() selectedHueChange = new EventEmitter();
@Output() selectedClassChange = new EventEmitter();
@ -29,9 +29,9 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
_selectedClass = '';
@Input()
set selectedClass(value: string)
set selectedClass(value)
{
if ( value !== '' && this._selectedClass !== value )
if ( value && value !== '' && this._selectedClass !== value )
{
const color = value.split('-');
if ( color.length >= 5 )
@ -55,9 +55,9 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
_selectedBg = '';
@Input()
set selectedBg(value: string)
set selectedBg(value)
{
if ( value !== '' && this._selectedBg !== value )
if ( value && value !== '' && this._selectedBg !== value )
{
for ( const palette in this.colors )
{
@ -133,7 +133,6 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
}
else
{
this.selectedClass = '';
this.selectedBg = '';
this.selectedFg = '';
}
@ -153,7 +152,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
this.selectedFgChange.emit(this.selectedFg);
this.value = this.selectedColor;
this.valueChange.emit(this.selectedColor);
this.onValueChange.emit(this.selectedColor);
});
}

5
src/app/core/components/search-bar/search-bar.component.html
View File

@ -1,5 +1,5 @@
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxLayout="row" fxLayoutAlign="start center" fxFlex="0 1 auto">
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
<div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
<label for="fuse-search-bar-input">
<button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
*ngIf="collapsed">
@ -18,3 +18,4 @@
</button>
</div>
</div>

1
src/app/core/components/search-bar/search-bar.component.scss
View File

@ -39,7 +39,6 @@
right: 0;
bottom: 0;
left: 0;
background: #FFFFFF;
z-index: 10;
#fuse-search-bar-input {

16
src/app/core/components/search-bar/search-bar.component.ts
View File

@ -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<any> = 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()

4
src/app/core/components/shortcuts/shortcuts.component.html
View File

@ -1,4 +1,4 @@
<div id="fuse-shortcuts" class="md-white-bg" #shortcuts>
<div id="fuse-shortcuts" #shortcuts>
<div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
fxHide fxShow.lt-md>
@ -7,7 +7,7 @@
</button>
</div>
<div class="shortcuts" fxHide fxShow.gt-sm>
<div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
<div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>

14
src/app/core/components/shortcuts/shortcuts.component.ts
View File

@ -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()

33
src/app/core/components/theme-options/theme-options.component.html
View File

@ -2,7 +2,7 @@
<md-icon>settings</md-icon>
</button>
<div #panel class="theme-options-panel md-white-bg mat-elevation-z2 p-16">
<div #panel class="theme-options-panel md-white-bg mat-elevation-z2 pb-16">
<button md-icon-button class="close-button" (click)="closeBar()">
<md-icon>close</md-icon>
@ -11,7 +11,7 @@
<md-list>
<h3 md-subheader>Navigation:</h3>
<md-list-item>
<md-radio-group [(ngModel)]="layoutSettings.navigation" (ngModelChange)="onLayoutSettingsChanged()">
<md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()">
<md-radio-button class="mr-8" value="left">Left</md-radio-button>
<md-radio-button class="mr-8" value="right">Right</md-radio-button>
<md-radio-button class="mr-8" value="none">None</md-radio-button>
@ -20,7 +20,7 @@
<h3 md-subheader>Toolbar:</h3>
<md-list-item>
<md-radio-group [(ngModel)]="layoutSettings.toolbar" (ngModelChange)="onLayoutSettingsChanged()">
<md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()">
<md-radio-button class="mr-8" value="below">Below</md-radio-button>
<md-radio-button class="mr-8" value="above">Above</md-radio-button>
<md-radio-button class="mr-8" value="none">None</md-radio-button>
@ -29,12 +29,37 @@
<h3 md-subheader>Footer:</h3>
<md-list-item>
<md-radio-group [(ngModel)]="layoutSettings.footer" (ngModelChange)="onLayoutSettingsChanged()">
<md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()">
<md-radio-button class="mr-8" value="below">Below</md-radio-button>
<md-radio-button class="mr-8" value="above">Above</md-radio-button>
<md-radio-button class="mr-8" value="none">None</md-radio-button>
</md-radio-group>
</md-list-item>
<md-divider></md-divider>
<h3 md-subheader>Colors:</h3>
<md-list-item>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Toolbar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div>
</md-list-item>
<md-list-item>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Navigation Bar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div>
</md-list-item>
<md-list-item>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Footer Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div>
</md-list-item>
</md-list>
</div>

18
src/app/core/components/theme-options/theme-options.component.scss
View File

@ -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;
}

28
src/app/core/components/theme-options/theme-options.component.ts
View File

@ -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);
}
}

44
src/app/core/matColors.ts
View File

@ -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'
}
}
};

2
src/app/core/modules/shared.module.ts
View File

@ -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

3
src/app/core/scss/partials/_colors.scss
View File

@ -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

57
src/app/core/services/config.service.ts Normal file
View File

@ -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<any>;
/**
* @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);
}
}

50
src/app/core/services/layout.service.ts
View File

@ -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);
}
}

9
src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
this.forgotPasswordFormErrors = {

8
src/app/main/content/pages/authentication/lock/lock.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
this.lockFormErrors = {

10
src/app/main/content/pages/authentication/login-2/login-2.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
this.loginFormErrors = {

8
src/app/main/content/pages/authentication/login/login.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
this.loginFormErrors = {

10
src/app/main/content/pages/authentication/register-2/register-2.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
this.registerFormErrors = {

10
src/app/main/content/pages/authentication/register/register.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
this.registerFormErrors = {

8
src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
this.resetPasswordFormErrors = {

11
src/app/main/content/pages/coming-soon/coming-soon.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
this.comingSoonFormErrors = {

10
src/app/main/content/pages/errors/404/error-404.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
}

10
src/app/main/content/pages/errors/500/error-500.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
}

10
src/app/main/content/pages/maintenance/maintenance.component.ts
View File

@ -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({
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
}

4
src/app/main/footer/footer.component.html
View File

@ -1,5 +1,3 @@
<md-toolbar class="mat-elevation-z1 md-white-bg">
<md-toolbar class="mat-elevation-z1">
<span>Footer</span>
</md-toolbar>

5
src/app/main/footer/footer.component.scss
View File

@ -3,6 +3,11 @@
flex: 0 1 auto;
z-index: 3;
.mat-toolbar {
background: inherit;
color: inherit;
}
&.above {
position: relative;
z-index: 99;

24
src/app/main/main.component.html
View File

@ -3,40 +3,44 @@
<div id="fuse-main-content" fxFlexFill>
<!-- TOOLBAR: Above -->
<ng-container *ngIf="layoutSettings.toolbar === 'above'">
<fuse-toolbar class="above"></fuse-toolbar>
<ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
<fuse-toolbar class="above" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
</ng-container>
<!-- / TOOLBAR: Above -->
<div id="wrapper">
<fuse-navbar [folded]="false" class="md-primary-700-bg left-navbar" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
<fuse-navbar [folded]="false"
class="left-navbar"
*ngIf="fuseSettings.layout.navigation === 'left'"
[class]="fuseSettings.colorClasses.navbar">
</fuse-navbar>
<div class="content-wrapper">
<!-- TOOLBAR: Below -->
<ng-container *ngIf="layoutSettings.toolbar === 'below'">
<fuse-toolbar class="below"></fuse-toolbar>
<ng-container *ngIf="fuseSettings.layout.toolbar === 'below'">
<fuse-toolbar class="below" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
</ng-container>
<!-- / TOOLBAR: Below -->
<fuse-content></fuse-content>
<!-- FOOTER: Below -->
<ng-container *ngIf="layoutSettings.footer === 'below'">
<fuse-footer class="below"></fuse-footer>
<ng-container *ngIf="fuseSettings.layout.footer === 'below'">
<fuse-footer class="below" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<fuse-navbar [folded]="false" class="md-primary-700-bg right-navbar" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
<fuse-navbar [folded]="false" class="md-primary-700-bg right-navbar" *ngIf="fuseSettings.layout.navigation === 'right'"></fuse-navbar>
</div>
<!-- FOOTER: Above -->
<ng-container *ngIf="layoutSettings.footer === 'above'">
<fuse-footer class="above"></fuse-footer>
<ng-container *ngIf="fuseSettings.layout.footer === 'above'">
<fuse-footer class="above" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
</ng-container>
<!-- FOOTER: Above -->

12
src/app/main/main.component.ts
View File

@ -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;
}
);
}

2
src/app/main/toolbar/toolbar.component.html
View File

@ -1,4 +1,4 @@
<md-toolbar class="p-0 mat-elevation-z1 md-white-bg">
<md-toolbar class="p-0 mat-elevation-z1">
<div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">

5
src/app/main/toolbar/toolbar.component.scss
View File

@ -10,6 +10,11 @@
z-index: 2;
}
.mat-toolbar {
background: inherit;
color: inherit;
}
.loading-spinner {
width: 32px;
height: 32px;