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

Merge branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen 2018-08-26 18:37:57 +03:00
commit 38a03da265
83 changed files with 2454 additions and 6301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
angular.json
View File

@ -29,7 +29,8 @@
"styles": [ "styles": [
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": [],
"showCircularDependencies": false
}, },
"configurations": { "configurations": {
"production": { "production": {

5682
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

61
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "fuse", "name": "fuse",
"version": "6.2.4", "version": "6.3.0",
"license": "https://themeforest.net/licenses/terms/regular", "license": "https://themeforest.net/licenses/terms/regular",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
@ -19,57 +19,58 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@agm/core": "1.0.0-beta.3", "@agm/core": "1.0.0-beta.3",
"@angular/animations": "6.0.9", "@angular/animations": "6.1.4",
"@angular/cdk": "6.3.3", "@angular/cdk": "6.4.6",
"@angular/common": "6.0.9", "@angular/common": "6.1.4",
"@angular/compiler": "6.0.9", "@angular/compiler": "6.1.4",
"@angular/core": "6.0.9", "@angular/core": "6.1.4",
"@angular/flex-layout": "6.0.0-beta.16", "@angular/flex-layout": "6.0.0-beta.16",
"@angular/forms": "6.0.9", "@angular/forms": "6.1.4",
"@angular/http": "6.0.9", "@angular/http": "6.1.4",
"@angular/material": "6.3.3", "@angular/material": "6.4.6",
"@angular/material-moment-adapter": "6.3.3", "@angular/material-moment-adapter": "6.4.6",
"@angular/platform-browser": "6.0.9", "@angular/platform-browser": "6.1.4",
"@angular/platform-browser-dynamic": "6.0.9", "@angular/platform-browser-dynamic": "6.1.4",
"@angular/router": "6.0.9", "@angular/router": "6.1.4",
"@ngrx/effects": "6.0.1", "@ngrx/effects": "6.1.0",
"@ngrx/router-store": "6.0.1", "@ngrx/router-store": "6.1.0",
"@ngrx/store": "6.0.1", "@ngrx/store": "6.1.0",
"@ngrx/store-devtools": "6.0.1", "@ngrx/store-devtools": "6.1.0",
"@ngx-translate/core": "10.0.2", "@ngx-translate/core": "10.0.2",
"@swimlane/ngx-charts": "8.1.0", "@swimlane/dragula": "3.7.3",
"@swimlane/ngx-datatable": "13.0.1", "@swimlane/ngx-charts": "9.0.0",
"@swimlane/ngx-dnd": "4.0.0", "@swimlane/ngx-datatable": "13.1.0",
"@swimlane/ngx-dnd": "5.0.6",
"@types/prismjs": "1.9.0", "@types/prismjs": "1.9.0",
"angular-calendar": "0.25.2", "angular-calendar": "0.25.2",
"angular-in-memory-web-api": "0.6.0", "angular-in-memory-web-api": "0.6.1",
"chart.js": "2.7.2", "chart.js": "2.7.2",
"classlist.js": "1.1.20150312", "classlist.js": "1.1.20150312",
"core-js": "2.5.7", "core-js": "2.5.7",
"d3": "5.5.0", "d3": "5.7.0",
"hammerjs": "2.0.8", "hammerjs": "2.0.8",
"lodash": "4.17.10", "lodash": "4.17.10",
"moment": "2.22.2", "moment": "2.22.2",
"ng2-charts": "1.6.0", "ng2-charts": "1.6.0",
"ngrx-store-freeze": "0.2.4", "ngrx-store-freeze": "0.2.4",
"ngx-color-picker": "6.5.0", "ngx-color-picker": "6.6.0",
"ngx-cookie-service": "1.0.10", "ngx-cookie-service": "1.0.10",
"perfect-scrollbar": "1.4.0", "perfect-scrollbar": "1.4.0",
"prismjs": "1.15.0", "prismjs": "1.15.0",
"rxjs": "6.2.1", "rxjs": "6.2.2",
"rxjs-compat": "6.2.1", "rxjs-compat": "6.2.2",
"web-animations-js": "2.3.1", "web-animations-js": "2.3.1",
"zone.js": "0.8.26" "zone.js": "0.8.26"
}, },
"devDependencies": { "devDependencies": {
"@angular/cli": "6.0.8", "@angular/cli": "6.1.5",
"@angular/compiler-cli": "6.0.9", "@angular/compiler-cli": "6.1.4",
"@angular/language-service": "6.0.9", "@angular/language-service": "6.1.4",
"@angular-devkit/build-angular": "0.6.8", "@angular-devkit/build-angular": "0.7.5",
"@angularclass/hmr": "2.1.3", "@angularclass/hmr": "2.1.3",
"@types/jasmine": "2.8.8", "@types/jasmine": "2.8.8",
"@types/jasminewd2": "2.0.3", "@types/jasminewd2": "2.0.3",
"@types/lodash": "4.14.111", "@types/lodash": "4.14.116",
"@types/node": "8.9.5", "@types/node": "8.9.5",
"codelyzer": "4.2.1", "codelyzer": "4.2.1",
"jasmine-core": "2.99.1", "jasmine-core": "2.99.1",

2
src/@fuse/components/countdown/countdown.component.scss
View File

@ -1,4 +1,4 @@
:host { fuse-countdown {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;

43
src/@fuse/components/countdown/countdown.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { interval, Subject } from 'rxjs'; import { interval, Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators'; import { map, takeUntil } from 'rxjs/operators';
import * as moment from 'moment'; import * as moment from 'moment';
@ -6,7 +6,8 @@ import * as moment from 'moment';
@Component({ @Component({
selector : 'fuse-countdown', selector : 'fuse-countdown',
templateUrl: './countdown.component.html', templateUrl: './countdown.component.html',
styleUrls : ['./countdown.component.scss'] styleUrls : ['./countdown.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class FuseCountdownComponent implements OnInit, OnDestroy export class FuseCountdownComponent implements OnInit, OnDestroy
{ {
@ -48,9 +49,13 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
const currDate = moment(); const currDate = moment();
const eventDate = moment(this.eventDate); const eventDate = moment(this.eventDate);
// Get the difference in between the current date and event date // Get the difference in between the current date and event date in seconds
let diff = eventDate.diff(currDate, 'seconds'); let diff = eventDate.diff(currDate, 'seconds');
// Calculate the remaining time for the first time so there will be no
// delay on the countdown
this.countdown = this._secondsToRemaining(diff);
// Create a subscribable interval // Create a subscribable interval
const countDown = interval(1000) const countDown = interval(1000)
.pipe( .pipe(
@ -58,14 +63,7 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
return diff = diff - 1; return diff = diff - 1;
}), }),
map(value => { map(value => {
const timeLeft = moment.duration(value, 'seconds'); return this._secondsToRemaining(value);
return {
days : timeLeft.asDays().toFixed(0),
hours : timeLeft.hours(),
minutes: timeLeft.minutes(),
seconds: timeLeft.seconds()
};
}) })
); );
@ -86,4 +84,27 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
this._unsubscribeAll.next(); this._unsubscribeAll.next();
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
} }
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Converts given seconds to a remaining time
*
* @param seconds
* @private
*/
private _secondsToRemaining(seconds): any
{
const timeLeft = moment.duration(seconds, 'seconds');
return {
days : timeLeft.asDays().toFixed(0),
hours : timeLeft.hours(),
minutes: timeLeft.minutes(),
seconds: timeLeft.seconds()
};
}
} }

17
src/@fuse/components/countdown/countdown.theme.scss Normal file
View File

@ -0,0 +1,17 @@
@mixin fuse-countdown-theme($theme) {
$foreground: map-get($theme, foreground);
fuse-countdown {
.fuse-countdown {
.time {
.title {
color: map-get($foreground, secondary-text);
}
}
}
}
}

46
src/@fuse/components/demo/demo-content/demo-content.component.html
View File

@ -1,10 +1,8 @@
<!-- DEMO CONTENT --> <!-- DEMO CONTENT -->
<div class="demo-content"> <div class="demo-content line-height-1.75">
<img src="assets/images/beach.jpg" alt="beach" style="max-width: 640px; width: 100%;"> <h1 class="m-0">Early Sunrise in Winter</h1>
<h4 class="mt-0 secondary-text">Demo Content</h4>
<h1>Early Sunrise</h1>
<h4 class="secondary-text">Demo Content</h4>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec,
@ -12,7 +10,7 @@
vestibulum. Suspendisse euismod in urna eu posuere. vestibulum. Suspendisse euismod in urna eu posuere.
</p> </p>
<blockquote> <blockquote class="my-24">
<p> <p>
Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus
et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante
@ -24,16 +22,12 @@
</blockquote> </blockquote>
<p> <p>
Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur adipiscing Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur
elit. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi. Nam imperdiet est <b>adipiscing elit</b>. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi.
nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et gravida. In hac Nam imperdiet est nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et
habitasse platea dictumst. gravida. In hac habitasse platea dictumst. In et placerat eros, eu tempor turpis. Curabitur ac felis finibus,
</p> elementum lectus vitae, venenatis est. Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel
erat condimentum tristique vel vel mi. Nulla id euismod mi, et mollis tellus.
<p>
In et placerat eros, eu tempor turpis. Curabitur ac felis finibus, elementum lectus vitae, venenatis est.
Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel erat condimentum tristique vel vel mi.
Nulla id euismod mi, et mollis tellus.
</p> </p>
<p> <p>
@ -43,6 +37,12 @@
velit. velit.
</p> </p>
<img class="mt-24 w-100-p" src="assets/images/etc/early-sunrise.jpg" style="max-width: 640px">
<p class="mt-8 mb-24 secondary-text">
<em>Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor id.</em>
</p>
<p> <p>
Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna, Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna,
in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet
@ -52,10 +52,18 @@
<p> <p>
Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit
ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non
sagittis augue. Sed venenatis rhoncus enim eget ornare. Donec viverra sed felis at venenatis. Mauris aliquam sagittis augue. Sed venenatis rhoncus enim eget ornare. <a href="#">Donec viverra sed felis at venenatis.</a>
fringilla nulla, sit amet congue felis dignissim at. Mauris aliquam fringilla nulla, sit amet congue felis dignissim at.
</p> </p>
<ul>
<li>Orci varius</li>
<li>Magnis dis</li>
<li>Conubia nostra</li>
<li>Semper urna</li>
<li>Donec viverra</li>
</ul>
<p> <p>
Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit
eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit
@ -69,7 +77,7 @@
Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel
lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor
id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec
viverra augue dolor, a venenatis tellus consectetur sit amet... viverra augue dolor, a venenatis tellus consectetur sit amet.
</p> </p>
</div> </div>
<!-- / DEMO CONTENT --> <!-- / DEMO CONTENT -->

1
src/@fuse/components/highlight/highlight.component.scss
View File

@ -1,5 +1,6 @@
:host { :host {
display: block; display: block;
width: 100%;
padding: 8px; padding: 8px;
background: #263238; background: #263238;
cursor: text; cursor: text;

49
src/@fuse/components/material-color-picker/material-color-picker.component.html
View File

@ -1,20 +1,20 @@
<button mat-icon-button <button mat-icon-button
type="button"
class="mat-elevation-z1" class="mat-elevation-z1"
[matMenuTriggerFor]="colorMenu" [matMenuTriggerFor]="colorMenu"
(menuOpened)="onMenuOpen()" (menuOpened)="onMenuOpen()"
[ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'"> [ngClass]="selectedPalette + '-' + selectedHue">
<mat-icon>palette</mat-icon> <mat-icon>palette</mat-icon>
</button> </button>
<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu"> <mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu mat-elevation-z8">
<header [ngClass]="selectedColor?.class || 'mat-accent-bg'" class="mat-elevation-z4" <header [ngClass]="selectedColor?.class || 'accent'" class="mat-elevation-z4"
fxLayout="row" fxLayoutAlign="space-between center"> fxLayout="row" fxLayoutAlign="space-between center">
<button mat-icon-button <button mat-icon-button
[style.visibility]="view==='hues'?'visible':'hidden'" class="secondary-text"
(click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette"> [style.visibility]="view === 'hues' ? 'visible' : 'hidden'"
(click)="goToPalettesView($event)" aria-label="Palette">
<mat-icon class="s-20">arrow_back</mat-icon> <mat-icon class="s-20">arrow_back</mat-icon>
</button> </button>
@ -23,45 +23,40 @@
</span> </span>
<span *ngIf="!selectedColor?.palette"> <span *ngIf="!selectedColor?.palette">
Select Color Select a Color
</span> </span>
<button mat-icon-button <button mat-icon-button
class="remove-color-button" class="remove-color-button secondary-text"
(click)="$event.stopPropagation();removeColor()" (click)="removeColor($event)"
aria-label="Remove Color"> aria-label="Remove color"
matTooltip="Remove color">
<mat-icon class="s-20">delete</mat-icon> <mat-icon class="s-20">delete</mat-icon>
</button> </button>
</header> </header>
<div [ngSwitch]="view" class="views"> <div [ngSwitch]="view" class="views">
<div class="view" *ngSwitchCase="'palettes'"> <div class="view" *ngSwitchCase="'palettes'">
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar> <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
<div class="color" <div class="color" fxLayout="row" fxLayoutAlign="center center"
[ngClass]="'mat-'+color.key+'-bg'"
*ngFor="let color of (colors | keys)" *ngFor="let color of (colors | keys)"
(click)="$event.stopPropagation();selectPalette(color.key)" [ngClass]="color.key"
fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple> [class.selected]="selectedPalette === color.key"
<span class="label"> (click)="selectPalette($event, color.key)">
{{color.key}}
</span>
</div> </div>
</div> </div>
</div> </div>
<div class="view" *ngSwitchCase="'hues'" > <div class="view" *ngSwitchCase="'hues'">
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar> <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
<div class="color" *ngFor="let hue of hues" <div class="color" fxLayout="row" fxLayoutAlign="center center"
[fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'" *ngFor="let hue of hues"
[ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'" [fxHide]="selectedPalette === 'fuse-white' && hue !== '500' || selectedPalette === 'fuse-black' && hue !== '500'"
(click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple> [ngClass]="selectedPalette + '-' + hue"
<span class="label"> [class.selected]="selectedHue === hue"
{{hue}} (click)="selectHue($event, hue)">
</span>
<mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
</div> </div>
</div> </div>
</div> </div>

41
src/@fuse/components/material-color-picker/material-color-picker.component.scss
View File

@ -1,5 +1,5 @@
.fuse-material-color-picker-menu { .fuse-material-color-picker-menu {
width: 208px; width: 245px;
.mat-menu-content { .mat-menu-content {
padding: 0; padding: 0;
@ -7,44 +7,29 @@
.views { .views {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; min-height: 165px;
overflow: hidden;
min-height: 258px;
height: 308px;
background-color: #F7F7F7;
.view { .view {
position: absolute; overflow: hidden;
width: 208px;
height: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
.colors { .colors {
position: relative; padding: 1px 0 0 0;
padding: 4px; margin-left: -1px;
.color { .color {
position: relative; width: 40px;
width: 46px; height: 40px;
height: 46px; margin: 0 0 1px 1px;
margin: 2px;
border-radius: 0; border-radius: 0;
cursor: pointer; cursor: pointer;
transition: border-radius .4s cubic-bezier(.25, .8, .25, 1);
.label { &:hover {
padding: 2px; border-radius: 20%;
font-size: 10px;
} }
mat-icon { &.selected {
position: absolute; border-radius: 50% !important;
top: 2px;
right: 2px;
font-size: 16px;
opacity: 0.7;
} }
} }
} }

295
src/@fuse/components/material-color-picker/material-color-picker.component.ts
View File

@ -1,55 +1,40 @@
import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core'; import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { MatColors } from '@fuse/mat-colors'; import { MatColors } from '@fuse/mat-colors';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
export const FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR: any = {
provide : NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FuseMaterialColorPickerComponent),
multi : true
};
@Component({ @Component({
selector : 'fuse-material-color-picker', selector : 'fuse-material-color-picker',
templateUrl : './material-color-picker.component.html', templateUrl : './material-color-picker.component.html',
styleUrls : ['./material-color-picker.component.scss'], styleUrls : ['./material-color-picker.component.scss'],
animations : fuseAnimations, animations : fuseAnimations,
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None,
providers : [FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR]
}) })
export class FuseMaterialColorPickerComponent implements OnChanges export class FuseMaterialColorPickerComponent implements ControlValueAccessor
{ {
colors: any; colors: any;
hues: string[]; hues: string[];
selectedColor: any;
view: string; view: string;
selectedColor: any;
@Input()
selectedPalette: string; selectedPalette: string;
@Input()
selectedHue: string; selectedHue: string;
@Input() // Color changed
selectedFg: string;
@Input()
value: any;
@Output() @Output()
onValueChange: EventEmitter<any>; colorChanged: EventEmitter<any>;
@Output()
selectedPaletteChange: EventEmitter<any>;
@Output()
selectedHueChange: EventEmitter<any>;
@Output()
selectedClassChange: EventEmitter<any>;
@Output()
selectedBgChange: EventEmitter<any>;
@Output()
selectedFgChange: EventEmitter<any>;
// Private // Private
_selectedClass: string; private _color: string;
_selectedBg: string; private _modelChange: (value: any) => void;
private _modelTouched: (value: any) => void;
/** /**
* Constructor * Constructor
@ -57,23 +42,18 @@ export class FuseMaterialColorPickerComponent implements OnChanges
constructor() constructor()
{ {
// Set the defaults // Set the defaults
this.colorChanged = new EventEmitter();
this.colors = MatColors.all; this.colors = MatColors.all;
this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']; this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
this.selectedFg = ''; this.selectedHue = '500';
this.selectedHue = '';
this.selectedPalette = '';
this.view = 'palettes'; this.view = 'palettes';
this.onValueChange = new EventEmitter();
this.selectedPaletteChange = new EventEmitter();
this.selectedHueChange = new EventEmitter();
this.selectedClassChange = new EventEmitter();
this.selectedBgChange = new EventEmitter();
this.selectedFgChange = new EventEmitter();
// Set the private defaults // Set the private defaults
this._selectedClass = ''; this._color = '';
this._selectedBg = ''; this._modelChange = () => {
};
this._modelTouched = () => {
};
} }
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -86,88 +66,76 @@ export class FuseMaterialColorPickerComponent implements OnChanges
* @param value * @param value
*/ */
@Input() @Input()
set selectedClass(value) set color(value)
{ {
if ( value && value !== '' && this._selectedClass !== value ) if ( !value || value === '' || this._color === value )
{ {
const color = value.split('-');
if ( color.length >= 5 )
{
this.selectedPalette = color[1] + '-' + color[2];
this.selectedHue = color[3];
}
else
{
this.selectedPalette = color[1];
this.selectedHue = color[2];
}
}
this._selectedClass = value;
}
get selectedClass(): string
{
return this._selectedClass;
}
/**
* Selected bg
*
* @param value
*/
@Input()
set selectedBg(value)
{
if ( value && value !== '' && this._selectedBg !== value )
{
for ( const palette in this.colors )
{
if ( !this.colors.hasOwnProperty(palette) )
{
continue;
}
for ( const hue of this.hues )
{
if ( this.colors[palette][hue] === value )
{
this.selectedPalette = palette;
this.selectedHue = hue;
break;
}
}
}
}
this._selectedBg = value;
}
get selectedBg(): string
{
return this._selectedBg;
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On changes
*
* @param changes
*/
ngOnChanges(changes: any): void
{
if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
changes.selectedClass && changes.selectedClass.currentValue === '' ||
changes.selectedPalette && changes.selectedPalette.currentValue === '' )
{
this.removeColor();
return; return;
} }
if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
{ // Split the color value (red-400, blue-500, fuse-navy-700 etc.)
this.updateSelectedColor(); const colorParts = value.split('-');
// Take the very last part as the selected hue value
this.selectedHue = colorParts[colorParts.length - 1];
// Remove the last part
colorParts.pop();
// Rejoin the remaining parts as the selected palette name
this.selectedPalette = colorParts.join('-');
// Store the color value
this._color = value;
} }
get color(): string
{
return this._color;
}
// -----------------------------------------------------------------------------------------------------
// @ Control Value Accessor implementation
// -----------------------------------------------------------------------------------------------------
/**
* Register on change function
*
* @param fn
*/
registerOnChange(fn: any): void
{
this._modelChange = fn;
}
/**
* Register on touched function
*
* @param fn
*/
registerOnTouched(fn: any): void
{
this._modelTouched = fn;
}
/**
* Write value to the view from model
*
* @param color
*/
writeValue(color: any): void
{
// Return if null
if ( !color )
{
return;
}
// Set the color
this.color = color;
// Update the selected color
this.updateSelectedColor();
} }
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -177,35 +145,61 @@ export class FuseMaterialColorPickerComponent implements OnChanges
/** /**
* Select palette * Select palette
* *
* @param event
* @param palette * @param palette
*/ */
selectPalette(palette): void selectPalette(event, palette): void
{ {
this.selectedPalette = palette; // Stop propagation
this.updateSelectedColor(); event.stopPropagation();
// Go to 'hues' view
this.view = 'hues'; this.view = 'hues';
// Update the selected palette
this.selectedPalette = palette;
// Update the selected color
this.updateSelectedColor();
} }
/** /**
* Select hue * Select hue
* *
* @param event
* @param hue * @param hue
*/ */
selectHue(hue): void selectHue(event, hue): void
{ {
// Stop propagation
event.stopPropagation();
// Update the selected huse
this.selectedHue = hue; this.selectedHue = hue;
// Update the selected color
this.updateSelectedColor(); this.updateSelectedColor();
} }
/** /**
* Remove color * Remove color
*
* @param event
*/ */
removeColor(): void removeColor(event): void
{ {
// Stop propagation
event.stopPropagation();
// Return to the 'palettes' view
this.view = 'palettes';
// Clear the selected palette and hue
this.selectedPalette = ''; this.selectedPalette = '';
this.selectedHue = ''; this.selectedHue = '';
// Update the selected color
this.updateSelectedColor(); this.updateSelectedColor();
this.view = 'palettes';
} }
/** /**
@ -213,49 +207,40 @@ export class FuseMaterialColorPickerComponent implements OnChanges
*/ */
updateSelectedColor(): void updateSelectedColor(): void
{ {
setTimeout(() => { if ( this.selectedColor && this.selectedColor.palette === this.selectedPalette && this.selectedColor.hue === this.selectedHue )
if ( this.selectedColor && this.selectedPalette === this.selectedColor.palette && this.selectedHue === this.selectedColor.hue )
{ {
return; return;
} }
if ( this.selectedPalette !== '' && this.selectedHue !== '' ) // Set the selected color object
{
this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
}
else
{
this.selectedBg = '';
this.selectedFg = '';
}
this.selectedColor = { this.selectedColor = {
palette: this.selectedPalette, palette: this.selectedPalette,
hue : this.selectedHue, hue : this.selectedHue,
class : this.selectedClass, class : this.selectedPalette + '-' + this.selectedHue,
bg : this.selectedBg, bg : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette)[this.selectedHue],
fg : this.selectedFg fg : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]
}; };
this.selectedPaletteChange.emit(this.selectedPalette); // Emit the color changed event
this.selectedHueChange.emit(this.selectedHue); this.colorChanged.emit(this.selectedColor);
this.selectedClassChange.emit(this.selectedClass);
this.selectedBgChange.emit(this.selectedBg);
this.selectedFgChange.emit(this.selectedFg);
this.value = this.selectedColor; // Mark the model as touched
this.onValueChange.emit(this.selectedColor); this._modelTouched(this.selectedColor.class);
});
// Update the model
this._modelChange(this.selectedColor.class);
} }
/** /**
* Go back to palette selection * Go to palettes view
*
* @param event
*/ */
backToPaletteSelection(): void goToPalettesView(event): void
{ {
// Stop propagation
event.stopPropagation();
this.view = 'palettes'; this.view = 'palettes';
} }

4
src/@fuse/components/material-color-picker/material-color-picker.module.ts
View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material'; import { MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule } from '@angular/material';
import { FusePipesModule } from '@fuse/pipes/pipes.module'; import { FusePipesModule } from '@fuse/pipes/pipes.module';
@ -19,7 +19,7 @@ import { FuseMaterialColorPickerComponent } from '@fuse/components/material-colo
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
MatMenuModule, MatMenuModule,
MatRippleModule, MatTooltipModule,
FusePipesModule FusePipesModule
], ],

14
src/@fuse/components/material-color-picker/material-color-picker.theme.scss Normal file
View File

@ -0,0 +1,14 @@
@mixin fuse-material-color-picker-theme($theme) {
$background: map-get($theme, background);
.fuse-material-color-picker-menu {
.mat-menu-content {
.views {
background: #303030;
}
}
}
}

18
src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
View File

@ -1,42 +1,42 @@
<ng-container *ngIf="!item.hidden"> <ng-container *ngIf="!item.hidden">
<!-- normal collapse --> <!-- normal collapse -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function" matRipple> <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.url --> <!-- item.url -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.externalUrl --> <!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- item.function -->
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function" <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple> (click)="item.function()">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()" (click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.externalUrl && item.function --> <!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()" (click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
@ -52,7 +52,7 @@
<div class="children" [ngClass]="{'open': isOpen}"> <div class="children" [ngClass]="{'open': isOpen}">
<div class="{{fuseConfig.layout.navbar.background}}"> <div class="{{fuseConfig.layout.navbar.primaryBackground}}">
<ng-container *ngFor="let item of item.children"> <ng-container *ngFor="let item of item.children">
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item> <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>

14
src/@fuse/components/navigation/horizontal/item/item.component.html
View File

@ -2,37 +2,37 @@
<!-- item.url --> <!-- item.url -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.externalUrl --> <!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- item.function -->
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function" <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple> (click)="item.function()">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()" (click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.externalUrl && item.function --> <!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()" (click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>

5
src/@fuse/components/navigation/navigation.component.html
View File

@ -6,7 +6,8 @@
<ng-container *ngFor="let item of navigation"> <ng-container *ngFor="let item of navigation">
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group> <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
<fuse-nav-vertical-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapsable> <fuse-nav-vertical-collapsable *ngIf="item.type=='collapsable'"
[item]="item"></fuse-nav-vertical-collapsable>
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item> <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
</ng-container> </ng-container>
@ -20,7 +21,7 @@
<ng-container *ngFor="let item of navigation"> <ng-container *ngFor="let item of navigation">
<fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable> <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable>
<fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'" <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapsable'"
[item]="item"></fuse-nav-horizontal-collapsable> [item]="item"></fuse-nav-horizontal-collapsable>
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item> <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>

18
src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
View File

@ -1,45 +1,45 @@
<ng-container *ngIf="!item.hidden"> <ng-container *ngIf="!item.hidden">
<!-- normal collapse --> <!-- normal collapsable -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
(click)="toggleOpen($event)" matRipple> (click)="toggleOpen($event)">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.url --> <!-- item.url -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
(click)="toggleOpen($event)" (click)="toggleOpen($event)"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.externalUrl --> <!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
(click)="toggleOpen($event)" (click)="toggleOpen($event)"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- item.function -->
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function" <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="toggleOpen($event);item.function()" matRipple> (click)="toggleOpen($event);item.function()">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()" (click)="toggleOpen($event);item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.externalUrl && item.function --> <!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()" (click)="toggleOpen($event);item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>

14
src/@fuse/components/navigation/vertical/item/item.component.html
View File

@ -2,37 +2,37 @@
<!-- item.url --> <!-- item.url -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.externalUrl --> <!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- item.function -->
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function" <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple> (click)="item.function()">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()" (click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.externalUrl && item.function --> <!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()" (click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>

4
src/@fuse/components/progress-bar/progress-bar.service.ts
View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { NavigationEnd, NavigationStart, Router } from '@angular/router'; import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import { filter } from 'rxjs/operators'; import { filter } from 'rxjs/operators';
@ -103,7 +103,7 @@ export class FuseProgressBarService
}); });
this._router.events this._router.events
.pipe(filter((event) => event instanceof NavigationEnd)) .pipe(filter((event) => event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel))
.subscribe(() => { .subscribe(() => {
this.hide(); this.hide();
}); });

5
src/@fuse/components/search-bar/search-bar.component.html
View File

@ -1,15 +1,12 @@
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}"> <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
<div class="fuse-search-bar-content" [ngClass]="fuseConfig.layout.toolbar.background"> <div class="fuse-search-bar-content">
<label for="fuse-search-bar-input"> <label for="fuse-search-bar-input">
<button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()" <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
*ngIf="collapsed"> *ngIf="collapsed">
<mat-icon class="s-24 secondary-text">search</mat-icon> <mat-icon class="s-24 secondary-text">search</mat-icon>
</button> </button>
<!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
<mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
</span>-->
</label> </label>
<input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"

3
src/@fuse/components/search-bar/search-bar.component.scss
View File

@ -53,8 +53,9 @@
display: none; display: none;
flex: 1 0 auto; flex: 1 0 auto;
min-height: 64px; min-height: 64px;
background-color: transparent;
font-size: 16px; font-size: 16px;
background-color: transparent;
color: currentColor;
} }
} }

11
src/@fuse/components/search-bar/search-bar.theme.scss Normal file
View File

@ -0,0 +1,11 @@
@mixin fuse-search-bar-theme($theme) {
$background: map-get($theme, background);
.fuse-search-bar {
&.expanded {
background-color: map-get($background, background);
}
}
}

4
src/@fuse/components/shortcuts/shortcuts.component.scss
View File

@ -19,6 +19,10 @@
display: flex !important; display: flex !important;
flex: 1; flex: 1;
height: 100%; height: 100%;
> div {
flex: 1 1 auto !important;
}
} }
} }
} }

11
src/@fuse/components/shortcuts/shortcuts.theme.scss Normal file
View File

@ -0,0 +1,11 @@
@mixin fuse-shortcuts-theme($theme) {
$background: map-get($theme, background);
#fuse-shortcuts {
&.show-mobile-panel {
background-color: map-get($background, background);
}
}
}

6
src/@fuse/components/sidebar/sidebar.component.scss
View File

@ -15,7 +15,6 @@ fuse-sidebar {
max-width: 280px; max-width: 280px;
z-index: 1000; z-index: 1000;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
background: white;
@include media-breakpoint-down('xs') { @include media-breakpoint-down('xs') {
min-width: 0 !important; min-width: 0 !important;
@ -62,10 +61,5 @@ fuse-sidebar {
left: 0; left: 0;
right: 0; right: 0;
z-index: 999; z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0; opacity: 0;
&.fuse-sidebar-overlay-invisible {
background-color: transparent;
}
} }

1
src/@fuse/components/sidebar/sidebar.component.ts
View File

@ -318,7 +318,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Get the active status // Get the active status
const isActive = this._observableMedia.isActive(this.lockedOpen); const isActive = this._observableMedia.isActive(this.lockedOpen);
// If the both status are the same, don't act // If the both status are the same, don't act
if ( this._wasActive === isActive ) if ( this._wasActive === isActive )
{ {

16
src/@fuse/components/sidebar/sidebar.theme.scss Normal file
View File

@ -0,0 +1,16 @@
@mixin fuse-sidebar-theme($theme) {
$background: map-get($theme, background);
fuse-sidebar {
background: map-get($background, background);
}
.fuse-sidebar-overlay {
background-color: rgba(0, 0, 0, 0.6);
&.fuse-sidebar-overlay-invisible {
background-color: transparent;
}
}
}

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

@ -12,6 +12,19 @@
<form [formGroup]="form"> <form [formGroup]="form">
<!-- COLOR THEME -->
<div class="group">
<h2>Color themes</h2>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="colorTheme">
<mat-radio-button class="mb-12" value="theme-default">Default</mat-radio-button>
<mat-radio-button class="mb-12" value="theme-default-dark">Default Dark</mat-radio-button>
<mat-radio-button class="mb-12" value="theme-yellow-light">Yellow Light</mat-radio-button>
</mat-radio-group>
</div>
<!-- LAYOUT STYLES --> <!-- LAYOUT STYLES -->
<div class="group" formGroupName="layout"> <div class="group" formGroupName="layout">
@ -79,10 +92,13 @@
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button> <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <h3 class="mt-16 mb-8">Primary background:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.navbar.background"> formControlName="primaryBackground"></fuse-material-color-picker>
</fuse-material-color-picker>
<h3 class="mt-16 mb-8">Secondary background:</h3>
<fuse-material-color-picker class="mb-16"
formControlName="secondaryBackground"></fuse-material-color-picker>
</div> </div>
@ -102,10 +118,13 @@
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button> <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.toolbar.background"> formControlName="background"></fuse-material-color-picker>
</fuse-material-color-picker>
</div> </div>
@ -125,10 +144,13 @@
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button> <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Color:</h3> <h3 class="mt-24 mb-8">Color:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.footer.background"> formControlName="background"></fuse-material-color-picker>
</fuse-material-color-picker>
</div> </div>
@ -190,10 +212,13 @@
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button> <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <h3 class="mt-16 mb-8">Primary background:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.navbar.background"> formControlName="primaryBackground"></fuse-material-color-picker>
</fuse-material-color-picker>
<h3 class="mt-16 mb-8">Secondary background:</h3>
<fuse-material-color-picker class="mb-16"
formControlName="secondaryBackground"></fuse-material-color-picker>
</div> </div>
@ -213,10 +238,13 @@
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button> <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.toolbar.background"> formControlName="background"></fuse-material-color-picker>
</fuse-material-color-picker>
</div> </div>
@ -236,10 +264,13 @@
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button> <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.footer.background"> formControlName="background"></fuse-material-color-picker>
</fuse-material-color-picker>
</div> </div>
@ -301,10 +332,13 @@
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button> <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <h3 class="mt-16 mb-8">Primary background:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.navbar.background"> formControlName="primaryBackground"></fuse-material-color-picker>
</fuse-material-color-picker>
<h3 class="mt-16 mb-8">Secondary background:</h3>
<fuse-material-color-picker class="mb-16"
formControlName="secondaryBackground"></fuse-material-color-picker>
</div> </div>
@ -323,10 +357,13 @@
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button> <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.toolbar.background"> formControlName="background"></fuse-material-color-picker>
</fuse-material-color-picker>
</div> </div>
@ -345,10 +382,13 @@
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button> <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.footer.background"> formControlName="background"></fuse-material-color-picker>
</fuse-material-color-picker>
</div> </div>
@ -405,9 +445,14 @@
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button> <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <h3 class="mt-16 mb-8">Primary background:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.navbar.background"> formControlName="primaryBackground">
</fuse-material-color-picker>
<h3 class="mt-16 mb-8">Secondary background (Vertical):</h3>
<fuse-material-color-picker class="mb-16"
formControlName="secondaryBackground">
</fuse-material-color-picker> </fuse-material-color-picker>
</div> </div>
@ -427,10 +472,13 @@
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button> <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.toolbar.background"> formControlName="background"></fuse-material-color-picker>
</fuse-material-color-picker>
</div> </div>
@ -449,10 +497,13 @@
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button> <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3> <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16" <fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.footer.background"> formControlName="background"></fuse-material-color-picker>
</fuse-material-color-picker>
</div> </div>

6
src/@fuse/components/theme-options/theme-options.component.scss
View File

@ -9,7 +9,7 @@
} }
} }
:host { fuse-theme-options {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@ -45,7 +45,6 @@
flex: 1 0 auto; flex: 1 0 auto;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 2px; border-radius: 2px;
padding: 28px 16px 8px 16px; padding: 28px 16px 8px 16px;
margin: 16px 0; margin: 16px 0;
@ -58,14 +57,11 @@
padding: 0 8px; padding: 0 8px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
background: white;
color: rgba(0, 0, 0, 0.54);
} }
h3 { h3 {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.54);
margin: 24px 0 16px 0; margin: 24px 0 16px 0;
padding: 0; padding: 0;

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

@ -1,5 +1,6 @@
import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core'; import { Component, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { DOCUMENT } from '@angular/common';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
@ -10,8 +11,9 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({ @Component({
selector : 'fuse-theme-options', selector : 'fuse-theme-options',
templateUrl: './theme-options.component.html', templateUrl : './theme-options.component.html',
styleUrls : ['./theme-options.component.scss'], styleUrls : ['./theme-options.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations animations : fuseAnimations
}) })
export class FuseThemeOptionsComponent implements OnInit, OnDestroy export class FuseThemeOptionsComponent implements OnInit, OnDestroy
@ -28,6 +30,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
/** /**
* Constructor * Constructor
* *
* @param {DOCUMENT} document
* @param {FormBuilder} _formBuilder * @param {FormBuilder} _formBuilder
* @param {FuseConfigService} _fuseConfigService * @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService * @param {FuseNavigationService} _fuseNavigationService
@ -35,6 +38,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
* @param {Renderer2} _renderer * @param {Renderer2} _renderer
*/ */
constructor( constructor(
@Inject(DOCUMENT) private document: any,
private _formBuilder: FormBuilder, private _formBuilder: FormBuilder,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService,
@ -61,29 +65,33 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
// Build the config form // Build the config form
// noinspection TypeScriptValidateTypes // noinspection TypeScriptValidateTypes
this.form = this._formBuilder.group({ this.form = this._formBuilder.group({
colorTheme : new FormControl(),
layout : this._formBuilder.group({ layout : this._formBuilder.group({
style : new FormControl(), style : new FormControl(),
width : new FormControl(), width : new FormControl(),
navbar : this._formBuilder.group({ navbar : this._formBuilder.group({
background: new FormControl(), primaryBackground : new FormControl(),
secondaryBackground: new FormControl(),
folded : new FormControl(), folded : new FormControl(),
hidden : new FormControl(), hidden : new FormControl(),
position : new FormControl(), position : new FormControl(),
variant : new FormControl() variant : new FormControl()
}), }),
toolbar : this._formBuilder.group({ toolbar : this._formBuilder.group({
background: new FormControl(), background : new FormControl(),
customBackgroundColor: new FormControl(),
hidden : new FormControl(), hidden : new FormControl(),
position : new FormControl() position : new FormControl()
}), }),
footer : this._formBuilder.group({ footer : this._formBuilder.group({
background: new FormControl(), background : new FormControl(),
customBackgroundColor: new FormControl(),
hidden : new FormControl(), hidden : new FormControl(),
position : new FormControl() position : new FormControl()
}), }),
sidepanel: this._formBuilder.group({ sidepanel: this._formBuilder.group({
hidden: new FormControl(), hidden : new FormControl(),
position : new FormControl() position: new FormControl()
}) })
}), }),
customScrollbars: new FormControl() customScrollbars: new FormControl()
@ -179,21 +187,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
layout: { layout: {
width : 'fullwidth', width : 'fullwidth',
navbar : { navbar : {
background: 'mat-fuse-dark-700-bg', primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false, folded : false,
hidden : false, hidden : false,
position : 'left', position : 'left',
variant : 'vertical-style-1' variant : 'vertical-style-1'
}, },
toolbar: { toolbar : {
background: 'mat-white-500-bg', background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false, hidden : false,
position : 'below-static' position : 'below-static'
}, },
footer : { footer : {
background: 'mat-fuse-dark-900-bg', background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false, hidden : false,
position : 'below-static' position : 'below-static'
},
sidepanel: {
hidden : false,
position: 'right'
} }
} }
}); });
@ -208,21 +223,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
layout: { layout: {
width : 'fullwidth', width : 'fullwidth',
navbar : { navbar : {
background: 'mat-fuse-dark-700-bg', primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false, folded : false,
hidden : false, hidden : false,
position : 'left', position : 'left',
variant : 'vertical-style-1' variant : 'vertical-style-1'
}, },
toolbar: { toolbar : {
background: 'mat-white-500-bg', background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false, hidden : false,
position : 'below' position : 'below'
}, },
footer : { footer : {
background: 'mat-fuse-dark-900-bg', background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false, hidden : false,
position : 'below' position : 'below'
},
sidepanel: {
hidden : false,
position: 'right'
} }
} }
}); });
@ -237,21 +259,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
layout: { layout: {
width : 'fullwidth', width : 'fullwidth',
navbar : { navbar : {
background: 'mat-fuse-dark-700-bg', primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false, folded : false,
hidden : false, hidden : false,
position : 'left', position : 'left',
layout : 'vertical-style-1' layout : 'vertical-style-1'
}, },
toolbar: { toolbar : {
background: 'mat-white-500-bg', background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false, hidden : false,
position : 'above-static' position : 'above-static'
}, },
footer : { footer : {
background: 'mat-fuse-dark-900-bg', background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false, hidden : false,
position : 'above-static' position : 'above-static'
},
sidepanel: {
hidden : false,
position: 'right'
} }
} }
}); });
@ -266,21 +295,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
layout: { layout: {
width : 'fullwidth', width : 'fullwidth',
navbar : { navbar : {
background: 'mat-fuse-dark-700-bg', primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false, folded : false,
hidden : false, hidden : false,
position : 'top', position : 'top',
variant : 'vertical-style-1' variant : 'vertical-style-1'
}, },
toolbar: { toolbar : {
background: 'mat-white-500-bg', background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false, hidden : false,
position : 'above' position : 'above'
}, },
footer : { footer : {
background: 'mat-fuse-dark-900-bg', background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false, hidden : false,
position : 'above-fixed' position : 'above-fixed'
},
sidepanel: {
hidden : false,
position: 'right'
} }
} }
}); });

