mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-24 17:17:13 +00:00
Compare commits
23 Commits
v5.2.9
...
v1.1.1-ske
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1d81e37a0f | ||
|
|
83f0ed5ec1 | ||
|
|
e486413872 | ||
|
|
576e167ef1 | ||
|
|
cf9e9fc209 | ||
|
|
ff0f2933d9 | ||
|
|
62467c8ddf | ||
|
|
024ab15b25 | ||
|
|
915ad52863 | ||
|
|
97bfaa9979 | ||
|
|
6ae3e154c3 | ||
|
|
49b6ff7292 | ||
|
|
903688ab43 | ||
|
|
19f822cbab | ||
|
|
1d21a14d0e | ||
|
|
4bf2ba73ad | ||
|
|
6a3972fff8 | ||
|
|
dca16238eb | ||
|
|
2b91119d00 | ||
|
|
ff4899e8d2 | ||
|
|
e818c53f1d | ||
|
|
ca96fffadf | ||
|
|
d7003711ee |
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"name": "fuse"
|
||||
"name": "fuse2"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
@@ -9,7 +9,6 @@
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"app/main/content/components/angular-material",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
@@ -38,28 +37,13 @@
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json",
|
||||
"exclude": [
|
||||
"**/node_modules/**",
|
||||
"**/src/app/fuse-fake-db/**/*",
|
||||
"**/src/assets/angular-material-examples/**/*"
|
||||
]
|
||||
"project": "src/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json",
|
||||
"exclude": [
|
||||
"**/node_modules/**",
|
||||
"**/src/app/fuse-fake-db/**/*",
|
||||
"**/src/assets/angular-material-examples/**/*"
|
||||
]
|
||||
"project": "src/tsconfig.spec.json"
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json",
|
||||
"exclude": [
|
||||
"**/node_modules/**",
|
||||
"**/src/app/fuse-fake-db/**/*",
|
||||
"**/src/assets/angular-material-examples/**/*"
|
||||
]
|
||||
"project": "e2e/tsconfig.e2e.json"
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
# Fuse2
|
||||
|
||||
Material Design Admin Template with Angular 5+ and Angular Material 2
|
||||
|
||||
## The Community
|
||||
|
||||
Share your ideas, discuss Fuse and help each other.
|
||||
|
||||
[Click here](http://fusetheme.com/community) to see our Community page.
|
||||
Material Design Admin Template with Angular 4+ and Angular Material 2
|
||||
|
||||
## Development server
|
||||
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { Fuse2Page } from './app.po';
|
||||
|
||||
describe('Fuse2 App', () => {
|
||||
let page: Fuse2Page;
|
||||
describe('fuse2 App', () => {
|
||||
let page: Fuse2Page;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new Fuse2Page();
|
||||
});
|
||||
beforeEach(() => {
|
||||
page = new Fuse2Page();
|
||||
});
|
||||
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('Welcome to app!');
|
||||
});
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('Welcome to app!!');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { browser, by, element } from 'protractor';
|
||||
|
||||
export class Fuse2Page {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,12 +2,10 @@
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"baseUrl": "./",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"jasminewd2",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
// https://karma-runner.github.io/0.13/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular/cli'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular/cli/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
reports: [ 'html', 'lcovonly' ],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
angularCli: {
|
||||
environment: 'dev'
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular/cli'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular/cli/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
reports: [ 'html', 'lcovonly' ],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
angularCli: {
|
||||
environment: 'dev'
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
|
||||
10361
package-lock.json
generated
10361
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
118
package.json
118
package.json
@@ -1,85 +1,75 @@
|
||||
{
|
||||
"name": "fuse",
|
||||
"version": "5.2.9",
|
||||
"license": "https://themeforest.net/licenses/terms/regular",
|
||||
"name": "fuse2",
|
||||
"version": "1.1.1",
|
||||
"license": "",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --open",
|
||||
"start": "ng serve",
|
||||
"start-hmr": "ng serve --hmr -e=hmr -sm=false",
|
||||
"start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
|
||||
"build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
|
||||
"build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
|
||||
"build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
|
||||
"build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
|
||||
"build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build",
|
||||
"build-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "1.0.0-beta.2",
|
||||
"@angular/animations": "5.2.8",
|
||||
"@angular/cdk": "5.2.4",
|
||||
"@angular/common": "5.2.8",
|
||||
"@angular/compiler": "5.2.8",
|
||||
"@angular/core": "5.2.8",
|
||||
"@angular/flex-layout": "5.0.0-beta.13",
|
||||
"@angular/forms": "5.2.8",
|
||||
"@angular/http": "5.2.8",
|
||||
"@angular/material": "5.2.4",
|
||||
"@angular/material-moment-adapter": "5.2.4",
|
||||
"@angular/platform-browser": "5.2.8",
|
||||
"@angular/platform-browser-dynamic": "5.2.8",
|
||||
"@angular/router": "5.2.8",
|
||||
"@ngrx/effects": "5.2.0",
|
||||
"@ngrx/router-store": "5.2.0",
|
||||
"@ngrx/store": "5.2.0",
|
||||
"@ngrx/store-devtools": "5.2.0",
|
||||
"@ngx-translate/core": "9.1.1",
|
||||
"@swimlane/ngx-charts": "7.1.1",
|
||||
"@swimlane/ngx-datatable": "11.2.0",
|
||||
"@swimlane/ngx-dnd": "3.1.0",
|
||||
"@types/prismjs": "1.9.0",
|
||||
"angular-calendar": "0.23.6",
|
||||
"angular-in-memory-web-api": "0.5.3",
|
||||
"chart.js": "2.7.2",
|
||||
"@angular/animations": "4.4.3",
|
||||
"@angular/cdk": "2.0.0-beta.11",
|
||||
"@angular/common": "4.4.3",
|
||||
"@angular/compiler": "4.4.3",
|
||||
"@angular/core": "4.4.3",
|
||||
"@angular/flex-layout": "2.0.0-beta.9",
|
||||
"@angular/forms": "4.4.3",
|
||||
"@angular/http": "4.4.3",
|
||||
"@angular/material": "2.0.0-beta.11",
|
||||
"@angular/platform-browser": "4.4.3",
|
||||
"@angular/platform-browser-dynamic": "4.4.3",
|
||||
"@angular/router": "4.4.3",
|
||||
"@swimlane/ngx-charts": "6.0.2",
|
||||
"@swimlane/ngx-datatable": "9.3.1",
|
||||
"@swimlane/ngx-dnd": "3.0.0",
|
||||
"angular-calendar": "0.19.0",
|
||||
"angular-in-memory-web-api": "0.4.6",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"core-js": "2.5.3",
|
||||
"d3": "4.13.0",
|
||||
"core-js": "2.5.0",
|
||||
"d3": "4.10.0",
|
||||
"hammerjs": "2.0.8",
|
||||
"highlight.js": "9.12.0",
|
||||
"intl": "1.2.5",
|
||||
"moment": "2.21.0",
|
||||
"ng2-charts": "1.6.0",
|
||||
"ngrx-store-freeze": "0.2.1",
|
||||
"ngx-color-picker": "5.3.4",
|
||||
"ngx-cookie-service": "1.0.10",
|
||||
"perfect-scrollbar": "1.3.0",
|
||||
"prismjs": "1.11.0",
|
||||
"rxjs": "5.5.6",
|
||||
"md2": "0.0.28",
|
||||
"moment": "2.18.1",
|
||||
"ngx-color-picker": "4.3.1",
|
||||
"ngx-cookie-service": "1.0.7",
|
||||
"ngx-perfect-scrollbar": "4.6.2",
|
||||
"perfect-scrollbar": "0.8.1",
|
||||
"rxjs": "5.4.3",
|
||||
"web-animations-js": "2.3.1",
|
||||
"zone.js": "0.8.20"
|
||||
"zone.js": "0.8.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.7.3",
|
||||
"@angular/compiler-cli": "5.2.8",
|
||||
"@angular/language-service": "5.2.8",
|
||||
"@angular/cli": "1.4.2",
|
||||
"@angular/compiler-cli": "4.4.3",
|
||||
"@angular/language-service": "4.4.3",
|
||||
"@angularclass/hmr": "2.1.3",
|
||||
"@types/jasmine": "2.8.6",
|
||||
"@types/jasminewd2": "2.0.3",
|
||||
"@types/node": "6.0.101",
|
||||
"codelyzer": "4.2.1",
|
||||
"jasmine-core": "2.8.0",
|
||||
"jasmine-spec-reporter": "4.2.1",
|
||||
"karma": "2.0.0",
|
||||
"karma-chrome-launcher": "2.2.0",
|
||||
"karma-coverage-istanbul-reporter": "1.4.2",
|
||||
"karma-jasmine": "1.1.1",
|
||||
"@ngtools/webpack": "1.7.1",
|
||||
"@types/jasmine": "2.6.0",
|
||||
"@types/jasminewd2": "2.0.2",
|
||||
"@types/node": "6.0.88",
|
||||
"codelyzer": "3.0.1",
|
||||
"jasmine-core": "2.6.2",
|
||||
"jasmine-spec-reporter": "4.1.0",
|
||||
"karma": "1.7.1",
|
||||
"karma-chrome-launcher": "2.1.1",
|
||||
"karma-cli": "1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "1.2.1",
|
||||
"karma-jasmine": "1.1.0",
|
||||
"karma-jasmine-html-reporter": "0.2.2",
|
||||
"node-sass": "4.5.3",
|
||||
"protractor": "5.1.2",
|
||||
"ts-node": "4.1.0",
|
||||
"tslint": "5.9.1",
|
||||
"typescript": "2.6.2",
|
||||
"webpack-bundle-analyzer": "2.11.1"
|
||||
"ts-node": "3.0.4",
|
||||
"tslint": "5.3.2",
|
||||
"typescript": "2.3.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,25 +4,25 @@
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./e2e/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e/tsconfig.e2e.json'
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./e2e/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e/tsconfig.e2e.json'
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Component } 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
|
||||
{
|
||||
public confirmMessage: string;
|
||||
|
||||
constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatDialogModule } from '@angular/material';
|
||||
|
||||
import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseConfirmDialogComponent
|
||||
],
|
||||
imports: [
|
||||
MatDialogModule,
|
||||
MatButtonModule
|
||||
],
|
||||
entryComponents: [
|
||||
FuseConfirmDialogComponent
|
||||
],
|
||||
})
|
||||
export class FuseConfirmDialogModule
|
||||
{
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FuseCountdownComponent } from '@fuse/components/countdown/countdown.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseCountdownComponent
|
||||
],
|
||||
exports: [
|
||||
FuseCountdownComponent
|
||||
],
|
||||
})
|
||||
export class FuseCountdownModule
|
||||
{
|
||||
}
|
||||
@@ -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>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec,
|
||||
auctor venenatis nisl. Suspendisse potenti. Nullam sagittis nulla in diam finibus, sed pharetra velit
|
||||
vestibulum. Suspendisse euismod in urna eu posuere.
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus
|
||||
et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante
|
||||
sollicitudin. Donec viverra augue dolor, a venenatis tellus consectetur sit amet.
|
||||
</p>
|
||||
<footer>
|
||||
John Doe
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi. Nam imperdiet est
|
||||
nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et gravida. In hac
|
||||
habitasse platea dictumst.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
In et placerat eros, eu tempor turpis. Curabitur ac felis finibus, elementum lectus vitae, venenatis est.
|
||||
Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel erat condimentum tristique vel vel mi.
|
||||
Nulla id euismod mi, et mollis tellus.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti
|
||||
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae sagittis odio.
|
||||
Suspendisse ullamcorper nunc non pellentesque laoreet. Curabitur eu tortor id quam pretium mattis. Proin ut quam
|
||||
velit.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna,
|
||||
in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet
|
||||
feugiat, sagittis nec ipsum. Quisque dapibus mollis felis non tristique.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit
|
||||
ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non
|
||||
sagittis augue. Sed venenatis rhoncus enim eget ornare. Donec viverra sed felis at venenatis. Mauris aliquam
|
||||
fringilla nulla, sit amet congue felis dignissim at.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit
|
||||
eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit
|
||||
iaculis metus. Praesent pulvinar quam eu leo consectetur faucibus. Vestibulum purus diam, gravida sagittis
|
||||
feugiat sit amet, tincidunt in ligula. Sed semper vestibulum magna. Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec, auctor venenatis nisl. Suspendisse potenti.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Nullam sagittis nulla in diam finibus, sed pharetra velit vestibulum. Suspendisse euismod in urna eu posuere.
|
||||
Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel
|
||||
lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor
|
||||
id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec
|
||||
viverra augue dolor, a venenatis tellus consectetur sit amet...
|
||||
</p>
|
||||
</div>
|
||||
<!-- / DEMO CONTENT -->
|
||||
@@ -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>
|
||||
@@ -1,6 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
background: #263238;
|
||||
cursor: text;
|
||||
}
|
||||
@@ -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>';
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseHighlightComponent
|
||||
],
|
||||
exports: [
|
||||
FuseHighlightComponent
|
||||
],
|
||||
})
|
||||
export class FuseHighlightModule
|
||||
{
|
||||
}
|
||||
@@ -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';
|
||||
@@ -1,11 +0,0 @@
|
||||
export * from './confirm-dialog/confirm-dialog.module';
|
||||
export * from './countdown/countdown.module';
|
||||
export * from './demo/demo.module';
|
||||
export * from './highlight/highlight.module';
|
||||
export * from './material-color-picker/material-color-picker.module';
|
||||
export * from './navigation/navigation.module';
|
||||
export * from './search-bar/search-bar.module';
|
||||
export * from './shortcuts/shortcuts.module';
|
||||
export * from './sidebar/sidebar.module';
|
||||
export * from './theme-options/theme-options.module';
|
||||
export * from './widget/widget.module';
|
||||
@@ -1,70 +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)="$event.stopPropagation();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'">
|
||||
|
||||
<div fxLayout="row wrap" 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'" >
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
|
||||
<div class="color" *ngFor="let hue of hues"
|
||||
[fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
|
||||
[ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
|
||||
(click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
|
||||
<span class="label">
|
||||
{{hue}}
|
||||
</span>
|
||||
<mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</mat-menu>
|
||||
@@ -1,33 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material';
|
||||
|
||||
import { FusePipesModule } from '@fuse/pipes/pipes.module';
|
||||
|
||||
import { FuseMaterialColorPickerComponent } from '@fuse/components/material-color-picker/material-color-picker.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseMaterialColorPickerComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatRippleModule,
|
||||
|
||||
FusePipesModule
|
||||
],
|
||||
exports: [
|
||||
FuseMaterialColorPickerComponent
|
||||
],
|
||||
})
|
||||
export class FuseMaterialColorPickerModule
|
||||
{
|
||||
}
|
||||
@@ -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>
|
||||
@@ -1,12 +0,0 @@
|
||||
@import 'src/@fuse/scss/fuse';
|
||||
|
||||
fuse-navigation {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
|
||||
#main-navigation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-navigation',
|
||||
templateUrl : './navigation.component.html',
|
||||
styleUrls : ['./navigation.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseNavigationComponent
|
||||
{
|
||||
@Input() layout = 'vertical';
|
||||
@Input() navigation: any;
|
||||
|
||||
constructor()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import { EventEmitter, Injectable } from '@angular/core';
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
|
||||
@Injectable()
|
||||
export class FuseNavigationService
|
||||
{
|
||||
flatNavigation: any[] = [];
|
||||
|
||||
onItemCollapsed: Subject<any> = new Subject;
|
||||
onItemCollapseToggled: Subject<any> = new Subject;
|
||||
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* Get flattened navigation array
|
||||
* @param navigation
|
||||
* @returns {any[]}
|
||||
*/
|
||||
getFlatNavigation(navigation)
|
||||
{
|
||||
for ( const navItem of navigation )
|
||||
{
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<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>
|
||||
|
||||
</ng-container>
|
||||
@@ -1,15 +0,0 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<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>
|
||||
|
||||
</ng-container>
|
||||
@@ -1,22 +0,0 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<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>
|
||||
|
||||
</ng-container>
|
||||
@@ -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>
|
||||
@@ -1,38 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatTooltipModule } from '@angular/material';
|
||||
import { CookieService } from 'ngx-cookie-service';
|
||||
|
||||
import { FuseShortcutsComponent } from './shortcuts.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseShortcutsComponent
|
||||
],
|
||||
imports : [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatDividerModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatMenuModule,
|
||||
MatListModule,
|
||||
MatTooltipModule
|
||||
],
|
||||
exports : [
|
||||
FuseShortcutsComponent
|
||||
],
|
||||
providers : [
|
||||
CookieService
|
||||
]
|
||||
})
|
||||
export class FuseShortcutsModule
|
||||
{
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<ng-content></ng-content>
|
||||
@@ -1,59 +0,0 @@
|
||||
fuse-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
max-width: 280px;
|
||||
z-index: 1000;
|
||||
transition-property: transform, width, min-width, max-width;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
|
||||
|
||||
&.left-aligned {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&.right-aligned {
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&.locked-open {
|
||||
position: relative !important;
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
|
||||
&.folded {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&:not(.unfolded) {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
max-width: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-sidebar-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -1,375 +0,0 @@
|
||||
import { Component, ElementRef, HostBinding, HostListener, Inject, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
|
||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
import { ObservableMedia } from '@angular/flex-layout';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
import { FuseSidebarService } from './sidebar.service';
|
||||
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-sidebar',
|
||||
templateUrl : './sidebar.component.html',
|
||||
styleUrls : ['./sidebar.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
{
|
||||
// Name
|
||||
@Input()
|
||||
name: string;
|
||||
|
||||
// Align
|
||||
@Input()
|
||||
align: string;
|
||||
|
||||
// Open
|
||||
@HostBinding('class.open')
|
||||
opened: boolean;
|
||||
|
||||
// Locked Open
|
||||
@Input()
|
||||
lockedOpen: string;
|
||||
|
||||
// isLockedOpen
|
||||
@HostBinding('class.locked-open')
|
||||
isLockedOpen: boolean;
|
||||
|
||||
// Folded
|
||||
@HostBinding('class.folded')
|
||||
@Input()
|
||||
set folded(value)
|
||||
{
|
||||
this._folded = value;
|
||||
|
||||
if ( value )
|
||||
{
|
||||
this.fold();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.unfold();
|
||||
}
|
||||
}
|
||||
|
||||
get folded()
|
||||
{
|
||||
return this._folded;
|
||||
}
|
||||
|
||||
// Folded unfolded
|
||||
@HostBinding('class.unfolded')
|
||||
unfolded: boolean;
|
||||
|
||||
// Private
|
||||
private _folded = false;
|
||||
private _wasActive: boolean;
|
||||
private _backdrop: HTMLElement | null = null;
|
||||
private _player: AnimationPlayer;
|
||||
private _matchMediaWatcher: Subscription;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param renderer
|
||||
* @param elementRef
|
||||
* @param animationBuilder
|
||||
* @param sidebarService
|
||||
* @param matchMedia
|
||||
* @param media
|
||||
* @param document
|
||||
*/
|
||||
constructor(
|
||||
private renderer: Renderer2,
|
||||
private elementRef: ElementRef,
|
||||
private animationBuilder: AnimationBuilder,
|
||||
private sidebarService: FuseSidebarService,
|
||||
private matchMedia: FuseMatchMediaService,
|
||||
private media: ObservableMedia,
|
||||
@Inject(DOCUMENT) private document: any
|
||||
)
|
||||
{
|
||||
// Set the defaults
|
||||
this.opened = false;
|
||||
this.folded = false;
|
||||
this.align = 'left';
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Register the sidebar
|
||||
this.sidebarService.register(this.name, this);
|
||||
|
||||
// Setup alignment
|
||||
this._setupAlignment();
|
||||
|
||||
// Setup lockedOpen
|
||||
this._setupLockedOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unregister the sidebar
|
||||
this.sidebarService.unregister(this.name);
|
||||
|
||||
// Unregister the media watcher
|
||||
this._matchMediaWatcher.unsubscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup the alignment
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _setupAlignment(): void
|
||||
{
|
||||
if ( this.align === 'left' )
|
||||
{
|
||||
this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
|
||||
}
|
||||
else
|
||||
{
|
||||
this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup the lockedOpen handler
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _setupLockedOpen(): void
|
||||
{
|
||||
// Return if the lockedOpen wasn't set
|
||||
if ( !this.lockedOpen )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the wasActive for the first time
|
||||
this._wasActive = false;
|
||||
|
||||
// Act on every media change
|
||||
this._matchMediaWatcher =
|
||||
|
||||
this.matchMedia.onMediaChange.subscribe(() => {
|
||||
|
||||
// Get the active status
|
||||
const isActive = this.media.isActive(this.lockedOpen);
|
||||
|
||||
// If the both status are the same, don't act
|
||||
if ( this._wasActive === isActive )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Store the new active status
|
||||
this._wasActive = isActive;
|
||||
|
||||
// Activate the lockedOpen
|
||||
if ( isActive )
|
||||
{
|
||||
// Set the lockedOpen status
|
||||
this.isLockedOpen = true;
|
||||
}
|
||||
// De-Activate the lockedOpen
|
||||
else
|
||||
{
|
||||
// Set the lockedOpen status
|
||||
this.isLockedOpen = false;
|
||||
|
||||
// Unfold the sidebar in case if it was folded
|
||||
this.unfold();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the sidebar
|
||||
*/
|
||||
open(): void
|
||||
{
|
||||
if ( this.opened || this.isLockedOpen )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Show the backdrop
|
||||
this.showBackdrop();
|
||||
|
||||
// Set the opened status
|
||||
this.opened = true;
|
||||
|
||||
// Add a css class to the body
|
||||
this.renderer.addClass(this.document.body, 'fuse-sidebar-opened');
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the sidebar
|
||||
*/
|
||||
close(): void
|
||||
{
|
||||
if ( !this.opened )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide the backdrop
|
||||
this.hideBackdrop();
|
||||
|
||||
// Set the opened status
|
||||
this.opened = false;
|
||||
|
||||
// Remove the css class from the body
|
||||
this.renderer.removeClass(this.document.body, 'fuse-sidebar-opened');
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle open/close the sidebar
|
||||
*/
|
||||
toggleOpen(): void
|
||||
{
|
||||
if ( this.opened )
|
||||
{
|
||||
this.close();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mouseenter
|
||||
*/
|
||||
@HostListener('mouseenter')
|
||||
onMouseEnter(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfolded = true;
|
||||
|
||||
// Add a css class to the body
|
||||
this.renderer.addClass(this.document.body, 'fuse-sidebar-folded-unfolded');
|
||||
}
|
||||
|
||||
/**
|
||||
* Mouseleave
|
||||
*/
|
||||
@HostListener('mouseleave')
|
||||
onMouseLeave(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Fold the sidebar back
|
||||
this.unfolded = false;
|
||||
|
||||
// Remove the css class from the body
|
||||
this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded-unfolded');
|
||||
}
|
||||
|
||||
/**
|
||||
* Fold the sidebar permanently
|
||||
*/
|
||||
fold(): void
|
||||
{
|
||||
// Add a css class to the body
|
||||
this.renderer.addClass(this.document.body, 'fuse-sidebar-folded');
|
||||
}
|
||||
|
||||
/**
|
||||
* Unfold the sidebar permanently
|
||||
*/
|
||||
unfold(): void
|
||||
{
|
||||
// Remove the css class from the body
|
||||
this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded');
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the sidebar fold/unfold permanently
|
||||
*/
|
||||
toggleFold(): void
|
||||
{
|
||||
this.folded = !this.folded;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the backdrop
|
||||
*/
|
||||
showBackdrop(): void
|
||||
{
|
||||
// Create the backdrop element
|
||||
this._backdrop = this.renderer.createElement('div');
|
||||
|
||||
// Add a class to the backdrop element
|
||||
this._backdrop.classList.add('fuse-sidebar-overlay');
|
||||
|
||||
// Append the backdrop to the parent of the sidebar
|
||||
this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this._backdrop);
|
||||
|
||||
// Create the enter animation and attach it to the player
|
||||
this._player =
|
||||
this.animationBuilder
|
||||
.build([
|
||||
animate('300ms ease', style({opacity: 1}))
|
||||
]).create(this._backdrop);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Add an event listener to the overlay
|
||||
this._backdrop.addEventListener('click', () => {
|
||||
this.close();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the backdrop
|
||||
*/
|
||||
hideBackdrop(): void
|
||||
{
|
||||
if ( !this._backdrop )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the leave animation and attach it to the player
|
||||
this._player =
|
||||
this.animationBuilder
|
||||
.build([
|
||||
animate('300ms ease', style({opacity: 0}))
|
||||
]).create(this._backdrop);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
|
||||
// If the backdrop still exists...
|
||||
if ( this._backdrop )
|
||||
{
|
||||
// Remove the backdrop
|
||||
this._backdrop.parentNode.removeChild(this._backdrop);
|
||||
this._backdrop = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FuseSidebarComponent } from './sidebar.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseSidebarComponent
|
||||
],
|
||||
exports : [
|
||||
FuseSidebarComponent
|
||||
]
|
||||
})
|
||||
export class FuseSidebarModule
|
||||
{
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { FuseSidebarComponent } from './sidebar.component';
|
||||
|
||||
@Injectable()
|
||||
export class FuseSidebarService
|
||||
{
|
||||
// Private
|
||||
private _registry: { [key: string]: FuseSidebarComponent } = {};
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the sidebar to the registry
|
||||
*
|
||||
* @param key
|
||||
* @param sidebar
|
||||
*/
|
||||
register(key, sidebar): void
|
||||
{
|
||||
// Check if the key already being used
|
||||
if ( this._registry[key] )
|
||||
{
|
||||
console.error(`The sidebar with the key '${key}' already exists. Either unregister it first or use a unique key.`);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Add to the registry
|
||||
this._registry[key] = sidebar;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the sidebar from the registry
|
||||
*
|
||||
* @param key
|
||||
*/
|
||||
unregister(key): void
|
||||
{
|
||||
// Check if the sidebar exists
|
||||
if ( !this._registry[key] )
|
||||
{
|
||||
console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
|
||||
}
|
||||
|
||||
// Unregister the sidebar
|
||||
delete this._registry[key];
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the sidebar with the given key
|
||||
*
|
||||
* @param key
|
||||
*/
|
||||
getSidebar(key): any
|
||||
{
|
||||
// Check if the sidebar exists
|
||||
if ( !this._registry[key] )
|
||||
{
|
||||
console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Return the sidebar
|
||||
return this._registry[key];
|
||||
}
|
||||
}
|
||||
@@ -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)]="config.layout.navigation" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
|
||||
<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)]="config.layout.navigationFolded"
|
||||
(change)="onSettingsChange()">
|
||||
Folded
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Toolbar:</h3>
|
||||
<mat-radio-group [(ngModel)]="config.layout.toolbar" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
|
||||
<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)]="config.layout.footer" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
|
||||
<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)]="config.layout.mode" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
|
||||
<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)]="config.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)]="config.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)]="config.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)]="config.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>
|
||||
@@ -1,37 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
|
||||
|
||||
import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
|
||||
import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseThemeOptionsComponent
|
||||
],
|
||||
imports : [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatDividerModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatOptionModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule,
|
||||
MatSlideToggleModule,
|
||||
|
||||
FuseMaterialColorPickerModule
|
||||
],
|
||||
exports : [
|
||||
FuseThemeOptionsComponent
|
||||
]
|
||||
})
|
||||
export class FuseThemeOptionsModule
|
||||
{
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { Directive, ElementRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseWidgetToggle]'
|
||||
})
|
||||
export class FuseWidgetToggleDirective
|
||||
{
|
||||
constructor(public el: ElementRef)
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FuseIfOnDomDirective } from '@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive';
|
||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseIfOnDomDirective,
|
||||
FuseMatSidenavHelperDirective,
|
||||
FuseMatSidenavTogglerDirective,
|
||||
FusePerfectScrollbarDirective
|
||||
],
|
||||
imports : [],
|
||||
exports : [
|
||||
FuseIfOnDomDirective,
|
||||
FuseMatSidenavHelperDirective,
|
||||
FuseMatSidenavTogglerDirective,
|
||||
FusePerfectScrollbarDirective
|
||||
]
|
||||
})
|
||||
export class FuseDirectivesModule
|
||||
{
|
||||
}
|
||||
@@ -1,83 +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 { FuseMatchMediaService } from '@fuse/services/match-media.service';
|
||||
import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.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: FuseMatchMediaService,
|
||||
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();
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
|
||||
|
||||
import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
|
||||
import { FuseCopierService } from '@fuse/services/copier.service';
|
||||
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
|
||||
import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
|
||||
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
|
||||
|
||||
@NgModule({
|
||||
entryComponents: [],
|
||||
providers : [
|
||||
FuseConfigService,
|
||||
FuseCopierService,
|
||||
FuseMatchMediaService,
|
||||
FuseMatSidenavHelperService,
|
||||
FuseNavigationService,
|
||||
FuseSidebarService,
|
||||
FuseSplashScreenService,
|
||||
FuseTranslationLoaderService
|
||||
]
|
||||
})
|
||||
export class FuseModule
|
||||
{
|
||||
constructor(@Optional() @SkipSelf() parentModule: FuseModule)
|
||||
{
|
||||
if ( parentModule )
|
||||
{
|
||||
throw new Error('FuseModule is already loaded. Import it in the AppModule only!');
|
||||
}
|
||||
}
|
||||
|
||||
static forRoot(config): ModuleWithProviders
|
||||
{
|
||||
return {
|
||||
ngModule : FuseModule,
|
||||
providers: [
|
||||
{
|
||||
provide : FUSE_CONFIG,
|
||||
useValue: config
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
|
||||
import { NavigationStart, Router } from '@angular/router';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
|
||||
// Define the default config
|
||||
const DEFAULT_CONFIG = {
|
||||
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
|
||||
};
|
||||
|
||||
// Create the injection token for the custom config
|
||||
export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
|
||||
|
||||
@Injectable()
|
||||
export class FuseConfigService
|
||||
{
|
||||
config: any;
|
||||
defaultConfig: any;
|
||||
|
||||
onConfigChanged: BehaviorSubject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param router
|
||||
* @param platform
|
||||
* @param config
|
||||
*/
|
||||
constructor(
|
||||
private router: Router,
|
||||
public platform: Platform,
|
||||
@Inject(FUSE_CONFIG) @Optional() config
|
||||
)
|
||||
{
|
||||
// Set the default settings from the constant
|
||||
this.defaultConfig = DEFAULT_CONFIG;
|
||||
|
||||
// If custom config provided with forRoot,
|
||||
// use them as default config...
|
||||
if ( config )
|
||||
{
|
||||
this.defaultConfig = config;
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable Custom Scrollbars if Browser is Mobile
|
||||
*/
|
||||
if ( this.platform.ANDROID || this.platform.IOS )
|
||||
{
|
||||
this.defaultConfig.customScrollbars = false;
|
||||
}
|
||||
|
||||
// Set the config from the default config
|
||||
this.config = {...this.defaultConfig};
|
||||
|
||||
// Reload the default settings for the
|
||||
// layout on every navigation start
|
||||
router.events.subscribe(
|
||||
(event) => {
|
||||
if ( event instanceof NavigationStart )
|
||||
{
|
||||
this.setConfig({
|
||||
layout: this.defaultConfig.layout
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Create the behavior subject
|
||||
this.onConfigChanged = new BehaviorSubject(this.config);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the new config from given object
|
||||
*
|
||||
* @param config
|
||||
*/
|
||||
setConfig(config): void
|
||||
{
|
||||
// Set the config from the given object
|
||||
// Ugly, but works for now...
|
||||
this.config = {
|
||||
...this.config,
|
||||
...config,
|
||||
layout : {
|
||||
...this.config.layout,
|
||||
...config.layout,
|
||||
},
|
||||
colorClasses: {
|
||||
...this.config.colorClasses,
|
||||
...config.colorClasses
|
||||
}
|
||||
};
|
||||
|
||||
// Trigger the event
|
||||
this.onConfigChanged.next(this.config);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 FuseCopierService
|
||||
{
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
export interface Locale
|
||||
{
|
||||
lang: string;
|
||||
data: Object;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class FuseTranslationLoaderService
|
||||
{
|
||||
constructor(private translate: TranslateService)
|
||||
{
|
||||
}
|
||||
|
||||
public loadTranslations(...args: Locale[]): void
|
||||
{
|
||||
const locales = [...args];
|
||||
|
||||
locales.forEach((locale) => {
|
||||
// use setTranslation() with the third argument set to true
|
||||
// to append translations instead of replacing them
|
||||
this.translate.setTranslation(locale.lang, locale.data, true);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { FuseDirectivesModule } from '@fuse/directives/directives';
|
||||
import { FusePipesModule } from '@fuse/pipes/pipes.module';
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
|
||||
FlexLayoutModule,
|
||||
|
||||
FuseDirectivesModule,
|
||||
FusePipesModule
|
||||
],
|
||||
exports : [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
|
||||
FlexLayoutModule,
|
||||
|
||||
FuseDirectivesModule,
|
||||
FusePipesModule
|
||||
]
|
||||
})
|
||||
export class FuseSharedModule
|
||||
{
|
||||
}
|
||||
@@ -1,12 +1,5 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
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';
|
||||
import { FuseSplashScreenService } from './core/services/splash-screen.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-root',
|
||||
@@ -15,23 +8,7 @@ import { locale as navigationTurkish } from './navigation/i18n/tr';
|
||||
})
|
||||
export class AppComponent
|
||||
{
|
||||
constructor(
|
||||
private translate: TranslateService,
|
||||
private fuseNavigationService: FuseNavigationService,
|
||||
private fuseSplashScreen: FuseSplashScreenService,
|
||||
private fuseTranslationLoader: FuseTranslationLoaderService
|
||||
)
|
||||
constructor(private fuseSplashScreen: FuseSplashScreenService)
|
||||
{
|
||||
// Add languages
|
||||
this.translate.addLangs(['en', 'tr']);
|
||||
|
||||
// Set the default language
|
||||
this.translate.setDefaultLang('en');
|
||||
|
||||
// Set the navigation translations
|
||||
this.fuseTranslationLoader.loadTranslations(navigationEnglish, navigationTurkish);
|
||||
|
||||
// Use a language
|
||||
this.translate.use('en');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,50 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import 'hammerjs';
|
||||
|
||||
import { FuseModule } from '@fuse/fuse.module';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { fuseConfig } from './fuse-config';
|
||||
|
||||
import { SharedModule } from './core/modules/shared.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
|
||||
import { FuseMainModule } from './main/main.module';
|
||||
import { AppStoreModule } from './store/store.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';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{
|
||||
path : 'apps',
|
||||
loadChildren: './main/content/apps/apps.module#FuseAppsModule'
|
||||
},
|
||||
{
|
||||
path : 'pages',
|
||||
loadChildren: './main/content/pages/pages.module#FusePagesModule'
|
||||
},
|
||||
{
|
||||
path : 'ui',
|
||||
loadChildren: './main/content/ui/ui.module#FuseUIModule'
|
||||
},
|
||||
{
|
||||
path : 'services',
|
||||
loadChildren: './main/content/services/services.module#FuseServicesModule'
|
||||
},
|
||||
{
|
||||
path : 'components',
|
||||
loadChildren: './main/content/components/components.module#FuseComponentsModule'
|
||||
},
|
||||
{
|
||||
path : 'components-third-party',
|
||||
loadChildren: './main/content/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule'
|
||||
},
|
||||
{
|
||||
path : '**',
|
||||
redirectTo: 'apps/dashboards/analytics'
|
||||
redirectTo: 'sample'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -54,22 +26,18 @@ const appRoutes: Routes = [
|
||||
],
|
||||
imports : [
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
HttpModule,
|
||||
HttpClientModule,
|
||||
BrowserAnimationsModule,
|
||||
RouterModule.forRoot(appRoutes),
|
||||
|
||||
TranslateModule.forRoot(),
|
||||
InMemoryWebApiModule.forRoot(FuseFakeDbService, {
|
||||
delay : 0,
|
||||
passThruUnknownUrl: true
|
||||
}),
|
||||
|
||||
// Fuse Main and Shared modules
|
||||
FuseModule.forRoot(fuseConfig),
|
||||
FuseSharedModule,
|
||||
|
||||
AppStoreModule,
|
||||
FuseMainModule
|
||||
SharedModule,
|
||||
FuseMainModule,
|
||||
FuseSampleModule
|
||||
],
|
||||
providers : [
|
||||
FuseSplashScreenService,
|
||||
FuseConfigService,
|
||||
FuseNavigationService
|
||||
],
|
||||
bootstrap : [
|
||||
AppComponent
|
||||
|
||||
@@ -33,21 +33,21 @@ export const fuseAnimations = [
|
||||
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', [
|
||||
@@ -76,53 +76,6 @@ export const fuseAnimations = [
|
||||
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%)',
|
||||
@@ -176,17 +129,6 @@ export const fuseAnimations = [
|
||||
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('* => *', [
|
||||
@@ -0,0 +1,6 @@
|
||||
<h1 md-dialog-title>Confirm</h1>
|
||||
<div md-dialog-content>{{confirmMessage}}</div>
|
||||
<div md-dialog-actions class="pt-24">
|
||||
<button md-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
|
||||
<button md-button (click)="dialogRef.close(false)">Cancel</button>
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MdDialogRef } 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: MdDialogRef<FuseConfirmDialogComponent>)
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
60
src/app/core/components/copier/copier.service.ts
Normal file
60
src/app/core/components/copier/copier.service.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,6 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/observable/interval';
|
||||
|
||||
import * as moment from 'moment';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-countdown',
|
||||
@@ -0,0 +1,75 @@
|
||||
<!-- 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 -->
|
||||
@@ -0,0 +1,100 @@
|
||||
<div class="demo-sidenav">
|
||||
<md-list>
|
||||
<h3 md-subheader>Sidenav Demo</h3>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 1</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 2</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 3</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 4</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 5</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 6</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 7</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 8</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 9</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 10</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 11</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 12</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 13</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 14</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 15</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span>Sidenav Item 16</span>
|
||||
</md-list-item>
|
||||
|
||||
</md-list>
|
||||
</div>
|
||||
@@ -1,8 +1,6 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { SharedModule } from '../../modules/shared.module';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { MatDividerModule, MatListModule } from '@angular/material';
|
||||
|
||||
import { FuseDemoContentComponent } from './demo-content/demo-content.component';
|
||||
import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';
|
||||
|
||||
@@ -12,10 +10,8 @@ import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'
|
||||
FuseDemoSidenavComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule,
|
||||
|
||||
MatDividerModule,
|
||||
MatListModule
|
||||
SharedModule,
|
||||
RouterModule
|
||||
],
|
||||
exports : [
|
||||
FuseDemoContentComponent,
|
||||
58
src/app/core/components/hljs/hljs.component.ts
Normal file
58
src/app/core/components/hljs/hljs.component.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
|
||||
import * as hljs from 'highlight.js';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-hljs',
|
||||
template : ' ',
|
||||
styleUrls: ['./hljs.component.scss']
|
||||
})
|
||||
export class FuseHljsComponent implements OnInit
|
||||
{
|
||||
hljs: any;
|
||||
|
||||
@ContentChild('source') source: ElementRef;
|
||||
@Input('lang') lang: string;
|
||||
|
||||
constructor(
|
||||
private elementRef: ElementRef
|
||||
)
|
||||
{
|
||||
this.hljs = hljs;
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
const originalSource = this.source.nativeElement.value;
|
||||
|
||||
if ( !originalSource || !this.lang )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Split the source into lines
|
||||
const sourceLines = originalSource.split('\n');
|
||||
|
||||
// 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 and trim the
|
||||
// beginning white space depending on the index
|
||||
sourceLines.forEach((line, index) => {
|
||||
|
||||
source = source + line.substr(indexOfFirstChar, line.length);
|
||||
|
||||
if ( index !== sourceLines.length - 1 )
|
||||
{
|
||||
source = source + '\n';
|
||||
}
|
||||
});
|
||||
|
||||
this.elementRef.nativeElement.innerHTML =
|
||||
`<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<button md-icon-button
|
||||
type="button"
|
||||
class="mat-elevation-z1"
|
||||
[mdMenuTriggerFor]="colorMenu"
|
||||
(onMenuOpen)="onMenuOpen()"
|
||||
[ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
|
||||
<md-icon>palette</md-icon>
|
||||
</button>
|
||||
|
||||
<md-menu #colorMenu="mdMenu" class="fuse-material-color-picker-menu">
|
||||
|
||||
<header [ngClass]="selectedColor?.class || 'md-accent-bg'"
|
||||
class="mat-elevation-z4"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
|
||||
<button md-icon-button
|
||||
[style.visibility]="view==='hues'?'visible':'hidden'"
|
||||
(click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
|
||||
<md-icon class="s-20">arrow_back</md-icon>
|
||||
</button>
|
||||
|
||||
<span *ngIf="selectedColor?.palette">
|
||||
{{selectedColor.palette}} {{selectedColor.hue}}
|
||||
</span>
|
||||
|
||||
<span *ngIf="!selectedColor?.palette">
|
||||
Select Color
|
||||
</span>
|
||||
|
||||
<button md-icon-button
|
||||
class="remove-color-button"
|
||||
(click)="removeColor()"
|
||||
aria-label="Remove Color">
|
||||
<md-icon class="s-20">delete</md-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]="'md-'+color.key+'-bg'"
|
||||
*ngFor="let color of (colors | keys)"
|
||||
(click)="$event.stopPropagation();selectPalette(color.key)"
|
||||
fxLayout="row" fxLayoutAlign="start end" md-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]="'md-'+selectedPalette+'-'+hue+'-bg'"
|
||||
(click)="selectHue(hue)"
|
||||
fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
|
||||
<span class="label">
|
||||
{{hue}}
|
||||
</span>
|
||||
<md-icon *ngIf="selectedHue === hue" class="s-16">check</md-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</md-menu>
|
||||
@@ -11,7 +11,7 @@
|
||||
overflow: hidden;
|
||||
min-height: 258px;
|
||||
height: 308px;
|
||||
background-color: #F7F7F7;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
.view {
|
||||
position: absolute;
|
||||
@@ -39,7 +39,7 @@
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
md-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { MatColors } from '@fuse/mat-colors';
|
||||
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',
|
||||
@@ -10,7 +9,7 @@ import { MatColors } from '@fuse/mat-colors';
|
||||
animations : fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseMaterialColorPickerComponent implements OnChanges
|
||||
export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
|
||||
{
|
||||
colors: any;
|
||||
selectedColor: any;
|
||||
@@ -92,21 +91,11 @@ export class FuseMaterialColorPickerComponent implements OnChanges
|
||||
this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
|
||||
}
|
||||
|
||||
ngOnChanges(changes: any)
|
||||
ngOnInit()
|
||||
{
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
selectPalette(palette)
|
||||
{
|
||||
this.selectedPalette = palette;
|
||||
@@ -125,7 +114,6 @@ export class FuseMaterialColorPickerComponent implements OnChanges
|
||||
this.selectedPalette = '';
|
||||
this.selectedHue = '';
|
||||
this.updateSelectedColor();
|
||||
this.view = 'palettes';
|
||||
}
|
||||
|
||||
updateSelectedColor()
|
||||
@@ -141,7 +129,7 @@ export class FuseMaterialColorPickerComponent implements OnChanges
|
||||
{
|
||||
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';
|
||||
this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
|
||||
}
|
||||
else
|
||||
{
|
||||
@@ -184,4 +172,19 @@ export class FuseMaterialColorPickerComponent implements OnChanges
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,7 @@
|
||||
<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 class="nav-link" md-ripple>
|
||||
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
|
||||
<span class="nav-link-title">{{item.title}}</span>
|
||||
<md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
|
||||
</a>
|
||||
|
||||
<div class="children" [ngClass]="{'open': isOpen}">
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
|
||||
import { fuseAnimations } from '../../../../animations/index';
|
||||
import { fuseAnimations } from '../../../../animations';
|
||||
import { FuseConfigService } from '../../../../services/config.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs/Subscription';
|
||||
})
|
||||
export class FuseNavHorizontalCollapseComponent implements OnDestroy
|
||||
{
|
||||
onConfigChanged: Subscription;
|
||||
onSettingsChanged: Subscription;
|
||||
fuseSettings: any;
|
||||
isOpen = false;
|
||||
|
||||
@@ -34,8 +34,8 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy
|
||||
private fuseConfig: FuseConfigService
|
||||
)
|
||||
{
|
||||
this.onConfigChanged =
|
||||
this.fuseConfig.onConfigChanged
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.fuseSettings = newSettings;
|
||||
@@ -45,6 +45,6 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
this.onConfigChanged.unsubscribe();
|
||||
this.onSettingsChanged.unsubscribe();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<a class="nav-link" md-ripple
|
||||
[routerLink]="[item.url]" routerLinkActive="active">
|
||||
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
|
||||
<span class="nav-link-title">{{item.title}}</span>
|
||||
<span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
|
||||
</a>
|
||||
@@ -4,7 +4,7 @@
|
||||
<!-- Vertical Navigation Layout -->
|
||||
<ng-container *ngIf="layout === 'vertical'">
|
||||
|
||||
<ng-container *ngFor="let item of navigation">
|
||||
<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>
|
||||
@@ -18,11 +18,11 @@
|
||||
<!-- Horizontal Navigation Layout -->
|
||||
<ng-container *ngIf="layout === 'horizontal'">
|
||||
|
||||
<ng-container *ngFor="let item of navigation">
|
||||
<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>
|
||||
<fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
@import 'src/app/core/scss/fuse';
|
||||
|
||||
#main-navigation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
32
src/app/core/components/navigation/navigation.component.ts
Normal file
32
src/app/core/components/navigation/navigation.component.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,10 +1,6 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SharedModule } from '../../modules/shared.module';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatIconModule, MatRippleModule } from '@angular/material';
|
||||
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
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';
|
||||
@@ -14,13 +10,8 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
|
||||
TranslateModule.forChild()
|
||||
SharedModule,
|
||||
RouterModule
|
||||
],
|
||||
exports : [
|
||||
FuseNavigationComponent
|
||||
83
src/app/core/components/navigation/navigation.service.ts
Normal file
83
src/app/core/components/navigation/navigation.service.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { EventEmitter, Injectable } from '@angular/core';
|
||||
import { NavigationModel } from '../../../navigation.model';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
|
||||
@Injectable()
|
||||
export class FuseNavigationService
|
||||
{
|
||||
onNavCollapseToggle = new EventEmitter<any>();
|
||||
onNavCollapseToggled = new EventEmitter<any>();
|
||||
onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
|
||||
navigationModel: NavigationModel;
|
||||
flatNavigation: any[] = [];
|
||||
|
||||
constructor()
|
||||
{
|
||||
this.navigationModel = new NavigationModel();
|
||||
this.onNavigationModelChange.next(this.navigationModel.model);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get navigation model
|
||||
* @returns {any[]}
|
||||
*/
|
||||
getNavigationModel()
|
||||
{
|
||||
return this.navigationModel.model;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the navigation model
|
||||
* @param model
|
||||
*/
|
||||
setNavigationModel(model)
|
||||
{
|
||||
// console.log(model);
|
||||
|
||||
this.navigationModel = model;
|
||||
|
||||
console.log(this.navigationModel);
|
||||
|
||||
this.onNavigationModelChange.next(this.navigationModel.model);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get flattened navigation array
|
||||
* @param navigationItems
|
||||
* @returns {any[]}
|
||||
*/
|
||||
getFlatNavigation(navigationItems?)
|
||||
{
|
||||
if ( !navigationItems )
|
||||
{
|
||||
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' )
|
||||
{
|
||||
this.getFlatNavigation(navItem.children);
|
||||
}
|
||||
}
|
||||
|
||||
return this.flatNavigation;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<a class="nav-link" md-ripple (click)="toggleOpen($event)">
|
||||
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
|
||||
<span class="nav-link-title">{{item.title}}</span>
|
||||
<md-icon class="collapse-arrow">keyboard_arrow_right</md-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>
|
||||
@@ -1,7 +1,6 @@
|
||||
:host {
|
||||
|
||||
.folded:not(.unfolded) & {
|
||||
|
||||
.folded:not(.folded-open) & {
|
||||
.nav-link {
|
||||
|
||||
> span {
|
||||
@@ -9,17 +8,9 @@
|
||||
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);
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
import { FuseNavigationService } from '../../navigation.service';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { fuseAnimations } from '../../../../animations/index';
|
||||
import { fuseAnimations } from '../../../../animations';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-vertical-collapse',
|
||||
@@ -40,7 +40,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||
);
|
||||
|
||||
// Listen for collapsing of any navigation item
|
||||
this.navigationService.onItemCollapsed
|
||||
this.navigationService.onNavCollapseToggled
|
||||
.subscribe(
|
||||
(clickedItem) => {
|
||||
if ( clickedItem && clickedItem.children )
|
||||
@@ -69,20 +69,6 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
*
|
||||
@@ -95,8 +81,8 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||
this.isOpen = !this.isOpen;
|
||||
|
||||
// Navigation collapse toggled...
|
||||
this.navigationService.onItemCollapsed.next(this.item);
|
||||
this.navigationService.onItemCollapseToggled.next();
|
||||
this.navigationService.onNavCollapseToggled.emit(this.item);
|
||||
this.navigationService.onNavCollapseToggle.emit();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -110,7 +96,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||
}
|
||||
|
||||
this.isOpen = true;
|
||||
this.navigationService.onItemCollapseToggled.next();
|
||||
this.navigationService.onNavCollapseToggle.emit();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -122,9 +108,8 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this.isOpen = false;
|
||||
this.navigationService.onItemCollapseToggled.next();
|
||||
this.navigationService.onNavCollapseToggle.emit();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -181,7 +166,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||
}
|
||||
}
|
||||
|
||||
if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
|
||||
if ( parent.children[i].url === url )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
@@ -190,4 +175,8 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||
return false;
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="group-title">
|
||||
<span class="hint-text">{{ 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>
|
||||
@@ -1,6 +1,6 @@
|
||||
:host {
|
||||
|
||||
.folded:not(.unfolded) & {
|
||||
.folded:not(.folded-open) & {
|
||||
|
||||
> .group-title {
|
||||
align-items: center;
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Component, HostBinding, Input } from '@angular/core';
|
||||
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
|
||||
export class FuseNavVerticalGroupComponent implements OnInit
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-group nav-item';
|
||||
@Input() item: any;
|
||||
@@ -14,4 +14,8 @@ export class FuseNavVerticalGroupComponent
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<a class="nav-link" md-ripple
|
||||
[routerLink]="[item.url]" routerLinkActive="active">
|
||||
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
|
||||
<span class="nav-link-title">{{item.title}}</span>
|
||||
<span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
|
||||
</a>
|
||||
@@ -1,6 +1,6 @@
|
||||
:host {
|
||||
|
||||
.folded:not(.unfolded) & {
|
||||
.folded:not(.folded-open) & {
|
||||
|
||||
.nav-link {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Component, HostBinding, Input } from '@angular/core';
|
||||
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
|
||||
export class FuseNavVerticalItemComponent implements OnInit
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-item';
|
||||
@Input() item: any;
|
||||
@@ -13,4 +13,8 @@ export class FuseNavVerticalItemComponent
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -1,20 +1,20 @@
|
||||
<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()"
|
||||
<button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
|
||||
*ngIf="collapsed">
|
||||
<mat-icon class="s-24">search</mat-icon>
|
||||
<md-icon class="s-24">search</md-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>
|
||||
<md-progress-spinner color="md-accent" mode="indeterminate"></md-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()"
|
||||
<button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()"
|
||||
aria-label="Collapse Search Bar">
|
||||
<mat-icon class="s-24">close</mat-icon>
|
||||
<md-icon class="s-24">close</md-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "src/@fuse/scss/fuse";
|
||||
@import "src/app/core/scss/fuse";
|
||||
|
||||
:host {
|
||||
|
||||
@@ -1,27 +1,26 @@
|
||||
import { Component, EventEmitter, Output } from '@angular/core';
|
||||
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
|
||||
import { FuseConfigService } from '../../services/config.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
import { FuseConfigService } from '@fuse/services/config.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-search-bar',
|
||||
templateUrl: './search-bar.component.html',
|
||||
styleUrls : ['./search-bar.component.scss']
|
||||
})
|
||||
export class FuseSearchBarComponent
|
||||
export class FuseSearchBarComponent implements OnInit
|
||||
{
|
||||
collapsed: boolean;
|
||||
toolbarColor: string;
|
||||
@Output() onInput: EventEmitter<any> = new EventEmitter();
|
||||
onConfigChanged: Subscription;
|
||||
onSettingsChanged: Subscription;
|
||||
|
||||
constructor(
|
||||
private fuseConfig: FuseConfigService
|
||||
)
|
||||
{
|
||||
this.collapsed = true;
|
||||
this.onConfigChanged =
|
||||
this.fuseConfig.onConfigChanged
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.toolbarColor = newSettings.colorClasses.toolbar;
|
||||
@@ -29,6 +28,11 @@ export class FuseSearchBarComponent
|
||||
);
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
collapse()
|
||||
{
|
||||
this.collapsed = true;
|
||||
@@ -1,9 +1,7 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { SharedModule } from '../../modules/shared.module';
|
||||
import { FuseSearchBarComponent } from './search-bar.component';
|
||||
|
||||
@NgModule({
|
||||
@@ -11,11 +9,8 @@ import { FuseSearchBarComponent } from './search-bar.component';
|
||||
FuseSearchBarComponent
|
||||
],
|
||||
imports : [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule
|
||||
SharedModule,
|
||||
RouterModule
|
||||
],
|
||||
exports : [
|
||||
FuseSearchBarComponent
|
||||
89
src/app/core/components/shortcuts/shortcuts.component.html
Normal file
89
src/app/core/components/shortcuts/shortcuts.component.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<div id="fuse-shortcuts" #shortcuts>
|
||||
|
||||
<div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
|
||||
fxHide fxShow.lt-md>
|
||||
<button md-icon-button (click)="showMobileShortcutsPanel()">
|
||||
<md-icon class="amber-600-fg">star</md-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 md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
|
||||
<md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
|
||||
<span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
|
||||
{{shortcutItem.title.substr(0, 1).toUpperCase()}}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut"
|
||||
(onMenuOpen)="onMenuOpen()">
|
||||
<md-icon class="amber-600-fg">star</md-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
|
||||
<button md-icon-button (click)="hideMobileShortcutsPanel()">
|
||||
<md-icon>close</md-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<md-menu #addMenu="mdMenu" class="w-240">
|
||||
|
||||
<md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
|
||||
<input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)">
|
||||
</md-input-container>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
|
||||
|
||||
<md-list-item *ngFor="let shortcutItem of shortcutItems"
|
||||
(click)="toggleShortcut($event, shortcutItem)">
|
||||
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
|
||||
<md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-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 md-line fxFlex>{{shortcutItem.title}}</p>
|
||||
<md-icon class="ml-8">star</md-icon>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item *ngIf="shortcutItems.length === 0">
|
||||
<p>
|
||||
<small>No shortcuts yet!</small>
|
||||
</p>
|
||||
</md-list-item>
|
||||
</md-nav-list>
|
||||
|
||||
<md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
|
||||
<md-list-item *ngFor="let navigationItem of filteredNavigationItems"
|
||||
(click)="toggleShortcut($event, navigationItem)">
|
||||
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
|
||||
<md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-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 md-line fxFlex>{{navigationItem.title}}</p>
|
||||
<md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-nav-list>
|
||||
</md-menu>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'src/@fuse/scss/fuse';
|
||||
@import 'src/app/core/scss/fuse';
|
||||
|
||||
:host {
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
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';
|
||||
|
||||
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseConfigService } from '@fuse/services/config.service';
|
||||
|
||||
import { navigation } from 'app/navigation/navigation';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-shortcuts',
|
||||
templateUrl: './shortcuts.component.html',
|
||||
@@ -23,7 +20,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
||||
mobileShortcutsPanelActive = false;
|
||||
toolbarColor: string;
|
||||
matchMediaSubscription: Subscription;
|
||||
onConfigChanged: Subscription;
|
||||
onSettingsChanged: Subscription;
|
||||
|
||||
@ViewChild('searchInput') searchInputField;
|
||||
@ViewChild('shortcuts') shortcutsEl: ElementRef;
|
||||
@@ -31,16 +28,16 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private renderer: Renderer2,
|
||||
private observableMedia: ObservableMedia,
|
||||
private fuseMatchMedia: FuseMatchMediaService,
|
||||
private fuseMatchMedia: FuseMatchMedia,
|
||||
private fuseNavigationService: FuseNavigationService,
|
||||
private fuseConfig: FuseConfigService,
|
||||
private cookieService: CookieService
|
||||
)
|
||||
{
|
||||
this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(navigation);
|
||||
this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
|
||||
|
||||
this.onConfigChanged =
|
||||
this.fuseConfig.onConfigChanged
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.toolbarColor = newSettings.colorClasses.toolbar;
|
||||
@@ -152,9 +149,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
||||
|
||||
onMenuOpen()
|
||||
{
|
||||
setTimeout(() => {
|
||||
this.searchInputField.nativeElement.focus();
|
||||
});
|
||||
this.searchInputField.nativeElement.focus();
|
||||
}
|
||||
|
||||
showMobileShortcutsPanel()
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user