purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 12:05: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": [
"src/styles.scss"
],
"scripts": []
"scripts": [],
"showCircularDependencies": false
},
"configurations": {
"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",
"version": "6.2.4",
"version": "6.3.0",
"license": "https://themeforest.net/licenses/terms/regular",
"scripts": {
"ng": "ng",
@ -19,57 +19,58 @@
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.3",
"@angular/animations": "6.0.9",
"@angular/cdk": "6.3.3",
"@angular/common": "6.0.9",
"@angular/compiler": "6.0.9",
"@angular/core": "6.0.9",
"@angular/animations": "6.1.4",
"@angular/cdk": "6.4.6",
"@angular/common": "6.1.4",
"@angular/compiler": "6.1.4",
"@angular/core": "6.1.4",
"@angular/flex-layout": "6.0.0-beta.16",
"@angular/forms": "6.0.9",
"@angular/http": "6.0.9",
"@angular/material": "6.3.3",
"@angular/material-moment-adapter": "6.3.3",
"@angular/platform-browser": "6.0.9",
"@angular/platform-browser-dynamic": "6.0.9",
"@angular/router": "6.0.9",
"@ngrx/effects": "6.0.1",
"@ngrx/router-store": "6.0.1",
"@ngrx/store": "6.0.1",
"@ngrx/store-devtools": "6.0.1",
"@angular/forms": "6.1.4",
"@angular/http": "6.1.4",
"@angular/material": "6.4.6",
"@angular/material-moment-adapter": "6.4.6",
"@angular/platform-browser": "6.1.4",
"@angular/platform-browser-dynamic": "6.1.4",
"@angular/router": "6.1.4",
"@ngrx/effects": "6.1.0",
"@ngrx/router-store": "6.1.0",
"@ngrx/store": "6.1.0",
"@ngrx/store-devtools": "6.1.0",
"@ngx-translate/core": "10.0.2",
"@swimlane/ngx-charts": "8.1.0",
"@swimlane/ngx-datatable": "13.0.1",
"@swimlane/ngx-dnd": "4.0.0",
"@swimlane/dragula": "3.7.3",
"@swimlane/ngx-charts": "9.0.0",
"@swimlane/ngx-datatable": "13.1.0",
"@swimlane/ngx-dnd": "5.0.6",
"@types/prismjs": "1.9.0",
"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",
"classlist.js": "1.1.20150312",
"core-js": "2.5.7",
"d3": "5.5.0",
"d3": "5.7.0",
"hammerjs": "2.0.8",
"lodash": "4.17.10",
"moment": "2.22.2",
"ng2-charts": "1.6.0",
"ngrx-store-freeze": "0.2.4",
"ngx-color-picker": "6.5.0",
"ngx-color-picker": "6.6.0",
"ngx-cookie-service": "1.0.10",
"perfect-scrollbar": "1.4.0",
"prismjs": "1.15.0",
"rxjs": "6.2.1",
"rxjs-compat": "6.2.1",
"rxjs": "6.2.2",
"rxjs-compat": "6.2.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular/cli": "6.0.8",
"@angular/compiler-cli": "6.0.9",
"@angular/language-service": "6.0.9",
"@angular-devkit/build-angular": "0.6.8",
"@angular/cli": "6.1.5",
"@angular/compiler-cli": "6.1.4",
"@angular/language-service": "6.1.4",
"@angular-devkit/build-angular": "0.7.5",
"@angularclass/hmr": "2.1.3",
"@types/jasmine": "2.8.8",
"@types/jasminewd2": "2.0.3",
"@types/lodash": "4.14.111",
"@types/lodash": "4.14.116",
"@types/node": "8.9.5",
"codelyzer": "4.2.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;
flex-direction: row;
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 { map, takeUntil } from 'rxjs/operators';
import * as moment from 'moment';
@ -6,7 +6,8 @@ import * as moment from 'moment';
@Component({
selector : 'fuse-countdown',
templateUrl: './countdown.component.html',
styleUrls : ['./countdown.component.scss']
styleUrls : ['./countdown.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseCountdownComponent implements OnInit, OnDestroy
{
@ -48,9 +49,13 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
const currDate = moment();
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');
// 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
const countDown = interval(1000)
.pipe(
@ -58,14 +63,7 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
return diff = diff - 1;
}),
map(value => {
const timeLeft = moment.duration(value, 'seconds');
return {
days : timeLeft.asDays().toFixed(0),
hours : timeLeft.hours(),
minutes: timeLeft.minutes(),
seconds: timeLeft.seconds()
};
return this._secondsToRemaining(value);
})
);
@ -86,4 +84,27 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
this._unsubscribeAll.next();
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 -->
<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>Early Sunrise</h1>
<h4 class="secondary-text">Demo Content</h4>
<h1 class="m-0">Early Sunrise in Winter</h1>
<h4 class="mt-0 secondary-text">Demo Content</h4>
<p>
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.
</p>
<blockquote>
<blockquote class="my-24">
<p>
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
@ -24,16 +22,12 @@
</blockquote>
<p>
Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi. Nam imperdiet est
nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et gravida. In hac
habitasse platea dictumst.
</p>
<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.
Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur
<b>adipiscing elit</b>. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi.
Nam imperdiet est nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et
gravida. In hac habitasse platea dictumst. 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>
@ -43,6 +37,12 @@
velit.
</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>
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
@ -52,10 +52,18 @@
<p>
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
sagittis augue. Sed venenatis rhoncus enim eget ornare. Donec viverra sed felis at venenatis. Mauris aliquam
fringilla nulla, sit amet congue felis dignissim at.
sagittis augue. Sed venenatis rhoncus enim eget ornare. <a href="#">Donec viverra sed felis at venenatis.</a>
Mauris aliquam fringilla nulla, sit amet congue felis dignissim at.
</p>
<ul>
<li>Orci varius</li>
<li>Magnis dis</li>
<li>Conubia nostra</li>
<li>Semper urna</li>
<li>Donec viverra</li>
</ul>
<p>
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
@ -69,7 +77,7 @@
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
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>
</div>
<!-- / DEMO CONTENT -->

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

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

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

@ -1,20 +1,20 @@
<button mat-icon-button
type="button"
class="mat-elevation-z1"
[matMenuTriggerFor]="colorMenu"
(menuOpened)="onMenuOpen()"
[ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
[ngClass]="selectedPalette + '-' + selectedHue">
<mat-icon>palette</mat-icon>
</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">
<button mat-icon-button
[style.visibility]="view==='hues'?'visible':'hidden'"
(click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
class="secondary-text"
[style.visibility]="view === 'hues' ? 'visible' : 'hidden'"
(click)="goToPalettesView($event)" aria-label="Palette">
<mat-icon class="s-20">arrow_back</mat-icon>
</button>
@ -23,45 +23,40 @@
</span>
<span *ngIf="!selectedColor?.palette">
Select Color
Select a Color
</span>
<button mat-icon-button
class="remove-color-button"
(click)="$event.stopPropagation();removeColor()"
aria-label="Remove Color">
class="remove-color-button secondary-text"
(click)="removeColor($event)"
aria-label="Remove color"
matTooltip="Remove color">
<mat-icon class="s-20">delete</mat-icon>
</button>
</header>
<div [ngSwitch]="view" class="views">
<div class="view" *ngSwitchCase="'palettes'">
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
<div class="color"
[ngClass]="'mat-'+color.key+'-bg'"
<div class="color" fxLayout="row" fxLayoutAlign="center center"
*ngFor="let color of (colors | keys)"
(click)="$event.stopPropagation();selectPalette(color.key)"
fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
<span class="label">
{{color.key}}
</span>
[ngClass]="color.key"
[class.selected]="selectedPalette === color.key"
(click)="selectPalette($event, color.key)">
</div>
</div>
</div>
<div class="view" *ngSwitchCase="'hues'" >
<div class="view" *ngSwitchCase="'hues'">
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
<div class="color" *ngFor="let hue of hues"
[fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
[ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
(click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
<span class="label">
{{hue}}
</span>
<mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
<div class="color" fxLayout="row" fxLayoutAlign="center center"
*ngFor="let hue of hues"
[fxHide]="selectedPalette === 'fuse-white' && hue !== '500' || selectedPalette === 'fuse-black' && hue !== '500'"
[ngClass]="selectedPalette + '-' + hue"
[class.selected]="selectedHue === hue"
(click)="selectHue($event, hue)">
</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 {
width: 208px;
width: 245px;
.mat-menu-content {
padding: 0;
@ -7,44 +7,29 @@
.views {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
min-height: 258px;
height: 308px;
background-color: #F7F7F7;
min-height: 165px;
.view {
position: absolute;
width: 208px;
height: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
overflow: hidden;
.colors {
position: relative;
padding: 4px;
padding: 1px 0 0 0;
margin-left: -1px;
.color {
position: relative;
width: 46px;
height: 46px;
margin: 2px;
width: 40px;
height: 40px;
margin: 0 0 1px 1px;
border-radius: 0;
cursor: pointer;
transition: border-radius .4s cubic-bezier(.25, .8, .25, 1);
.label {
padding: 2px;
font-size: 10px;
&:hover {
border-radius: 20%;
}
mat-icon {
position: absolute;
top: 2px;
right: 2px;
font-size: 16px;
opacity: 0.7;
&.selected {
border-radius: 50% !important;
}
}
}

305
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 { 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({
selector : 'fuse-material-color-picker',
templateUrl : './material-color-picker.component.html',
styleUrls : ['./material-color-picker.component.scss'],
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;
hues: string[];
selectedColor: any;
view: string;
@Input()
selectedColor: any;
selectedPalette: string;
@Input()
selectedHue: string;
@Input()
selectedFg: string;
@Input()
value: any;
// Color changed
@Output()
onValueChange: EventEmitter<any>;
@Output()
selectedPaletteChange: EventEmitter<any>;
@Output()
selectedHueChange: EventEmitter<any>;
@Output()
selectedClassChange: EventEmitter<any>;
@Output()
selectedBgChange: EventEmitter<any>;
@Output()
selectedFgChange: EventEmitter<any>;
colorChanged: EventEmitter<any>;
// Private
_selectedClass: string;
_selectedBg: string;
private _color: string;
private _modelChange: (value: any) => void;
private _modelTouched: (value: any) => void;
/**
* Constructor
@ -57,23 +42,18 @@ export class FuseMaterialColorPickerComponent implements OnChanges
constructor()
{
// Set the defaults
this.colorChanged = new EventEmitter();
this.colors = MatColors.all;
this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
this.selectedFg = '';
this.selectedHue = '';
this.selectedPalette = '';
this.selectedHue = '500';
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
this._selectedClass = '';
this._selectedBg = '';
this._color = '';
this._modelChange = () => {
};
this._modelTouched = () => {
};
}
// -----------------------------------------------------------------------------------------------------
@ -86,88 +66,76 @@ export class FuseMaterialColorPickerComponent implements OnChanges
* @param value
*/
@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;
}
if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
// Split the color value (red-400, blue-500, fuse-navy-700 etc.)
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 )
{
this.updateSelectedColor();
return;
}
// Set the color
this.color = color;
// Update the selected color
this.updateSelectedColor();
}
// -----------------------------------------------------------------------------------------------------
@ -177,35 +145,61 @@ export class FuseMaterialColorPickerComponent implements OnChanges
/**
* Select palette
*
* @param event
* @param palette
*/
selectPalette(palette): void
selectPalette(event, palette): void
{
this.selectedPalette = palette;
this.updateSelectedColor();
// Stop propagation
event.stopPropagation();
// Go to 'hues' view
this.view = 'hues';
// Update the selected palette
this.selectedPalette = palette;
// Update the selected color
this.updateSelectedColor();
}
/**
* Select hue
*
* @param event
* @param hue
*/
selectHue(hue): void
selectHue(event, hue): void
{
// Stop propagation
event.stopPropagation();
// Update the selected huse
this.selectedHue = hue;
// Update the selected color
this.updateSelectedColor();
}
/**
* 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.selectedHue = '';
// Update the selected color
this.updateSelectedColor();
this.view = 'palettes';
}
/**
@ -213,49 +207,40 @@ export class FuseMaterialColorPickerComponent implements OnChanges
*/
updateSelectedColor(): void
{
setTimeout(() => {
if ( this.selectedColor && this.selectedColor.palette === this.selectedPalette && this.selectedColor.hue === this.selectedHue )
{
return;
}
if ( this.selectedColor && this.selectedPalette === this.selectedColor.palette && this.selectedHue === this.selectedColor.hue )
{
return;
}
// Set the selected color object
this.selectedColor = {
palette: this.selectedPalette,
hue : this.selectedHue,
class : this.selectedPalette + '-' + this.selectedHue,
bg : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette)[this.selectedHue],
fg : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]
};
if ( this.selectedPalette !== '' && this.selectedHue !== '' )
{
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 = '';
}
// Emit the color changed event
this.colorChanged.emit(this.selectedColor);
this.selectedColor = {
palette: this.selectedPalette,
hue : this.selectedHue,
class : this.selectedClass,
bg : this.selectedBg,
fg : this.selectedFg
};
// Mark the model as touched
this._modelTouched(this.selectedColor.class);
this.selectedPaletteChange.emit(this.selectedPalette);
this.selectedHueChange.emit(this.selectedHue);
this.selectedClassChange.emit(this.selectedClass);
this.selectedBgChange.emit(this.selectedBg);
this.selectedFgChange.emit(this.selectedFg);
this.value = this.selectedColor;
this.onValueChange.emit(this.selectedColor);
});
// 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';
}

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

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
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';
@ -19,7 +19,7 @@ import { FuseMaterialColorPickerComponent } from '@fuse/components/material-colo
MatButtonModule,
MatIconModule,
MatMenuModule,
MatRippleModule,
MatTooltipModule,
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">
<!-- 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>
</a>
<!-- item.url -->
<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}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<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>
</a>
<!-- 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>
</span>
<!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && 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>
</a>
@ -52,7 +52,7 @@
<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">
<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 -->
<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}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<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>
</a>
<!-- 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>
</span>
<!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && 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>
</a>

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

@ -6,7 +6,8 @@
<ng-container *ngFor="let item of navigation">
<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>
</ng-container>
@ -20,7 +21,7 @@
<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=='collapse'"
<fuse-nav-horizontal-collapsable *ngIf="item.type=='collapsable'"
[item]="item"></fuse-nav-horizontal-collapsable>
<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">
<!-- normal collapse -->
<!-- normal collapsable -->
<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>
</a>
<!-- item.url -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
(click)="toggleOpen($event)"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
(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>
</a>
<!-- 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>
</span>
<!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && 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>
</a>

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

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

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

@ -1,5 +1,5 @@
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 { filter } from 'rxjs/operators';
@ -103,7 +103,7 @@ export class FuseProgressBarService
});
this._router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.pipe(filter((event) => event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel))
.subscribe(() => {
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-content" [ngClass]="fuseConfig.layout.toolbar.background">
<div class="fuse-search-bar-content">
<label for="fuse-search-bar-input">
<button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
*ngIf="collapsed">
<mat-icon class="s-24 secondary-text">search</mat-icon>
</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>
<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;
flex: 1 0 auto;
min-height: 64px;
background-color: transparent;
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;
flex: 1;
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;
z-index: 1000;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
background: white;
@include media-breakpoint-down('xs') {
min-width: 0 !important;
@ -62,10 +61,5 @@ fuse-sidebar {
left: 0;
right: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
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
const isActive = this._observableMedia.isActive(this.lockedOpen);
// If the both status are the same, don't act
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">
<!-- 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 -->
<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-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"
[(selectedClass)]="fuseConfig.layout.navbar.background">
</fuse-material-color-picker>
formControlName="primaryBackground"></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>
@ -102,10 +118,13 @@
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
</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"
[(selectedClass)]="fuseConfig.layout.toolbar.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -125,10 +144,13 @@
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
</mat-radio-group>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Color:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.footer.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -190,10 +212,13 @@
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
</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"
[(selectedClass)]="fuseConfig.layout.navbar.background">
</fuse-material-color-picker>
formControlName="primaryBackground"></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>
@ -213,10 +238,13 @@
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</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"
[(selectedClass)]="fuseConfig.layout.toolbar.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -236,10 +264,13 @@
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</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"
[(selectedClass)]="fuseConfig.layout.footer.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -301,10 +332,13 @@
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
</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"
[(selectedClass)]="fuseConfig.layout.navbar.background">
</fuse-material-color-picker>
formControlName="primaryBackground"></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>
@ -323,10 +357,13 @@
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
</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"
[(selectedClass)]="fuseConfig.layout.toolbar.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -345,10 +382,13 @@
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
</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"
[(selectedClass)]="fuseConfig.layout.footer.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -405,9 +445,14 @@
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
</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"
[(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>
</div>
@ -427,10 +472,13 @@
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</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"
[(selectedClass)]="fuseConfig.layout.toolbar.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -449,10 +497,13 @@
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
</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"
[(selectedClass)]="fuseConfig.layout.footer.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>

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

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

192
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 { DOCUMENT } from '@angular/common';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@ -9,10 +10,11 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'fuse-theme-options',
templateUrl: './theme-options.component.html',
styleUrls : ['./theme-options.component.scss'],
animations : fuseAnimations
selector : 'fuse-theme-options',
templateUrl : './theme-options.component.html',
styleUrls : ['./theme-options.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
@ -28,6 +30,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
/**
* Constructor
*
* @param {DOCUMENT} document
* @param {FormBuilder} _formBuilder
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService
@ -35,6 +38,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
* @param {Renderer2} _renderer
*/
constructor(
@Inject(DOCUMENT) private document: any,
private _formBuilder: FormBuilder,
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
@ -61,29 +65,33 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
// Build the config form
// noinspection TypeScriptValidateTypes
this.form = this._formBuilder.group({
colorTheme : new FormControl(),
layout : this._formBuilder.group({
style : new FormControl(),
width : new FormControl(),
navbar : this._formBuilder.group({
background: new FormControl(),
folded : new FormControl(),
hidden : new FormControl(),
position : new FormControl(),
variant : new FormControl()
primaryBackground : new FormControl(),
secondaryBackground: new FormControl(),
folded : new FormControl(),
hidden : new FormControl(),
position : new FormControl(),
variant : new FormControl()
}),
toolbar : this._formBuilder.group({
background: new FormControl(),
hidden : new FormControl(),
position : new FormControl()
background : new FormControl(),
customBackgroundColor: new FormControl(),
hidden : new FormControl(),
position : new FormControl()
}),
footer : this._formBuilder.group({
background: new FormControl(),
hidden : new FormControl(),
position : new FormControl()
background : new FormControl(),
customBackgroundColor: new FormControl(),
hidden : new FormControl(),
position : new FormControl()
}),
sidepanel: this._formBuilder.group({
hidden: new FormControl(),
position : new FormControl()
hidden : new FormControl(),
position: new FormControl()
})
}),
customScrollbars: new FormControl()
@ -177,23 +185,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
this.form.patchValue({
layout: {
width : 'fullwidth',
navbar : {
background: 'mat-fuse-dark-700-bg',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
width : 'fullwidth',
navbar : {
primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
},
toolbar: {
background: 'mat-white-500-bg',
hidden : false,
position : 'below-static'
toolbar : {
background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false,
position : 'below-static'
},
footer : {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'below-static'
footer : {
background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false,
position : 'below-static'
},
sidepanel: {
hidden : false,
position: 'right'
}
}
});
@ -206,23 +221,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
this.form.patchValue({
layout: {
width : 'fullwidth',
navbar : {
background: 'mat-fuse-dark-700-bg',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
width : 'fullwidth',
navbar : {
primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
},
toolbar: {
background: 'mat-white-500-bg',
hidden : false,
position : 'below'
toolbar : {
background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false,
position : 'below'
},
footer : {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'below'
footer : {
background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false,
position : 'below'
},
sidepanel: {
hidden : false,
position: 'right'
}
}
});
@ -235,23 +257,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
this.form.patchValue({
layout: {
width : 'fullwidth',
navbar : {
background: 'mat-fuse-dark-700-bg',
folded : false,
hidden : false,
position : 'left',
layout : 'vertical-style-1'
width : 'fullwidth',
navbar : {
primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false,
hidden : false,
position : 'left',
layout : 'vertical-style-1'
},
toolbar: {
background: 'mat-white-500-bg',
hidden : false,
position : 'above-static'
toolbar : {
background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false,
position : 'above-static'
},
footer : {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'above-static'
footer : {
background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false,
position : 'above-static'
},
sidepanel: {
hidden : false,
position: 'right'
}
}
});
@ -264,23 +293,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
this.form.patchValue({
layout: {
width : 'fullwidth',
navbar : {
background: 'mat-fuse-dark-700-bg',
folded : false,
hidden : false,
position : 'top',
variant : 'vertical-style-1'
width : 'fullwidth',
navbar : {
primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false,
hidden : false,
position : 'top',
variant : 'vertical-style-1'
},
toolbar: {
background: 'mat-white-500-bg',
hidden : false,
position : 'above'
toolbar : {
background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false,
position : 'above'
},
footer : {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'above-fixed'
footer : {
background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false,
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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
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 { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.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';
@ -22,6 +22,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
FlexLayoutModule,
MatButtonModule,
MatCheckboxModule,
MatDividerModule,
MatFormFieldModule,
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 black6 = 'rgba(black, 0.06)';
const white6 = 'rgba(white, 0.06)';
const matColors = {
'red': {
50 : '#ffebee',
@ -635,7 +636,8 @@ const matColors = {
A700: white87
}
},
'fuse-dark': {
'fuse-navy': {
50 : '#ECECEE',
100 : '#C5C6CB',
200 : '#9EA1A9',
@ -667,13 +669,15 @@ const matColors = {
A700: white87
}
},
white : {
'fuse-white': {
500 : 'white',
contrast: {
500: black87
}
},
black : {
'fuse-black': {
500 : 'black',
contrast: {
500: 'white'
@ -693,7 +697,6 @@ const matPresetColors = [
export class MatColors
{
public static all = matColors;
public static presets = matPresetColors;
public static getColor(colorName)
@ -702,6 +705,7 @@ export class MatColors
{
return matColors[colorName];
}
return false;
}
}

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

@ -10,15 +10,12 @@
// Fuse
@import "fuse";
// Theme
@import "theme";
// Include core Angular Material styles
@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
@import "partials/reset";
@import "partials/normalize";

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

@ -1,5 +1,5 @@
// Material theming
@import "theming";
// Material theming tools
@import '~@angular/material/theming';
// 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) {
$mediaQuery: map_get($breakpoints, $breakpointName);
$mediaQuery: map-get($breakpoints, $breakpointName);
@if ($mediaQuery != null) {

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

@ -12,10 +12,6 @@
}
// Fix: "Inconsistent font sizes across elements"
.mat-form-field-wrapper {
font-size: 16px;
}
.mat-checkbox {
font-size: 16px;
}
@ -34,7 +30,7 @@
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-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 {
max-width: 320px;
min-width: 320px;
background: white;
border-radius: 2px;
@include mat-elevation(2);
@ -37,13 +56,8 @@
// Divider
.card-divider {
border-top: 1px solid rgba(0, 0, 0, 0.12);
margin: 16px;
&.light {
border-top-color: rgba(255, 255, 255, 0.12);
}
&.full-width {
margin: 0;
}

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

@ -1,23 +1,52 @@
.secondary-text,
.icon,
i {
color: rgba(0, 0, 0, 0.54);
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@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 {
color: rgba(0, 0, 0, 0.38);
}
.divider {
color: rgba(0, 0, 0, 0.12);
}
// Material colors map
// -----------------------------------------------------------------------------------------------------
// @ Material colors map
// -----------------------------------------------------------------------------------------------------
$matPalettes: (
primary: $primary,
accent: $accent,
warn: $warn,
red: $mat-red,
pink: $mat-pink,
purple: $mat-purple,
@ -36,17 +65,16 @@ $matPalettes: (
deep-orange: $mat-deep-orange,
brown: $mat-brown,
grey: $mat-grey,
blue-grey: $mat-blue-grey,
white: $mat-white,
black: $mat-black,
fuse-dark: $mat-fusedark
blue-grey: $mat-blue-grey
);
// Material color hues list
$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 ($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...
$fuseForeground: (
@ -150,53 +181,55 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
// Native Input
input[type="text"] {
color: map_get($fuseForeground, base);
color: map-get($fuseForeground, base);
}
// Input
.mat-form-field-label {
color: map_get($fuseForeground, hint-text);
color: map-get($fuseForeground, hint-text);
}
.mat-form-field-underline {
background-color: map_get($fuseForeground, divider);
background-color: map-get($fuseForeground, divider);
}
// Select
.mat-select-trigger,
.mat-select-arrow {
color: map_get($fuseForeground, hint-text);
color: map-get($fuseForeground, hint-text);
}
.mat-select-underline {
background-color: map_get($fuseForeground, divider);
background-color: map-get($fuseForeground, divider);
}
.mat-select-disabled .mat-select-value,
.mat-select-arrow,
.mat-select-trigger {
color: map_get($fuseForeground, hint-text);
color: map-get($fuseForeground, hint-text);
}
.mat-select-content,
.mat-select-panel-done-animating {
background: map_get($background, card);
//background: map-get($background, card);
}
.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 {
background-color: $color !important;
}
.mat-#{$colorName}#{$hue}-bg {
.#{$colorName}#{$hue} {
background-color: $color !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) {
$palettes: (
primary: $primary,
accent: $accent,
warn: $warn
);
// -----------------------------------------------------------------------------------------------------
// @ Fuse color classes
// -----------------------------------------------------------------------------------------------------
@mixin fuse-color-classes($palettes) {
// Define contrast lists
$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) {
// Generate color classes
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
@include generate-color-classes($paletteName, $color, $contrast, '-#{$hue}');
// 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');
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
}
// if the contrast color is light
@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)
@if ($hue == 500) {
// 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
// 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');
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
}
// if the contrast color is light
@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
@include generateTextColorLevels($dark-contrasting-classes, 'dark');
@include generateTextColorLevels($light-contrasting-classes, 'light');
@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
@include generateMaterialElementColors($light-contrasting-classes, 'light');
@include generate-text-color-levels($dark-contrasting-classes, 'dark');
@include generate-text-color-levels($light-contrasting-classes, 'light');
@include generate-material-element-colors($dark-contrasting-classes, 'dark');
@include generate-material-element-colors($light-contrasting-classes, 'light');
}
// Generate the color classes...
// Define contrast lists
$light-contrasting-classes: ();
$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');
// -----------------------------------------------------------------------------------------------------
// @ Generate Fuse color classes for default Material palettes
// -----------------------------------------------------------------------------------------------------
@include fuse-color-classes($matPalettes);

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

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

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

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

@ -64,11 +64,11 @@
}
&:hover {
background-color: map-get($background, hover);
background-color: rgba(0, 0, 0, 0.04);
}
.mat-ripple-element {
background-color: map-get($background, hover);
background-color: rgba(0, 0, 0, 0.04);
}
&.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-sm: 160px !default;
$carded-toolbar-height: 64px !default;
@ -75,7 +154,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid;
height: $carded-toolbar-height;
min-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;
align-items: center;
flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid;
height: $carded-toolbar-height;
min-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 {
flex-direction: column;
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 {
font-size: 62.5%;
font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
@ -46,7 +87,6 @@ h6, .h6 {
// Links
a {
color: mat-color($accent);
text-decoration: none;
&:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
@ -103,11 +143,10 @@ code {
font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;;
&:not(.highlight) {
background: rgba(0, 0, 0, 0.065);
color: #106CC8;
margin: 0 1px;
padding: 2px 3px;
border-radius: 2px;
line-height: 1.7;
}
}
@ -237,6 +276,7 @@ strong {
line-height: 1.25;
}
.line-height-1\.5,
.line-height-1\.50 {
line-height: 1.5;
}
@ -245,6 +285,19 @@ strong {
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
.text-boxed {
border-radius: 2px;
@ -252,17 +305,9 @@ strong {
margin: 0 8px;
font-size: 11px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
background-color: rgba(0, 0, 0, 0.12);
white-space: nowrap;
}
// Boxed text light
.text-boxed-light {
@extend .text-boxed;
background-color: rgba(255, 255, 255, 0.7);
}
// Truncate
.text-truncate {
display: block;
@ -280,7 +325,6 @@ strong {
.changelog {
.entry {
background: white;
margin-bottom: 24px;
padding: 24px 32px;
@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 {
&.material {
@ -42,12 +115,11 @@
}
.datatable-row-wrapper {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid;
&:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.12);
border-top: 1px solid;
}
.datatable-body-cell {
display: inline-flex;
align-items: center;
@ -118,48 +190,63 @@
.datatable-icon-filter:before {
content: "filter_list";
}
.datatable-icon-collapse:before {
content: "unfold_less";
}
.datatable-icon-expand:before {
content: "unfold_more";
}
.datatable-icon-close:before {
content: "close";
}
.datatable-icon-up:before {
content: "keyboard_arrow_up";
}
.datatable-icon-down:before {
content: "keyboard_arrow_down";
}
.datatable-icon-sort:before {
content: "sort";
}
.datatable-icon-done:before {
content: "done";
}
.datatable-icon-done-all:before {
content: "done_all";
}
.datatable-icon-search:before {
content: "search";
}
.datatable-icon-pin:before {
content: "lock";
}
.datatable-icon-add:before {
content: "add";
}
.datatable-icon-left:before {
content: "chevron_left";
}
.datatable-icon-right:before {
content: "chevron_right";
}
.datatable-icon-skip:before {
content: "skip_next";
}
.datatable-icon-prev:before {
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 { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
@ -38,7 +39,11 @@ export class FuseMatchMediaService
*/
private _init(): void
{
this._observableMedia
this._observableMedia.asObservable()
.pipe(
debounceTime(500),
distinctUntilChanged()
)
.subscribe((change: MediaChange) => {
if ( this.activeMediaQuery !== change.mqAlias )
{

25
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 { NavigationEnd, Router } from '@angular/router';
import { filter, take } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
@ -46,19 +48,16 @@ export class FuseSplashScreenService
if ( this.splashScreenEl )
{
// Hide it on the first NavigationEnd event
const hideOnLoad = this._router.events.subscribe((event) => {
if ( event instanceof NavigationEnd )
{
setTimeout(() => {
this.hide();
// Unsubscribe from this event so it
// won't get triggered again
hideOnLoad.unsubscribe();
}, 0);
}
}
);
this._router.events
.pipe(
filter((event => event instanceof NavigationEnd)),
take(1)
)
.subscribe(() => {
setTimeout(() => {
this.hide();
});
});
}
}

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

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

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

@ -27,7 +27,7 @@
<!-- / HORIZONTAL LAYOUT 1 -->
<!-- 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')">
<mat-icon>settings</mat-icon>
</button>
@ -35,4 +35,4 @@
<fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
<fuse-theme-options></fuse-theme-options>
</fuse-sidebar>
<!-- / THEME OPTIONS PANEL -->
<!-- / THEME OPTIONS PANEL -->

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

@ -72,6 +72,36 @@ export class AppComponent implements OnInit, OnDestroy
// Use a language
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
if ( this._platform.ANDROID || this._platform.IOS )
{
@ -95,8 +125,10 @@ export class AppComponent implements OnInit, OnDestroy
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
// Boxed
if ( this.fuseConfig.layout.width === 'boxed' )
{
this.document.body.classList.add('boxed');
@ -105,6 +137,16 @@ export class AppComponent implements OnInit, OnDestroy
{
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);
}

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

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

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>
<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">
<mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
<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 { filter, takeUntil } from 'rxjs/operators';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.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
{
fuseConfig: any;
navigation: any;
// Private
@ -21,10 +23,12 @@ export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
private _fuseSidebarService: FuseSidebarService
)
@ -51,6 +55,13 @@ export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
.subscribe(() => {
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">
<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="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="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">
</div>
</div>
<div class="navbar-content">
<div class="navbar-content" [ngClass]="fuseConfig.layout.navbar.primaryBackground">
<fuse-navigation layout="vertical"></fuse-navigation>
</div>

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

@ -36,6 +36,9 @@ fuse-sidebar {
.user {
padding: 12px 0;
height: 64px;
min-height: 64px;
max-height: 64px;
.avatar-container {
position: relative;
@ -57,7 +60,7 @@ fuse-sidebar {
}
.navbar-content {
margin-top: 0;
padding-top: 0;
}
}
}
@ -134,6 +137,9 @@ navbar {
}
.navbar-scroll-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
@ -150,6 +156,9 @@ navbar {
align-items: center;
justify-content: flex-start;
width: 100%;
height: 136px;
min-height: 136px;
max-height: 136px;
padding: 24px 0 64px 0;
.avatar-container {
@ -170,7 +179,7 @@ navbar {
.navbar-content {
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">
<img class="logo-icon" src="assets/images/logos/fuse.svg">
@ -17,7 +17,7 @@
</div>
<div class="navbar-content" fusePerfectScrollbar
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}"
[ngClass]="fuseConfig.layout.navbar.primaryBackground">
<fuse-navigation layout="vertical"></fuse-navigation>
</div>

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

@ -62,7 +62,6 @@ navbar {
min-height: 64px;
padding: 0 16px 0 24px;
transition: padding 200ms ease;
background-color: rgba(255, 255, 255, .05);
@include mat-elevation(1);
.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 { filter, take, takeUntil } from 'rxjs/operators';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
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
{
fuseConfig: any;
fusePerfectScrollbarUpdateTimeout: any;
navigation: any;
@ -25,11 +27,13 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSidebarService} _fuseSidebarService
* @param {Router} _router
*/
constructor(
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
private _fuseSidebarService: FuseSidebarService,
private _router: Router
@ -117,6 +121,13 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
.subscribe(() => {
this.navigation = this._fuseNavigationService.getCurrentNavigation();
});
// Subscribe to the config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
});
}
/**

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

@ -1,72 +1,76 @@
<mat-list class="date" cdkFocusRegionStart>
<div fxLayout="column" fxFlex fusePerfectScrollbar>
<h3 matSubheader cdkFocusInit>
<span>Today</span>
</h3>
<mat-list class="date" cdkFocusRegionStart>
<div class="secondary-text mat-display-1 mb-0 p-16">
<div class="mb-12">
{{date | date:'EEEE'}}
<h3 matSubheader cdkFocusInit>
<span>Today</span>
</h3>
<div class="secondary-text mat-display-1 mb-0 p-16">
<div class="mb-12">
{{date | date:'EEEE'}}
</div>
<div fxLayout="row" fxLayoutAlign="start start">
<span> {{date | date:'d'}}</span>
<span class="mat-subheading-1">th</span>
<span> {{date | date:'MMMM'}}</span>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="start start">
<span> {{date | date:'d'}}</span>
<span class="mat-subheading-1">th</span>
<span> {{date | date:'MMMM'}}</span>
</div>
</div>
</mat-list>
</mat-list>
<mat-divider cdkFocusRegionEnd></mat-divider>
<mat-divider cdkFocusRegionEnd></mat-divider>
<mat-list>
<h3 matSubheader>
<span>Events</span>
</h3>
<mat-list>
<h3 matSubheader>
<span>Events</span>
</h3>
<mat-list-item *ngFor="let event of events">
<h3 matLine>{{event.title}}</h3>
<p matLine class="secondary-text">{{event.detail}}</p>
</mat-list-item>
</mat-list>
<mat-list-item *ngFor="let event of events">
<h3 matLine>{{event.title}}</h3>
<p matLine class="secondary-text">{{event.detail}}</p>
</mat-list-item>
</mat-list>
<mat-divider></mat-divider>
<mat-divider></mat-divider>
<mat-list>
<h3 matSubheader>
<span>Notes</span>
</h3>
<mat-list>
<h3 matSubheader>
<span>Notes</span>
</h3>
<mat-list-item *ngFor="let note of notes">
<h3 matLine>{{note.title}}</h3>
<p matLine class="secondary-text">{{note.detail}}</p>
</mat-list-item>
</mat-list>
<mat-list-item *ngFor="let note of notes">
<h3 matLine>{{note.title}}</h3>
<p matLine class="secondary-text">{{note.detail}}</p>
</mat-list-item>
</mat-list>
<mat-divider></mat-divider>
<mat-divider></mat-divider>
<mat-list>
<h3 matSubheader>
<span>Quick Settings</span>
</h3>
<mat-list>
<h3 matSubheader>
<span>Quick Settings</span>
</h3>
<mat-list-item>
<mat-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
labelPosition="before">
<h3>Notifications</h3>
</mat-slide-toggle>
</mat-list-item>
<mat-list-item>
<mat-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
labelPosition="before">
<h3>Notifications</h3>
</mat-slide-toggle>
</mat-list-item>
<mat-list-item>
<mat-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
labelPosition="before">
<h3>Cloud Sync</h3>
</mat-slide-toggle>
</mat-list-item>
<mat-list-item>
<mat-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
labelPosition="before">
<h3>Cloud Sync</h3>
</mat-slide-toggle>
</mat-list-item>
<mat-list-item>
<mat-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
labelPosition="before">
<h3>Retro Thrusters</h3>
</mat-slide-toggle>
</mat-list-item>
</mat-list>
<mat-list-item>
<mat-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
labelPosition="before">
<h3>Retro Thrusters</h3>
</mat-slide-toggle>
</mat-list-item>
</mat-list>
</div>

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

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

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

@ -17,7 +17,7 @@
</div>
</div>
<div class="px-8 px-mat-16">
<div class="px-8 px-md-16">
<fuse-shortcuts [navigation]="navigation"></fuse-shortcuts>
</div>
@ -85,7 +85,7 @@
class="quick-panel-toggle-button"
(click)="toggleSidebarOpen('quickPanel')"
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>
<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";
:host {
toolbar {
position: relative;
display: flex;
flex: 0 0 auto;
@ -46,7 +46,6 @@
.toolbar-separator {
height: 64px;
width: 1px;
background: rgba(0, 0, 0, .12);
@include media-breakpoint-down('xs') {
height: 56px;

9
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 { takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
@ -10,9 +10,10 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { navigation } from 'app/navigation/navigation';
@Component({
selector : 'toolbar',
templateUrl: './toolbar.component.html',
styleUrls : ['./toolbar.component.scss']
selector : 'toolbar',
templateUrl : './toolbar.component.html',
styleUrls : ['./toolbar.component.scss'],
encapsulation: ViewEncapsulation.None
})
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 -->
<ng-template #toolbar>
<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>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<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>
<!-- / FOOTER -->
<!-- TOP NAVBAR -->
<ng-template #topNavbar>
<navbar variant="horizontal-style-1"
class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
fxHide fxShow.gt-md
class="top-navbar" fxHide fxShow.gt-md
*ngIf="!fuseConfig.layout.navbar.hidden">
</navbar>
</ng-template>
@ -110,8 +111,7 @@
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->

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

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

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

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

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

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

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

@ -96,14 +96,16 @@
<!-- TOOLBAR -->
<ng-template #toolbar>
<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>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<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>
<!-- / FOOTER -->
@ -113,8 +115,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
@ -125,8 +126,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / 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-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateZ(0);
// Container 2
> .container {

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

@ -82,14 +82,16 @@
<!-- TOOLBAR -->
<ng-template #toolbar>
<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>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<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>
<!-- / FOOTER -->
@ -99,8 +101,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
@ -111,8 +112,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / 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-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateZ(0);
// Container 2
> .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;
right: 0;
bottom: 0;
background-color: #3C4252;
background-color: #2D323D;
z-index: 99999;
pointer-events: none;
}

23
src/styles.scss
View File

@ -1,24 +1,5 @@
// Import Fuse core library
@import "@fuse/scss/core";
// -----------------------------------------------------------------------------------------------------
// @ Multiple material themes example
// -----------------------------------------------------------------------------------------------------
// 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);
}
// Import app.theme.scss
@import "app/app.theme";