5
src/@fuse/components/theme-options/theme-options.module.ts
View File

@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material'; import { MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
import { FuseDirectivesModule } from '@fuse/directives/directives'; import { FuseDirectivesModule } from '@fuse/directives/directives';
import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module'; import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component'; import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
@ -22,6 +22,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
FlexLayoutModule, FlexLayoutModule,
MatButtonModule, MatButtonModule,
MatCheckboxModule,
MatDividerModule, MatDividerModule,
MatFormFieldModule, MatFormFieldModule,
MatIconModule, MatIconModule,

27
src/@fuse/components/theme-options/theme-options.theme.scss Normal file
View File

@ -0,0 +1,27 @@
@mixin fuse-theme-options-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
fuse-theme-options {
.theme-options-panel {
form {
.group {
border: 1px solid map-get($foreground, divider);
h2 {
background: map-get($background, background);
color: map-get($foreground, secondary-text);
}
h3 {
color: map-get($foreground, secondary-text);
}
}
}
}
}
}

13
src/@fuse/components/widget/widget.theme.scss Normal file
View File

@ -0,0 +1,13 @@
@mixin fuse-widget-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
fuse-widget {
> .fuse-widget-front,
> .fuse-widget-back {
background: map-get($background, card);
}
}
}

12
src/@fuse/mat-colors/index.ts
View File

