purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2026-04-27 05:54:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen
2018-03-08 12:38:51 +03:00
parent 43b22e609e ddcd7c6831
commit c178eeedaa
191 changed files with 4578 additions and 4597 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/app.component.ts
+9 -12
View File
@@ -1,10 +1,10 @@
import { Component } from '@angular/core';
import { FuseSplashScreenService } from './core/services/splash-screen.service';
import { TranslateService } from '@ngx-translate/core';
import { FuseTranslationLoaderService } from './core/services/translation-loader.service';
import { FuseNavigationService } from './core/components/navigation/navigation.service';
import { FuseNavigationModel } from './navigation/navigation.model';
import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { locale as navigationEnglish } from './navigation/i18n/en';
import { locale as navigationTurkish } from './navigation/i18n/tr';
@@ -16,10 +16,10 @@ import { locale as navigationTurkish } from './navigation/i18n/tr';
export class AppComponent
{
constructor(
private translate: TranslateService,
private fuseNavigationService: FuseNavigationService,
private fuseSplashScreen: FuseSplashScreenService,
private translate: TranslateService,
private translationLoader: FuseTranslationLoaderService
private fuseTranslationLoader: FuseTranslationLoaderService
)
{
// Add languages
@@ -28,13 +28,10 @@ export class AppComponent
// Set the default language
this.translate.setDefaultLang('en');
// Set the navigation translations
this.fuseTranslationLoader.loadTranslations(navigationEnglish, navigationTurkish);
// Use a language
this.translate.use('en');
// Set the navigation model
this.fuseNavigationService.setNavigationModel(new FuseNavigationModel());
// Set the navigation translations
this.translationLoader.loadTranslations(navigationEnglish, navigationTurkish);
}
}
src/app/app.module.ts
+13 -13
View File
@@ -4,14 +4,16 @@ import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import 'hammerjs';
import { SharedModule } from './core/modules/shared.module';
import { TranslateModule } from '@ngx-translate/core';
import { FuseModule } from '@fuse/fuse.module';
import { FuseSharedModule } from '@fuse/shared.module';
import { fuseConfig } from './fuse-config';
import { AppComponent } from './app.component';
import { FuseMainModule } from './main/main.module';
import { FuseSplashScreenService } from './core/services/splash-screen.service';
import { FuseConfigService } from './core/services/config.service';
import { FuseNavigationService } from './core/components/navigation/navigation.service';
import { FuseSampleModule } from './main/content/sample/sample.module';
import { TranslateModule } from '@ngx-translate/core';
const appRoutes: Routes = [
{
@@ -26,19 +28,17 @@ const appRoutes: Routes = [
],
imports : [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes),
SharedModule,
HttpClientModule,
RouterModule.forRoot(appRoutes), SharedModule,
TranslateModule.forRoot(),
// Fuse Main and Shared modules
FuseModule.forRoot(fuseConfig),
FuseSharedModule,
FuseMainModule,
FuseSampleModule
],
providers : [
FuseSplashScreenService,
FuseConfigService,
FuseNavigationService
],
bootstrap : [
AppComponent
]
src/app/core/animations.ts
-413
View File
@@ -1,413 +0,0 @@
import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';
const customAnimation = animation([
style({
opacity : '{{opacity}}',
transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
}),
animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
], {
params: {
duration: '200ms',
delay : '0ms',
opacity : '0',
scale : '1',
x : '0',
y : '0',
z : '0'
}
});
export const fuseAnimations = [
trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
trigger('animateStagger', [
state('50', style('*')),
state('100', style('*')),
state('200', style('*')),
transition('void => 50',
query('@*',
[
stagger('50ms', [
animateChild()
])
], {optional: true})),
transition('void => 100',
query('@*',
[
stagger('100ms', [
animateChild()
])
], {optional: true})),
transition('void => 200',
query('@*',
[
stagger('200ms', [
animateChild()
])
], {optional: true}))
]),
trigger('fadeInOut', [
state('0', style({
display: 'none',
opacity: 0
})),
state('1', style({
display: 'block',
opacity: 1
})),
transition('1 => 0', animate('300ms ease-out')),
transition('0 => 1', animate('300ms ease-in'))
]),
trigger('slideInOut', [
state('0', style({
height : '0px',
display: 'none'
})),
state('1', style({
height : '*',
display: 'block'
})),
transition('1 => 0', animate('300ms ease-out')),
transition('0 => 1', animate('300ms ease-in'))
]),
trigger('slideIn', [
transition('void => left', [
style({
transform: 'translateX(100%)'
}),
animate('300ms ease-in',
style({
transform: 'translateX(0)'
})
)
]
),
transition('left => void', [
style({
transform: 'translateX(0)'
}),
animate('300ms ease-in',
style({
transform: 'translateX(-100%)'
})
)
]
),
transition('void => right', [
style({
transform: 'translateX(-100%)'
}),
animate('300ms ease-in',
style({
transform: 'translateX(0)'
})
)
]
),
transition('right => void', [
style({
transform: 'translateX(0)'
}),
animate('300ms ease-in',
style({
transform: 'translateX(100%)'
})
)
]
),
]),
trigger('slideInLeft', [
state('void', style({
transform: 'translateX(-100%)',
display : 'none'
})),
state('*', style({
transform: 'translateX(0)',
display : 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]),
trigger('slideInRight', [
state('void', style({
transform: 'translateX(100%)',
display : 'none'
})),
state('*', style({
transform: 'translateX(0)',
display : 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]),
trigger('slideInTop', [
state('void', style({
transform: 'translateY(-100%)',
display : 'none'
})),
state('*', style({
transform: 'translateY(0)',
display : 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]),
trigger('slideInBottom', [
state('void',
style({
transform: 'translateY(100%)',
display : 'none'
})),
state('*', style({
transform: 'translateY(0)',
display : 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]),
trigger('expandCollapse', [
state('void', style({
height: '0px'
})),
state('*', style({
height: '*'
})),
transition('void => *', animate('300ms ease-out')),
transition('* => void', animate('300ms ease-in'))
]),
trigger('routerTransitionLeft', [
transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [
style({
position: 'absolute',
top : 0,
bottom : 0,
left : 0,
right : 0
})
], {optional: true}),
query('fuse-content > :enter', [
style({
transform: 'translateX(100%)',
opacity : 0
})
], {optional: true}),
sequence([
group([
query('fuse-content > :leave', [
style({
transform: 'translateX(0)',
opacity : 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateX(-100%)',
opacity : 0
}))
], {optional: true}),
query('fuse-content > :enter', [
style({transform: 'translateX(100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateX(0%)',
opacity : 1
}))
], {optional: true})
]),
query('fuse-content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true})
])
])
]),
trigger('routerTransitionRight', [
transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [
style({
position: 'absolute',
top : 0,
bottom : 0,
left : 0,
right : 0
})
], {optional: true}),
query('fuse-content > :enter', [
style({
transform: 'translateX(-100%)',
opacity : 0
})
], {optional: true}),
sequence([
group([
query('fuse-content > :leave', [
style({
transform: 'translateX(0)',
opacity : 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateX(100%)',
opacity : 0
}))
], {optional: true}),
query('fuse-content > :enter', [
style({transform: 'translateX(-100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateX(0%)',
opacity : 1
}))
], {optional: true})
]),
query('fuse-content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true})
])
])
]),
trigger('routerTransitionUp', [
transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [
style({
position: 'absolute',
top : 0,
bottom : 0,
left : 0,
right : 0
})
], {optional: true}),
query('fuse-content > :enter', [
style({
transform: 'translateY(100%)',
opacity : 0
})
], {optional: true}),
group([
query('fuse-content > :leave', [
style({
transform: 'translateY(0)',
opacity : 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateY(-100%)',
opacity : 0
}))
], {optional: true}),
query('fuse-content > :enter', [
style({transform: 'translateY(100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateY(0%)',
opacity : 1
}))
], {optional: true})
]),
query('fuse-content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true})
])
]),
trigger('routerTransitionDown', [
transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [
style({
position: 'absolute',
top : 0,
bottom : 0,
left : 0,
right : 0
})
], {optional: true}),
query('fuse-content > :enter', [
style({
transform: 'translateY(-100%)',
opacity : 0
})
], {optional: true}),
sequence([
group([
query('fuse-content > :leave', [
style({
transform: 'translateY(0)',
opacity : 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateY(100%)',
opacity : 0
}))
], {optional: true}),
query('fuse-content > :enter', [
style({transform: 'translateY(-100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateY(0%)',
opacity : 1
}))
], {optional: true})
]),
query('fuse-content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true})
])
])
]),
trigger('routerTransitionFade', [
transition('* => *', group([
query('fuse-content > :enter, fuse-content > :leave ', [
style({
position: 'absolute',
top : 0,
bottom : 0,
left : 0,
right : 0
})
], {optional: true}),
query('fuse-content > :enter', [
style({
opacity: 0
})
], {optional: true}),
query('fuse-content > :leave', [
style({
opacity: 1
}),
animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
opacity: 0
}))
], {optional: true}),
query('fuse-content > :enter', [
style({
opacity: 0
}),
animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
opacity: 1
}))
], {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true}),
query('fuse-content > :leave', animateChild(), {optional: true})
]))
])
];
src/app/core/components/confirm-dialog/confirm-dialog.component.html
-6
View File
@@ -1,6 +0,0 @@
<h1 matDialogTitle>Confirm</h1>
<div mat-dialog-content>{{confirmMessage}}</div>
<div mat-dialog-actions class="pt-24">
<button mat-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
<button mat-button (click)="dialogRef.close(false)">Cancel</button>
</div>
src/app/core/components/confirm-dialog/confirm-dialog.component.scss
View File
src/app/core/components/confirm-dialog/confirm-dialog.component.ts
-21
View File
@@ -1,21 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';
@Component({
selector : 'fuse-confirm-dialog',
templateUrl: './confirm-dialog.component.html',
styleUrls : ['./confirm-dialog.component.scss']
})
export class FuseConfirmDialogComponent implements OnInit
{
public confirmMessage: string;
constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
{
}
ngOnInit()
{
}
}
src/app/core/components/copier/copier.service.ts
-65
View File
@@ -1,65 +0,0 @@
/**
* This class is based on the code in the following projects:
*
* - https://github.com/zenorocha/select
* - https://github.com/zenorocha/clipboard.js/
*
* Both released under MIT license - © Zeno Rocha
*/
import { Injectable } from '@angular/core';
@Injectable()
export class CopierService
{
private textarea: HTMLTextAreaElement;
/** Copy the text value to the clipboard. */
copyText(text: string): boolean
{
this.createTextareaAndSelect(text);
const copySuccessful = document.execCommand('copy');
this.removeFake();
return copySuccessful;
}
/**
* Creates a hidden textarea element, sets its value from `text` property,
* and makes a selection on it.
*/
private createTextareaAndSelect(text: string)
{
// Create a fake element to hold the contents to copy
this.textarea = document.createElement('textarea');
// Prevent zooming on iOS
this.textarea.style.fontSize = '12pt';
// Hide the element
this.textarea.classList.add('cdk-visually-hidden');
// Move element to the same position vertically
const yPosition = window.pageYOffset || document.documentElement.scrollTop;
this.textarea.style.top = yPosition + 'px';
this.textarea.setAttribute('readonly', '');
this.textarea.value = text;
document.body.appendChild(this.textarea);
this.textarea.select();
this.textarea.setSelectionRange(0, this.textarea.value.length);
}
/** Remove the text area from the DOM. */
private removeFake()
{
if ( this.textarea )
{
document.body.removeChild(this.textarea);
this.textarea = null;
}
}
}
src/app/core/components/countdown/countdown.component.html
-39
View File
@@ -1,39 +0,0 @@
<div class="fuse-countdown">
<div class="time days">
<div class="value">
{{countdown.days}}
</div>
<div class="title">
days
</div>
</div>
<div class="time hours">
<div class="value">
{{countdown.hours}}
</div>
<div class="title">
hours
</div>
</div>
<div class="time minutes">
<div class="value">
{{countdown.minutes}}
</div>
<div class="title">
minutes
</div>
</div>
<div class="time seconds">
<div class="value">
{{countdown.seconds}}
</div>
<div class="title">
seconds
</div>
</div>
</div>
src/app/core/components/countdown/countdown.component.scss
-30
View File
@@ -1,30 +0,0 @@
:host {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.fuse-countdown {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
.time {
display: flex;
flex-direction: column;
padding: 0 12px;
.value {
font-size: 34px;
line-height: 34px;
padding-bottom: 8px;
}
.title {
color: rgba(0, 0, 0, 0.54);
}
}
}
}
src/app/core/components/countdown/countdown.component.ts
-54
View File
@@ -1,54 +0,0 @@
import { Component, Input, OnInit } from '@angular/core';
import * as moment from 'moment';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
@Component({
selector : 'fuse-countdown',
templateUrl: './countdown.component.html',
styleUrls : ['./countdown.component.scss']
})
export class FuseCountdownComponent implements OnInit
{
@Input('eventDate') eventDate;
countdown: any;
constructor()
{
this.countdown = {
days : '',
hours : '',
minutes: '',
seconds: ''
};
}
ngOnInit()
{
const currDate = moment();
const eventDate = moment(this.eventDate);
let diff = eventDate.diff(currDate, 'seconds');
const countDown =
Observable
.interval(1000)
.map(value => {
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()
};
});
countDown.subscribe(value => {
this.countdown = value;
});
}
}
src/app/core/components/demo/demo-content/demo-content.component.html
-75
View File
@@ -1,75 +0,0 @@
<!-- DEMO CONTENT -->
<div class="demo-content">
<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>
<p>
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a
horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his
brown belly, slightly domed and divided by arches into stiff sections.
</p>
<blockquote>
<p>
The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs,
pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's
happened to me? " he thought. It wasn't a dream.
</p>
<footer>
John Doe
</footer>
</blockquote>
<p>
His room, a proper human room although a little too small, lay peacefully between its four familiar
walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman -
and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in
a nice, gilded frame.
</p>
<p>
It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that
covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the
dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad.
</p>
<p>
"How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was
something he was unable to do because he was used to sleeping on his right, and in his present state
couldn't get into that position. However hard he threw himself onto his right, he always rolled back to
where he was.
</p>
<p>
He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering
legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before. "Oh,
God", he thought, "what a strenuous career it is that I've chosen!
</p>
<p>
Travelling day in and day out. Doing business like this takes much more effort than doing your own
business at home, and on top of that there's the curse of travelling, worries about making train
connections, bad and irregular food, contact with different people all the time so that you can never
get to know anyone or become friendly with them.
</p>
<p>
"He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard so
that he could lift his head better; found where the itch was, and saw that it was covered with lots of
little white spots which he didn't know what to make of; and when he tried to feel the place with one of
his legs he drew it quickly back because as soon as he touched it he was overcome by a cold shudder. He
slid back into his former position.
</p>
<p>
"Getting up early all the time", he thought, "it makes you stupid. You've got to get enough sleep. Other
travelling salesmen live a life of luxury. For instance, whenever I go back to the guest house during
the morning to copy out the contract, these gentlemen are always still sitting there eating their
breakfasts. I ought to just try that with my boss; I'd get kicked out on the spot. But who knows, maybe
that would be the best thing for me...
</p>
</div>
<!-- / DEMO CONTENT -->
src/app/core/components/demo/demo-content/demo-content.component.scss
View File
src/app/core/components/demo/demo-content/demo-content.component.ts
-13
View File
@@ -1,13 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-demo-content',
templateUrl: './demo-content.component.html',
styleUrls : ['./demo-content.component.scss']
})
export class FuseDemoContentComponent
{
constructor()
{
}
}
src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html
-100
View File
@@ -1,100 +0,0 @@
<div class="demo-sidenav">
<mat-list>
<h3 matSubheader>Sidenav Demo</h3>
<mat-list-item>
<span>Sidenav Item 1</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 2</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 3</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 4</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 5</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 6</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 7</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 8</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 9</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 10</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 11</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 12</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 13</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 14</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 15</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 16</span>
</mat-list-item>
</mat-list>
</div>
src/app/core/components/demo/demo-sidenav/demo-sidenav.component.scss
View File
src/app/core/components/demo/demo-sidenav/demo-sidenav.component.ts
-13
View File
@@ -1,13 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-demo-sidenav',
templateUrl: './demo-sidenav.component.html',
styleUrls : ['./demo-sidenav.component.scss']
})
export class FuseDemoSidenavComponent
{
constructor()
{
}
}
src/app/core/components/demo/demo.module.ts
-23
View File
@@ -1,23 +0,0 @@
import { NgModule } from '@angular/core';
import { SharedModule } from '../../modules/shared.module';
import { RouterModule } from '@angular/router';
import { FuseDemoContentComponent } from './demo-content/demo-content.component';
import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';
@NgModule({
declarations: [
FuseDemoContentComponent,
FuseDemoSidenavComponent
],
imports : [
SharedModule,
RouterModule
],
exports : [
FuseDemoContentComponent,
FuseDemoSidenavComponent
]
})
export class FuseDemoModule
{
}
src/app/core/components/highlight/highlight.component.scss
-6
View File
@@ -1,6 +0,0 @@
:host {
display: block;
padding: 8px;
background: #263238;
cursor: text;
}
src/app/core/components/highlight/highlight.component.ts
-102
View File
@@ -1,102 +0,0 @@
import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as Prism from 'prismjs/prism';
import './prism-languages';
@Component({
selector : 'fuse-highlight',
template : ' ',
styleUrls: ['./highlight.component.scss']
})
export class FuseHighlightComponent implements OnInit
{
@ContentChild('source') source: ElementRef;
@Input('lang') lang: string;
@Input('path') path: string;
constructor(
private elementRef: ElementRef,
private http: HttpClient
)
{
}
ngOnInit()
{
// If there is no language defined, return...
if ( !this.lang )
{
return;
}
// If the path is defined...
if ( this.path )
{
// Get the source
this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
// Highlight it
this.highlight(response);
});
}
// If the path is not defined and the source element exists...
if ( !this.path && this.source )
{
// Highlight it
this.highlight(this.source.nativeElement.value);
}
}
highlight(sourceCode)
{
// Split the source into lines
const sourceLines = sourceCode.split('\n');
// Remove the first and the last line of the source
// code if they are blank lines. This way, the html
// can be formatted properly while using fuse-highlight
// component
if ( !sourceLines[0].trim() )
{
sourceLines.shift();
}
if ( !sourceLines[sourceLines.length - 1].trim() )
{
sourceLines.pop();
}
// Find the first non-whitespace char index in
// the first line of the source code
const indexOfFirstChar = sourceLines[0].search(/\S|$/);
// Generate the trimmed source
let source = '';
// Iterate through all the lines
sourceLines.forEach((line, index) => {
// Trim the beginning white space depending on the index
// and concat the source code
source = source + line.substr(indexOfFirstChar, line.length);
// If it's not the last line...
if ( index !== sourceLines.length - 1 )
{
// Add a line break at the end
source = source + '\n';
}
});
// Generate the highlighted code
const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
// Replace the innerHTML of the component with the highlighted code
this.elementRef.nativeElement.innerHTML =
'<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
}
}
src/app/core/components/highlight/prism-languages.ts
-16
View File
@@ -1,16 +0,0 @@
import 'prismjs/prism';
import 'prismjs/components/prism-c';
import 'prismjs/components/prism-cpp';
import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-perl';
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-sass';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-typescript';
src/app/core/components/material-color-picker/material-color-picker.component.html
-82
View File
@@ -1,82 +0,0 @@
<button mat-icon-button
type="button"
class="mat-elevation-z1"
[matMenuTriggerFor]="colorMenu"
(menuOpened)="onMenuOpen()"
[ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
<mat-icon>palette</mat-icon>
</button>
<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
<header [ngClass]="selectedColor?.class || 'mat-accent-bg'"
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">
<mat-icon class="s-20">arrow_back</mat-icon>
</button>
<span *ngIf="selectedColor?.palette">
{{selectedColor.palette}} {{selectedColor.hue}}
</span>
<span *ngIf="!selectedColor?.palette">
Select Color
</span>
<button mat-icon-button
class="remove-color-button"
(click)="removeColor()"
aria-label="Remove Color">
<mat-icon class="s-20">delete</mat-icon>
</button>
</header>
<div [ngSwitch]="view" class="views">
<div class="view"
*ngSwitchCase="'palettes'"
[@slideInLeft]>
<div fxLayout="row" fxLayoutWrap
fxLayoutAlign="start start"
class="colors" fusePerfectScrollbar>
<div class="color"
[ngClass]="'mat-'+color.key+'-bg'"
*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>
</div>
</div>
</div>
<div class="view"
*ngSwitchCase="'hues'"
[@slideInRight]>
<div fxLayout="row" fxLayoutWrap
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>
</div>
</div>
</div>
</mat-menu>
src/app/core/components/material-color-picker/material-color-picker.component.scss
-54
View File
@@ -1,54 +0,0 @@
.fuse-material-color-picker-menu {
width: 208px;
.mat-menu-content {
padding: 0;
.views {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
min-height: 258px;
height: 308px;
background-color: #F7F7F7;
.view {
position: absolute;
width: 208px;
height: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
.colors {
position: relative;
padding: 4px;
.color {
position: relative;
width: 46px;
height: 46px;
margin: 2px;
border-radius: 0;
cursor: pointer;
.label {
padding: 2px;
font-size: 10px;
}
mat-icon {
position: absolute;
top: 2px;
right: 2px;
font-size: 16px;
opacity: 0.7;
}
}
}
}
}
}
}
src/app/core/components/material-color-picker/material-color-picker.component.ts
-190
View File
@@ -1,190 +0,0 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { MatColors } from '../../matColors';
import { fuseAnimations } from '../../animations';
@Component({
selector : 'fuse-material-color-picker',
templateUrl : './material-color-picker.component.html',
styleUrls : ['./material-color-picker.component.scss'],
animations : fuseAnimations,
encapsulation: ViewEncapsulation.None
})
export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
{
colors: any;
selectedColor: any;
hues: string[];
view = 'palettes';
@Input() selectedPalette = '';
@Input() selectedHue = '';
@Input() selectedFg = '';
@Input() value: any;
@Output() onValueChange = new EventEmitter();
@Output() selectedPaletteChange = new EventEmitter();
@Output() selectedHueChange = new EventEmitter();
@Output() selectedClassChange = new EventEmitter();
@Output() selectedBgChange = new EventEmitter();
@Output() selectedFgChange = new EventEmitter();
_selectedClass = '';
@Input()
set selectedClass(value)
{
if ( value && value !== '' && this._selectedClass !== 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;
}
_selectedBg = '';
@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;
}
constructor()
{
this.colors = MatColors.all;
this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
}
ngOnInit()
{
}
selectPalette(palette)
{
this.selectedPalette = palette;
this.updateSelectedColor();
this.view = 'hues';
}
selectHue(hue)
{
this.selectedHue = hue;
this.updateSelectedColor();
}
removeColor()
{
this.selectedPalette = '';
this.selectedHue = '';
this.updateSelectedColor();
}
updateSelectedColor()
{
setTimeout(() => {
if ( this.selectedColor && this.selectedPalette === this.selectedColor.palette && this.selectedHue === this.selectedColor.hue )
{
return;
}
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 = '';
}
this.selectedColor = {
palette: this.selectedPalette,
hue : this.selectedHue,
class : this.selectedClass,
bg : this.selectedBg,
fg : this.selectedFg
};
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);
});
}
backToPaletteSelection()
{
this.view = 'palettes';
}
onMenuOpen()
{
if ( this.selectedPalette === '' )
{
this.view = 'palettes';
}
else
{
this.view = 'hues';
}
}
ngOnChanges(changes: any)
{
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 )
{
this.updateSelectedColor();
}
}
}
src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
-23
View File
@@ -1,23 +0,0 @@
<a class="nav-link" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
<mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
</a>
<div class="children" [ngClass]="{'open': isOpen}">
<div class="{{fuseSettings.colorClasses.navbar}}">
<ng-container *ngFor="let item of item.children">
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
<fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
<fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
</ng-container>
</div>
</div>
src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss
-3
View File
@@ -1,3 +0,0 @@
:host {
}
src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
-50
View File
@@ -1,50 +0,0 @@
import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
import { fuseAnimations } from '../../../../animations';
import { FuseConfigService } from '../../../../services/config.service';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector : 'fuse-nav-horizontal-collapse',
templateUrl: './nav-horizontal-collapse.component.html',
styleUrls : ['./nav-horizontal-collapse.component.scss'],
animations : fuseAnimations
})
export class FuseNavHorizontalCollapseComponent implements OnDestroy
{
onSettingsChanged: Subscription;
fuseSettings: any;
isOpen = false;
@HostBinding('class') classes = 'nav-item nav-collapse';
@Input() item: any;
@HostListener('mouseenter')
open()
{
this.isOpen = true;
}
@HostListener('mouseleave')
close()
{
this.isOpen = false;
}
constructor(
private fuseConfig: FuseConfigService
)
{
this.onSettingsChanged =
this.fuseConfig.onSettingsChanged
.subscribe(
(newSettings) => {
this.fuseSettings = newSettings;
}
);
}
ngOnDestroy()
{
this.onSettingsChanged.unsubscribe();
}
}
src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
-18
View File
@@ -1,18 +0,0 @@
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</a>
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</span>
src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss
-3
View File
@@ -1,3 +0,0 @@
:host {
}
src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts
-12
View File
@@ -1,12 +0,0 @@
import { Component, HostBinding, Input } from '@angular/core';
@Component({
selector : 'fuse-nav-horizontal-item',
templateUrl: './nav-horizontal-item.component.html',
styleUrls : ['./nav-horizontal-item.component.scss']
})
export class FuseNavHorizontalItemComponent
{
@HostBinding('class') classes = 'nav-item';
@Input() item: any;
}
src/app/core/components/navigation/navigation.component.html
-32
View File
@@ -1,32 +0,0 @@
<div id="main-navigation" class="nav"
[ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
<!-- Vertical Navigation Layout -->
<ng-container *ngIf="layout === 'vertical'">
<ng-container *ngFor="let item of navigationModel">
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
</ng-container>
</ng-container>
<!-- / Vertical Navigation Layout -->
<!-- Horizontal Navigation Layout -->
<ng-container *ngIf="layout === 'horizontal'">
<ng-container *ngFor="let item of navigationModel">
<fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
<fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
</ng-container>
</ng-container>
<!-- / Horizontal Navigation Layout -->
</div>
src/app/core/components/navigation/navigation.component.scss
-6
View File
@@ -1,6 +0,0 @@
@import 'src/app/core/scss/fuse';
#main-navigation {
margin: 0;
padding: 0;
}
src/app/core/components/navigation/navigation.component.ts
-32
View File
@@ -1,32 +0,0 @@
import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
import { FuseNavigationService } from './navigation.service';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector : 'fuse-navigation',
templateUrl : './navigation.component.html',
styleUrls : ['./navigation.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseNavigationComponent implements OnDestroy
{
navigationModel: any[];
navigationModelChangeSubscription: Subscription;
@Input('layout') layout = 'vertical';
constructor(private fuseNavigationService: FuseNavigationService)
{
this.navigationModelChangeSubscription =
this.fuseNavigationService.onNavigationModelChange
.subscribe((navigationModel) => {
this.navigationModel = navigationModel;
});
}
ngOnDestroy()
{
this.navigationModelChangeSubscription.unsubscribe();
}
}
src/app/core/components/navigation/navigation.model.ts
-5
View File
@@ -1,5 +0,0 @@
export interface FuseNavigationModelInterface
{
model: any[];
}
src/app/core/components/navigation/navigation.module.ts
-30
View File
@@ -1,30 +0,0 @@
import { NgModule } from '@angular/core';
import { SharedModule } from '../../modules/shared.module';
import { RouterModule } from '@angular/router';
import { FuseNavigationComponent } from './navigation.component';
import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component';
import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
@NgModule({
imports : [
SharedModule,
RouterModule
],
exports : [
FuseNavigationComponent
],
declarations: [
FuseNavigationComponent,
FuseNavVerticalGroupComponent,
FuseNavVerticalItemComponent,
FuseNavVerticalCollapseComponent,
FuseNavHorizontalItemComponent,
FuseNavHorizontalCollapseComponent
]
})
export class FuseNavigationModule
{
}
src/app/core/components/navigation/navigation.service.ts
-198
View File
@@ -1,198 +0,0 @@
import { EventEmitter, Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { FuseNavigationModelInterface } from './navigation.model';
@Injectable()
export class FuseNavigationService
{
onNavCollapseToggle = new EventEmitter<any>();
onNavCollapseToggled = new EventEmitter<any>();
onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
navigationModel: FuseNavigationModelInterface;
flatNavigation: any[] = [];
constructor()
{
}
/**
* Get navigation model
*
* @returns {any[]}
*/
getNavigationModel()
{
return this.navigationModel.model;
}
/**
* Set the navigation model
*
* @param model
*/
setNavigationModel(model)
{
this.navigationModel = model;
this.onNavigationModelChange.next(this.navigationModel.model);
}
/**
* Add new navigation item
* to the given location
*/
addNavigationItem(location, item)
{
// Parse the location
const locationArr = location.split('.');
if ( locationArr.length === 0 )
{
return;
}
// Find the navigation item
const navItem = this.findNavigationItemById(locationArr);
// Act according to the item type
switch ( navItem.type )
{
case 'item':
// Create a children array
navItem.children = [];
// Push the item
navItem.children.push(item);
// Change the item type to collapsable
navItem.type = 'collapse';
break;
case 'collapse':
// Push the item
navItem.children.push(item);
break;
case 'group':
// Push the item
navItem.children.push(item);
break;
default:
break;
}
}
/**
* Get navigation item from
* given location
*
* @param location
*/
getNavigationItem(location)
{
// Parse the location
const locationArr = location.split('.');
if ( locationArr.length === 0 )
{
return;
}
// Find and return the navigation item
return this.findNavigationItemById(locationArr);
}
/**
* Find navigation item by location
*
* @param location
* @param navigation
*/
findNavigationItemById(location, navigation?)
{
if ( !navigation )
{
navigation = this.navigationModel.model;
}
// Iterate through the given navigation
for ( const navItem of navigation )
{
// If the nav item id equals the first location...
if ( navItem.id === location[0] )
{
// If there is more location to look at...
if ( location.length > 1 )
{
// Remove the first item of the location
location.splice(0, 1);
// Go nested...
return this.findNavigationItemById(location, navItem.children);
}
// Otherwise just return the nav item
else
{
return navItem;
}
}
}
}
/**
* Get flattened navigation array
* @param navigationItems
* @returns {any[]}
*/
getFlatNavigation(navigationItems?)
{
// If navigation items not provided,
// that means we are running the function
// for the first time...
if ( !navigationItems )
{
// Reset the flat navigation
this.flatNavigation = [];
// Get the entire navigation model
navigationItems = this.navigationModel.model;
}
for ( const navItem of navigationItems )
{
if ( navItem.type === 'subheader' )
{
continue;
}
if ( navItem.type === 'item' )
{
this.flatNavigation.push({
title: navItem.title,
type : navItem.type,
icon : navItem.icon || false,
url : navItem.url
});
continue;
}
if ( navItem.type === 'collapse' || navItem.type === 'group' )
{
if ( navItem.children )
{
this.getFlatNavigation(navItem.children);
}
}
}
return this.flatNavigation;
}
}
src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
-17
View File
@@ -1,17 +0,0 @@
<a class="nav-link" matRipple (click)="toggleOpen($event)">
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
<mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
</a>
<div class="children" [@slideInOut]="isOpen">
<ng-container *ngFor="let item of item.children">
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
</ng-container>
</div>
src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss
-45
View File
@@ -1,45 +0,0 @@
:host {
.folded:not(.folded-open) & {
.nav-link {
> span {
opacity: 0;
transition: opacity 200ms ease;
}
}
&.open {
.children {
display: none !important;
}
}
}
.nav-link {
.collapse-arrow {
transition: transform .3s ease-in-out, opacity .25s ease-in-out .1s;
transform: rotate(0);
}
}
> .children {
overflow: hidden;
}
&.open {
> .nav-link {
.collapse-arrow {
transform: rotate(90deg);
}
}
> .children {
}
}
}
src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
-193
View File
@@ -1,193 +0,0 @@
import { Component, HostBinding, Input, OnInit } from '@angular/core';
import { FuseNavigationService } from '../../navigation.service';
import { NavigationEnd, Router } from '@angular/router';
import { fuseAnimations } from '../../../../animations';
@Component({
selector : 'fuse-nav-vertical-collapse',
templateUrl: './nav-vertical-collapse.component.html',
styleUrls : ['./nav-vertical-collapse.component.scss'],
animations : fuseAnimations
})
export class FuseNavVerticalCollapseComponent implements OnInit
{
@Input() item: any;
@HostBinding('class') classes = 'nav-collapse nav-item';
@HostBinding('class.open') public isOpen = false;
constructor(
private navigationService: FuseNavigationService,
private router: Router
)
{
// Listen for route changes
router.events.subscribe(
(event) => {
if ( event instanceof NavigationEnd )
{
// Check if the url can be found in
// one of the children of this item
if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
{
this.expand();
}
else
{
this.collapse();
}
}
}
);
// Listen for collapsing of any navigation item
this.navigationService.onNavCollapseToggled
.subscribe(
(clickedItem) => {
if ( clickedItem && clickedItem.children )
{
// Check if the clicked item is one
// of the children of this item
if ( this.isChildrenOf(this.item, clickedItem) )
{
return;
}
// Check if the url can be found in
// one of the children of this item
if ( this.isUrlInChildren(this.item, this.router.url) )
{
return;
}
// If the clicked item is not this item, collapse...
if ( this.item !== clickedItem )
{
this.collapse();
}
}
}
);
}
ngOnInit()
{
// Check if the url can be found in
// one of the children of this item
if ( this.isUrlInChildren(this.item, this.router.url) )
{
this.expand();
}
else
{
this.collapse();
}
}
/**
* Toggle collapse
*
* @param ev
*/
toggleOpen(ev)
{
ev.preventDefault();
this.isOpen = !this.isOpen;
// Navigation collapse toggled...
this.navigationService.onNavCollapseToggled.emit(this.item);
this.navigationService.onNavCollapseToggle.emit();
}
/**
* Expand the collapsable navigation
*/
expand()
{
if ( this.isOpen )
{
return;
}
this.isOpen = true;
this.navigationService.onNavCollapseToggle.emit();
}
/**
* Collapse the collapsable navigation
*/
collapse()
{
if ( !this.isOpen )
{
return;
}
this.isOpen = false;
this.navigationService.onNavCollapseToggle.emit();
}
/**
* Check if the given parent has the
* given item in one of its children
*
* @param parent
* @param item
* @return {any}
*/
isChildrenOf(parent, item)
{
if ( !parent.children )
{
return false;
}
if ( parent.children.indexOf(item) !== -1 )
{
return true;
}
for ( const children of parent.children )
{
if ( children.children )
{
return this.isChildrenOf(children, item);
}
}
}
/**
* Check if the given url can be found
* in one of the given parent's children
*
* @param parent
* @param url
* @returns {any}
*/
isUrlInChildren(parent, url)
{
if ( !parent.children )
{
return false;
}
for ( let i = 0; i < parent.children.length; i++ )
{
if ( parent.children[i].children )
{
if ( this.isUrlInChildren(parent.children[i], url) )
{
return true;
}
}
if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
{
return true;
}
}
return false;
}
}
src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
-11
View File
@@ -1,11 +0,0 @@
<div class="group-title">
<span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
</div>
<div class="group-items">
<ng-container *ngFor="let item of item.children">
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
</ng-container>
</div>
src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
-23
View File
@@ -1,23 +0,0 @@
:host {
.folded:not(.folded-open) & {
> .group-title {
align-items: center;
> span {
opacity: 0;
transition: opacity 200ms ease;
}
&:before {
content: '';
display: block;
position: absolute;
min-width: 1.6rem;
border-top: 2px solid;
opacity: 0.2;
}
}
}
}
src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
-21
View File
@@ -1,21 +0,0 @@
import { Component, HostBinding, Input, OnInit } from '@angular/core';
@Component({
selector : 'fuse-nav-vertical-group',
templateUrl: './nav-vertical-group.component.html',
styleUrls : ['./nav-vertical-group.component.scss']
})
export class FuseNavVerticalGroupComponent implements OnInit
{
@HostBinding('class') classes = 'nav-group nav-item';
@Input() item: any;
constructor()
{
}
ngOnInit()
{
}
}
src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
-18
View File
@@ -1,18 +0,0 @@
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</a>
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</span>
src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.scss
-14
View File
@@ -1,14 +0,0 @@
:host {
.folded:not(.folded-open) & {
.nav-link {
> .nav-link-title,
> .nav-link-badge {
opacity: 0;
transition: opacity 200ms ease;
}
}
}
}
src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.ts
-20
View File
@@ -1,20 +0,0 @@
import { Component, HostBinding, Input, OnInit } from '@angular/core';
@Component({
selector : 'fuse-nav-vertical-item',
templateUrl: './nav-vertical-item.component.html',
styleUrls : ['./nav-vertical-item.component.scss']
})
export class FuseNavVerticalItemComponent implements OnInit
{
@HostBinding('class') classes = 'nav-item';
@Input() item: any;
constructor()
{
}
ngOnInit()
{
}
}
src/app/core/components/search-bar/search-bar.component.html
-21
View File
@@ -1,21 +0,0 @@
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
<div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
<label for="fuse-search-bar-input">
<button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
*ngIf="collapsed">
<mat-icon class="s-24">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)" fxFlex>
<button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
aria-label="Collapse Search Bar">
<mat-icon class="s-24">close</mat-icon>
</button>
</div>
</div>
src/app/core/components/search-bar/search-bar.component.scss
-77
View File
@@ -1,77 +0,0 @@
@import "src/app/core/scss/fuse";
:host {
.fuse-search-bar {
min-width: 64px;
height: 64px;
font-size: 13px;
@include media-breakpoint-down('sm') {
height: 56px;
}
.fuse-search-bar-expander,
.fuse-search-bar-collapser {
cursor: pointer;
padding: 0 20px;
margin: 0;
width: 64px !important;
height: 64px !important;
line-height: 64px !important;
@include media-breakpoint-down('sm') {
height: 56px !important;
line-height: 56px !important;
}
}
.fuse-search-bar-loader {
width: 64px !important;
height: 64px !important;
line-height: 64px !important;
@include media-breakpoint-down('sm') {
height: 56px !important;
line-height: 56px !important;
}
}
.fuse-search-bar-collapser {
display: none;
}
#fuse-search-bar-input {
display: none;
min-height: 64px;
background-color: transparent;
font-size: 16px;
}
&.expanded {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
#fuse-search-bar-input {
display: block;
}
.fuse-search-bar-collapser {
display: block;
}
}
}
body {
&.fuse-search-bar-expanded {
#toolbar {
z-index: 999 !important;
}
}
}
}
src/app/core/components/search-bar/search-bar.component.ts
-53
View File
@@ -1,53 +0,0 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FuseConfigService } from '../../services/config.service';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector : 'fuse-search-bar',
templateUrl: './search-bar.component.html',
styleUrls : ['./search-bar.component.scss']
})
export class FuseSearchBarComponent implements OnInit
{
collapsed: boolean;
toolbarColor: string;
@Output() onInput: EventEmitter<any> = new EventEmitter();
onSettingsChanged: Subscription;
constructor(
private fuseConfig: FuseConfigService
)
{
this.collapsed = true;
this.onSettingsChanged =
this.fuseConfig.onSettingsChanged
.subscribe(
(newSettings) => {
this.toolbarColor = newSettings.colorClasses.toolbar;
}
);
}
ngOnInit()
{
}
collapse()
{
this.collapsed = true;
}
expand()
{
this.collapsed = false;
}
search(event)
{
const value = event.target.value;
this.onInput.emit(value);
}
}
src/app/core/components/search-bar/search-bar.module.ts
-21
View File
@@ -1,21 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../../modules/shared.module';
import { FuseSearchBarComponent } from './search-bar.component';
@NgModule({
declarations: [
FuseSearchBarComponent
],
imports : [
SharedModule,
RouterModule
],
exports : [
FuseSearchBarComponent
]
})
export class FuseSearchBarModule
{
}
src/app/core/components/shortcuts/shortcuts.component.html
-89
View File
@@ -1,89 +0,0 @@
<div id="fuse-shortcuts" #shortcuts>
<div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
fxHide fxShow.lt-md>
<button mat-icon-button (click)="showMobileShortcutsPanel()">
<mat-icon class="amber-600-fg">star</mat-icon>
</button>
</div>
<div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
<div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
<div fxLayout="row" fxLayoutAlign="start center">
<div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
*ngFor="let shortcutItem of shortcutItems">
<a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
<mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
<span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
{{shortcutItem.title.substr(0, 1).toUpperCase()}}
</span>
</a>
</div>
<button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
(menuOpened)="onMenuOpen()">
<mat-icon class="amber-600-fg">star</mat-icon>
</button>
</div>
<div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
<button mat-icon-button (click)="hideMobileShortcutsPanel()">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
<mat-menu #addMenu="matMenu" class="w-240">
<mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
<input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
</mat-form-field>
<mat-divider></mat-divider>
<mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
<mat-list-item *ngFor="let shortcutItem of shortcutItems"
(click)="toggleShortcut($event, shortcutItem)">
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
<mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
{{shortcutItem.title.substr(0, 1).toUpperCase()}}
</span>
<p matLine fxFlex>{{shortcutItem.title}}</p>
<mat-icon class="ml-8">star</mat-icon>
</div>
</mat-list-item>
<mat-list-item *ngIf="shortcutItems.length === 0">
<p>
<small>No shortcuts yet!</small>
</p>
</mat-list-item>
</mat-nav-list>
<mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
<mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
(click)="toggleShortcut($event, navigationItem)">
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
<mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
{{navigationItem.title.substr(0, 1).toUpperCase()}}
</span>
<p matLine fxFlex>{{navigationItem.title}}</p>
<mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
</div>
</mat-list-item>
</mat-nav-list>
</mat-menu>
</div>
</div>
src/app/core/components/shortcuts/shortcuts.component.scss
-26
View File
@@ -1,26 +0,0 @@
@import 'src/app/core/scss/fuse';
:host {
@include media-breakpoint-down('sm') {
#fuse-shortcuts {
&.show-mobile-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
padding: 0 8px;
.shortcuts {
display: flex !important;
flex: 1;
height: 100%;
}
}
}
}
}
src/app/core/components/shortcuts/shortcuts.component.ts
-168
View File
@@ -1,168 +0,0 @@
import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
import { FuseNavigationService } from '../navigation/navigation.service';
import { Subscription } from 'rxjs/Subscription';
import { ObservableMedia } from '@angular/flex-layout';
import { FuseMatchMedia } from '../../services/match-media.service';
import { FuseConfigService } from '../../services/config.service';
import { CookieService } from 'ngx-cookie-service';
@Component({
selector : 'fuse-shortcuts',
templateUrl: './shortcuts.component.html',
styleUrls : ['./shortcuts.component.scss']
})
export class FuseShortcutsComponent implements OnInit, OnDestroy
{
shortcutItems: any[] = [];
navigationItems: any[];
filteredNavigationItems: any[];
searching = false;
mobileShortcutsPanelActive = false;
toolbarColor: string;
matchMediaSubscription: Subscription;
onSettingsChanged: Subscription;
@ViewChild('searchInput') searchInputField;
@ViewChild('shortcuts') shortcutsEl: ElementRef;
constructor(
private renderer: Renderer2,
private observableMedia: ObservableMedia,
private fuseMatchMedia: FuseMatchMedia,
private fuseNavigationService: FuseNavigationService,
private fuseConfig: FuseConfigService,
private cookieService: CookieService
)
{
this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
this.onSettingsChanged =
this.fuseConfig.onSettingsChanged
.subscribe(
(newSettings) => {
this.toolbarColor = newSettings.colorClasses.toolbar;
}
);
}
ngOnInit()
{
const cookieExists = this.cookieService.check('FUSE2.shortcuts');
if ( cookieExists )
{
this.shortcutItems = JSON.parse(this.cookieService.get('FUSE2.shortcuts'));
}
else
{
// User's shortcut items
this.shortcutItems = [
{
'title': 'Calendar',
'type' : 'nav-item',
'icon' : 'today',
'url' : '/apps/calendar'
},
{
'title': 'Mail',
'type' : 'nav-item',
'icon' : 'email',
'url' : '/apps/mail'
},
{
'title': 'Contacts',
'type' : 'nav-item',
'icon' : 'account_box',
'url' : '/apps/contacts'
},
{
'title': 'To-Do',
'type' : 'nav-item',
'icon' : 'check_box',
'url' : '/apps/todo'
}
];
}
this.matchMediaSubscription =
this.fuseMatchMedia.onMediaChange.subscribe(() => {
if ( this.observableMedia.isActive('gt-sm') )
{
this.hideMobileShortcutsPanel();
}
});
}
ngOnDestroy()
{
this.matchMediaSubscription.unsubscribe();
}
search(event)
{
const value = event.target.value.toLowerCase();
if ( value === '' )
{
this.searching = false;
this.filteredNavigationItems = this.navigationItems;
return;
}
this.searching = true;
this.filteredNavigationItems = this.navigationItems.filter((navigationItem) => {
return navigationItem.title.toLowerCase().includes(value);
});
}
toggleShortcut(event, itemToToggle)
{
event.stopPropagation();
for ( let i = 0; i < this.shortcutItems.length; i++ )
{
if ( this.shortcutItems[i].url === itemToToggle.url )
{
this.shortcutItems.splice(i, 1);
// Save to the cookies
this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
return;
}
}
this.shortcutItems.push(itemToToggle);
// Save to the cookies
this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
}
isInShortcuts(navigationItem)
{
return this.shortcutItems.find(item => {
return item.url === navigationItem.url;
});
}
onMenuOpen()
{
setTimeout(() => {
this.searchInputField.nativeElement.focus();
});
}
showMobileShortcutsPanel()
{
this.mobileShortcutsPanelActive = true;
this.renderer.addClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
}
hideMobileShortcutsPanel()
{
this.mobileShortcutsPanelActive = false;
this.renderer.removeClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
}
}
src/app/core/components/shortcuts/shortcuts.module.ts
-21
View File
@@ -1,21 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FuseShortcutsComponent } from './shortcuts.component';
import { SharedModule } from '../../modules/shared.module';
@NgModule({
declarations: [
FuseShortcutsComponent
],
imports : [
SharedModule,
RouterModule
],
exports : [
FuseShortcutsComponent
]
})
export class FuseShortcutsModule
{
}
src/app/core/components/theme-options/theme-options.component.html
-105
View File
@@ -1,105 +0,0 @@
<button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
<mat-icon>settings</mat-icon>
</button>
<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
<div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
<button mat-icon-button class="close-button" (click)="closeBar()">
<mat-icon>close</mat-icon>
</button>
<div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
<h3>Navigation:</h3>
<mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<mat-radio-button class="mr-8 mb-8" value="top">Top</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
<h3>Navigation Fold (for vertical navigation):</h3>
<mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
(change)="onSettingsChange()">
Folded
</mat-slide-toggle>
<h3 class="mt-24">Toolbar:</h3>
<mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
<h3 class="mt-24">Footer:</h3>
<mat-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>
<h3 class="mt-24">Layout Mode:</h3>
<mat-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
</mat-radio-group>
<mat-divider></mat-divider>
<h3>Colors:</h3>
<div class="colors">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Toolbar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Navigation Bar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Footer Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div>
</div>
<mat-divider></mat-divider>
<h3>Router Animation:</h3>
<mat-form-field class="w-100-p">
<mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
<mat-option value="none">
None
</mat-option>
<mat-option value="slideUp">
Slide up
</mat-option>
<mat-option value="slideDown">
Slide down
</mat-option>
<mat-option value="slideRight">
Slide right
</mat-option>
<mat-option value="slideLeft">
Slide left
</mat-option>
<mat-option value="fadeIn">
Fade in
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
src/app/core/components/theme-options/theme-options.component.scss
-115
View File
@@ -1,115 +0,0 @@
@import "src/app/core/scss/fuse";
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
:host {
position: fixed;
display: block;
right: 0;
top: 160px;
z-index: 998;
&.bar-closed .theme-options-panel {
display: none;
}
.theme-options-panel {
position: absolute;
right: 0;
top: 0;
width: 360px;
transform: translate3d(100%, 0, 0);
z-index: 999;
max-height: calc(100vh - 200px);
padding: 24px;
overflow: auto;
@include media-breakpoint-down('xs') {
top: -120px;
max-height: calc(100vh - 100px);
width: 90vw;
}
.close-button {
position: absolute;
top: 8px;
right: 8px;
}
h3 {
font-size: 14px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
}
.mat-divider {
display: block !important;
width: 100%;
margin: 24px 0 16px 0;
}
.colors {
display: block !important;
width: 100%;
}
}
.theme-options-panel-overlay {
position: fixed;
display: block;
background: rgba(0, 0, 0, 0);
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 998;
@include media-breakpoint-down('sm') {
background: rgba(0, 0, 0, 0.37);
}
&.hidden {
display: none;
}
}
.mat-list .mat-list-item {
font-size: 15px;
}
.mat-divider {
margin: 16px;
}
.open-button {
position: absolute;
top: 0;
left: -48px;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
cursor: pointer;
border-radius: 0;
margin: 0;
pointer-events: auto;
opacity: .75;
z-index: 998;
mat-icon {
animation: rotating 3s linear infinite;
}
&:hover {
opacity: 1;
}
}
}
src/app/core/components/theme-options/theme-options.component.ts
-112
View File
@@ -1,112 +0,0 @@
import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
import { Subscription } from 'rxjs/Subscription';
import { FuseConfigService } from '../../services/config.service';
import { fuseAnimations } from '../../animations';
import { FuseNavigationService } from '../navigation/navigation.service';
@Component({
selector : 'fuse-theme-options',
templateUrl: './theme-options.component.html',
styleUrls : ['./theme-options.component.scss'],
animations : fuseAnimations
})
export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
@ViewChild('openButton') openButton;
@ViewChild('panel') panel;
@ViewChild('overlay') overlay: ElementRef;
public player: AnimationPlayer;
fuseSettings: any;
onSettingsChanged: Subscription;
@HostBinding('class.bar-closed') barClosed: boolean;
constructor(
private animationBuilder: AnimationBuilder,
private fuseConfig: FuseConfigService,
private navigationService: FuseNavigationService,
private renderer: Renderer2
)
{
this.barClosed = true;
this.onSettingsChanged =
this.fuseConfig.onSettingsChanged
.subscribe(
(newSettings) => {
this.fuseSettings = newSettings;
}
);
// Get the nav model and add customize nav item
// that opens the bar programmatically
const navModel = this.navigationService.getNavigationModel();
navModel.push({
'id' : 'custom-function',
'title' : 'Custom Function',
'type' : 'group',
'children': [
{
'id' : 'customize',
'title' : 'Customize',
'type' : 'item',
'icon' : 'settings',
'function': () => {
this.openBar();
}
}
]
});
}
ngOnInit()
{
this.renderer.listen(this.overlay.nativeElement, 'click', () => {
this.closeBar();
});
}
onSettingsChange()
{
this.fuseConfig.setSettings(this.fuseSettings);
}
closeBar()
{
this.player =
this.animationBuilder
.build([
style({transform: 'translate3d(0,0,0)'}),
animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
]).create(this.panel.nativeElement);
this.player.play();
this.player.onDone(() => {
this.barClosed = true;
});
}
openBar()
{
this.barClosed = false;
this.player =
this.animationBuilder
.build([
style({transform: 'translate3d(100%,0,0)'}),
animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
]).create(this.panel.nativeElement);
this.player.play();
}
ngOnDestroy()
{
this.onSettingsChanged.unsubscribe();
}
}
src/app/core/components/widget/widget-toggle.directive.ts
-21
View File
@@ -1,21 +0,0 @@
import { AfterViewInit, Directive, ElementRef, OnInit } from '@angular/core';
@Directive({
selector: '[fuseWidgetToggle]'
})
export class FuseWidgetToggleDirective implements OnInit, AfterViewInit
{
constructor(public el: ElementRef)
{
}
ngOnInit()
{
}
ngAfterViewInit()
{
}
}
src/app/core/components/widget/widget.component.html
-1
View File
@@ -1 +0,0 @@
<ng-content></ng-content>
src/app/core/components/widget/widget.component.scss
-84
View File
@@ -1,84 +0,0 @@
fuse-widget {
display: block;
position: relative;
perspective: 3000px;
padding: 12px;
> div {
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
> .fuse-widget-front {
display: flex;
flex-direction: column;
flex: 1 1 auto;
position: relative;
overflow: hidden;
visibility: visible;
width: 100%;
opacity: 1;
z-index: 10;
border-radius: 2px;
transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
transform: rotateY(0deg);
backface-visibility: hidden;
}
> .fuse-widget-back {
display: block;
position: absolute;
top: 12px;
right: 12px;
bottom: 12px;
left: 12px;
overflow: hidden;
visibility: hidden;
opacity: 0;
z-index: 10;
transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
transform: rotateY(180deg);
backface-visibility: hidden;
[fuseWidgetToggle] {
position: absolute;
top: 0;
right: 0;
}
}
&.flipped {
> .fuse-widget-front {
visibility: hidden;
opacity: 0;
transform: rotateY(180deg);
}
> .fuse-widget-back {
display: block;
visibility: visible;
opacity: 1;
transform: rotateY(360deg);
}
}
.mat-form-field {
&.mat-form-field-type-mat-select {
.mat-input-wrapper {
padding: 16px 0;
.mat-input-infix {
border: none;
padding: 0;
}
}
.mat-input-underline {
display: none;
}
}
}
}
src/app/core/components/widget/widget.component.ts
-44
View File
@@ -1,44 +0,0 @@
import { AfterContentInit, Component, ContentChildren, ElementRef, HostBinding, OnInit, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
import { FuseWidgetToggleDirective } from './widget-toggle.directive';
@Component({
selector : 'fuse-widget',
templateUrl : './widget.component.html',
styleUrls : ['./widget.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseWidgetComponent implements OnInit, AfterContentInit
{
@HostBinding('class.flipped') flipped = false;
@ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
constructor(private el: ElementRef, private renderer: Renderer2)
{
}
ngOnInit()
{
}
ngAfterContentInit()
{
setTimeout(() => {
this.toggleButtons.forEach(flipButton => {
this.renderer.listen(flipButton.el.nativeElement, 'click', (event) => {
event.preventDefault();
event.stopPropagation();
this.toggle();
});
});
});
}
toggle()
{
this.flipped = !this.flipped;
}
}
src/app/core/components/widget/widget.module.ts
-21
View File
@@ -1,21 +0,0 @@
import { NgModule } from '@angular/core';
import { SharedModule } from '../../modules/shared.module';
import { FuseWidgetComponent } from './widget.component';
import { FuseWidgetToggleDirective } from './widget-toggle.directive';
@NgModule({
imports : [
SharedModule
],
exports : [
FuseWidgetComponent,
FuseWidgetToggleDirective
],
declarations: [
FuseWidgetComponent,
FuseWidgetToggleDirective
]
})
export class FuseWidgetModule
{
}
src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
-33
View File
@@ -1,33 +0,0 @@
import { AfterContentChecked, Directive, ElementRef, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[fuseIfOnDom]'
})
export class FuseIfOnDomDirective implements AfterContentChecked
{
isCreated = false;
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef,
private element: ElementRef
)
{
}
ngAfterContentChecked()
{
if ( document.body.contains(this.element.nativeElement) && !this.isCreated )
{
setTimeout(() => {
this.viewContainer.createEmbeddedView(this.templateRef);
}, 300);
this.isCreated = true;
}
else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )
{
this.viewContainer.clear();
this.isCreated = false;
}
}
}
src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive.ts
-84
View File
@@ -1,84 +0,0 @@
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { ObservableMedia } from '@angular/flex-layout';
import { Subscription } from 'rxjs/Subscription';
import { FuseMatchMedia } from '../../services/match-media.service';
import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
@Directive({
selector: '[fuseMatSidenavHelper]'
})
export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
{
matchMediaSubscription: Subscription;
@HostBinding('class.mat-is-locked-open') isLockedOpen = true;
@Input('fuseMatSidenavHelper') id: string;
@Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
constructor(
private fuseMatSidenavService: FuseMatSidenavHelperService,
private fuseMatchMedia: FuseMatchMedia,
private observableMedia: ObservableMedia,
private matSidenav: MatSidenav
)
{
}
ngOnInit()
{
this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav);
if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
{
this.isLockedOpen = true;
this.matSidenav.mode = 'side';
this.matSidenav.toggle(true);
}
else
{
this.isLockedOpen = false;
this.matSidenav.mode = 'over';
this.matSidenav.toggle(false);
}
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
{
this.isLockedOpen = true;
this.matSidenav.mode = 'side';
this.matSidenav.toggle(true);
}
else
{
this.isLockedOpen = false;
this.matSidenav.mode = 'over';
this.matSidenav.toggle(false);
}
});
}
ngOnDestroy()
{
this.matchMediaSubscription.unsubscribe();
}
}
@Directive({
selector: '[fuseMatSidenavToggler]'
})
export class FuseMatSidenavTogglerDirective
{
@Input('fuseMatSidenavToggler') id;
constructor(private fuseMatSidenavService: FuseMatSidenavHelperService)
{
}
@HostListener('click')
onClick()
{
this.fuseMatSidenavService.getSidenav(this.id).toggle();
}
}
src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service.ts
-23
View File
@@ -1,23 +0,0 @@
import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material';
@Injectable()
export class FuseMatSidenavHelperService
{
sidenavInstances: MatSidenav[];
constructor()
{
this.sidenavInstances = [];
}
setSidenav(id, instance)
{
this.sidenavInstances[id] = instance;
}
getSidenav(id)
{
return this.sidenavInstances[id];
}
}
src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
-181
View File
@@ -1,181 +0,0 @@
import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy } from '@angular/core';
import { FuseConfigService } from '../../services/config.service';
import { Subscription } from 'rxjs/Subscription';
import { Platform } from '@angular/cdk/platform';
import PerfectScrollbar from 'perfect-scrollbar';
@Directive({
selector: '[fusePerfectScrollbar]'
})
export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
{
onSettingsChanged: Subscription;
isDisableCustomScrollbars = false;
isMobile = false;
isInitialized = true;
ps: PerfectScrollbar;
constructor(
public element: ElementRef,
private fuseConfig: FuseConfigService,
private platform: Platform
)
{
this.onSettingsChanged =
this.fuseConfig.onSettingsChanged
.subscribe(
(settings) => {
this.isDisableCustomScrollbars = !settings.customScrollbars;
}
);
if ( this.platform.ANDROID || this.platform.IOS )
{
this.isMobile = true;
}
}
ngAfterViewInit()
{
if ( this.isMobile || this.isDisableCustomScrollbars )
{
this.isInitialized = false;
return;
}
// Initialize the perfect-scrollbar
this.ps = new PerfectScrollbar(this.element.nativeElement, {
wheelPropagation: true
});
}
ngOnDestroy()
{
if ( !this.isInitialized || !this.ps )
{
return;
}
this.onSettingsChanged.unsubscribe();
// Destroy the perfect-scrollbar
this.ps.destroy();
}
@HostListener('document:click', ['$event'])
documentClick(event: Event): void
{
if ( !this.isInitialized || !this.ps )
{
return;
}
// Update the scrollbar on document click..
// This isn't the most elegant solution but there is no other way
// of knowing when the contents of the scrollable container changes.
// Therefore, we update scrollbars on every document click.
this.ps.update();
}
update()
{
if ( !this.isInitialized )
{
return;
}
// Update the perfect-scrollbar
this.ps.update();
}
destroy()
{
this.ngOnDestroy();
}
scrollToX(x: number, speed?: number)
{
this.animateScrolling('scrollLeft', x, speed);
}
scrollToY(y: number, speed?: number)
{
this.animateScrolling('scrollTop', y, speed);
}
scrollToTop(offset?: number, speed?: number)
{
this.animateScrolling('scrollTop', (offset || 0), speed);
}
scrollToLeft(offset?: number, speed?: number)
{
this.animateScrolling('scrollLeft', (offset || 0), speed);
}
scrollToRight(offset?: number, speed?: number)
{
const width = this.element.nativeElement.scrollWidth;
this.animateScrolling('scrollLeft', width - (offset || 0), speed);
}
scrollToBottom(offset?: number, speed?: number)
{
const height = this.element.nativeElement.scrollHeight;
this.animateScrolling('scrollTop', height - (offset || 0), speed);
}
animateScrolling(target: string, value: number, speed?: number)
{
if ( !speed )
{
this.element.nativeElement[target] = value;
// PS has weird event sending order, this is a workaround for that
this.update();
this.update();
}
else if ( value !== this.element.nativeElement[target] )
{
let newValue = 0;
let scrollCount = 0;
let oldTimestamp = performance.now();
let oldValue = this.element.nativeElement[target];
const cosParameter = (oldValue - value) / 2;
const step = (newTimestamp) => {
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
// Only continue animation if scroll position has not changed
if ( this.element.nativeElement[target] === oldValue )
{
if ( scrollCount >= Math.PI )
{
this.element.nativeElement[target] = value;
// PS has weird event sending order, this is a workaround for that
this.update();
this.update();
}
else
{
this.element.nativeElement[target] = oldValue = newValue;
oldTimestamp = newTimestamp;
window.requestAnimationFrame(step);
}
}
};
window.requestAnimationFrame(step);
}
}
}
src/app/core/fuseUtils.ts
-114
View File
@@ -1,114 +0,0 @@
export class FuseUtils
{
public static filterArrayByString(mainArr, searchText)
{
if ( searchText === '' )
{
return mainArr;
}
searchText = searchText.toLowerCase();
return mainArr.filter(itemObj => {
return this.searchInObj(itemObj, searchText);
});
}
public static searchInObj(itemObj, searchText)
{
for ( const prop in itemObj )
{
if ( !itemObj.hasOwnProperty(prop) )
{
continue;
}
const value = itemObj[prop];
if ( typeof value === 'string' )
{
if ( this.searchInString(value, searchText) )
{
return true;
}
}
else if ( Array.isArray(value) )
{
if ( this.searchInArray(value, searchText) )
{
return true;
}
}
if ( typeof value === 'object' )
{
if ( this.searchInObj(value, searchText) )
{
return true;
}
}
}
}
public static searchInArray(arr, searchText)
{
for ( const value of arr )
{
if ( typeof value === 'string' )
{
if ( this.searchInString(value, searchText) )
{
return true;
}
}
if ( typeof value === 'object' )
{
if ( this.searchInObj(value, searchText) )
{
return true;
}
}
}
}
public static searchInString(value, searchText)
{
return value.toLowerCase().includes(searchText);
}
public static generateGUID()
{
function S4()
{
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return S4() + S4();
}
public static toggleInArray(item, array)
{
if ( array.indexOf(item) === -1 )
{
array.push(item);
}
else
{
array.splice(array.indexOf(item), 1);
}
}
public static handleize(text)
{
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}
}
src/app/core/matColors.ts
-707
View File
@@ -1,707 +0,0 @@
const black87 = 'rgba(black, 0.87)';
const white87 = 'rgba(white, 0.87)';
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',
100 : '#ffcdd2',
200 : '#ef9a9a',
300 : '#e57373',
400 : '#ef5350',
500 : '#f44336',
600 : '#e53935',
700 : '#d32f2f',
800 : '#c62828',
900 : '#b71c1c',
A100 : '#ff8a80',
A200 : '#ff5252',
A400 : '#ff1744',
A700 : '#d50000',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : 'white',
600 : 'white',
700 : 'white',
800 : white87,
900 : white87,
A100: black87,
A200: 'white',
A400: 'white',
A700: 'white'
}
},
'pink': {
50 : '#fce4ec',
100 : '#f8bbd0',
200 : '#f48fb1',
300 : '#f06292',
400 : '#ec407a',
500 : '#e91e63',
600 : '#d81b60',
700 : '#c2185b',
800 : '#ad1457',
900 : '#880e4f',
A100 : '#ff80ab',
A200 : '#ff4081',
A400 : '#f50057',
A700 : '#c51162',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : 'white',
600 : 'white',
700 : white87,
800 : white87,
900 : white87,
A100: black87,
A200: 'white',
A400: 'white',
A700: 'white'
}
},
'purple': {
50 : '#f3e5f5',
100 : '#e1bee7',
200 : '#ce93d8',
300 : '#ba68c8',
400 : '#ab47bc',
500 : '#9c27b0',
600 : '#8e24aa',
700 : '#7b1fa2',
800 : '#6a1b9a',
900 : '#4a148c',
A100 : '#ea80fc',
A200 : '#e040fb',
A400 : '#d500f9',
A700 : '#aa00ff',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : 'white',
400 : 'white',
500 : white87,
600 : white87,
700 : white87,
800 : white87,
900 : white87,
A100: black87,
A200: 'white',
A400: 'white',
A700: 'white'
}
},
'deep-purple': {
50 : '#ede7f6',
100 : '#d1c4e9',
200 : '#b39ddb',
300 : '#9575cd',
400 : '#7e57c2',
500 : '#673ab7',
600 : '#5e35b1',
700 : '#512da8',
800 : '#4527a0',
900 : '#311b92',
A100 : '#b388ff',
A200 : '#7c4dff',
A400 : '#651fff',
A700 : '#6200ea',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : 'white',
400 : 'white',
500 : white87,
600 : white87,
700 : white87,
800 : white87,
900 : white87,
A100: black87,
A200: 'white',
A400: white87,
A700: white87
}
},
'indigo': {
50 : '#e8eaf6',
100 : '#c5cae9',
200 : '#9fa8da',
300 : '#7986cb',
400 : '#5c6bc0',
500 : '#3f51b5',
600 : '#3949ab',
700 : '#303f9f',
800 : '#283593',
900 : '#1a237e',
A100 : '#8c9eff',
A200 : '#536dfe',
A400 : '#3d5afe',
A700 : '#304ffe',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : 'white',
400 : 'white',
500 : white87,
600 : white87,
700 : white87,
800 : white87,
900 : white87,
A100: black87,
A200: 'white',
A400: 'white',
A700: white87
}
},
'blue': {
50 : '#e3f2fd',
100 : '#bbdefb',
200 : '#90caf9',
300 : '#64b5f6',
400 : '#42a5f5',
500 : '#2196f3',
600 : '#1e88e5',
700 : '#1976d2',
800 : '#1565c0',
900 : '#0d47a1',
A100 : '#82b1ff',
A200 : '#448aff',
A400 : '#2979ff',
A700 : '#2962ff',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : 'white',
600 : 'white',
700 : 'white',
800 : white87,
900 : white87,
A100: black87,
A200: 'white',
A400: 'white',
A700: 'white'
}
},
'light-blue': {
50 : '#e1f5fe',
100 : '#b3e5fc',
200 : '#81d4fa',
300 : '#4fc3f7',
400 : '#29b6f6',
500 : '#03a9f4',
600 : '#039be5',
700 : '#0288d1',
800 : '#0277bd',
900 : '#01579b',
A100 : '#80d8ff',
A200 : '#40c4ff',
A400 : '#00b0ff',
A700 : '#0091ea',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : 'white',
600 : 'white',
700 : 'white',
800 : 'white',
900 : white87,
A100: black87,
A200: black87,
A400: black87,
A700: 'white'
}
},
'cyan': {
50 : '#e0f7fa',
100 : '#b2ebf2',
200 : '#80deea',
300 : '#4dd0e1',
400 : '#26c6da',
500 : '#00bcd4',
600 : '#00acc1',
700 : '#0097a7',
800 : '#00838f',
900 : '#006064',
A100 : '#84ffff',
A200 : '#18ffff',
A400 : '#00e5ff',
A700 : '#00b8d4',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : 'white',
600 : 'white',
700 : 'white',
800 : 'white',
900 : white87,
A100: black87,
A200: black87,
A400: black87,
A700: black87
}
},
'teal': {
50 : '#e0f2f1',
100 : '#b2dfdb',
200 : '#80cbc4',
300 : '#4db6ac',
400 : '#26a69a',
500 : '#009688',
600 : '#00897b',
700 : '#00796b',
800 : '#00695c',
900 : '#004d40',
A100 : '#a7ffeb',
A200 : '#64ffda',
A400 : '#1de9b6',
A700 : '#00bfa5',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : 'white',
600 : 'white',
700 : 'white',
800 : white87,
900 : white87,
A100: black87,
A200: black87,
A400: black87,
A700: black87
}
},
'green': {
50 : '#e8f5e9',
100 : '#c8e6c9',
200 : '#a5d6a7',
300 : '#81c784',
400 : '#66bb6a',
500 : '#4caf50',
600 : '#43a047',
700 : '#388e3c',
800 : '#2e7d32',
900 : '#1b5e20',
A100 : '#b9f6ca',
A200 : '#69f0ae',
A400 : '#00e676',
A700 : '#00c853',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : 'white',
600 : 'white',
700 : 'white',
800 : white87,
900 : white87,
A100: black87,
A200: black87,
A400: black87,
A700: black87
}
},
'light-green': {
50 : '#f1f8e9',
100 : '#dcedc8',
200 : '#c5e1a5',
300 : '#aed581',
400 : '#9ccc65',
500 : '#8bc34a',
600 : '#7cb342',
700 : '#689f38',
800 : '#558b2f',
900 : '#33691e',
A100 : '#ccff90',
A200 : '#b2ff59',
A400 : '#76ff03',
A700 : '#64dd17',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : black87,
600 : black87,
700 : black87,
800 : 'white',
900 : 'white',
A100: black87,
A200: black87,
A400: black87,
A700: black87
}
},
'lime': {
50 : '#f9fbe7',
100 : '#f0f4c3',
200 : '#e6ee9c',
300 : '#dce775',
400 : '#d4e157',
500 : '#cddc39',
600 : '#c0ca33',
700 : '#afb42b',
800 : '#9e9d24',
900 : '#827717',
A100 : '#f4ff81',
A200 : '#eeff41',
A400 : '#c6ff00',
A700 : '#aeea00',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : black87,
600 : black87,
700 : black87,
800 : black87,
900 : 'white',
A100: black87,
A200: black87,
A400: black87,
A700: black87
}
},
'yellow': {
50 : '#fffde7',
100 : '#fff9c4',
200 : '#fff59d',
300 : '#fff176',
400 : '#ffee58',
500 : '#ffeb3b',
600 : '#fdd835',
700 : '#fbc02d',
800 : '#f9a825',
900 : '#f57f17',
A100 : '#ffff8d',
A200 : '#ffff00',
A400 : '#ffea00',
A700 : '#ffd600',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : black87,
600 : black87,
700 : black87,
800 : black87,
900 : black87,
A100: black87,
A200: black87,
A400: black87,
A700: black87
}
},
'amber': {
50 : '#fff8e1',
100 : '#ffecb3',
200 : '#ffe082',
300 : '#ffd54f',
400 : '#ffca28',
500 : '#ffc107',
600 : '#ffb300',
700 : '#ffa000',
800 : '#ff8f00',
900 : '#ff6f00',
A100 : '#ffe57f',
A200 : '#ffd740',
A400 : '#ffc400',
A700 : '#ffab00',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : black87,
600 : black87,
700 : black87,
800 : black87,
900 : black87,
A100: black87,
A200: black87,
A400: black87,
A700: black87
}
},
'orange': {
50 : '#fff3e0',
100 : '#ffe0b2',
200 : '#ffcc80',
300 : '#ffb74d',
400 : '#ffa726',
500 : '#ff9800',
600 : '#fb8c00',
700 : '#f57c00',
800 : '#ef6c00',
900 : '#e65100',
A100 : '#ffd180',
A200 : '#ffab40',
A400 : '#ff9100',
A700 : '#ff6d00',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : black87,
600 : black87,
700 : black87,
800 : 'white',
900 : 'white',
A100: black87,
A200: black87,
A400: black87,
A700: 'black'
}
},
'deep-orange': {
50 : '#fbe9e7',
100 : '#ffccbc',
200 : '#ffab91',
300 : '#ff8a65',
400 : '#ff7043',
500 : '#ff5722',
600 : '#f4511e',
700 : '#e64a19',
800 : '#d84315',
900 : '#bf360c',
A100 : '#ff9e80',
A200 : '#ff6e40',
A400 : '#ff3d00',
A700 : '#dd2c00',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : 'white',
600 : 'white',
700 : 'white',
800 : 'white',
900 : 'white',
A100: black87,
A200: black87,
A400: 'white',
A700: 'white'
}
},
'brown': {
50 : '#efebe9',
100 : '#d7ccc8',
200 : '#bcaaa4',
300 : '#a1887f',
400 : '#8d6e63',
500 : '#795548',
600 : '#6d4c41',
700 : '#5d4037',
800 : '#4e342e',
900 : '#3e2723',
A100 : '#d7ccc8',
A200 : '#bcaaa4',
A400 : '#8d6e63',
A700 : '#5d4037',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : 'white',
400 : 'white',
500 : white87,
600 : white87,
700 : white87,
800 : white87,
900 : white87,
A100: black87,
A200: black87,
A400: 'white',
A700: white87
}
},
'grey': {
0 : '#ffffff',
50 : '#fafafa',
100 : '#f5f5f5',
200 : '#eeeeee',
300 : '#e0e0e0',
400 : '#bdbdbd',
500 : '#9e9e9e',
600 : '#757575',
700 : '#616161',
800 : '#424242',
900 : '#212121',
1000 : '#000000',
A100 : '#ffffff',
A200 : '#eeeeee',
A400 : '#bdbdbd',
A700 : '#616161',
contrast: {
0 : black87,
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : black87,
500 : black87,
600 : white87,
700 : white87,
800 : white87,
900 : white87,
1000: white87,
A100: black87,
A200: black87,
A400: black87,
A700: white87
}
},
'blue-grey': {
50 : '#eceff1',
100 : '#cfd8dc',
200 : '#b0bec5',
300 : '#90a4ae',
400 : '#78909c',
500 : '#607d8b',
600 : '#546e7a',
700 : '#455a64',
800 : '#37474f',
900 : '#263238',
A100 : '#cfd8dc',
A200 : '#b0bec5',
A400 : '#78909c',
A700 : '#455a64',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : black87,
400 : 'white',
500 : 'white',
600 : white87,
700 : white87,
800 : white87,
900 : white87,
A100: black87,
A200: black87,
A400: 'white',
A700: white87
}
},
'fuse-dark': {
50 : '#ECECEE',
100 : '#C5C6CB',
200 : '#9EA1A9',
300 : '#7D818C',
400 : '#5C616F',
500 : '#3C4252',
600 : '#353A48',
700 : '#2D323E',
800 : '#262933',
900 : '#1E2129',
A100 : '#C5C6CB',
A200 : '#9EA1A9',
A400 : '#5C616F',
A700 : '#2D323E',
contrast: {
50 : black87,
100 : black87,
200 : black87,
300 : 'white',
400 : 'white',
500 : white87,
600 : white87,
700 : white87,
800 : white87,
900 : white87,
A100: black87,
A200: white87,
A400: white87,
A700: white87
}
},
white : {
500 : 'white',
contrast: {
500: black87
}
},
black : {
500 : 'black',
contrast: {
500: 'white'
}
}
};
// tslint:disable-next-line
const matPresetColors = [
'#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000', '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162', '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff', '#2962ff', '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f', '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00', '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', '#d7ccc8', '#bcaaa4', '#8d6e63', '#5d4037', '#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121', '#ffffff', '#eeeeee', '#bdbdbd', '#616161', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238', '#cfd8dc', '#b0bec5', '#78909c', '#455a64'
];
/**
// Color palettes from the Material Design spec.
// See https://www.google.com/design/spec/style/color.html
*/
export class MatColors
{
public static all = matColors;
public static presets = matPresetColors;
public static getColor(colorName)
{
if ( matColors[colorName] )
{
return matColors[colorName];
}
return false;
}
}
src/app/core/modules/material.module.ts
-112
View File
@@ -1,112 +0,0 @@
import { NgModule } from '@angular/core';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCheckboxModule,
MatToolbarModule,
MatTooltipModule,
MatCardModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatStepperModule
} from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';
@NgModule({
imports: [
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatStepperModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
CdkTableModule
],
exports: [
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatStepperModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
CdkTableModule
]
})
export class MaterialModule
{
}
src/app/core/pipes/camelCaseToDash.pipe.ts
-10
View File
@@ -1,10 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'camelCaseToDash'})
export class CamelCaseToDashPipe implements PipeTransform
{
transform(value: string, args: any[] = [])
{
return value ? String(value).replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) : '';
}
}
src/app/core/pipes/filter.pipe.ts
-11
View File
@@ -1,11 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core';
import { FuseUtils } from '../fuseUtils';
@Pipe({name: 'filter'})
export class FilterPipe implements PipeTransform
{
transform(mainArr: any[], searchText: string, property: string): any
{
return FuseUtils.filterArrayByString(mainArr, searchText);
}
}
src/app/core/pipes/getById.pipe.ts
-25
View File
@@ -1,25 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'getById',
pure: false
})
export class GetByIdPipe implements PipeTransform
{
transform(value: any[], id: number, property: string): any
{
const foundItem = value.find(item => {
if ( item.id !== undefined )
{
return item.id === id;
}
return false;
});
if ( foundItem )
{
return foundItem[property];
}
}
}
src/app/core/pipes/htmlToPlaintext.pipe.ts
-10
View File
@@ -1,10 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'htmlToPlaintext'})
export class HtmlToPlaintextPipe implements PipeTransform
{
transform(value: string, args: any[] = [])
{
return value ? String(value).replace(/<[^>]+>/gm, '') : '';
}
}
src/app/core/pipes/keys.pipe.ts
-23
View File
@@ -1,23 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform
{
transform(value: any, args: string[]): any
{
const keys: any[] = [];
for ( const key in value )
{
if ( value.hasOwnProperty(key) )
{
keys.push({
key : key,
value: value[key]
});
}
}
return keys;
}
}
src/app/core/pipes/pipes.module.ts
-31
View File
@@ -1,31 +0,0 @@
import { NgModule } from '@angular/core';
import { KeysPipe } from './keys.pipe';
import { GetByIdPipe } from './getById.pipe';
import { HtmlToPlaintextPipe } from './htmlToPlaintext.pipe';
import { FilterPipe } from './filter.pipe';
import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
@NgModule({
declarations: [
KeysPipe,
GetByIdPipe,
HtmlToPlaintextPipe,
FilterPipe,
CamelCaseToDashPipe
],
imports : [],
exports : [
KeysPipe,
GetByIdPipe,
HtmlToPlaintextPipe,
FilterPipe,
CamelCaseToDashPipe
]
})
export class FusePipesModule
{
}
src/app/core/scss/core.scss
-35
View File
@@ -1,35 +0,0 @@
// ngx-datatable
@import '~@swimlane/ngx-datatable/release/themes/material';
// Perfect scrollbar
@import '~perfect-scrollbar/css/perfect-scrollbar';
// Fuse
@import "fuse";
// Theming
@include mat-core();
// Include theme styles for core and each component used in your app.
@include angular-material-theme($theme);
// Partials
@import "partials/reset";
@import "partials/normalize";
@import "partials/scrollbars";
@import "partials/helpers";
@import "partials/global";
@import "partials/icons";
@import "partials/colors";
@import "partials/material";
@import "partials/angular-material-fix";
@import "partials/typography";
@import "partials/page-layouts";
@import "partials/cards";
@import "partials/navigation";
@import "partials/forms";
@import "partials/toolbar";
@import "partials/print";
// Plugins
@import "partials/plugins/plugins";
src/app/core/scss/fuse.scss
-4
View File
@@ -1,4 +0,0 @@
// Variables
@import "variables/theme";
// Mixins
@import "mixins/breakpoints";
src/app/core/scss/mixins/_breakpoints.scss
-126
View File
@@ -1,126 +0,0 @@
// Media step breakpoint mixin based on Angular Material lib
$breakpoints: (
xs: 'screen and (max-width: 599px)',
sm: 'screen and (min-width: 600px) and (max-width: 959px)',
md: 'screen and (min-width: 960px) and (max-width: 1279px)',
lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
lt-sm: 'screen and (max-width: 599px)',
lt-md: 'screen and (max-width: 959px)',
lt-lg: 'screen and (max-width: 1279px)',
lt-xl: 'screen and (max-width: 1919px)',
gt-xs: 'screen and (min-width: 600px)',
gt-sm: 'screen and (min-width: 960px)',
gt-md: 'screen and (min-width: 1280px)',
gt-lg: 'screen and (min-width: 1920px)'
) !default;
$grid-breakpoints: (
xs: 0,
sm: 600px,
md: 960px,
lg: 1280px,
xl: 1920px
) !default;
@mixin media-breakpoint($breakpointName) {
$mediaQuery: map_get($breakpoints, $breakpointName);
@if ($mediaQuery != null) {
@media #{$mediaQuery} {
@content
}
}
}
// >> breakpoint-next(sm)
// md
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1.
//
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Useful for making responsive utilities.
//
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
$min: breakpoint-max($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);
@media (min-width: $min) and (max-width: $max) {
@content;
}
}
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
$max: breakpoint-max($name, $breakpoints);
@media (min-width: $min) and (max-width: $max) {
@content;
}
}
src/app/core/scss/partials/_angular-material-fix.scss
-78
View File
@@ -1,78 +0,0 @@
// Fix: "Icon button ripple radius is not correct on Edge & Safari"
.mat-icon-button {
.mat-button-ripple {
border-radius: 50%;
}
}
// Fix: "Inconsistent font sizes across elements"
.mat-input-wrapper {
font-size: 16px;
}
.mat-checkbox {
font-size: 16px;
}
.mat-radio-button {
font-size: 16px;
}
.mat-pseudo-checkbox-checked:after {
width: 14px !important;
height: 7px !important;
}
// Fix: "Input underlines has wrong color opacity value"
.mat-form-field-underline {
background-color: rgba(0, 0, 0, 0.12);
}
// Fix: "Some idiots using table-cell and inline-table in mat-select"
.mat-form-field {
&.mat-form-field-type-mat-select {
.mat-input-infix {
display: inline-flex;
width: auto;
.mat-select-trigger {
display: inline-flex;
align-items: center;
width: 100%;
.mat-select-value {
display: flex;
max-width: none;
margin-right: 8px;
}
.mat-select-arrow-wrapper {
display: inline-flex;
}
}
}
}
}
// Fix: "Stepper icons are broken due to Fuse's icon helpers"
mat-horizontal-stepper,
mat-vertical-stepper {
mat-step-header {
mat-icon {
height: 16px !important;
width: 16px !important;
min-width: 0 !important;
min-height: 0 !important;
color: rgba(255, 255, 255, 0.87) !important;
}
}
}
mat-vertical-stepper {
padding: 16px 0;
}
src/app/core/scss/partials/_cards.scss
-61
View File
@@ -1,61 +0,0 @@
.fuse-card {
max-width: 320px;
min-width: 320px;
background: white;
border-radius: 2px;
@include mat-elevation(2);
&.variable-width {
min-width: 0;
}
&.auto-width {
min-width: 0;
max-width: none;
}
// Buttons
.mat-button {
min-width: 0 !important;
padding: 0 8px !important;
}
// Button Toggle Group
.mat-button-toggle-group,
.mat-button-toggle-standalone {
box-shadow: none !important;
}
// Tabs
.mat-tab-labels {
justify-content: center;
}
.mat-tab-label {
min-width: 0 !important;
}
// 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;
}
}
// Expand Area
.card-expand-area {
overflow: hidden;
.card-expanded-content {
padding: 8px 16px 16px 16px;
line-height: 1.75;
}
}
}
src/app/core/scss/partials/_colors.scss
-248
View File
@@ -1,248 +0,0 @@
.secondary-text,
.mat-icon,
.icon {
color: rgba(0, 0, 0, 0.54);
}
.hint-text,
.disabled-text {
color: rgba(0, 0, 0, 0.38);
}
.divider {
color: rgba(0, 0, 0, 0.12);
}
// Material colors map
$matColorsMap: (
primary: $primary,
accent: $accent,
warn: $warn,
red: $mat-red,
pink: $mat-pink,
purple: $mat-purple,
deep-purple: $mat-deep-purple,
indigo: $mat-indigo,
blue: $mat-blue,
light-blue: $mat-light-blue,
cyan: $mat-cyan,
teal: $mat-teal,
green: $mat-green,
light-green: $mat-light-green,
lime: $mat-lime,
yellow: $mat-yellow,
amber: $mat-amber,
orange: $mat-orange,
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
);
// Material color hues list
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
// Text color levels generator mixin
@mixin generateTextColorLevels($baseTextColor) {
// If the base text color is black...
@if (rgba(black, 1) == rgba($baseTextColor, 1)) {
.mat-icon,
.icon {
color: rgba(0, 0, 0, 0.54);
}
&.secondary-text,
.secondary-text {
color: rgba(0, 0, 0, 0.54) !important;
}
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(0, 0, 0, 0.38) !important;
}
&.divider,
.divider {
color: rgba(0, 0, 0, 0.12) !important;
}
.mat-ripple-element {
background: rgba(0, 0, 0, 0.1);
}
}
// If the base text color is white...
@else {
.mat-icon,
.icon {
color: rgba(255, 255, 255, 1);
}
&.secondary-text,
.secondary-text {
color: rgba(255, 255, 255, 0.70) !important;
}
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(255, 255, 255, 0.50) !important;
}
&.divider,
.divider {
color: rgba(255, 255, 255, 0.12) !important;
}
.mat-ripple-element {
background: rgba(255, 255, 255, 0.1);
}
}
}
@mixin generateMaterialElementColors($contrastColor) {
// If the contrast color is white...
$fuseForeground: (
base: white,
text: white,
hint-text: rgba(white, 0.5),
divider: rgba(white, 0.12),
);
// If the contrast color is black...
@if (rgba(black, 1) == rgba($contrastColor, 1)) {
$fuseForeground: (
base: black,
hint-text: rgba(black, 0.38),
divider: rgba(black, 0.12),
);
}
// Native Input
input[type="text"] {
color: map_get($fuseForeground, base);
}
// Input
.mat-input-placeholder {
color: map_get($fuseForeground, hint-text);
}
.mat-input-underline {
background-color: map_get($fuseForeground, divider);
}
// Select
.mat-select-trigger,
.mat-select-arrow {
color: map_get($fuseForeground, hint-text);
}
.mat-select-underline {
background-color: map_get($fuseForeground, divider);
}
.mat-select-disabled .mat-select-value,
.mat-select-arrow,
.mat-select-trigger {
color: map_get($fuseForeground, hint-text);
}
.mat-select-content,
.mat-select-panel-done-animating {
background: map_get($background, card);
}
.mat-select-value {
color: map_get($fuseForeground, text);
}
}
// Color classes generator mixin
@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
.#{$colorName}#{$hue}-bg {
background-color: $color !important;
}
.mat-#{$colorName}#{$hue}-bg {
background-color: $color !important;
color: $contrastColor !important;
// Generate text color levels
// based on current contrast color
@include generateTextColorLevels($contrastColor);
// Generate material element colors
// based on current contrast color
@include generateMaterialElementColors($contrastColor);
&[disabled] {
background-color: rgba($color, .12) !important;
color: rgba($contrastColor, .26) !important;
}
}
.#{$colorName}#{$hue}-fg {
color: $color !important;
// Generate text color levels
// based on current contrast color
@include generateTextColorLevels($color);
// Generate material element colors
// based on current contrast color
@include generateMaterialElementColors($color);
}
.#{$colorName}#{$hue}-border {
border-color: $color !important;
}
.#{$colorName}#{$hue}-border-top {
border-top-color: $color !important;
}
.#{$colorName}#{$hue}-border-right {
border-right-color: $color !important;
}
.#{$colorName}#{$hue}-border-bottom {
border-bottom-color: $color !important;
}
.#{$colorName}#{$hue}-border-left {
border-left-color: $color !important;
}
}
// Generate the color classes...
@each $colorName, $colorMap in $matColorsMap {
@each $hue in $matColorHues {
$color: map-get($colorMap, $hue);
$contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
@if ($color != null and $contrastColor != null) {
@include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
// Run the generator one more time for default values (500)
@if ($hue == 500) {
@include generateColorClasses($colorName, $color, $contrastColor, '');
}
}
}
}
src/app/core/scss/partials/_forms.scss
-15
View File
@@ -1,15 +0,0 @@
button,
input[type=email],
input[type=tel],
input[type=text],
input[type=password],
input[type=image],
input[type=submit],
input[type=button],
input[type=search],
textarea {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
outline: none;
}
src/app/core/scss/partials/_global.scss
-6
View File
@@ -1,6 +0,0 @@
body {
> mat-sidenav-container {
height: 100%;
}
}
src/app/core/scss/partials/_helpers.scss
-245
View File
@@ -1,245 +0,0 @@
// ######################
// POSITION HELPERS
// ######################
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.position#{$infix}-relative {
position: relative;
}
.position#{$infix}-absolute {
position: absolute;
}
.position#{$infix}-static {
position: static;
}
}
}
// ####################################
// ABSOLUTE POSITION ALIGNMENT HELPERS
// ####################################
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.align#{$infix}-top {
top: 0;
}
.align#{$infix}-right {
right: 0;
}
.align#{$infix}-bottom {
bottom: 0;
}
.align#{$infix}-left {
left: 0;
}
}
}
// ######################
// SIZE HELPERS
// ######################
@each $prop, $abbrev in (height: h, width: w) {
@for $index from 0 through 180 {
$size: $index * 4;
$length: #{$size}px;
.#{$abbrev}-#{$size} {
#{$prop}: $length !important;
min-#{$prop}: $length !important;
max-#{$prop}: $length !important;
}
}
// Percentage
@for $i from 0 through 20 {
$i-p: 5 * $i;
$size-p: 5% * $i;
.#{$abbrev}-#{$i-p}-p {
#{$prop}: $size-p !important;
}
}
}
// ######################
// SPACING HELPERS
// ######################
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@each $prop, $abbrev in (margin: m, padding: p) {
@for $index from 0 through 64 {
$size: $index * 4;
$length: #{$size}px;
.#{$abbrev}#{$infix}-#{$size} {
#{$prop}: $length !important;
}
}
@for $index from 0 through 64 {
$size: $index * 4;
$length: #{$size}px;
.#{$abbrev}x#{$infix}-#{$size} {
#{$prop}-right: $length !important;
#{$prop}-left: $length !important;
}
.#{$abbrev}y#{$infix}-#{$size} {
#{$prop}-top: $length !important;
#{$prop}-bottom: $length !important;
}
}
@for $index from 0 through 64 {
$size: $index * 4;
$length: #{$size}px;
.#{$abbrev}t#{$infix}-#{$size} {
#{$prop}-top: $length !important;
}
.#{$abbrev}r#{$infix}-#{$size} {
#{$prop}-right: $length !important;
}
.#{$abbrev}b#{$infix}-#{$size} {
#{$prop}-bottom: $length !important;
}
.#{$abbrev}l#{$infix}-#{$size} {
#{$prop}-left: $length !important;
}
}
@if ($abbrev == m) {
// Some special margin utils for flex alignments
.m#{$infix}-auto {
margin: auto !important;
}
.mt#{$infix}-auto {
margin-top: auto !important;
}
.mr#{$infix}-auto {
margin-right: auto !important;
}
.mb#{$infix}-auto {
margin-bottom: auto !important;
}
.ml#{$infix}-auto {
margin-left: auto !important;
}
.mx#{$infix}-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.my#{$infix}-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
}
}
}
// ######################
// BORDER HELPERS
// ######################
$border-style: 1px solid rgba(0, 0, 0, 0.12);
.border,
.b {
border: $border-style;
}
.border-top,
.bt {
border-top: $border-style;
}
.border-right,
.br {
border-right: $border-style;
}
.border-bottom,
.bb {
border-bottom: $border-style;
}
.border-left,
.bl {
border-left: $border-style;
}
.border-horizontal,
.b-x {
border-left: $border-style;
border-right: $border-style;
}
.border-vertical,
.by {
border-top: $border-style;
border-bottom: $border-style;
}
// ######################
// BORDER RADIUS HELPERS
// ######################
.border-radius-100 {
border-radius: 100%;
}
.border-radius-2 {
border-radius: 2px;
}
.border-radius-4 {
border-radius: 4px;
}
.border-radius-8 {
border-radius: 8px;
}
.border-radius-16 {
border-radius: 16px;
}
// ######################
// CURSOR HELPERS
// ######################
.cursor-pointer {
cursor: pointer;
}
.cursor-default {
cursor: default;
}
src/app/core/scss/partials/_icons.scss
-30
View File
@@ -1,30 +0,0 @@
i,
mat-icon {
color: rgba(0, 0, 0, 0.54);
font-size: 24px;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
line-height: 24px;
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@for $size from 2 through 128 {
&.s#{$infix}-#{$size * 2} {
font-size: #{($size * 2) + 'px'} !important;
width: #{($size * 2) + 'px'} !important;
height: #{($size * 2) + 'px'} !important;
min-width: #{($size * 2) + 'px'} !important;
min-height: #{($size * 2) + 'px'} !important;
line-height: #{($size * 2) + 'px'} !important;
}
}
}
}
}
src/app/core/scss/partials/_material.scss
-466
View File
@@ -1,466 +0,0 @@
/*----------------------------------------------------------------*/
/* Avatars
/*----------------------------------------------------------------*/
.avatar {
width: 40px;
min-width: 40px;
height: 40px;
line-height: 40px;
margin: 0 8px 0 0;
border-radius: 50%;
font-size: 17px;
font-weight: 500;
text-align: center;
color: #FFFFFF;
&.square {
border-radius: 0;
}
&.small {
width: 20px;
min-width: 20px;
height: 20px;
line-height: 20px;
}
&.big {
width: 72px;
min-width: 72px;
height: 72px;
line-height: 72px;
}
&.huge {
width: 96px;
min-width: 96px;
height: 96px;
line-height: 96px;
}
}
.avatar-wrapper {
position: relative;
.avatar {
margin-top: 0;
margin-bottom: 0;
}
mat-icon.status {
position: absolute;
top: 28px;
left: 28px;
}
}
mat-icon.status {
border-radius: 50%;
&.online {
color: #4CAF50;
&:before {
content: "check_circle";
}
}
&.do-not-disturb {
color: #F44336;
&:before {
content: "do_not_disturb_on";
}
}
&.away {
background-color: #FFC107;
color: #FFFFFF;
&:before {
content: "access_time";
}
}
&.offline {
color: #646464;
background-color: #FFFFFF;
&:before {
content: "not_interested";
}
}
}
/*----------------------------------------------------------------*/
/* Forms
/*----------------------------------------------------------------*/
.form-wrapper {
background: #FFFFFF;
padding: 16px;
.form-title {
font-size: 21px;
padding: 8px 0;
}
}
/*----------------------------------------------------------------*/
/* Navigation - Simple
/*----------------------------------------------------------------*/
.navigation-simple {
.item {
position: relative;
cursor: pointer;
text-align: left;
margin: 0;
padding: 0 24px;
text-transform: none;
line-height: 48px;
max-height: 48px;
height: 48px;
mat-icon {
margin: 0 16px 0 0;
}
.title {
font-size: 13px;
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 {
margin: 8px 0;
}
}
/*----------------------------------------------------------------*/
/* Pagination
/*----------------------------------------------------------------*/
.simple-pagination {
position: relative;
display: inline-flex;
flex-direction: row;
@include mat-elevation(1);
background-color: #FFFFFF;
padding: 0 8px;
.pagination-item {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 56px;
line-height: 56px;
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-table {
position: relative;
background-color: #FFFFFF;
width: 280px;
border-radius: 2px;
margin: 12px;
overflow: hidden;
&.style-1 {
.package-type {
font-size: 17px;
padding: 16px 24px;
.sale {
font-size: 13px;
font-weight: 600;
}
}
.price {
padding: 32px 32px 16px 32px;
.currency {
padding-right: 4px;
font-size: 24px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
}
.value {
font-size: 72px;
font-weight: 300;
line-height: 1;
}
.period {
padding: 0 0 5px 4px;
font-size: 17px;
color: rgba(0, 0, 0, 0.54);
}
}
mat-divider {
margin: 16px 32px;
}
.terms {
padding: 16px 32px;
font-size: 15px;
.term {
}
}
.cta-button {
margin: 16px auto 32px auto;
width: 128px;
}
}
&.style-2 {
.badge {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 500;
padding: 6px 8px;
}
.package-type {
padding: 48px 32px 24px 32px;
font-size: 20px;
font-weight: 500;
text-align: center;
}
.price {
padding: 0 32px 8px 32px;
.currency {
padding-right: 4px;
font-size: 24px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
}
.value {
font-size: 56px;
font-weight: 300;
line-height: 1;
}
}
.period {
padding: 0 32px;
font-size: 15px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
text-align: center;
}
.terms {
padding: 32px;
font-size: 15px;
.term {
padding-bottom: 8px;
&:last-child {
padding-bottom: 0;
}
}
}
.cta-button {
margin: 8px auto 32px auto;
width: 128px;
}
}
&.style-3 {
.package-type {
padding: 32px;
text-align: center;
.title {
font-size: 34px;
}
.subtitle {
font-size: 17px;
color: rgba(0, 0, 0, 0.54);
font-weight: 500;
}
}
.price {
padding: 16px 32px;
.currency {
padding-right: 4px;
font-size: 15px;
font-weight: 500;
}
.value {
font-size: 34px;
font-weight: 300;
line-height: 1;
}
.period {
padding-left: 4px;
text-align: center;
}
}
.terms {
margin: 32px;
font-size: 15px;
color: rgba(0, 0, 0, 0.54);
.term {
padding-bottom: 16px;
&:last-child {
padding-bottom: 0;
}
}
}
.cta-button {
margin: 8px 32px;
}
.note {
padding: 8px 32px 16px 32px;
text-align: center;
color: rgba(0, 0, 0, 0.54);
}
}
}
}
/*----------------------------------------------------------------*/
/* Table - Simple
/*----------------------------------------------------------------*/
.simple-table-container {
background: #FFFFFF;
.table-title {
font-size: 20px;
padding: 24px;
}
}
table {
&.simple {
width: 100%;
border: none;
border-spacing: 0;
text-align: left;
thead {
tr {
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 {
padding-left: 24px;
}
&:last-child {
padding-right: 24px;
}
}
}
}
tbody {
tr {
td {
padding: 16px 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
&:first-child {
padding-left: 24px;
}
&:last-child {
padding-right: 24px;
}
}
&:last-child {
td {
border-bottom: none;
}
}
}
}
&.clickable {
tbody {
tr {
cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.03);
}
}
}
}
}
}
src/app/core/scss/partials/_navigation.scss
-226
View File
@@ -1,226 +0,0 @@
.nav {
.nav-subheader {
display: flex;
align-items: center;
height: 48px;
font-weight: 500;
padding-left: 24px;
margin-top: 8px;
font-size: 12px;
white-space: nowrap;
}
.nav-group {
display: block;
> .group-title {
position: relative;
display: flex;
align-items: center;
height: 48px;
font-weight: 500;
padding-left: 24px;
margin-top: 8px;
font-size: 12px;
white-space: nowrap;
}
}
.nav-item {
.nav-link {
text-decoration: none !important;
display: flex;
align-items: center;
height: 48px;
padding: 0 24px;
position: relative;
overflow: hidden;
cursor: pointer;
user-select: none;
color: currentColor;
> .nav-link-title {
flex: 1;
white-space: nowrap;
}
.nav-link-badge {
display: flex;
align-items: center;
min-width: 20px;
height: 20px;
padding: 0 7px;
font-size: 11px;
font-weight: 500;
border-radius: 20px;
transition: opacity 0.2s ease-in-out 0.1s;
margin-left: 8px;
+ .collapse-arrow {
margin-left: 8px;
}
}
&:hover {
background-color: map-get($background, hover);
}
.mat-ripple-element {
background-color: map-get($background, hover);
}
&.active {
background-color: mat-color($accent);
.mat-ripple-element {
background-color: mat-color($accent, default-contrast, 0.1);
}
&, .nav-link-icon {
color: mat-color($accent, default-contrast);
}
.nav-link-badge {
background: #FFFFFF !important;
color: rgba(0, 0, 0, 0.87) !important;
}
}
.nav-link-icon {
margin-right: 16px;
}
.nav-link-icon,
.collapse-arrow {
font-size: 16px;
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
line-height: 16px;
}
}
&.nav-collapse {
display: block;
> .children {
> .nav-item {
> .nav-link,
&.nav-group > .group-title,
&.nav-group > .group-items > .nav-item > .nav-link {
padding-left: 56px;
}
> .children {
> .nav-item {
> .nav-link,
&.nav-group > .group-title,
&.nav-group > .group-items > .nav-item > .nav-link {
padding-left: 72px;
}
}
}
}
}
}
}
> .nav-item {
&.nav-collapse {
background: transparent;
transition: background 200ms ease-in-out;
&.open {
background: rgba(0, 0, 0, 0.12);
}
}
}
> .nav-group {
> .group-items {
> .nav-collapse {
background: transparent;
transition: background 200ms ease-in-out;
&.open {
background: rgba(0, 0, 0, 0.12);
}
}
}
}
&.vertical {
.nav-group {
.group-title {
text-transform: uppercase;
}
}
}
&.horizontal {
display: flex;
flex-direction: row;
.nav-item {
&.nav-collapse {
position: relative;
.children {
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: 999;
min-width: 200px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
&.open {
display: block;
}
.nav-link {
padding-left: 24px !important;
}
}
}
}
> .nav-item {
> .nav-link {
height: 56px;
}
&.nav-collapse {
position: relative;
> .nav-link {
height: 56px;
.collapse-arrow {
display: none;
}
}
> .children {
top: 100%;
left: 0;
}
}
}
}
}
src/app/core/scss/partials/_normalize.scss
-447
View File
@@ -1,447 +0,0 @@
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #FF0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
src/app/core/scss/partials/_page-layouts.scss
-569
View File
@@ -1,569 +0,0 @@
// Page Layouts
$carded-header-height: 200px !default;
$carded-header-height-sm: 160px !default;
$carded-toolbar-height: 64px !default;
$header-height: 120px !default;
$header-height-sm: 100px !default;
// Calculate toolbarless header height
$carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
// Top bg image
$top-bg-image: url('assets/images/backgrounds/header-bg.png');
.page-layout {
position: relative;
overflow-x: hidden;
overflow-y: auto;
// Carded layout
&.carded {
display: flex;
flex-direction: column;
flex: 1 0 auto;
width: 100%;
min-width: 100%;
// Top bg
.top-bg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
left: 0;
height: $carded-header-height;
background-image: $top-bg-image;
background-size: cover;
@include media-breakpoint-down('sm') {
height: $carded-header-height-sm;
}
}
// Fullwidth
&.fullwidth {
// Single scroll
&.single-scroll {
> .center {
flex: 1 0 auto;
max-height: none;
}
}
// Center
> .center {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
z-index: 2;
padding: 0 32px;
width: 100%;
min-width: 100%;
max-width: 100%;
max-height: 100%;
.header {
height: $carded-header-height-without-toolbar;
min-height: $carded-header-height-without-toolbar;
max-height: $carded-header-height-without-toolbar;
@include media-breakpoint-down('sm') {
height: $carded-header-height-without-toolbar-sm;
min-height: $carded-header-height-without-toolbar-sm;
max-height: $carded-header-height-without-toolbar-sm;
}
}
.content-card {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
@include mat-elevation(7);
.toolbar {
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
height: $carded-toolbar-height;
min-height: $carded-toolbar-height;
max-height: $carded-toolbar-height;
}
> .content {
display: flex;
flex: 1;
overflow: auto;
}
}
}
}
// Left sidenav - Right sidenav
&.left-sidenav,
&.right-sidenav {
// Single scroll
&.single-scroll {
> mat-sidenav-container {
flex: 1 0 auto;
}
}
> mat-sidenav-container {
display: flex;
flex: 1;
background: none;
z-index: 2;
width: 100%;
.sidenav {
display: flex;
flex-direction: column;
flex: 1;
width: 240px;
min-width: 240px;
max-width: 240px;
height: auto;
z-index: 4;
overflow-y: hidden;
@include mat-elevation(7);
&.mat-is-locked-open {
background: none;
box-shadow: none;
}
.header {
height: $carded-header-height;
min-height: $carded-header-height;
max-height: $carded-header-height;
@include media-breakpoint-down('sm') {
height: $carded-header-height-sm;
min-height: $carded-header-height-sm;
max-height: $carded-header-height-sm;
}
}
.content {
background: transparent;
overflow: auto;
}
}
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1;
height: auto;
overflow: visible;
// Center
.center {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
z-index: 3;
margin-left: 32px;
margin-right: 32px;
.header {
display: flex;
height: $carded-header-height-without-toolbar;
min-height: $carded-header-height-without-toolbar;
max-height: $carded-header-height-without-toolbar;
@include media-breakpoint-down('sm') {
height: $carded-header-height-without-toolbar-sm;
min-height: $carded-header-height-without-toolbar-sm;
max-height: $carded-header-height-without-toolbar-sm;
}
}
.content-card {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
@include mat-elevation(7);
.toolbar {
display: flex;
justify-content: flex-start;
align-items: center;
flex: 1;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
height: $carded-toolbar-height;
min-height: $carded-toolbar-height;
max-height: $carded-toolbar-height;
.sidenav-toggle {
margin: 0 8px 0 0 !important;
padding: 0 !important;
border-radius: 0;
}
}
.content {
display: flex;
flex: 1;
overflow: auto;
}
}
}
}
}
// Tabbed
&.tabbed {
> mat-sidenav-container {
> .mat-sidenav-content,
> .mat-drawer-content {
width: calc(100% - 240px);
.center {
width: calc(100% - 32px);
@include media-breakpoint-down('md') {
width: calc(100% - 64px);
}
.header {
flex: 1;
}
.content-card {
.content {
.mat-tab-group {
overflow: hidden;
.mat-tab-header {
.mat-tab-label {
height: 64px;
}
}
.mat-tab-body {
overflow: hidden;
.mat-tab-body-content {
overflow: hidden;
.tab-content {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
}
}
}
}
}
}
}
}
}
}
// Left sidenav
&.left-sidenav {
// Sidenav
> mat-sidenav-container {
.sidenav {
&.mat-is-locked-open {
~ .mat-sidenav-content,
~ .mat-drawer-content {
.center {
margin-left: 0;
}
}
}
}
}
}
// Right sidenav
&.right-sidenav {
// Sidenav
> mat-sidenav-container {
.sidenav {
order: 999;
&.mat-is-locked-open {
~ .mat-sidenav-content,
~ .mat-drawer-content {
.center {
margin-right: 0;
}
}
}
}
}
}
}
// Simple layout
&.simple {
display: flex;
flex-direction: column;
flex: 1 0 auto;
width: 100%;
min-width: 100%;
// Top bg
> .header {
background-image: $top-bg-image;
background-size: cover;
}
// Fullwidth
&.fullwidth {
overflow: auto;
}
&.fullwidth,
&.inner-sidenav {
min-height: 100%;
> .header {
height: $header-height;
min-height: $header-height;
max-height: $header-height;
}
}
// Left sidenav - Right sidenav
&.left-sidenav,
&.right-sidenav {
// Single scroll
&.single-scroll {
> mat-sidenav-container {
flex: 1 0 auto;
> .mat-sidenav-content,
> .mat-drawer-content {
flex: 1 0 auto;
max-height: none;
}
}
}
// Inner Sidenav
&.inner-sidenav {
> mat-sidenav-container {
flex: 1;
.sidenav {
.sidenav-content {
height: 100%;
}
}
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
height: auto;
.center {
flex: 1;
min-height: 100%;
@include mat-elevation(0);
.content {
display: flex;
flex: 1 0 auto;
}
}
}
}
}
> mat-sidenav-container {
display: flex;
flex-direction: column;
flex: 1;
background: none;
z-index: 2;
width: 100%;
.sidenav {
width: 240px;
min-width: 240px;
max-width: 240px;
z-index: 51;
@include mat-elevation(7);
&.mat-is-locked-open {
width: 220px;
min-width: 220px;
max-width: 220px;
box-shadow: none;
background: transparent;
}
.sidenav-content {
height: 100%;
}
}
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1;
height: auto;
overflow: visible;
max-height: 100%;
.header {
height: $header-height;
min-height: $header-height;
max-height: $header-height;
background-image: $top-bg-image;
}
.center {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
@include mat-elevation(7);
.content {
}
}
}
}
}
// Tabbed
&.tabbed {
min-height: 100%;
.header {
height: $header-height;
min-height: $header-height;
max-height: $header-height;
}
> .content {
.mat-tab-group {
.mat-tab-labels {
padding: 0 24px;
}
}
}
}
}
// Blank layout
&.blank {
width: 100%;
min-height: 100%;
}
@include media-breakpoint-down('xs') {
// Activate single-scroll
&.carded {
&.fullwidth {
> .center {
flex: 1 0 auto;
max-height: none;
}
}
&.left-sidenav,
&.right-sidenav {
> mat-sidenav-container {
flex: 1 0 auto;
}
}
}
&.simple {
&.fullwidth {
> .content {
flex: 1 0 auto;
}
}
&.left-sidenav,
&.right-sidenav {
> mat-sidenav-container {
flex: 1 0 auto !important;
> .mat-sidenav-content,
> .mat-drawer-content {
flex: 1 0 auto;
}
}
}
}
// End - Activate single-scroll
// Smaller margins
&.carded {
&.fullwidth {
> .center {
padding: 0 16px;
}
}
&.left-sidenav,
&.right-sidenav {
> mat-sidenav-container {
> .mat-sidenav-content,
> .mat-drawer-content {
.center {
margin: 0 16px;
}
}
}
}
}
// End - Smaller margins
}
}
src/app/core/scss/partials/_print.scss
-65
View File
@@ -1,65 +0,0 @@
/*----------------------------------------------------------------*/
/* Print
/*----------------------------------------------------------------*/
@media all {
/* Never show page breaks in normal view */
.page-break-after,
.page-break-before {
display: none;
}
}
@media print {
/* html and body tweaks */
html, body {
height: auto !important;
overflow: initial !important;
}
/* Page breaks */
.page-break-after {
display: block;
page-break-after: always;
position: relative;
}
.page-break-before {
display: block;
page-break-before: always;
position: relative;
}
/* General styles */
fuse-root {
fuse-navbar-vertical,
fuse-navbar-horizontal,
fuse-toolbar,
fuse-footer,
fuse-quick-panel,
fuse-theme-options,
.ps > .ps__rail-x,
.ps > .ps__rail-y {
display: none !important;
}
.ps {
overflow: visible !important;
}
.mat-drawer-container,
.mat-sidenav-container {
background-color: white !important;
.mat-drawer-content,
.mat-sidenav-content {
overflow: initial !important;
height: auto !important
}
}
}
}
src/app/core/scss/partials/_reset.scss
-83
View File
@@ -1,83 +0,0 @@
/*----------------------------------------------------------------*/
/* Reset
/*----------------------------------------------------------------*/
* {
text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-webkit-text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
&:before, &:after {
box-sizing: border-box;
}
// Remove focus outline
&:focus {
outline: none;
}
}
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
// Reset non angular-material input's default browser/os styles
*:not(mat-input-container) {
> input {
border: none;
border-radius: 0;
padding: 0;
margin: 0;
}
> input[type="text"],
> input[type="tel"],
> input[type="email"],
> input[type="search"],
> input[type="password"],
> input[type="button"],
> button,
> input[type="submit"],
> input[type="image"],
> textarea {
appearance: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
}
}
*:not(mat-input-container) {
> input[type="button"],
> button,
> input[type="submit"] {
background: none;
}
}
button {
border-radius: 0;
font-family: inherit;
font-size: inherit;
padding: 0;
margin: 0;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
border: none;
}
src/app/core/scss/partials/_scrollbars.scss
-23
View File
@@ -1,23 +0,0 @@
body:not(.is-mobile) {
::-webkit-scrollbar {
width: 12px;
height: 12px;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar:hover {
background-color: rgba(0, 0, 0, 0.12);
}
::-webkit-scrollbar-thumb {
border: 2px solid transparent;
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
border-radius: 24px;
}
::-webkit-scrollbar-thumb:active {
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
border-radius: 24px;
}
}
src/app/core/scss/partials/_toolbar.scss
-9
View File
@@ -1,9 +0,0 @@
.toolbar {
.toolbar-separator {
height: 48px;
width: 1px;
border-right: 1px solid rgba(0, 0, 0, 0.12);
margin: 0 12px;
}
}
src/app/core/scss/partials/_typography.scss
-277
View File
@@ -1,277 +0,0 @@
html {
font-size: 62.5%;
font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
line-height: 1.4 !important;
letter-spacing: -0.1px !important;
}
body {
font-size: 14px;
}
html, body {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
// Headings
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: normal;
}
h1, .h1 {
font-size: 24px;
}
h2, .h2 {
font-size: 20px;
}
h3, .h3 {
font-size: 16px;
}
h4, .h4 {
font-size: 15px;
}
h5, .h5 {
font-size: 13px;
}
h6, .h6 {
font-size: 12px;
}
// Links
a {
color: mat-color($accent);
text-decoration: none;
&:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
&:hover, &:active {
text-decoration: underline;
}
}
}
// Abbr
abbr {
cursor: help;
border-bottom: 1px dotted rgba(0, 0, 0, 0.54);
}
// Blockquote
blockquote {
border-left: 3px solid rgba(0, 0, 0, 0.12);
font-style: italic;
margin: 1em 0;
padding-left: 16px;
footer {
font-style: normal;
&:before {
content: '\2014 \00A0';
}
}
&.reverse {
border-left: none;
border-right: 3px solid rgba(0, 0, 0, 0.12);
text-align: right;
padding-left: 0;
padding-right: 16px;
footer {
&:before {
content: '';
}
&:after {
content: '\2014 \00A0';
}
}
}
}
// Code
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;
}
}
// Definition lists
dl {
dt {
font-weight: bold;
}
dd {
margin: 4px 0 16px 0;
}
}
// Mark
mark {
background: #F7F49A;
}
// Pre
pre {
line-height: 1.6;
margin: 8px 16px;
white-space: pre-wrap;
}
// Small
small {
font-size: 80%;
}
// Table
table {
thead {
tr {
th {
text-align: left;
}
}
}
}
// Text format helpers
.text-italic {
font-style: italic;
}
.text-semibold {
font-weight: 600;
}
.text-bold,
strong {
font-weight: 700;
}
.text-strike {
text-decoration: line-through;
}
.text-super {
vertical-align: super;
}
.text-sub {
vertical-align: sub;
}
.text-capitalize {
text-transform: capitalize;
}
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
// Text align helpers
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
// Font weight helpers
@for $weight from 1 through 9 {
.font-weight-#{$weight * 100} {
font-weight: #{$weight * 100};
}
}
// Font size helpers
@for $size from 1 through 60 {
.font-size-#{$size * 2} {
font-size: #{$size * 2}px;
}
}
// Line height helpers
@for $lineHeight from 1 through 60 {
.line-height-#{$lineHeight * 2} {
line-height: #{$lineHeight * 2}px;
}
}
.line-height-1 {
line-height: 1;
}
.line-height-1\.25 {
line-height: 1.25;
}
.line-height-1\.50 {
line-height: 1.5;
}
.line-height-1\.75 {
line-height: 1.75;
}
// Boxed text
.text-boxed {
border-radius: 2px;
padding: 4px 8px;
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;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Nowrap
.text-nowrap {
white-space: nowrap;
}
src/app/core/scss/partials/plugins/_ng-pick-datetime.scss
-360
View File
@@ -1,360 +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;
}
.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%;
}
}
}
}
src/app/core/scss/partials/plugins/_ngx-color-picker.scss
-35
View File
@@ -1,35 +0,0 @@
@import "src/app/core/scss/fuse";
.color-picker {
height: auto !important;
border: none !important;
@include mat-elevation(4);
.preset-area {
padding: 0 0 16px 16px !important;
height: 140px;
overflow-y: auto;
overflow-x: hidden;
> hr {
display: none;
}
.preset-label {
display: none;
}
.preset-color {
display: block !important;
float: left !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
&:nth-child(14n+1) {
clear: both;
}
}
}
}
src/app/core/scss/partials/plugins/_ngx-datatable.scss
-165
View File
@@ -1,165 +0,0 @@
.ngx-datatable {
&.material {
@include mat-elevation(4);
.empty-row {
display: flex;
align-items: center;
line-height: 1;
height: 56px;
padding: 0 24px;
}
.datatable-header {
border: none;
min-height: 48px;
.datatable-header-cell {
display: inline-flex;
align-items: center;
line-height: 1;
min-height: 48px;
font-size: 13px;
padding: 0 24px;
}
}
.datatable-body {
display: flex;
flex: 1 0 auto;
.datatable-scroll {
display: flex;
flex-direction: column;
width: 100% !important;
}
.datatable-row-left,
.datatable-row-center,
.datatable-row-right {
min-height: 48px;
}
.datatable-row-wrapper {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
&:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.datatable-body-cell {
display: inline-flex;
align-items: center;
line-height: 1;
min-height: 48px;
transition: none;
padding: 0 24px;
overflow: hidden;
}
}
}
.datatable-footer {
border: none;
min-height: 56px;
.datatable-footer-inner {
padding: 0 24px;
@include media-breakpoint('sm') {
flex-direction: column;
padding: 16px 0;
height: auto !important;
.datatable-pager {
margin: 0 !important;
}
}
.page-count {
padding: 0;
}
.datatable-pager {
margin: 0 0 0 24px;
.pager {
li {
a {
text-decoration: none !important;
}
}
}
}
}
}
}
}
[class*="datatable-icon-"] {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.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";
}
src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
-12
View File
@@ -1,12 +0,0 @@
.ps {
position: relative;
> .ps__rail-x {
z-index: 99999;
}
> .ps__rail-y {
z-index: 99999;
left: auto !important;
}
}
src/app/core/scss/partials/plugins/_plugins.scss
-4
View File
@@ -1,4 +0,0 @@
@import "prism";
@import "perfect-scrollbar";
@import "ngx-datatable";
@import "ngx-color-picker";
src/app/core/scss/partials/plugins/_prism.scss
-269
View File
@@ -1,269 +0,0 @@
// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
$base00: #263238;
$base01: #2C393F;
$base02: #62727A;
$base03: #707880;
$base04: #C9CCD3;
$base05: #CDD3DE;
$base06: #D5DBE5;
$base07: #FFFFFF;
$base08: #EC5F67;
$base09: #EA9560;
$base0A: #FFCC00;
$base0B: #8BD649;
$base0C: #80CBC4;
$base0D: #89DDFF;
$base0E: #82AAFF;
$base0F: #EC5F67;
$red: $base08;
$orange: $base09;
$yellow: $base0A;
$green: $base0B;
$cyan: $base0C;
$blue: $base0D;
$violet: $base0E;
$magenta: $base0F;
$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
$code-font-size: 14px;
$code-line-height: 1.6;
$code-background: $base00;
$code-color: $base05;
$code-color-fade: $base05;
// $code-text-shadow: none;
$code-color-comment: $base02;
$code-color-keyword: $base0B;
$code-color-value: $base0C;
$code-color-attr-name: $base09;
$code-color-string: $base0C;
$code-color-name: $base0A;
$code-color-number: $base09;
$code-color-variable: $base0D;
$code-color-selector: $base0E;
$code-color-property: $base0A;
$code-color-important: $base08;
$code-color-tag: $base0D;
$code-color-atrule: $base0C;
// @import "../partials/prism";
/**
* Prism base code highlighter theme using Sass
*
* @author @MoOx
* https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
* slightly adapted by me, Bram de Haan
*/
// prism selector
$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
$code-selector-block: "pre[class*=\"language-\"]";
$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
// generic stuff
$code-font-family: Menlo, Monaco, "Courier New", monospace !default;
$code-font-size: 14px !default;
$code-line-height: 1.6 !default;
$code-tab-size: 4 !default;
$code-hyphens: none !default;
$code-block-padding: 12px !default;
$code-inline-padding: 2px 6px !default;
$code-border-radius: 0 !default;
$code-border: none !default;
$code-background: #2A2A2A !default;
$code-color: #FFF !default;
$code-color-fade: #BEBEC5 !default;
// $code-text-shadow: 0 1px 0 #000 !default;
$code-box-shadow: none !default;
$code-color-property: #B58900 !default;
$code-color-important: #CB4B16 !default;
$code-color-tag: #268BD2 !default;
$code-color-atrule: #2AA198 !default;
$code-color-attr-name: #B65611 !default;
// $code-linenums-padding: 7px !default;
// $code-linenums-width: 40px !default;
// $code-linenums-background: #444 !default;
// $code-linenums-border-color: #555 !default;
// $code-linenums-border-width: 1px !default;
@if $code-selector != null {
#{$code-selector} {
-moz-tab-size: $code-tab-size;
-o-tab-size: $code-tab-size;
tab-size: $code-tab-size;
-webkit-hyphens: $code-hyphens;
-moz-hyphens: $code-hyphens;
-ms-hyphens: $code-hyphens;
hyphens: $code-hyphens;
// whitespace management
white-space: pre; // fallback
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
font-family: $code-font-family;
font-size: $code-font-size;
line-height: $code-line-height;
color: $code-color;
// text-shadow: $code-text-shadow;
background: $code-background;
}
}
%code-background {
border-radius: $code-border-radius;
border: $code-border;
box-shadow: $code-box-shadow;
}
@if $code-selector-block != null {
#{$code-selector-block} {
@extend %code-background;
padding: $code-block-padding;
}
}
@if $code-selector-inline != null {
#{$code-selector-inline} {
@extend %code-background;
padding: $code-inline-padding;
}
}
// pre[class*="language-"],
// :not(pre) > code[class*="language-"] {
// background: $code-background;
// }
// prism tokens
//
$code-color-comment: null !default;
$code-color-keyword: null !default;
$code-color-value: null !default;
$code-color-string: null !default;
$code-color-name: null !default;
$code-color-number: null !default;
$code-color-variable: null !default;
$code-color-selector: null !default;
$code-color-punctuation: $code-color-fade !default;
#{$code-selector} {
.namespace {
opacity: .7;
}
.token {
&.comment,
&.prolog,
&.doctype,
&.cdata {
color: $code-color-comment;
}
&.null,
&.operator,
&.boolean,
&.number {
color: $code-color-number;
}
&.string {
color: $code-color-string;
}
&.attr-name {
color: $code-color-attr-name;
}
&.entity,
&.url,
.language-css &.string,
.style &.string {
color: $code-color-string;
}
&.selector {
color: $code-color-selector;
}
&.attr-value,
&.keyword,
&.control,
&.directive,
&.unit {
color: $code-color-keyword;
}
&.important {
color: $code-color-important;
}
&.atrule {
color: $code-color-atrule;
}
&.regex,
&.statement {
color: $code-color-value;
}
&.placeholder,
&.variable {
color: $code-color-variable;
}
&.property,
&.tag {
// font-style: italic;
}
&.property {
color: $code-color-property;
}
&.tag {
color: $code-color-tag;
}
&.important,
&.statement {
font-weight: bold;
}
// todo ?
// &.mixin
// &.gradient
// &.abslength
// &.easing
// &.time
// &.angle
// &.fontfamily
// ruby/vim https://github.com/LeaVerou/prism/pull/18
// &.inst-var
// &.builtin
// &.const
// &.symbol
//
// php https://github.com/LeaVerou/prism/pull/20
// &.deliminator
// &.function
&.punctuation {
color: $code-color-punctuation;
}
&.entity {
cursor: help;
}
// for dev :)
&.debug {
color: red
}
}
}
src/app/core/scss/variables/_theme.scss
-59
View File
@@ -1,59 +0,0 @@
@import '~@angular/material/theming';
$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,
)
);
// Palettes
$primary: mat-palette($mat-fusedark);
$accent: mat-palette($mat-light-blue, 600, 400, 700);
$warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
src/app/core/services/config.service.ts
-77
View File
@@ -1,77 +0,0 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { NavigationStart, Router } from '@angular/router';
import { Platform } from '@angular/cdk/platform';
@Injectable()
export class FuseConfigService
{
settings: any;
defaultSettings: any;
onSettingsChanged: BehaviorSubject<any>;
/**
* @param router
* @param platform
*/
constructor(
private router: Router,
public platform: Platform
)
{
// Set the default settings
this.defaultSettings = {
layout : {
navigation : 'left', // 'right', 'left', 'top', 'none'
navigationFolded: false, // true, false
toolbar : 'below', // 'above', 'below', 'none'
footer : 'below', // 'above', 'below', 'none'
mode : 'fullwidth' // 'boxed', 'fullwidth'
},
colorClasses : {
toolbar: 'mat-white-500-bg',
navbar : 'mat-fuse-dark-700-bg',
footer : 'mat-fuse-dark-900-bg'
},
customScrollbars: true,
routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
};
/**
* Disable Custom Scrollbars if Browser is Mobile
*/
if ( this.platform.ANDROID || this.platform.IOS )
{
this.defaultSettings.customScrollbars = false;
}
// Set the settings from the default settings
this.settings = Object.assign({}, this.defaultSettings);
// Reload the default settings on every navigation start
router.events.subscribe(
(event) => {
if ( event instanceof NavigationStart )
{
this.setSettings({layout: this.defaultSettings.layout});
}
}
);
// Create the behavior subject
this.onSettingsChanged = new BehaviorSubject(this.settings);
}
/**
* Sets settings
* @param settings
*/
setSettings(settings)
{
// Set the settings from the given object
this.settings = Object.assign({}, this.settings, settings);
// Trigger the event
this.onSettingsChanged.next(this.settings);
}
}

Some files were not shown because too many files have changed in this diff Show More