mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Merge branch 'master' into skeleton
This commit is contained in:
Sercan Yemen
commit
c178eeedaa
|
|
@ -6,7 +6,7 @@ Material Design Admin Template with Angular 5+ and Angular Material 2
|
|||
|
||||
Share your ideas, discuss Fuse and help each other.
|
||||
|
||||
[Click here](https://join.slack.com/t/fuse-theme/shared_invite/enQtMzA1NDE4NzYwMjcyLWQxODE4ODM1MWU4MWJjMDhlMGEwYzM4Mzg3N2E4YzVlZThhZjNlOTQ1Y2Q5OTBlNDNkMzJhZDIwMjgxOWQ3YWU) to join our Slack workspace.
|
||||
[Click here](http://fusetheme.com/community) to see our Community page.
|
||||
|
||||
## Development server
|
||||
|
||||
|
|
|
|||
4469
package-lock.json
generated
4469
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
64
package.json
64
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fuse2",
|
||||
"version": "1.3.6",
|
||||
"name": "fuse",
|
||||
"version": "5.2.8",
|
||||
"license": "https://themeforest.net/licenses/terms/regular",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
|
|
@ -19,40 +19,40 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "1.0.0-beta.2",
|
||||
"@angular/animations": "5.2.3",
|
||||
"@angular/cdk": "5.1.1",
|
||||
"@angular/common": "5.2.3",
|
||||
"@angular/compiler": "5.2.3",
|
||||
"@angular/core": "5.2.3",
|
||||
"@angular/flex-layout": "2.0.0-beta.12",
|
||||
"@angular/forms": "5.2.3",
|
||||
"@angular/http": "5.2.3",
|
||||
"@angular/material": "5.1.1",
|
||||
"@angular/material-moment-adapter": "5.1.1",
|
||||
"@angular/platform-browser": "5.2.3",
|
||||
"@angular/platform-browser-dynamic": "5.2.3",
|
||||
"@angular/router": "5.2.3",
|
||||
"@ngrx/effects": "5.0.0",
|
||||
"@ngrx/router-store": "5.0.0",
|
||||
"@ngrx/store": "5.0.0",
|
||||
"@ngrx/store-devtools": "5.0.0",
|
||||
"@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.0.1",
|
||||
"@swimlane/ngx-datatable": "11.1.7",
|
||||
"@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.3",
|
||||
"angular-calendar": "0.23.6",
|
||||
"angular-in-memory-web-api": "0.5.3",
|
||||
"chart.js": "2.7.1",
|
||||
"chart.js": "2.7.2",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"core-js": "2.5.3",
|
||||
"d3": "4.13.0",
|
||||
"hammerjs": "2.0.8",
|
||||
"intl": "1.2.5",
|
||||
"moment": "2.20.1",
|
||||
"moment": "2.21.0",
|
||||
"ng2-charts": "1.6.0",
|
||||
"ngrx-store-freeze": "0.2.1",
|
||||
"ngx-color-picker": "5.3.1",
|
||||
"ngx-color-picker": "5.3.4",
|
||||
"ngx-cookie-service": "1.0.10",
|
||||
"perfect-scrollbar": "1.3.0",
|
||||
"prismjs": "1.11.0",
|
||||
|
|
@ -61,25 +61,25 @@
|
|||
"zone.js": "0.8.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.6.7",
|
||||
"@angular/compiler-cli": "5.2.3",
|
||||
"@angular/language-service": "5.2.3",
|
||||
"@angular/cli": "1.7.3",
|
||||
"@angular/compiler-cli": "5.2.8",
|
||||
"@angular/language-service": "5.2.8",
|
||||
"@angularclass/hmr": "2.1.3",
|
||||
"@types/jasmine": "2.8.6",
|
||||
"@types/jasminewd2": "2.0.3",
|
||||
"@types/node": "6.0.96",
|
||||
"codelyzer": "4.1.0",
|
||||
"@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.1",
|
||||
"karma-coverage-istanbul-reporter": "1.4.2",
|
||||
"karma-jasmine": "1.1.1",
|
||||
"karma-jasmine-html-reporter": "0.2.2",
|
||||
"protractor": "5.1.2",
|
||||
"ts-node": "4.1.0",
|
||||
"tslint": "5.9.1",
|
||||
"typescript": "2.6.2",
|
||||
"webpack-bundle-analyzer": "2.10.0"
|
||||
"webpack-bundle-analyzer": "2.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
import { MatDialogRef } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
|
|
@ -6,7 +6,7 @@ import { MatDialogRef } from '@angular/material';
|
|||
templateUrl: './confirm-dialog.component.html',
|
||||
styleUrls : ['./confirm-dialog.component.scss']
|
||||
})
|
||||
export class FuseConfirmDialogComponent implements OnInit
|
||||
export class FuseConfirmDialogComponent
|
||||
{
|
||||
public confirmMessage: string;
|
||||
|
||||
|
|
@ -14,8 +14,4 @@ export class FuseConfirmDialogComponent implements OnInit
|
|||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
20
src/@fuse/components/confirm-dialog/confirm-dialog.module.ts
Normal file
20
src/@fuse/components/confirm-dialog/confirm-dialog.module.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
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,8 +1,9 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import * as moment from 'moment';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/observable/interval';
|
||||
|
||||
import * as moment from 'moment';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-countdown',
|
||||
templateUrl: './countdown.component.html',
|
||||
15
src/@fuse/components/countdown/countdown.module.ts
Normal file
15
src/@fuse/components/countdown/countdown.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FuseCountdownComponent } from '@fuse/components/countdown/countdown.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseCountdownComponent
|
||||
],
|
||||
exports: [
|
||||
FuseCountdownComponent
|
||||
],
|
||||
})
|
||||
export class FuseCountdownModule
|
||||
{
|
||||
}
|
||||
|
|
@ -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>
|
||||
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,6 +1,8 @@
|
|||
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';
|
||||
|
||||
|
|
@ -10,8 +12,10 @@ import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'
|
|||
FuseDemoSidenavComponent
|
||||
],
|
||||
imports : [
|
||||
SharedModule,
|
||||
RouterModule
|
||||
RouterModule,
|
||||
|
||||
MatDividerModule,
|
||||
MatListModule
|
||||
],
|
||||
exports : [
|
||||
FuseDemoContentComponent,
|
||||
15
src/@fuse/components/highlight/highlight.module.ts
Normal file
15
src/@fuse/components/highlight/highlight.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseHighlightComponent
|
||||
],
|
||||
exports: [
|
||||
FuseHighlightComponent
|
||||
],
|
||||
})
|
||||
export class FuseHighlightModule
|
||||
{
|
||||
}
|
||||
11
src/@fuse/components/index.ts
Normal file
11
src/@fuse/components/index.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
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';
|
||||
|
|
@ -9,10 +9,8 @@
|
|||
|
||||
<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">
|
||||
<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'"
|
||||
|
|
@ -30,7 +28,7 @@
|
|||
|
||||
<button mat-icon-button
|
||||
class="remove-color-button"
|
||||
(click)="removeColor()"
|
||||
(click)="$event.stopPropagation();removeColor()"
|
||||
aria-label="Remove Color">
|
||||
<mat-icon class="s-20">delete</mat-icon>
|
||||
</button>
|
||||
|
|
@ -39,13 +37,9 @@
|
|||
|
||||
<div [ngSwitch]="view" class="views">
|
||||
|
||||
<div class="view"
|
||||
*ngSwitchCase="'palettes'"
|
||||
[@slideInLeft]>
|
||||
<div class="view" *ngSwitchCase="'palettes'">
|
||||
|
||||
<div fxLayout="row" fxLayoutWrap
|
||||
fxLayoutAlign="start start"
|
||||
class="colors" fusePerfectScrollbar>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
|
||||
<div class="color"
|
||||
[ngClass]="'mat-'+color.key+'-bg'"
|
||||
*ngFor="let color of (colors | keys)"
|
||||
|
|
@ -58,18 +52,12 @@
|
|||
</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"
|
||||
<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>
|
||||
(click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
|
||||
<span class="label">
|
||||
{{hue}}
|
||||
</span>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
|
||||
import { MatColors } from '../../matColors';
|
||||
import { fuseAnimations } from '../../animations';
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { MatColors } from '@fuse/mat-colors';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-material-color-picker',
|
||||
|
|
@ -9,7 +10,7 @@ import { fuseAnimations } from '../../animations';
|
|||
animations : fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
|
||||
export class FuseMaterialColorPickerComponent implements OnChanges
|
||||
{
|
||||
colors: any;
|
||||
selectedColor: any;
|
||||
|
|
@ -91,9 +92,19 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
|
|||
this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
selectPalette(palette)
|
||||
|
|
@ -114,6 +125,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
|
|||
this.selectedPalette = '';
|
||||
this.selectedHue = '';
|
||||
this.updateSelectedColor();
|
||||
this.view = 'palettes';
|
||||
}
|
||||
|
||||
updateSelectedColor()
|
||||
|
|
@ -172,19 +184,4 @@ export class FuseMaterialColorPickerComponent implements OnInit, 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
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,5 +1,5 @@
|
|||
import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
|
||||
import { fuseAnimations } from '../../../../animations';
|
||||
import { fuseAnimations } from '../../../../animations/index';
|
||||
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
|
||||
{
|
||||
onSettingsChanged: Subscription;
|
||||
onConfigChanged: Subscription;
|
||||
fuseSettings: any;
|
||||
isOpen = false;
|
||||
|
||||
|
|
@ -34,8 +34,8 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy
|
|||
private fuseConfig: FuseConfigService
|
||||
)
|
||||
{
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
this.onConfigChanged =
|
||||
this.fuseConfig.onConfigChanged
|
||||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.fuseSettings = newSettings;
|
||||
|
|
@ -45,6 +45,6 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy
|
|||
|
||||
ngOnDestroy()
|
||||
{
|
||||
this.onSettingsChanged.unsubscribe();
|
||||
this.onConfigChanged.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<!-- Vertical Navigation Layout -->
|
||||
<ng-container *ngIf="layout === 'vertical'">
|
||||
|
||||
<ng-container *ngFor="let item of navigationModel">
|
||||
<ng-container *ngFor="let item of navigation">
|
||||
|
||||
<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,7 +18,7 @@
|
|||
<!-- Horizontal Navigation Layout -->
|
||||
<ng-container *ngIf="layout === 'horizontal'">
|
||||
|
||||
<ng-container *ngFor="let item of navigationModel">
|
||||
<ng-container *ngFor="let item of navigation">
|
||||
|
||||
<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>
|
||||
12
src/@fuse/components/navigation/navigation.component.scss
Normal file
12
src/@fuse/components/navigation/navigation.component.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@import 'src/@fuse/scss/fuse';
|
||||
|
||||
fuse-navigation {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
|
||||
#main-navigation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
18
src/@fuse/components/navigation/navigation.component.ts
Normal file
18
src/@fuse/components/navigation/navigation.component.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
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,6 +1,10 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { SharedModule } from '../../modules/shared.module';
|
||||
import { CommonModule } from '@angular/common';
|
||||
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';
|
||||
|
|
@ -10,8 +14,13 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
|
|||
|
||||
@NgModule({
|
||||
imports : [
|
||||
SharedModule,
|
||||
RouterModule
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
|
||||
TranslateModule.forChild()
|
||||
],
|
||||
exports : [
|
||||
FuseNavigationComponent
|
||||
48
src/@fuse/components/navigation/navigation.service.ts
Normal file
48
src/@fuse/components/navigation/navigation.service.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<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,6 +1,6 @@
|
|||
:host {
|
||||
|
||||
.folded:not(.folded-open) & {
|
||||
.folded:not(.unfolded) & {
|
||||
|
||||
.nav-link {
|
||||
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
}
|
||||
|
||||
.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';
|
||||
import { fuseAnimations } from '../../../../animations/index';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-vertical-collapse',
|
||||
|
|
@ -40,7 +40,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
);
|
||||
|
||||
// Listen for collapsing of any navigation item
|
||||
this.navigationService.onNavCollapseToggled
|
||||
this.navigationService.onItemCollapsed
|
||||
.subscribe(
|
||||
(clickedItem) => {
|
||||
if ( clickedItem && clickedItem.children )
|
||||
|
|
@ -95,8 +95,8 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
this.isOpen = !this.isOpen;
|
||||
|
||||
// Navigation collapse toggled...
|
||||
this.navigationService.onNavCollapseToggled.emit(this.item);
|
||||
this.navigationService.onNavCollapseToggle.emit();
|
||||
this.navigationService.onItemCollapsed.next(this.item);
|
||||
this.navigationService.onItemCollapseToggled.next();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -110,7 +110,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
}
|
||||
|
||||
this.isOpen = true;
|
||||
this.navigationService.onNavCollapseToggle.emit();
|
||||
this.navigationService.onItemCollapseToggled.next();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -124,7 +124,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
}
|
||||
|
||||
this.isOpen = false;
|
||||
this.navigationService.onNavCollapseToggle.emit();
|
||||
this.navigationService.onItemCollapseToggled.next();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<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,6 +1,6 @@
|
|||
:host {
|
||||
|
||||
.folded:not(.folded-open) & {
|
||||
.folded:not(.unfolded) & {
|
||||
|
||||
> .group-title {
|
||||
align-items: center;
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
import { Component, HostBinding, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-vertical-group',
|
||||
templateUrl: './nav-vertical-group.component.html',
|
||||
styleUrls : ['./nav-vertical-group.component.scss']
|
||||
})
|
||||
export class FuseNavVerticalGroupComponent implements OnInit
|
||||
export class FuseNavVerticalGroupComponent
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-group nav-item';
|
||||
@Input() item: any;
|
||||
|
|
@ -14,8 +14,4 @@ export class FuseNavVerticalGroupComponent implements OnInit
|
|||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<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,6 +1,6 @@
|
|||
:host {
|
||||
|
||||
.folded:not(.folded-open) & {
|
||||
.folded:not(.unfolded) & {
|
||||
|
||||
.nav-link {
|
||||
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { Component, HostBinding, Input, OnInit } from '@angular/core';
|
||||
import { Component, HostBinding, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-vertical-item',
|
||||
templateUrl: './nav-vertical-item.component.html',
|
||||
styleUrls : ['./nav-vertical-item.component.scss']
|
||||
})
|
||||
export class FuseNavVerticalItemComponent implements OnInit
|
||||
export class FuseNavVerticalItemComponent
|
||||
{
|
||||
@HostBinding('class') classes = 'nav-item';
|
||||
@Input() item: any;
|
||||
|
|
@ -13,8 +13,4 @@ export class FuseNavVerticalItemComponent implements OnInit
|
|||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/app/core/scss/fuse";
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
:host {
|
||||
|
||||
|
|
@ -1,26 +1,27 @@
|
|||
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
|
||||
import { FuseConfigService } from '../../services/config.service';
|
||||
import { Component, EventEmitter, Output } from '@angular/core';
|
||||
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 implements OnInit
|
||||
export class FuseSearchBarComponent
|
||||
{
|
||||
collapsed: boolean;
|
||||
toolbarColor: string;
|
||||
@Output() onInput: EventEmitter<any> = new EventEmitter();
|
||||
onSettingsChanged: Subscription;
|
||||
onConfigChanged: Subscription;
|
||||
|
||||
constructor(
|
||||
private fuseConfig: FuseConfigService
|
||||
)
|
||||
{
|
||||
this.collapsed = true;
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
this.onConfigChanged =
|
||||
this.fuseConfig.onConfigChanged
|
||||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.toolbarColor = newSettings.colorClasses.toolbar;
|
||||
|
|
@ -28,11 +29,6 @@ export class FuseSearchBarComponent implements OnInit
|
|||
);
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
collapse()
|
||||
{
|
||||
this.collapsed = true;
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { SharedModule } from '../../modules/shared.module';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseSearchBarComponent } from './search-bar.component';
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -9,8 +11,11 @@ import { FuseSearchBarComponent } from './search-bar.component';
|
|||
FuseSearchBarComponent
|
||||
],
|
||||
imports : [
|
||||
SharedModule,
|
||||
RouterModule
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule
|
||||
],
|
||||
exports : [
|
||||
FuseSearchBarComponent
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'src/app/core/scss/fuse';
|
||||
@import 'src/@fuse/scss/fuse';
|
||||
|
||||
:host {
|
||||
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
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',
|
||||
|
|
@ -20,7 +23,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
|||
mobileShortcutsPanelActive = false;
|
||||
toolbarColor: string;
|
||||
matchMediaSubscription: Subscription;
|
||||
onSettingsChanged: Subscription;
|
||||
onConfigChanged: Subscription;
|
||||
|
||||
@ViewChild('searchInput') searchInputField;
|
||||
@ViewChild('shortcuts') shortcutsEl: ElementRef;
|
||||
|
|
@ -28,16 +31,16 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
|||
constructor(
|
||||
private renderer: Renderer2,
|
||||
private observableMedia: ObservableMedia,
|
||||
private fuseMatchMedia: FuseMatchMedia,
|
||||
private fuseMatchMedia: FuseMatchMediaService,
|
||||
private fuseNavigationService: FuseNavigationService,
|
||||
private fuseConfig: FuseConfigService,
|
||||
private cookieService: CookieService
|
||||
)
|
||||
{
|
||||
this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
|
||||
this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(navigation);
|
||||
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
this.onConfigChanged =
|
||||
this.fuseConfig.onConfigChanged
|
||||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.toolbarColor = newSettings.colorClasses.toolbar;
|
||||
38
src/@fuse/components/shortcuts/shortcuts.module.ts
Normal file
38
src/@fuse/components/shortcuts/shortcuts.module.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
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
src/@fuse/components/sidebar/sidebar.component.html
Normal file
1
src/@fuse/components/sidebar/sidebar.component.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<ng-content></ng-content>
|
||||
59
src/@fuse/components/sidebar/sidebar.component.scss
Normal file
59
src/@fuse/components/sidebar/sidebar.component.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
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;
|
||||
}
|
||||
368
src/@fuse/components/sidebar/sidebar.component.ts
Normal file
368
src/@fuse/components/sidebar/sidebar.component.ts
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
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()
|
||||
folded: boolean;
|
||||
|
||||
// Folded unfolded
|
||||
@HostBinding('class.unfolded')
|
||||
unfolded: boolean;
|
||||
|
||||
// Private
|
||||
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
|
||||
{
|
||||
this.folded = true;
|
||||
|
||||
// Add a css class to the body
|
||||
this.renderer.addClass(this.document.body, 'fuse-sidebar-folded');
|
||||
}
|
||||
|
||||
/**
|
||||
* Unfold the sidebar permanently
|
||||
*/
|
||||
unfold(): void
|
||||
{
|
||||
this.folded = false;
|
||||
|
||||
// Remove the css class from the body
|
||||
this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded');
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the sidebar fold/unfold permanently
|
||||
*/
|
||||
toggleFold(): void
|
||||
{
|
||||
if ( this.folded )
|
||||
{
|
||||
this.unfold();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.fold();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
15
src/@fuse/components/sidebar/sidebar.module.ts
Normal file
15
src/@fuse/components/sidebar/sidebar.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FuseSidebarComponent } from './sidebar.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseSidebarComponent
|
||||
],
|
||||
exports : [
|
||||
FuseSidebarComponent
|
||||
]
|
||||
})
|
||||
export class FuseSidebarModule
|
||||
{
|
||||
}
|
||||
74
src/@fuse/components/sidebar/sidebar.service.ts
Normal file
74
src/@fuse/components/sidebar/sidebar.service.ts
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
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];
|
||||
}
|
||||
}
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
<div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
|
||||
|
||||
<h3>Navigation:</h3>
|
||||
<mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
<mat-radio-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>
|
||||
|
|
@ -22,30 +22,30 @@
|
|||
</mat-radio-group>
|
||||
|
||||
<h3>Navigation Fold (for vertical navigation):</h3>
|
||||
<mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
|
||||
<mat-slide-toggle [(ngModel)]="config.layout.navigationFolded"
|
||||
(change)="onSettingsChange()">
|
||||
Folded
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Toolbar:</h3>
|
||||
<mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
<mat-radio-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)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
<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)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
|
||||
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
<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>
|
||||
|
|
@ -57,19 +57,19 @@
|
|||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Toolbar Color</h4>
|
||||
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
|
||||
<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)]="fuseSettings.colorClasses.navbar"
|
||||
<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)]="fuseSettings.colorClasses.footer"
|
||||
<fuse-material-color-picker [(selectedClass)]="config.colorClasses.footer"
|
||||
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
|
||||
<h3>Router Animation:</h3>
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
|
||||
<mat-select class="p-0" [(ngModel)]="config.routerAnimation">
|
||||
<mat-option value="none">
|
||||
None
|
||||
</mat-option>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/app/core/scss/fuse";
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
|
||||
import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseConfigService } from '../../services/config.service';
|
||||
import { fuseAnimations } from '../../animations';
|
||||
import { FuseNavigationService } from '../navigation/navigation.service';
|
||||
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseConfigService } from '@fuse/services/config.service';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
|
||||
import { navigation } from 'app/navigation/navigation';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-theme-options',
|
||||
|
|
@ -18,9 +21,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
@ViewChild('overlay') overlay: ElementRef;
|
||||
|
||||
public player: AnimationPlayer;
|
||||
fuseSettings: any;
|
||||
config: any;
|
||||
|
||||
onSettingsChanged: Subscription;
|
||||
onConfigChanged: Subscription;
|
||||
|
||||
@HostBinding('class.bar-closed') barClosed: boolean;
|
||||
|
||||
|
|
@ -33,19 +36,19 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
{
|
||||
this.barClosed = true;
|
||||
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
this.onConfigChanged =
|
||||
this.fuseConfig.onConfigChanged
|
||||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.fuseSettings = newSettings;
|
||||
(newConfig) => {
|
||||
this.config = newConfig;
|
||||
}
|
||||
);
|
||||
|
||||
// Get the nav model and add customize nav item
|
||||
// that opens the bar programmatically
|
||||
const navModel = this.navigationService.getNavigationModel();
|
||||
const nav: any = navigation;
|
||||
|
||||
navModel.push({
|
||||
nav.push({
|
||||
'id' : 'custom-function',
|
||||
'title' : 'Custom Function',
|
||||
'type' : 'group',
|
||||
|
|
@ -70,9 +73,14 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
});
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
this.onConfigChanged.unsubscribe();
|
||||
}
|
||||
|
||||
onSettingsChange()
|
||||
{
|
||||
this.fuseConfig.setSettings(this.fuseSettings);
|
||||
this.fuseConfig.setConfig(this.config);
|
||||
}
|
||||
|
||||
closeBar()
|
||||
|
|
@ -104,9 +112,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
|
||||
this.player.play();
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
this.onSettingsChanged.unsubscribe();
|
||||
}
|
||||
}
|
||||
37
src/@fuse/components/theme-options/theme-options.module.ts
Normal file
37
src/@fuse/components/theme-options/theme-options.module.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
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
|
||||
{
|
||||
}
|
||||
11
src/@fuse/components/widget/widget-toggle.directive.ts
Normal file
11
src/@fuse/components/widget/widget-toggle.directive.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { Directive, ElementRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseWidgetToggle]'
|
||||
})
|
||||
export class FuseWidgetToggleDirective
|
||||
{
|
||||
constructor(public el: ElementRef)
|
||||
{
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { AfterContentInit, Component, ContentChildren, ElementRef, HostBinding, OnInit, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
|
||||
import { AfterContentInit, Component, ContentChildren, ElementRef, HostBinding, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
|
||||
import { FuseWidgetToggleDirective } from './widget-toggle.directive';
|
||||
|
||||
@Component({
|
||||
|
|
@ -8,7 +8,7 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive';
|
|||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
export class FuseWidgetComponent implements OnInit, AfterContentInit
|
||||
export class FuseWidgetComponent implements AfterContentInit
|
||||
{
|
||||
@HostBinding('class.flipped') flipped = false;
|
||||
@ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
|
||||
|
|
@ -17,11 +17,6 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
|
|||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
ngAfterContentInit()
|
||||
{
|
||||
setTimeout(() => {
|
||||
|
|
@ -1,20 +1,17 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { SharedModule } from '../../modules/shared.module';
|
||||
|
||||
import { FuseWidgetComponent } from './widget.component';
|
||||
import { FuseWidgetToggleDirective } from './widget-toggle.directive';
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
SharedModule
|
||||
declarations: [
|
||||
FuseWidgetComponent,
|
||||
FuseWidgetToggleDirective
|
||||
],
|
||||
exports : [
|
||||
FuseWidgetComponent,
|
||||
FuseWidgetToggleDirective
|
||||
],
|
||||
declarations: [
|
||||
FuseWidgetComponent,
|
||||
FuseWidgetToggleDirective
|
||||
]
|
||||
})
|
||||
export class FuseWidgetModule
|
||||
{
|
||||
24
src/@fuse/directives/directives.ts
Normal file
24
src/@fuse/directives/directives.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
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
|
||||
{
|
||||
}
|
||||
|
|
@ -2,8 +2,9 @@ import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '
|
|||
import { MatSidenav } from '@angular/material';
|
||||
import { ObservableMedia } from '@angular/flex-layout';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseMatchMedia } from '../../services/match-media.service';
|
||||
import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
|
||||
|
||||
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
|
||||
import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseMatSidenavHelper]'
|
||||
|
|
@ -11,15 +12,13 @@ import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
|
|||
export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
|
||||
{
|
||||
matchMediaSubscription: Subscription;
|
||||
|
||||
@HostBinding('class.mat-is-locked-open') isLockedOpen = true;
|
||||
|
||||
@Input('fuseMatSidenavHelper') id: string;
|
||||
@Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
|
||||
|
||||
constructor(
|
||||
private fuseMatSidenavService: FuseMatSidenavHelperService,
|
||||
private fuseMatchMedia: FuseMatchMedia,
|
||||
private fuseMatchMedia: FuseMatchMediaService,
|
||||
private observableMedia: ObservableMedia,
|
||||
private matSidenav: MatSidenav
|
||||
)
|
||||
|
|
@ -1,15 +1,17 @@
|
|||
import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy } from '@angular/core';
|
||||
import { FuseConfigService } from '../../services/config.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
|
||||
import { FuseConfigService } from '@fuse/services/config.service';
|
||||
|
||||
@Directive({
|
||||
selector: '[fusePerfectScrollbar]'
|
||||
})
|
||||
export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
|
||||
export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
|
||||
{
|
||||
onSettingsChanged: Subscription;
|
||||
onConfigChanged: Subscription;
|
||||
isDisableCustomScrollbars = false;
|
||||
isMobile = false;
|
||||
isInitialized = true;
|
||||
|
|
@ -21,13 +23,16 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
|
|||
private platform: Platform
|
||||
)
|
||||
{
|
||||
this.onSettingsChanged =
|
||||
this.fuseConfig.onSettingsChanged
|
||||
.subscribe(
|
||||
(settings) => {
|
||||
this.isDisableCustomScrollbars = !settings.customScrollbars;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
this.onConfigChanged =
|
||||
this.fuseConfig.onConfigChanged.subscribe(
|
||||
(settings) => {
|
||||
this.isDisableCustomScrollbars = !settings.customScrollbars;
|
||||
}
|
||||
);
|
||||
|
||||
if ( this.platform.ANDROID || this.platform.IOS )
|
||||
{
|
||||
|
|
@ -56,7 +61,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
|
|||
return;
|
||||
}
|
||||
|
||||
this.onSettingsChanged.unsubscribe();
|
||||
this.onConfigChanged.unsubscribe();
|
||||
|
||||
// Destroy the perfect-scrollbar
|
||||
this.ps.destroy();
|
||||
47
src/@fuse/fuse.module.ts
Normal file
47
src/@fuse/fuse.module.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
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,5 +1,5 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { FuseUtils } from '../fuseUtils';
|
||||
import { FuseUtils } from '@fuse/utils';
|
||||
|
||||
@Pipe({name: 'filter'})
|
||||
export class FilterPipe implements PipeTransform
|
||||
|
|
@ -13,7 +13,6 @@ import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
|
|||
HtmlToPlaintextPipe,
|
||||
FilterPipe,
|
||||
CamelCaseToDashPipe
|
||||
|
||||
],
|
||||
imports : [],
|
||||
exports : [
|
||||
|
|
@ -24,8 +23,6 @@ import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
|
|||
CamelCaseToDashPipe
|
||||
]
|
||||
})
|
||||
|
||||
export class FusePipesModule
|
||||
{
|
||||
|
||||
}
|
||||
|
|
@ -231,9 +231,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
> .mat-sidenav-content,
|
||||
> .mat-drawer-content {
|
||||
width: calc(100% - 240px);
|
||||
min-width: 0;
|
||||
|
||||
.center {
|
||||
width: calc(100% - 32px);
|
||||
min-width: 0;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
width: calc(100% - 64px);
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user