@ -4,6 +4,7 @@ const black12 = 'rgba(black, 0.12)';
const white12 = 'rgba(white, 0.12)'; const white12 = 'rgba(white, 0.12)';
const black6 = 'rgba(black, 0.06)'; const black6 = 'rgba(black, 0.06)';
const white6 = 'rgba(white, 0.06)'; const white6 = 'rgba(white, 0.06)';
const matColors = { const matColors = {
'red': { 'red': {
50 : '#ffebee', 50 : '#ffebee',
@ -635,7 +636,8 @@ const matColors = {
A700: white87 A700: white87
} }
}, },
'fuse-dark': {
'fuse-navy': {
50 : '#ECECEE', 50 : '#ECECEE',
100 : '#C5C6CB', 100 : '#C5C6CB',
200 : '#9EA1A9', 200 : '#9EA1A9',
@ -667,13 +669,15 @@ const matColors = {
A700: white87 A700: white87
} }
}, },
white : {
'fuse-white': {
500 : 'white', 500 : 'white',
contrast: { contrast: {
500: black87 500: black87
} }
}, },
black : {
'fuse-black': {
500 : 'black', 500 : 'black',
contrast: { contrast: {
500: 'white' 500: 'white'
@ -693,7 +697,6 @@ const matPresetColors = [
export class MatColors export class MatColors
{ {
public static all = matColors; public static all = matColors;
public static presets = matPresetColors; public static presets = matPresetColors;
public static getColor(colorName) public static getColor(colorName)
@ -702,6 +705,7 @@ export class MatColors
{ {
return matColors[colorName]; return matColors[colorName];
} }
return false; return false;
} }
} }

9
src/@fuse/scss/core.scss
View File

@ -10,15 +10,12 @@
// Fuse // Fuse
@import "fuse"; @import "fuse";
// Theme
@import "theme";
// Include core Angular Material styles // Include core Angular Material styles
@include mat-core(); @include mat-core();
// Setup the typography
@include angular-material-typography($typography);
// Create an Angular Material theme from the $theme map
@include angular-material-theme($theme);
// Partials // Partials
@import "partials/reset"; @import "partials/reset";
@import "partials/normalize"; @import "partials/normalize";

4
src/@fuse/scss/fuse.scss
View File

@ -1,5 +1,5 @@
// Material theming // Material theming tools
@import "theming"; @import '~@angular/material/theming';
// Breakpoint mixins // Breakpoint mixins
@import "mixins/breakpoints"; @import "mixins/breakpoints";

2
src/@fuse/scss/mixins/_breakpoints.scss
View File

@ -25,7 +25,7 @@ $grid-breakpoints: (
@mixin media-breakpoint($breakpointName) { @mixin media-breakpoint($breakpointName) {
$mediaQuery: map_get($breakpoints, $breakpointName); $mediaQuery: map-get($breakpoints, $breakpointName);
@if ($mediaQuery != null) { @if ($mediaQuery != null) {

6
src/@fuse/scss/partials/_angular-material-fix.scss
View File

@ -12,10 +12,6 @@
} }
// Fix: "Inconsistent font sizes across elements" // Fix: "Inconsistent font sizes across elements"
.mat-form-field-wrapper {
font-size: 16px;
}
.mat-checkbox { .mat-checkbox {
font-size: 16px; font-size: 16px;
} }
@ -34,7 +30,7 @@
background-color: rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12);
} }
// Fix: "Some idiots using table-cell and inline-table in mat-select" // Fix: "Table-cell and inline-table in mat-select"
.mat-form-field { .mat-form-field {
&.mat-form-field-type-mat-select { &.mat-form-field-type-mat-select {

26
src/@fuse/scss/partials/_cards.scss
View File

@ -1,7 +1,26 @@
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin cards-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.fuse-card {
background: map-get($background, card);
.card-divider {
border-top: 1px solid map-get($foreground, divider);
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Cards
// -----------------------------------------------------------------------------------------------------
.fuse-card { .fuse-card {
max-width: 320px; max-width: 320px;
min-width: 320px; min-width: 320px;
background: white;
border-radius: 2px; border-radius: 2px;
@include mat-elevation(2); @include mat-elevation(2);
@ -37,13 +56,8 @@
// Divider // Divider
.card-divider { .card-divider {
border-top: 1px solid rgba(0, 0, 0, 0.12);
margin: 16px; margin: 16px;
&.light {
border-top-color: rgba(255, 255, 255, 0.12);
}
&.full-width { &.full-width {
margin: 0; margin: 0;
} }

197
src/@fuse/scss/partials/_colors.scss
View File

@ -1,23 +1,52 @@
.secondary-text, // -----------------------------------------------------------------------------------------------------
.icon, // @ Theming
i { // -----------------------------------------------------------------------------------------------------
color: rgba(0, 0, 0, 0.54); @mixin colors-theme($theme) {
$is-dark: map-get($theme, is-dark);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
// Base colors
& {
color: map-get($foreground, text);
// If it's a light theme, use a darker background
// color other than the default #fafafa
@if ($is-dark == false) {
background: #F5F5F5;
} @else {
background: map-get($background, background);
}
}
.secondary-text {
color: map-get($foreground, secondary-text);
}
.icon,
i {
color: map-get($foreground, icon);
}
.hint-text {
color: map-get($foreground, hint-text);
}
.disabled-text {
color: map-get($foreground, disabled-text);
}
.fade-text,
.divider {
color: map-get($foreground, divider);
}
} }
.hint-text, // -----------------------------------------------------------------------------------------------------
.disabled-text { // @ Material colors map
color: rgba(0, 0, 0, 0.38); // -----------------------------------------------------------------------------------------------------
}
.divider {
color: rgba(0, 0, 0, 0.12);
}
// Material colors map
$matPalettes: ( $matPalettes: (
primary: $primary,
accent: $accent,
warn: $warn,
red: $mat-red, red: $mat-red,
pink: $mat-pink, pink: $mat-pink,
purple: $mat-purple, purple: $mat-purple,
@ -36,17 +65,16 @@ $matPalettes: (
deep-orange: $mat-deep-orange, deep-orange: $mat-deep-orange,
brown: $mat-brown, brown: $mat-brown,
grey: $mat-grey, grey: $mat-grey,
blue-grey: $mat-blue-grey, blue-grey: $mat-blue-grey
white: $mat-white,
black: $mat-black,
fuse-dark: $mat-fusedark
); );
// Material color hues list // Material color hues list
$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700; $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
// Text color levels generator mixin // -----------------------------------------------------------------------------------------------------
@mixin generateTextColorLevels($classes, $contrast) { // @ Text color levels generator
// -----------------------------------------------------------------------------------------------------
@mixin generate-text-color-levels($classes, $contrast) {
// If the contrast is dark... // If the contrast is dark...
@if ($contrast == 'dark') { @if ($contrast == 'dark') {
@ -125,7 +153,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
} }
} }
@mixin generateMaterialElementColors($classes, $contrast) { // -----------------------------------------------------------------------------------------------------
// @ Material element colors generator
// -----------------------------------------------------------------------------------------------------
@mixin generate-material-element-colors($classes, $contrast) {
// If the contrast color is light... // If the contrast color is light...
$fuseForeground: ( $fuseForeground: (
@ -150,53 +181,55 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
// Native Input // Native Input
input[type="text"] { input[type="text"] {
color: map_get($fuseForeground, base); color: map-get($fuseForeground, base);
} }
// Input // Input
.mat-form-field-label { .mat-form-field-label {
color: map_get($fuseForeground, hint-text); color: map-get($fuseForeground, hint-text);
} }
.mat-form-field-underline { .mat-form-field-underline {
background-color: map_get($fuseForeground, divider); background-color: map-get($fuseForeground, divider);
} }
// Select // Select
.mat-select-trigger, .mat-select-trigger,
.mat-select-arrow { .mat-select-arrow {
color: map_get($fuseForeground, hint-text); color: map-get($fuseForeground, hint-text);
} }
.mat-select-underline { .mat-select-underline {
background-color: map_get($fuseForeground, divider); background-color: map-get($fuseForeground, divider);
} }
.mat-select-disabled .mat-select-value, .mat-select-disabled .mat-select-value,
.mat-select-arrow, .mat-select-arrow,
.mat-select-trigger { .mat-select-trigger {
color: map_get($fuseForeground, hint-text); color: map-get($fuseForeground, hint-text);
} }
.mat-select-content, .mat-select-content,
.mat-select-panel-done-animating { .mat-select-panel-done-animating {
background: map_get($background, card); //background: map-get($background, card);
} }
.mat-select-value { .mat-select-value {
color: map_get($fuseForeground, text); color: map-get($fuseForeground, text);
} }
} }
} }
// Color classes generator mixin // -----------------------------------------------------------------------------------------------------
@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) { // @ Color classes generator
// -----------------------------------------------------------------------------------------------------
@mixin generate-color-classes($colorName, $color, $contrastColor, $hue) {
.#{$colorName}#{$hue}-bg { .#{$colorName}#{$hue}-bg {
background-color: $color !important; background-color: $color !important;
} }
.mat-#{$colorName}#{$hue}-bg { .#{$colorName}#{$hue} {
background-color: $color !important; background-color: $color !important;
color: $contrastColor !important; color: $contrastColor !important;
@ -231,13 +264,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
} }
} }
@mixin generateFuseColorClasses($primary, $accent, $warn) { // -----------------------------------------------------------------------------------------------------
// @ Fuse color classes
$palettes: ( // -----------------------------------------------------------------------------------------------------
primary: $primary, @mixin fuse-color-classes($palettes) {
accent: $accent,
warn: $warn
);
// Define contrast lists // Define contrast lists
$light-contrasting-classes: (); $light-contrasting-classes: ();
@ -258,32 +288,32 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
@if ($color != null and $contrast != null) { @if ($color != null and $contrast != null) {
// Generate color classes // Generate color classes
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}'); @include generate-color-classes($paletteName, $color, $contrast, '-#{$hue}');
// If the contrast color is dark // If the contrast color is dark
@if (rgba(black, 1) == rgba($contrast, 1)) { @if (rgba(black, 1) == rgba($contrast, 1)) {
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma'); $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
} }
// if the contrast color is light // if the contrast color is light
@else { @else {
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma'); $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
} }
// Run the generator one more time for default values (500) // Run the generator one more time for default values (500)
@if ($hue == 500) { @if ($hue == 500) {
// Generate color classes // Generate color classes
@include generateColorClasses($paletteName, $color, $contrast, ''); @include generate-color-classes($paletteName, $color, $contrast, '');
// Add color to the correct list depending on the contrasting color // Add color to the correct list depending on the contrasting color
// If the contrast color is dark // If the contrast color is dark
@if (rgba(black, 1) == rgba($contrast, 1)) { @if (rgba(black, 1) == rgba($contrast, 1)) {
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma'); $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
} }
// if the contrast color is light // if the contrast color is light
@else { @else {
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma'); $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
} }
} }
} }
@ -291,68 +321,13 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
} }
// Generate contrasting colors // Generate contrasting colors
@include generateTextColorLevels($dark-contrasting-classes, 'dark'); @include generate-text-color-levels($dark-contrasting-classes, 'dark');
@include generateTextColorLevels($light-contrasting-classes, 'light'); @include generate-text-color-levels($light-contrasting-classes, 'light');
@include generateMaterialElementColors($dark-contrasting-classes, 'dark'); @include generate-material-element-colors($dark-contrasting-classes, 'dark');
@include generateMaterialElementColors($light-contrasting-classes, 'light'); @include generate-material-element-colors($light-contrasting-classes, 'light');
} }
// Generate the color classes... // -----------------------------------------------------------------------------------------------------
// @ Generate Fuse color classes for default Material palettes
// Define contrast lists // -----------------------------------------------------------------------------------------------------
$light-contrasting-classes: (); @include fuse-color-classes($matPalettes);
$dark-contrasting-classes: ();
@each $paletteName, $palette in $matPalettes {
// Get the contrasts map
$contrasts: map-get($palette, 'contrast');
@each $hue in $matHues {
// Get the color and the contrasting color
$color: map-get($palette, $hue);
$contrast: map-get($contrasts, $hue);
@if ($color != null and $contrast != null) {
// Generate color classes
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
// Add color to the correct list depending on the contrasting color
// If the contrast color is dark
@if (rgba(black, 1) == rgba($contrast, 1)) {
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
}
// if the contrast color is light
@else {
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
}
// Run the generator one more time for default values (500)
@if ($hue == 500) {
// Generate color classes
@include generateColorClasses($paletteName, $color, $contrast, '');
// Add color to the correct list depending on the contrasting color
// If the contrast color is dark
@if (rgba(black, 1) == rgba($contrast, 1)) {
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
}
// if the contrast color is light
@else {
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
}
}
}
}
}
// Generate contrasting colors
@include generateTextColorLevels($dark-contrasting-classes, 'dark');
@include generateTextColorLevels($light-contrasting-classes, 'light');
@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
@include generateMaterialElementColors($light-contrasting-classes, 'light');

1
src/@fuse/scss/partials/_global.scss
View File

@ -9,7 +9,6 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background: #F5F5F5;
} }
body { body {

44
src/@fuse/scss/partials/_helpers.scss
View File

@ -1,6 +1,6 @@
// ###################### // -----------------------------------------------------------------------------------------------------
// POSITION HELPERS // @ Position helpers
// ###################### // -----------------------------------------------------------------------------------------------------
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
@ -21,9 +21,9 @@
} }
} }
// #################################### // -----------------------------------------------------------------------------------------------------
// ABSOLUTE POSITION ALIGNMENT HELPERS // @ Absolute position alignment helpers
// #################################### // -----------------------------------------------------------------------------------------------------
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
@ -48,9 +48,9 @@
} }
} }
// ###################### // -----------------------------------------------------------------------------------------------------
// SIZE HELPERS // @ Size helpers
// ###################### // -----------------------------------------------------------------------------------------------------
@each $prop, $abbrev in (height: h, width: w) { @each $prop, $abbrev in (height: h, width: w) {
@for $index from 0 through 180 { @for $index from 0 through 180 {
@ -75,9 +75,9 @@
} }
} }
// ###################### // -----------------------------------------------------------------------------------------------------
// SPACING HELPERS // @ Spacing helpers
// ###################### // -----------------------------------------------------------------------------------------------------
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
@ -168,9 +168,9 @@
} }
} }
// ###################### // -----------------------------------------------------------------------------------------------------
// BORDER HELPERS // @ Border helpers
// ###################### // -----------------------------------------------------------------------------------------------------
$border-style: 1px solid rgba(0, 0, 0, 0.12); $border-style: 1px solid rgba(0, 0, 0, 0.12);
.border, .border,
@ -199,7 +199,7 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
} }
.border-horizontal, .border-horizontal,
.b-x { .bx {
border-left: $border-style; border-left: $border-style;
border-right: $border-style; border-right: $border-style;
} }
@ -210,9 +210,9 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: $border-style; border-bottom: $border-style;
} }
// ###################### // -----------------------------------------------------------------------------------------------------
// BORDER RADIUS HELPERS // @ Border radius helpers
// ###################### // -----------------------------------------------------------------------------------------------------
.border-radius-100 { .border-radius-100 {
border-radius: 100%; border-radius: 100%;
} }
@ -233,9 +233,9 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 16px; border-radius: 16px;
} }
// ###################### // -----------------------------------------------------------------------------------------------------
// CURSOR HELPERS // @ Cursor helpers
// ###################### // -----------------------------------------------------------------------------------------------------
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }

238
src/@fuse/scss/partials/_material.scss
View File

@ -1,6 +1,169 @@
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
/* Avatars // @ Theming
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
@mixin material-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
// -----------------------------------------------------------------------------------------------------
// @ Avatar
// -----------------------------------------------------------------------------------------------------
.avatar {
color: map-get($foreground, text);
}
// -----------------------------------------------------------------------------------------------------
// @ Forms
// -----------------------------------------------------------------------------------------------------
.form-wrapper {
background-color: map-get($background, card);
}
// -----------------------------------------------------------------------------------------------------
// @ Navigation - Simple
// -----------------------------------------------------------------------------------------------------
.navigation-simple {
.item {
&.selected {
background-color: map-get($background, hover);
}
}
.subheader {
border-top: 1px solid map-get($foreground, divider);
}
}
// -----------------------------------------------------------------------------------------------------
// @ Pagination - Simple
// -----------------------------------------------------------------------------------------------------
.simple-pagination {
background: map-get($background, card);
.pagination-item {
color: map-get($foreground, secondary-text);
&:hover {
color: map-get($foreground, text);
}
&.disabled {
color: map-get($foreground, disabled-text);
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Price tables
// -----------------------------------------------------------------------------------------------------
.price-tables {
.price-table {
background: map-get($background, card);
&.style-1 {
.price {
.currency {
color: map-get($foreground, secondary-text);
}
.period {
color: map-get($foreground, secondary-text);
}
}
}
&.style-2 {
.price {
.currency {
color: map-get($foreground, secondary-text);
}
}
.period {
color: map-get($foreground, secondary-text);
}
}
&.style-3 {
.package-type {
.subtitle {
color: map-get($foreground, secondary-text);
}
}
.terms {
color: map-get($foreground, secondary-text);
}
.note {
color: map-get($foreground, secondary-text);
}
}
}
}
// -------------------------------------------------------------------------------------------------
// @ Table - Simple
// -------------------------------------------------------------------------------------------------
.simple-table-container {
background: map-get($background, card);
}
table {
&.simple {
thead {
tr {
th {
color: map-get($foreground, secondary-text);
border-bottom: 1px solid map-get($foreground, divider);
}
}
}
tbody {
tr {
td {
border-bottom: 1px solid map-get($foreground, divider);
}
}
}
&.clickable {
tbody {
tr {
&:hover {
background-color: map-get($background, hover);
}
}
}
}
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Avatar
// -----------------------------------------------------------------------------------------------------
.avatar { .avatar {
width: 40px; width: 40px;
min-width: 40px; min-width: 40px;
@ -11,7 +174,6 @@
font-size: 17px; font-size: 17px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
color: #FFFFFF;
&.square { &.square {
border-radius: 0; border-radius: 0;
@ -58,6 +220,7 @@ mat-icon.status {
&.online { &.online {
color: #4CAF50; color: #4CAF50;
&:before { &:before {
content: "check_circle"; content: "check_circle";
} }
@ -65,6 +228,7 @@ mat-icon.status {
&.do-not-disturb { &.do-not-disturb {
color: #F44336; color: #F44336;
&:before { &:before {
content: "do_not_disturb_on"; content: "do_not_disturb_on";
} }
@ -73,6 +237,7 @@ mat-icon.status {
&.away { &.away {
background-color: #FFC107; background-color: #FFC107;
color: #FFFFFF; color: #FFFFFF;
&:before { &:before {
content: "access_time"; content: "access_time";
} }
@ -81,17 +246,17 @@ mat-icon.status {
&.offline { &.offline {
color: #646464; color: #646464;
background-color: #FFFFFF; background-color: #FFFFFF;
&:before { &:before {
content: "not_interested"; content: "not_interested";
} }
} }
} }
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
/* Forms // @ Forms
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
.form-wrapper { .form-wrapper {
background: #FFFFFF;
padding: 16px; padding: 16px;
.form-title { .form-title {
@ -100,9 +265,9 @@ mat-icon.status {
} }
} }
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
/* Navigation - Simple // @ Navigation - Simple
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
.navigation-simple { .navigation-simple {
.item { .item {
@ -125,21 +290,12 @@ mat-icon.status {
font-weight: 500; font-weight: 500;
line-height: 1; line-height: 1;
} }
&.selected {
background-color: rgba(0, 0, 0, 0.06);
}
} }
.subheader { .subheader {
font-size: 13px; font-size: 13px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
font-weight: 500; font-weight: 500;
margin-top: 8px; margin-top: 8px;
&.light {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
} }
mat-divider { mat-divider {
@ -147,15 +303,14 @@ mat-icon.status {
} }
} }
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
/* Pagination // @ Pagination - Simple
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
.simple-pagination { .simple-pagination {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
@include mat-elevation(1); @include mat-elevation(1);
background-color: #FFFFFF;
padding: 0 8px; padding: 0 8px;
.pagination-item { .pagination-item {
@ -168,32 +323,24 @@ mat-icon.status {
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
color: rgba(0, 0, 0, 0.54);
&:hover {
color: rgba(0, 0, 0, 0.87);
}
&.active { &.active {
cursor: default; cursor: default;
color: rgba(0, 0, 0, 0.87);
} }
&.disabled { &.disabled {
cursor: default; cursor: default;
color: rgba(0, 0, 0, 0.26);
} }
} }
} }
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
/* Price Tables // @ Price tables
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
.price-tables { .price-tables {
.price-table { .price-table {
position: relative; position: relative;
background-color: #FFFFFF;
width: 280px; width: 280px;
border-radius: 2px; border-radius: 2px;
margin: 12px; margin: 12px;
@ -218,7 +365,6 @@ mat-icon.status {
padding-right: 4px; padding-right: 4px;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.54);
} }
.value { .value {
@ -230,7 +376,6 @@ mat-icon.status {
.period { .period {
padding: 0 0 5px 4px; padding: 0 0 5px 4px;
font-size: 17px; font-size: 17px;
color: rgba(0, 0, 0, 0.54);
} }
} }
@ -279,7 +424,6 @@ mat-icon.status {
padding-right: 4px; padding-right: 4px;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.54);
} }
.value { .value {
@ -293,7 +437,6 @@ mat-icon.status {
padding: 0 32px; padding: 0 32px;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.54);
text-align: center; text-align: center;
} }
@ -328,7 +471,6 @@ mat-icon.status {
.subtitle { .subtitle {
font-size: 17px; font-size: 17px;
color: rgba(0, 0, 0, 0.54);
font-weight: 500; font-weight: 500;
} }
} }
@ -357,7 +499,6 @@ mat-icon.status {
.terms { .terms {
margin: 32px; margin: 32px;
font-size: 15px; font-size: 15px;
color: rgba(0, 0, 0, 0.54);
.term { .term {
padding-bottom: 16px; padding-bottom: 16px;
@ -375,17 +516,15 @@ mat-icon.status {
.note { .note {
padding: 8px 32px 16px 32px; padding: 8px 32px 16px 32px;
text-align: center; text-align: center;
color: rgba(0, 0, 0, 0.54);
} }
} }
} }
} }
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
/* Table - Simple // @ Table - Simple
/*----------------------------------------------------------------*/ // -----------------------------------------------------------------------------------------------------
.simple-table-container { .simple-table-container {
background: #FFFFFF;
.table-title { .table-title {
font-size: 20px; font-size: 20px;
@ -408,8 +547,6 @@ table {
th { th {
padding: 16px 8px; padding: 16px 8px;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.54);
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
white-space: nowrap; white-space: nowrap;
&:first-child { &:first-child {
@ -429,7 +566,6 @@ table {
td { td {
padding: 16px 8px; padding: 16px 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
&:first-child { &:first-child {
padding-left: 24px; padding-left: 24px;
@ -455,10 +591,6 @@ table {
tr { tr {
cursor: pointer; cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.03);
}
} }
} }
} }

4
src/@fuse/scss/partials/_navigation.scss
View File

@ -64,11 +64,11 @@
} }
&:hover { &:hover {
background-color: map-get($background, hover); background-color: rgba(0, 0, 0, 0.04);
} }
.mat-ripple-element { .mat-ripple-element {
background-color: map-get($background, hover); background-color: rgba(0, 0, 0, 0.04);
} }
&.active { &.active {

87
src/@fuse/scss/partials/_page-layouts.scss
View File

@ -1,4 +1,83 @@
// Page Layouts // -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin page-layouts-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.page-layout {
// Carded layout
&.carded {
// Fullwidth
&.fullwidth {
> .center {
> .content-card {
background: map-get($background, card);
> .toolbar {
border-bottom-color: map-get($foreground, divider);
}
}
}
}
// Left / Right sidebar
&.left-sidebar,
&.right-sidebar {
> .center {
> .content-card {
background: map-get($background, card);
> .toolbar {
border-bottom-color: map-get($foreground, divider);
}
}
}
}
}
// Simple layout
&.simple {
// Left / Right sidebar
&.left-sidebar,
&.right-sidebar {
> .center {
> .content {
background: map-get($background, card);
}
}
// Inner sidebar
&.inner-sidebar {
> .content {
> .center {
> .content {
background: map-get($background, card);
}
}
}
}
}
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Page Layouts
// -----------------------------------------------------------------------------------------------------
$carded-header-height: 200px !default; $carded-header-height: 200px !default;
$carded-header-height-sm: 160px !default; $carded-header-height-sm: 160px !default;
$carded-toolbar-height: 64px !default; $carded-toolbar-height: 64px !default;
@ -75,7 +154,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid;
height: $carded-toolbar-height; height: $carded-toolbar-height;
min-height: $carded-toolbar-height; min-height: $carded-toolbar-height;
max-height: $carded-toolbar-height; max-height: $carded-toolbar-height;
@ -273,7 +352,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex: 1 1 auto; flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid;
height: $carded-toolbar-height; height: $carded-toolbar-height;
min-height: $carded-toolbar-height; min-height: $carded-toolbar-height;
max-height: $carded-toolbar-height; max-height: $carded-toolbar-height;
@ -516,7 +595,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
} }
} }
// Inner Sidebar // Inner sidebar
&.inner-sidebar { &.inner-sidebar {
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;

68
src/@fuse/scss/partials/_typography.scss
View File

@ -1,3 +1,44 @@
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin typography-theme($theme) {
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$is-dark: map-get($theme, is-dark);
a {
color: map-get($accent, default);
}
code {
&:not(.highlight) {
background-color: map-get($background, app-bar);
}
}
.changelog {
.entry {
background-color: map-get($background, card);
}
}
.text-boxed {
@if ($is-dark) {
background-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.54);
} @else {
background-color: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.54);
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Typography
// -----------------------------------------------------------------------------------------------------
html { html {
font-size: 62.5%; font-size: 62.5%;
font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
@ -46,7 +87,6 @@ h6, .h6 {
// Links // Links
a { a {
color: mat-color($accent);
text-decoration: none; text-decoration: none;
&:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) { &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
@ -103,11 +143,10 @@ code {
font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;; font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;;
&:not(.highlight) { &:not(.highlight) {
background: rgba(0, 0, 0, 0.065);
color: #106CC8; color: #106CC8;
margin: 0 1px;
padding: 2px 3px; padding: 2px 3px;
border-radius: 2px; border-radius: 2px;
line-height: 1.7;
} }
} }
@ -237,6 +276,7 @@ strong {
line-height: 1.25; line-height: 1.25;
} }
.line-height-1\.5,
.line-height-1\.50 { .line-height-1\.50 {
line-height: 1.5; line-height: 1.5;
} }
@ -245,6 +285,19 @@ strong {
line-height: 1.75; line-height: 1.75;
} }
// Letter spacing helpers
.letter-spacing-condensed {
letter-spacing: -0.02em;
}
.letter-spacing-normal {
letter-spacing: normal;
}
.letter-spacing-relaxed {
letter-spacing: 0.02em;
}
// Boxed text // Boxed text
.text-boxed { .text-boxed {
border-radius: 2px; border-radius: 2px;
@ -252,17 +305,9 @@ strong {
margin: 0 8px; margin: 0 8px;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.54);
background-color: rgba(0, 0, 0, 0.12);
white-space: nowrap; white-space: nowrap;
} }
// Boxed text light
.text-boxed-light {
@extend .text-boxed;
background-color: rgba(255, 255, 255, 0.7);
}
// Truncate // Truncate
.text-truncate { .text-truncate {
display: block; display: block;
@ -280,7 +325,6 @@ strong {
.changelog { .changelog {
.entry { .entry {
background: white;
margin-bottom: 24px; margin-bottom: 24px;
padding: 24px 32px; padding: 24px 32px;
@include mat-elevation(2); @include mat-elevation(2);

361
src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss
View File

@ -1,361 +0,0 @@
/*@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?81091010');
src: url('../font/fontello.eot?81091010#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?81091010') format('woff2'),
url('../font/fontello.woff?81091010') format('woff'),
url('../font/fontello.ttf?81091010') format('truetype'),
url('../font/fontello.svg?81091010#fontello') format('svg');
font-weight: normal;
font-style: normal;
}*/
owl-date-time {
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "Material Icons";
font-style: normal;
font-weight: normal;
speak: none;
display: flex;
align-items: center;
justify-content: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cancel:before {
content: 'close';
}
.icon-up-open:before {
content: 'keyboard_arrow_up';
}
.icon-down-open:before {
content: 'keyboard_arrow_down';
}
.icon-left-open:before {
content: 'chevron_left';
}
.icon-right-open:before {
content: 'chevron_right';
}
$white: #FFFFFF;
$black: #000000;
$grey: #DDDDDD;
$blue: #0070BA;
.owl-widget,
.owl-widget * {
box-sizing: border-box;
}
.owl-widget {
font-size: 1em;
}
.owl-state-focus {
}
.owl-corner-all {
border-radius: 2px;
}
.owl-corner-top {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.owl-state-default {
background: #FFFFFF;
color: rgba(0, 0, 0, 0.87);
}
.owl-dateTime-inputWrapper {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.owl-dateTime-input {
background: none !important;
padding: 0 !important;
cursor: pointer;
.owl-inputtext {
margin: 0;
padding: 8px;
background: none !important;
color: rgba(0, 0, 0, 0.87);
}
}
.owl-dateTime-cancel {
position: relative !important;
right: 0 !important;
top: 0 !important;
transform: none !important;
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
line-height: 16px !important;
color: rgba(0, 0, 0, 0.54) !important;
}
}
.owl-dateTime {
position: relative;
width: 140px;
&.owl-dateTime-inline {
width: auto;
.owl-dateTime-dialog {
position: relative;
z-index: auto;
}
}
}
.owl-dateTime-dialog {
width: 256px;
user-select: none;
z-index: 99999;
top: 24px !important;
right: 0 !important;
left: auto !important;
@include mat-elevation(4);
}
.owl-dateTime-dialogHeader {
height: 2.5em;
padding: .25em;
background-color: rgba(0, 0, 0, .1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.owl-calendar-wrapper {
padding: 16px !important;
}
.owl-calendar-control {
.owl-calendar-controlNav {
display: flex;
align-items: center;
justify-content: center;
.nav-prev,
.nav-next {
display: flex;
&:before {
font-family: "Material Icons";
position: relative !important;
right: 0 !important;
top: 0 !important;
transform: none !important;
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
line-height: 20px !important;
content: "chevron_left";
color: rgba(0, 0, 0, 0.54);
}
}
.nav-next:before {
content: "chevron_right";
}
}
.owl-calendar-controlContent {
.month-control,
.year-control {
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.month-control {
margin-right: 8px;
}
.year-control {
}
}
}
.owl-calendar {
table {
border-spacing: 0 !important;
}
tbody td {
&.owl-calendar-selected {
background-color: $blue;
color: $white;
}
&.owl-calendar-invalid {
color: #ACACAC;
}
&.owl-calendar-outFocus {
color: $grey;
}
&.owl-calendar-hidden {
visibility: hidden;
}
&:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
background-color: lighten($blue, 50%);
color: $black;
}
}
}
.owl-years,
.owl-months {
td.owl-year,
td.owl-month {
padding: 0;
font-size: 16px;
width: 72px;
height: 48px;
line-height: 48px;
cursor: pointer;
}
}
.owl-calendar-yearArrow {
width: 24px !important;
height: 24px !important;
&.left {
left: -16px !important;
}
&.right {
right: -16px !important;
}
}
.owl-weekdays {
th.owl-weekday {
height: 32px;
line-height: 32px;
text-align: center;
font-size: 12px;
padding: 0;
color: rgba(0, 0, 0, 0.37);
}
}
.owl-days {
td.owl-day {
height: 32px;
width: 32px;
line-height: 32px;
cursor: pointer;
border-radius: 100%;
padding: 0;
&.owl-day-today:before {
content: '';
display: block;
position: absolute;
right: 2px;
top: 2px;
border-top: .5em solid lighten($blue, 20%);
border-left: .5em solid transparent;
}
}
}
.owl-timer-wrapper {
height: 88px;
padding: 8px !important;
background-color: rgba(0, 0, 0, 0.06);
.owl-timer-input {
background: none;
width: 100% !important;
text-align: center;
}
.owl-timer-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40%;
font-size: 20px;
}
.owl-meridian-btn {
font-size: .8em;
color: $blue;
background-image: none;
background-color: transparent;
border-color: $blue;
&:hover {
color: $white;
background-color: $blue;
border-color: $blue;
}
}
}
.owl-timer-divider {
display: inline-block;
position: absolute;
width: 8px;
height: 100%;
left: -2px;
.owl-timer-dot {
display: block;
background: rgba(0, 0, 0, 0.37);
width: 3px;
height: 3px;
position: absolute;
left: 50%;
border-radius: 100%;
transform: translateX(-50%);
&.dot-top {
top: 40%;
}
&.dot-bottom {
bottom: 40%;
}
}
}
}

93
src/@fuse/scss/partials/plugins/_ngx-datatable.scss
View File

@ -1,3 +1,76 @@
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin ngx-datatable-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
ngx-datatable {
&.material {
background: map-get($background, card);
color: map-get($foreground, text);
.datatable-header {
.datatable-header-cell {
color: map-get($foreground, secondary-text);
}
}
.datatable-body {
.datatable-row-wrapper {
border-bottom-color: map-get($foreground, divider);
&:first-child {
border-top-color: map-get($foreground, divider);
}
.datatable-body-row {
.datatable-body-cell {
color: map-get($foreground, text);
}
}
}
}
.datatable-footer {
color: map-get($foreground, secondary-text);
.datatable-pager {
a {
color: map-get($foreground, secondary-text);
}
}
}
&:not(.cell-selection) {
.datatable-body {
.datatable-row-wrapper {
.datatable-body-row {
&:hover {
background-color: map-get($background, hover);
.datatable-row-group {
background-color: map-get($background, hover);
}
}
}
}
}
}
}
}
}
.ngx-datatable { .ngx-datatable {
&.material { &.material {
@ -42,12 +115,11 @@
} }
.datatable-row-wrapper { .datatable-row-wrapper {
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid;
&:first-child { &:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.12); border-top: 1px solid;
} }
.datatable-body-cell { .datatable-body-cell {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -118,48 +190,63 @@
.datatable-icon-filter:before { .datatable-icon-filter:before {
content: "filter_list"; content: "filter_list";
} }
.datatable-icon-collapse:before { .datatable-icon-collapse:before {
content: "unfold_less"; content: "unfold_less";
} }
.datatable-icon-expand:before { .datatable-icon-expand:before {
content: "unfold_more"; content: "unfold_more";
} }
.datatable-icon-close:before { .datatable-icon-close:before {
content: "close"; content: "close";
} }
.datatable-icon-up:before { .datatable-icon-up:before {
content: "keyboard_arrow_up"; content: "keyboard_arrow_up";
} }
.datatable-icon-down:before { .datatable-icon-down:before {
content: "keyboard_arrow_down"; content: "keyboard_arrow_down";
} }
.datatable-icon-sort:before { .datatable-icon-sort:before {
content: "sort"; content: "sort";
} }
.datatable-icon-done:before { .datatable-icon-done:before {
content: "done"; content: "done";
} }
.datatable-icon-done-all:before { .datatable-icon-done-all:before {
content: "done_all"; content: "done_all";
} }
.datatable-icon-search:before { .datatable-icon-search:before {
content: "search"; content: "search";
} }
.datatable-icon-pin:before { .datatable-icon-pin:before {
content: "lock"; content: "lock";
} }
.datatable-icon-add:before { .datatable-icon-add:before {
content: "add"; content: "add";
} }
.datatable-icon-left:before { .datatable-icon-left:before {
content: "chevron_left"; content: "chevron_left";
} }
.datatable-icon-right:before { .datatable-icon-right:before {
content: "chevron_right"; content: "chevron_right";
} }
.datatable-icon-skip:before { .datatable-icon-skip:before {
content: "skip_next"; content: "skip_next";
} }
.datatable-icon-prev:before { .datatable-icon-prev:before {
content: "skip_previous"; content: "skip_previous";
} }

30
src/@fuse/scss/theme.scss Normal file
View File

@ -0,0 +1,30 @@
@import "src/@fuse/components/countdown/countdown.theme";
@import "src/@fuse/components/material-color-picker/material-color-picker.theme";
@import "src/@fuse/components/search-bar/search-bar.theme";
@import "src/@fuse/components/shortcuts/shortcuts.theme";
@import "src/@fuse/components/sidebar/sidebar.theme";
@import "src/@fuse/components/theme-options/theme-options.theme";
@import "src/@fuse/components/widget/widget.theme";
@mixin fuse-core-theme($theme) {
// Theming for Fuse core styles
@include colors-theme($theme);
@include cards-theme($theme);
@include material-theme($theme);
@include page-layouts-theme($theme);
@include typography-theme($theme);
// Theming for Fuse components
@include fuse-countdown-theme($theme);
@include fuse-search-bar-theme($theme);
@include fuse-shortcuts-theme($theme);
@include fuse-sidebar-theme($theme);
@include fuse-theme-options-theme($theme);
@include fuse-material-color-picker-theme($theme);
@include fuse-widget-theme($theme);
// Theming for 3rd party components
@include ngx-datatable-theme($theme);
}

66
src/@fuse/scss/theming.scss
View File

@ -1,66 +0,0 @@
@import '~@angular/material/theming';
// Custom color maps
$mat-white: (
500: white,
contrast: (
500: $black-87-opacity
)
);
$mat-black: (
500: black,
contrast: (
500: white,
)
);
$mat-fusedark: (
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: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: white,
400: white,
500: $white-87-opacity,
600: $white-87-opacity,
700: $white-87-opacity,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: $white-87-opacity,
A400: $white-87-opacity,
A700: $white-87-opacity,
)
);
// Define the Material palettes
$primary: mat-palette($mat-fusedark);
$accent: mat-palette($mat-light-blue, 600, 400, 700);
$warn: mat-palette($mat-red);
// Create the Material theme object
$theme: mat-light-theme($primary, $accent, $warn);
// Store the background and foreground colors for easier access
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
// Force the input field font sizes to 16px
$typography: mat-typography-config(
$input: mat-typography-level(16px, 1.125, 400)
)

7
src/@fuse/services/match-media.service.ts
View File

@ -1,6 +1,7 @@
import { MediaChange, ObservableMedia } from '@angular/flex-layout'; import { MediaChange, ObservableMedia } from '@angular/flex-layout';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs'; import { BehaviorSubject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -38,7 +39,11 @@ export class FuseMatchMediaService
*/ */
private _init(): void private _init(): void
{ {
this._observableMedia this._observableMedia.asObservable()
.pipe(
debounceTime(500),
distinctUntilChanged()
)
.subscribe((change: MediaChange) => { .subscribe((change: MediaChange) => {
if ( this.activeMediaQuery !== change.mqAlias ) if ( this.activeMediaQuery !== change.mqAlias )
{ {

21
src/@fuse/services/splash-screen.service.ts
View File

@ -3,6 +3,8 @@ import { DOCUMENT } from '@angular/common';
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
import { filter, take } from 'rxjs/operators';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
@ -46,19 +48,16 @@ export class FuseSplashScreenService
if ( this.splashScreenEl ) if ( this.splashScreenEl )
{ {
// Hide it on the first NavigationEnd event // Hide it on the first NavigationEnd event
const hideOnLoad = this._router.events.subscribe((event) => { this._router.events
if ( event instanceof NavigationEnd ) .pipe(
{ filter((event => event instanceof NavigationEnd)),
take(1)
)
.subscribe(() => {
setTimeout(() => { setTimeout(() => {
this.hide(); this.hide();
});
// Unsubscribe from this event so it });
// won't get triggered again
hideOnLoad.unsubscribe();
}, 0);
}
}
);
} }
} }

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

@ -1,21 +1,25 @@
export interface FuseConfig export interface FuseConfig
{ {
colorTheme: string;
layout: { layout: {
style: string, style: string,
width: 'fullwidth' | 'boxed', width: 'fullwidth' | 'boxed',
navbar: { navbar: {
background: string, primaryBackground: string,
secondaryBackground: string,
hidden: boolean, hidden: boolean,
folded: boolean, folded: boolean,
position: 'left' | 'right' | 'top', position: 'left' | 'right' | 'top',
variant: string variant: string
}, },
toolbar: { toolbar: {
customBackgroundColor: boolean,
background: string, background: string,
hidden: boolean, hidden: boolean,
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed' position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
} }
footer: { footer: {
customBackgroundColor: boolean,
background: string, background: string,
hidden: boolean, hidden: boolean,
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed' position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'

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

@ -27,7 +27,7 @@
<!-- / HORIZONTAL LAYOUT 1 --> <!-- / HORIZONTAL LAYOUT 1 -->
<!-- THEME OPTIONS PANEL --> <!-- THEME OPTIONS PANEL -->
<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button" <button mat-icon-button class="warn mat-elevation-z2 theme-options-button"
(click)="toggleSidebarOpen('themeOptionsPanel')"> (click)="toggleSidebarOpen('themeOptionsPanel')">
<mat-icon>settings</mat-icon> <mat-icon>settings</mat-icon>
</button> </button>

42
src/app/app.component.ts
View File

@ -72,6 +72,36 @@ export class AppComponent implements OnInit, OnDestroy
// Use a language // Use a language
this._translateService.use('en'); this._translateService.use('en');
/**
* ------------------------------------------------------------------
* ngxTranslate Fix Start
* ------------------------------------------------------------------
* If you are using a language other than the default one, i.e. Turkish in this case,
* you may encounter an issue where some of the components are not actually being
* translated when your app first initialized.
*
* This is related to ngxTranslate module and below there is a temporary fix while we
* are moving the multi language implementation over to the Angular's core language
* service.
**/
// Set the default language to 'en' and then back to 'tr'.
// '.use' cannot be used here as ngxTranslate won't switch to a language that's already
// been selected and there is no way to force it, so we overcome the issue by switching
// the default language back and forth.
/**
setTimeout(() => {
this._translateService.setDefaultLang('en');
this._translateService.setDefaultLang('tr');
});
*/
/**
* ------------------------------------------------------------------
* ngxTranslate Fix End
* ------------------------------------------------------------------
*/
// Add is-mobile class to the body if the platform is mobile // Add is-mobile class to the body if the platform is mobile
if ( this._platform.ANDROID || this._platform.IOS ) if ( this._platform.ANDROID || this._platform.IOS )
{ {
@ -95,8 +125,10 @@ export class AppComponent implements OnInit, OnDestroy
this._fuseConfigService.config this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => { .subscribe((config) => {
this.fuseConfig = config; this.fuseConfig = config;
// Boxed
if ( this.fuseConfig.layout.width === 'boxed' ) if ( this.fuseConfig.layout.width === 'boxed' )
{ {
this.document.body.classList.add('boxed'); this.document.body.classList.add('boxed');
@ -105,6 +137,16 @@ export class AppComponent implements OnInit, OnDestroy
{ {
this.document.body.classList.remove('boxed'); this.document.body.classList.remove('boxed');
} }
// Color theme
this.document.body.classList.forEach(className => {
if ( className.startsWith('theme-') )
{
this.document.body.classList.remove(className);
}
});
this.document.body.classList.add(this.fuseConfig.colorTheme);
}); });
} }

264
src/app/app.theme.scss Normal file
View File

@ -0,0 +1,264 @@
// -----------------------------------------------------------------------------------------------------
// @ Custom color maps for Fuse
// -----------------------------------------------------------------------------------------------------
$fuse-white: (
500: white,
contrast: (
500: $dark-primary-text
)
);
$fuse-black: (
500: black,
contrast: (
500: $light-primary-text,
)
);
$fuse-navy: (
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: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $light-primary-text,
400: $light-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
)
);
// Generate Fuse color classes for custom palettes
$custom_palettes: (
fuse-white: $fuse-white,
fuse-black: $fuse-black,
fuse-navy: $fuse-navy
);
@include fuse-color-classes($custom_palettes);
// -----------------------------------------------------------------------------------------------------
// @ Typography
// -----------------------------------------------------------------------------------------------------
// Force the input field font sizes to 16px
$typography: mat-typography-config(
$input: mat-typography-level(16px, 1.125, 400)
);
// Setup the typography
@include angular-material-typography($typography);
// -----------------------------------------------------------------------------------------------------
// @ Component theming
// -----------------------------------------------------------------------------------------------------
// Import app and page component themes here to enable theming for them
@import "src/app/layout/components/chat-panel/chat-panel.theme";
@import "src/app/layout/components/toolbar/toolbar.theme";
@import "src/app/main/apps/academy/academy.theme";
@import "src/app/main/apps/calendar/calendar.theme";
@import "src/app/main/apps/chat/chat.theme";
@import "src/app/main/apps/contacts/contacts.theme";
@import "src/app/main/apps/dashboards/project/project.theme";
@import "src/app/main/apps/file-manager/file-manager.theme";
@import "src/app/main/apps/mail/mail.theme";
@import "src/app/main/apps/mail-ngrx/mail.theme";
@import "src/app/main/apps/scrumboard/scrumboard.theme";
@import "src/app/main/apps/todo/todo.theme";
@import "src/app/main/pages/authentication/login/login.theme";
@import "src/app/main/pages/authentication/login-2/login-2.theme";
@import "src/app/main/pages/authentication/register/register.theme";
@import "src/app/main/pages/authentication/register-2/register-2.theme";
@import "src/app/main/pages/authentication/reset-password/reset-password.theme";
@import "src/app/main/pages/authentication/reset-password-2/reset-password-2.theme";
@import "src/app/main/pages/authentication/forgot-password/forgot-password.theme";
@import "src/app/main/pages/authentication/forgot-password-2/forgot-password-2.theme";
@import "src/app/main/pages/authentication/lock/lock.theme";
@import "src/app/main/pages/authentication/mail-confirm/mail-confirm.theme";
@import "src/app/main/pages/coming-soon/coming-soon.theme";
@import "src/app/main/pages/errors/404/error-404.theme";
@import "src/app/main/pages/errors/500/error-500.theme";
@import "src/app/main/pages/maintenance/maintenance.theme";
@import "src/app/main/pages/pricing/style-1/style-1.theme";
@import "src/app/main/pages/pricing/style-2/style-2.theme";
@import "src/app/main/pages/pricing/style-3/style-3.theme";
@import "src/app/main/pages/profile/tabs/about/about.theme";
@import "src/app/main/pages/profile/tabs/photos-videos/photos-videos.theme";
@import "src/app/main/pages/profile/tabs/timeline/timeline.theme";
@import "src/app/main/pages/faq/faq.theme";
@import "src/app/main/pages/knowledge-base/knowledge-base.theme";
@import "src/app/main/documentation/components/cards/cards.theme";
// Define a mixin for easier access
@mixin components-theme($theme) {
// Layout components
@include chat-panel-theme($theme);
@include toolbar-theme($theme);
// Apps
@include academy-theme($theme);
@include calendar-theme($theme);
@include chat-theme($theme);
@include contacts-theme($theme);
@include dashboards-project-theme($theme);
@include file-manager-theme($theme);
@include mail-theme($theme);
@include mail-ngrx-theme($theme);
@include scrumboard-theme($theme);
@include todo-theme($theme);
// Pages
@include login-theme($theme);
@include login-2-theme($theme);
@include register-theme($theme);
@include register-2-theme($theme);
@include reset-password-theme($theme);
@include reset-password-2-theme($theme);
@include forgot-password-theme($theme);
@include forgot-password-2-theme($theme);
@include lock-theme($theme);
@include mail-confirm-theme($theme);
@include coming-soon-theme($theme);
@include error-404-theme($theme);
@include error-500-theme($theme);
@include maintenance-theme($theme);
@include pricing-style-1-theme($theme);
@include pricing-style-2-theme($theme);
@include pricing-style-3-theme($theme);
@include profile-about-theme($theme);
@include profile-photos-videos-theme($theme);
@include profile-timeline-theme($theme);
@include faq-theme($theme);
@include knowledge-base-theme($theme);
// Docs
@include docs-components-cards-theme($theme);
}
// -----------------------------------------------------------------------------------------------------
// @ Define the default theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$default-primary-palette: mat-palette($fuse-navy);
$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
$default-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
// Add ".theme-default" class to the body to activate this theme
body.theme-default {
// Create an Angular Material theme from the $theme map
@include angular-material-theme($theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($theme);
// Apply the theme to the user components
@include components-theme($theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $default-primary-palette,
accent: $default-accent-palette,
warn: $default-warn-palette
);
@include fuse-color-classes($custom-palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define the default dark theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$default-dark-theme-primary-palette: mat-palette($mat-blue, 600, 400, 700);
$default-dark-theme-accent-palette: mat-palette($mat-blue-gray);
$default-dark-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$default-dark-theme: mat-dark-theme($default-dark-theme-primary-palette, $default-dark-theme-accent-palette, $default-dark-theme-warn-palette);
// Add ".theme-default-dark" class to the body to activate this theme
body.theme-default-dark {
// Generate the Angular Material theme
@include angular-material-theme($default-dark-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($default-dark-theme);
// Apply the theme to the user components
@include components-theme($default-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $default-dark-theme-primary-palette,
accent: $default-dark-theme-accent-palette,
warn: $default-dark-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define the yellow light theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$yellow-light-theme-primary-palette: mat-palette($fuse-navy, 600, 400, 700);
$yellow-light-theme-accent-palette: mat-palette($mat-yellow, 600, 400, 700);
$yellow-light-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$yellow-light-theme: mat-light-theme($yellow-light-theme-primary-palette, $yellow-light-theme-accent-palette, $yellow-light-theme-warn-palette);
// Add ".theme-yellow-light" class to the body to activate this theme
body.theme-yellow-light {
// Generate the Angular Material theme
@include angular-material-theme($yellow-light-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($yellow-light-theme);
// Apply the theme to the user components
@include components-theme($yellow-light-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $yellow-light-theme-primary-palette,
accent: $yellow-light-theme-accent-palette,
warn: $yellow-light-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
}

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

@ -3,29 +3,34 @@ import { FuseConfig } from '@fuse/types';
/** /**
* Default Fuse Configuration * Default Fuse Configuration
* *
* You can edit these options to change the default options. All these options also can be changed per component * You can edit these options to change the default options. All these options also can be
* basis. See `app/main/pages/authentication/login/login.component.ts` constructor method to learn more * changed per component basis. See `app/main/pages/authentication/login/login.component.ts`
* about changing these options per component basis. * constructor method to learn more about changing these options per component basis.
*/ */
export const fuseConfig: FuseConfig = { export const fuseConfig: FuseConfig = {
// Color themes can be defined in src/app/app.theme.scss
colorTheme : 'theme-default',
layout : { layout : {
style : 'vertical-layout-1', style : 'vertical-layout-1',
width : 'fullwidth', width : 'fullwidth',
navbar : { navbar : {
background: 'mat-fuse-dark-700-bg', primaryBackground : 'fuse-navy-700',
secondaryBackground: 'fuse-navy-900',
folded : false, folded : false,
hidden : false, hidden : false,
position : 'left', position : 'left',
variant : 'vertical-style-1' variant : 'vertical-style-1'
}, },
toolbar : { toolbar : {
background: 'mat-white-500-bg', customBackgroundColor: false,
background : 'fuse-white-500',
hidden : false, hidden : false,
position : 'below-static' position : 'below-static'
}, },
footer : { footer : {
background: 'mat-fuse-dark-900-bg', customBackgroundColor: true,
background : 'fuse-navy-900',
hidden : false, hidden : false,
position : 'below-fixed' position : 'below-fixed'
}, },

82
src/app/layout/components/chat-panel/chat-panel.theme.scss Normal file
View File

@ -0,0 +1,82 @@
@mixin chat-panel-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$is-dark: map-get($theme, is-dark);
chat-panel {
#contacts-list {
background-color: map-get($background, app-bar);
.contacts-list-item {
&.active {
background: map-get($background, hover);
&:after {
background-color: map-get($accent, default);
}
}
.unread-count {
background-color: map-get($accent, default);
color: map-get($accent, default-contrast);
}
.status-icon {
border-color: map-get($background, app-bar);
}
}
}
#chat {
.messages {
.message-row {
&.contact {
.bubble {
background-color: map-get($primary, default);
color: map-get($primary, default-contrast);
}
}
&.me {
.bubble {
color: rgba(0, 0, 0, 0.87);
background-color: #E0E0E0;
}
}
}
}
.reply-form {
.message-text {
background-color: map-get($background, app-bar);
border-color: map-get($foreground, divider);
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-infix {
@if ($is-dark == true) {
background-color: map-get($background, hover);
} @else {
background-color: white;
}
}
}
}
}
}
}
}
}

2
src/app/layout/components/footer/footer.component.html
View File

@ -3,7 +3,7 @@
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex> <div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
<a href="https://1.envato.market/c/1257954/275988/4415?u=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffuse-angularjs-material-design-admin-template%2F12931855" <a href="https://1.envato.market/c/1257954/275988/4415?u=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffuse-angularjs-material-design-admin-template%2F12931855"
target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row" target="_blank" mat-button class="pink" fxFlex="0 0 auto" fxLayout="row"
fxLayoutAlign="start center"> fxLayoutAlign="start center">
<mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon> <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
<span>Purchase FUSE (Angular 6+)</span> <span>Purchase FUSE (Angular 6+)</span>

4
src/app/layout/components/navbar/horizontal/style-1/style-1.component.html
View File

@ -1 +1,3 @@
<fuse-navigation layout="horizontal"></fuse-navigation> <div [ngClass]="fuseConfig.layout.navbar.primaryBackground">
<fuse-navigation layout="horizontal"></fuse-navigation>
</div>

11
src/app/layout/components/navbar/horizontal/style-1/style-1.component.ts
View File

@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators'; import { filter, takeUntil } from 'rxjs/operators';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@ -13,6 +14,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
}) })
export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
{ {
fuseConfig: any;
navigation: any; navigation: any;
// Private // Private
@ -21,10 +23,12 @@ export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
/** /**
* Constructor * Constructor
* *
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService * @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSidebarService} _fuseSidebarService * @param {FuseSidebarService} _fuseSidebarService
*/ */
constructor( constructor(
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService,
private _fuseSidebarService: FuseSidebarService private _fuseSidebarService: FuseSidebarService
) )
@ -51,6 +55,13 @@ export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
.subscribe(() => { .subscribe(() => {
this.navigation = this._fuseNavigationService.getCurrentNavigation(); this.navigation = this._fuseNavigationService.getCurrentNavigation();
}); });
// Subscribe to the config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
});
} }
/** /**

8
src/app/layout/components/navbar/vertical/style-1/style-1.component.html
View File

@ -1,4 +1,4 @@
<div class="navbar-top mat-indigo-700-bg"> <div class="navbar-top" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
<div class="logo"> <div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg"> <img class="logo-icon" src="assets/images/logos/fuse.svg">
@ -24,17 +24,17 @@
<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}"> <div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<div class="user mat-indigo-700-bg" fxLayout="column"> <div class="user" fxLayout="column" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
<div class="h3 username">Charlie Adams</div> <div class="h3 username">Charlie Adams</div>
<div class="h5 email hint-text mt-8">adams.charlie@mail.com</div> <div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
<div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background"> <div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.primaryBackground">
<img class="avatar" src="assets/images/avatars/Velazquez.jpg"> <img class="avatar" src="assets/images/avatars/Velazquez.jpg">
</div> </div>
</div> </div>
<div class="navbar-content"> <div class="navbar-content" [ngClass]="fuseConfig.layout.navbar.primaryBackground">
<fuse-navigation layout="vertical"></fuse-navigation> <fuse-navigation layout="vertical"></fuse-navigation>
</div> </div>

13
src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
View File

@ -36,6 +36,9 @@ fuse-sidebar {
.user { .user {
padding: 12px 0; padding: 12px 0;
height: 64px;
min-height: 64px;
max-height: 64px;
.avatar-container { .avatar-container {
position: relative; position: relative;
@ -57,7 +60,7 @@ fuse-sidebar {
} }
.navbar-content { .navbar-content {
margin-top: 0; padding-top: 0;
} }
} }
} }
@ -134,6 +137,9 @@ navbar {
} }
.navbar-scroll-container { .navbar-scroll-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -150,6 +156,9 @@ navbar {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
height: 136px;
min-height: 136px;
max-height: 136px;
padding: 24px 0 64px 0; padding: 24px 0 64px 0;
.avatar-container { .avatar-container {
@ -170,7 +179,7 @@ navbar {
.navbar-content { .navbar-content {
flex: 1 1 auto; flex: 1 1 auto;
margin-top: 32px; padding-top: 32px;
} }
} }
} }

6
src/app/layout/components/navbar/vertical/style-2/style-2.component.html
View File

@ -1,4 +1,4 @@
<div class="navbar-header"> <div class="navbar-header" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
<div class="logo"> <div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg"> <img class="logo-icon" src="assets/images/logos/fuse.svg">
@ -17,7 +17,7 @@
</div> </div>
<div class="navbar-content" fusePerfectScrollbar <div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}"
[fusePerfectScrollbarOptions]="{suppressScrollX: true}"> [ngClass]="fuseConfig.layout.navbar.primaryBackground">
<fuse-navigation layout="vertical"></fuse-navigation> <fuse-navigation layout="vertical"></fuse-navigation>
</div> </div>

1
src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
View File

@ -62,7 +62,6 @@ navbar {
min-height: 64px; min-height: 64px;
padding: 0 16px 0 24px; padding: 0 16px 0 24px;
transition: padding 200ms ease; transition: padding 200ms ease;
background-color: rgba(255, 255, 255, .05);
@include mat-elevation(1); @include mat-elevation(1);
.logo { .logo {

11
src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
View File

@ -3,6 +3,7 @@ import { NavigationEnd, Router } from '@angular/router';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { filter, take, takeUntil } from 'rxjs/operators'; import { filter, take, takeUntil } from 'rxjs/operators';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@ -15,6 +16,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
}) })
export class NavbarVerticalStyle2Component implements OnInit, OnDestroy export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
{ {
fuseConfig: any;
fusePerfectScrollbarUpdateTimeout: any; fusePerfectScrollbarUpdateTimeout: any;
navigation: any; navigation: any;
@ -25,11 +27,13 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
/** /**
* Constructor * Constructor
* *
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService * @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSidebarService} _fuseSidebarService * @param {FuseSidebarService} _fuseSidebarService
* @param {Router} _router * @param {Router} _router
*/ */
constructor( constructor(
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService,
private _fuseSidebarService: FuseSidebarService, private _fuseSidebarService: FuseSidebarService,
private _router: Router private _router: Router
@ -117,6 +121,13 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
.subscribe(() => { .subscribe(() => {
this.navigation = this._fuseNavigationService.getCurrentNavigation(); this.navigation = this._fuseNavigationService.getCurrentNavigation();
}); });
// Subscribe to the config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
});
} }
/** /**

26
src/app/layout/components/quick-panel/quick-panel.component.html
View File

@ -1,4 +1,6 @@
<mat-list class="date" cdkFocusRegionStart> <div fxLayout="column" fxFlex fusePerfectScrollbar>
<mat-list class="date" cdkFocusRegionStart>
<h3 matSubheader cdkFocusInit> <h3 matSubheader cdkFocusInit>
<span>Today</span> <span>Today</span>
@ -14,11 +16,11 @@
<span> {{date | date:'MMMM'}}</span> <span> {{date | date:'MMMM'}}</span>
</div> </div>
</div> </div>
</mat-list> </mat-list>
<mat-divider cdkFocusRegionEnd></mat-divider> <mat-divider cdkFocusRegionEnd></mat-divider>
<mat-list> <mat-list>
<h3 matSubheader> <h3 matSubheader>
<span>Events</span> <span>Events</span>
</h3> </h3>
@ -27,11 +29,11 @@
<h3 matLine>{{event.title}}</h3> <h3 matLine>{{event.title}}</h3>
<p matLine class="secondary-text">{{event.detail}}</p> <p matLine class="secondary-text">{{event.detail}}</p>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-list> <mat-list>
<h3 matSubheader> <h3 matSubheader>
<span>Notes</span> <span>Notes</span>
</h3> </h3>
@ -40,11 +42,11 @@
<h3 matLine>{{note.title}}</h3> <h3 matLine>{{note.title}}</h3>
<p matLine class="secondary-text">{{note.detail}}</p> <p matLine class="secondary-text">{{note.detail}}</p>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-list> <mat-list>
<h3 matSubheader> <h3 matSubheader>
<span>Quick Settings</span> <span>Quick Settings</span>
</h3> </h3>
@ -69,4 +71,6 @@
<h3>Retro Thrusters</h3> <h3>Retro Thrusters</h3>
</mat-slide-toggle> </mat-slide-toggle>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</div>

3
src/app/layout/components/quick-panel/quick-panel.component.scss
View File

@ -1,10 +1,11 @@
quick-panel { quick-panel {
display: flex; display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 280px; width: 280px;
min-width: 280px; min-width: 280px;
max-width: 280px; max-width: 280px;
z-index: 99; z-index: 99;
flex-direction: column;
.mat-slide-toggle-content { .mat-slide-toggle-content {
flex: 1; flex: 1;

4
src/app/layout/components/toolbar/toolbar.component.html
View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<div class="px-8 px-mat-16"> <div class="px-8 px-md-16">
<fuse-shortcuts [navigation]="navigation"></fuse-shortcuts> <fuse-shortcuts [navigation]="navigation"></fuse-shortcuts>
</div> </div>
@ -85,7 +85,7 @@
class="quick-panel-toggle-button" class="quick-panel-toggle-button"
(click)="toggleSidebarOpen('quickPanel')" (click)="toggleSidebarOpen('quickPanel')"
aria-label="Toggle quick panel"> aria-label="Toggle quick panel">
<mat-icon class="icon">format_list_bulleted</mat-icon> <mat-icon class="secondary-text">format_list_bulleted</mat-icon>
</button> </button>
<div class="toolbar-separator" *ngIf="!hiddenNavbar && rightNavbar" fxHide fxShow.gt-xs></div> <div class="toolbar-separator" *ngIf="!hiddenNavbar && rightNavbar" fxHide fxShow.gt-xs></div>

3
src/app/layout/components/toolbar/toolbar.component.scss
View File

@ -1,6 +1,6 @@
@import "src/@fuse/scss/fuse"; @import "src/@fuse/scss/fuse";
:host { toolbar {
position: relative; position: relative;
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
@ -46,7 +46,6 @@
.toolbar-separator { .toolbar-separator {
height: 64px; height: 64px;
width: 1px; width: 1px;
background: rgba(0, 0, 0, .12);
@include media-breakpoint-down('xs') { @include media-breakpoint-down('xs') {
height: 56px; height: 56px;

7
src/app/layout/components/toolbar/toolbar.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
@ -11,8 +11,9 @@ import { navigation } from 'app/navigation/navigation';
@Component({ @Component({
selector : 'toolbar', selector : 'toolbar',
templateUrl: './toolbar.component.html', templateUrl : './toolbar.component.html',
styleUrls : ['./toolbar.component.scss'] styleUrls : ['./toolbar.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class ToolbarComponent implements OnInit, OnDestroy export class ToolbarComponent implements OnInit, OnDestroy

8
src/app/layout/components/toolbar/toolbar.theme.scss Normal file
View File

@ -0,0 +1,8 @@
@mixin toolbar-theme($theme) {
$foreground: map-get($theme, foreground);
.toolbar-separator {
background: map-get($foreground, divider);
}
}

12
src/app/layout/horizontal/layout-1/layout-1.component.html
View File

@ -84,22 +84,23 @@
<!-- TOOLBAR --> <!-- TOOLBAR -->
<ng-template #toolbar> <ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden" <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar> [ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
</toolbar>
</ng-template> </ng-template>
<!-- / TOOLBAR --> <!-- / TOOLBAR -->
<!-- FOOTER --> <!-- FOOTER -->
<ng-template #footer> <ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden" <footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer> [ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
</footer>
</ng-template> </ng-template>
<!-- / FOOTER --> <!-- / FOOTER -->
<!-- TOP NAVBAR --> <!-- TOP NAVBAR -->
<ng-template #topNavbar> <ng-template #topNavbar>
<navbar variant="horizontal-style-1" <navbar variant="horizontal-style-1"
class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background" class="top-navbar" fxHide fxShow.gt-md
fxHide fxShow.gt-md
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
</navbar> </navbar>
</ng-template> </ng-template>
@ -110,8 +111,7 @@
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar" <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant" <navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
</fuse-sidebar> </fuse-sidebar>
</ng-template> </ng-template>
<!-- / LEFT NAVBAR --> <!-- / LEFT NAVBAR -->

1
src/app/layout/horizontal/layout-1/layout-1.component.scss
View File

@ -39,7 +39,6 @@ horizontal-layout-1 {
display: flex; display: flex;
flex: 1 1 0%; flex: 1 1 0%;
flex-direction: column; flex-direction: column;
transform: translateZ(0);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

12
src/app/layout/vertical/layout-1/layout-1.component.html
View File

@ -96,14 +96,16 @@
<!-- TOOLBAR --> <!-- TOOLBAR -->
<ng-template #toolbar> <ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden" <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar> [ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
</toolbar>
</ng-template> </ng-template>
<!-- / TOOLBAR --> <!-- / TOOLBAR -->
<!-- FOOTER --> <!-- FOOTER -->
<ng-template #footer> <ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden" <footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer> [ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
</footer>
</ng-template> </ng-template>
<!-- / FOOTER --> <!-- / FOOTER -->
@ -113,8 +115,7 @@
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant" <navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
</fuse-sidebar> </fuse-sidebar>
</ng-template> </ng-template>
<!-- / LEFT NAVBAR --> <!-- / LEFT NAVBAR -->
@ -125,8 +126,7 @@
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant" <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
</fuse-sidebar> </fuse-sidebar>
</ng-template> </ng-template>
<!-- / RIGHT NAVBAR --> <!-- / RIGHT NAVBAR -->

1
src/app/layout/vertical/layout-1/layout-1.component.scss
View File

@ -39,7 +39,6 @@ vertical-layout-1 {
display: flex; display: flex;
flex: 1 1 0%; flex: 1 1 0%;
flex-direction: column; flex-direction: column;
transform: translateZ(0);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

12
src/app/layout/vertical/layout-2/layout-2.component.html
View File

@ -96,14 +96,16 @@
<!-- TOOLBAR --> <!-- TOOLBAR -->
<ng-template #toolbar> <ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden" <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar> [ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
</toolbar>
</ng-template> </ng-template>
<!-- / TOOLBAR --> <!-- / TOOLBAR -->
<!-- FOOTER --> <!-- FOOTER -->
<ng-template #footer> <ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden" <footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer> [ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
</footer>
</ng-template> </ng-template>
<!-- / FOOTER --> <!-- / FOOTER -->
@ -113,8 +115,7 @@
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant" <navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
</fuse-sidebar> </fuse-sidebar>
</ng-template> </ng-template>
<!-- / LEFT NAVBAR --> <!-- / LEFT NAVBAR -->
@ -125,8 +126,7 @@
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant" <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
</fuse-sidebar> </fuse-sidebar>
</ng-template> </ng-template>
<!-- / RIGHT NAVBAR --> <!-- / RIGHT NAVBAR -->

1
src/app/layout/vertical/layout-2/layout-2.component.scss
View File

@ -26,7 +26,6 @@ vertical-layout-2 {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
transform: translateZ(0);
// Container 2 // Container 2
> .container { > .container {

12
src/app/layout/vertical/layout-3/layout-3.component.html
View File

@ -82,14 +82,16 @@
<!-- TOOLBAR --> <!-- TOOLBAR -->
<ng-template #toolbar> <ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden" <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar> [ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
</toolbar>
</ng-template> </ng-template>
<!-- / TOOLBAR --> <!-- / TOOLBAR -->
<!-- FOOTER --> <!-- FOOTER -->
<ng-template #footer> <ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden" <footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer> [ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
</footer>
</ng-template> </ng-template>
<!-- / FOOTER --> <!-- / FOOTER -->
@ -99,8 +101,7 @@
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant" <navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
</fuse-sidebar> </fuse-sidebar>
</ng-template> </ng-template>
<!-- / LEFT NAVBAR --> <!-- / LEFT NAVBAR -->
@ -111,8 +112,7 @@
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant" <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
</fuse-sidebar> </fuse-sidebar>
</ng-template> </ng-template>
<!-- / RIGHT NAVBAR --> <!-- / RIGHT NAVBAR -->

1
src/app/layout/vertical/layout-3/layout-3.component.scss
View File

@ -26,7 +26,6 @@ vertical-layout-3 {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
transform: translateZ(0);
// Container 2 // Container 2
> .container { > .container {

BIN
src/assets/images/beach.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 633 KiB

2
src/index.html
View File

@ -26,7 +26,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #3C4252; background-color: #2D323D;
z-index: 99999; z-index: 99999;
pointer-events: none; pointer-events: none;
} }

23
src/styles.scss
View File

@ -1,24 +1,5 @@
// Import Fuse core library // Import Fuse core library
@import "@fuse/scss/core"; @import "@fuse/scss/core";
// ----------------------------------------------------------------------------------------------------- // Import app.theme.scss
// @ Multiple material themes example @import "app/app.theme";
// -----------------------------------------------------------------------------------------------------
// Define the Material palettes
$yellow-theme-primary: mat-palette($mat-fusedark);
$yellow-theme-accent: mat-palette($mat-yellow, 600, 400, 700);
$yellow-theme-warn: mat-palette($mat-red);
// Create the Material theme object
$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent, $yellow-theme-warn);
// Add ".yellow-theme" class to the body to activate this theme
.yellow-theme {
// Generate the Angular Material theme
@include angular-material-theme($yellow-theme);
// Generate the fuse color classes with the new colors...
@include generateFuseColorClasses($yellow-theme-primary, $yellow-theme-accent, $yellow-theme-warn);
}