purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved ThemeOptions to the Fuse Sidebar

Browse Source 
Replaced align with position on Fuse Sidebar components
This commit is contained in:
Sercan Yemen 2018-05-30 12:23:09 +03:00
parent b918fa4122
commit 232b4de752
14 changed files with 190 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,6 @@
<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 mat-white-bg mat-elevation-z8" fusePerfectScrollbar>
<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()">
<button mat-icon-button class="close-button" (click)="_toggleSidebarOpen('themeOptionsPanel')">
<mat-icon>close</mat-icon>
</button>
@ -26,11 +20,11 @@
<div formGroupName="layout">
<!-- VERTICAL LAYOUT STYLES -->
<h3>Vertical Layout Styles:</h3>
<h3>Scrollable Area:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-1">Layout 1</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-2">Layout 2</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-3">Layout 3</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-1">Content</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-2">Wrapper</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="vertical-layout-3">Body</mat-radio-button>
</mat-radio-group>
<!-- HORIZONTAL LAYOUT STYLES -->
@ -79,8 +73,15 @@
<h3 class="mt-24">Toolbar:</h3>
<mat-radio-group formControlName="position" fxLayout="column" fxLayoutAlign="start start">
<mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="above-sticky"
[disabled]="fuseConfig.layout.style === 'vertical-layout-1' || fuseConfig.layout.style === 'vertical-layout-2'">
Above Sticky
</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="below-sticky">Below Sticky</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="below-sticky"
[disabled]="fuseConfig.layout.style === 'vertical-layout-3'">
Below Sticky
</mat-radio-button>
<mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</mat-radio-group>

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

@ -10,33 +10,14 @@
}
:host {
position: fixed;
display: block;
right: 0;
top: 160px;
z-index: 998;
&.bar-closed .theme-options-panel {
display: none;
}
display: flex;
.theme-options-panel {
position: absolute;
right: 0;
top: 0;
width: 360px;
transform: translate3d(100%, 0, 0);
z-index: 999;
max-height: calc(100vh - 200px);
display: flex;
flex: 1 0 auto;
padding: 24px;
overflow: auto;
@include media-breakpoint-down('xs') {
top: -120px;
max-height: calc(100vh - 100px);
width: 90vw;
}
.close-button {
position: absolute;
top: 8px;
@ -61,25 +42,6 @@
}
}
.theme-options-panel-overlay {
position: fixed;
display: block;
background: rgba(0, 0, 0, 0);
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 998;
@include media-breakpoint-down('sm') {
background: rgba(0, 0, 0, 0.37);
}
&.hidden {
display: none;
}
}
.mat-list .mat-list-item {
font-size: 15px;
}
@ -87,29 +49,4 @@
.mat-divider {
margin: 16px;
}
.open-button {
position: absolute;
top: 0;
left: -48px;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
cursor: pointer;
border-radius: 0;
margin: 0;
pointer-events: auto;
opacity: .75;
z-index: 998;
mat-icon {
animation: rotating 3s linear infinite;
}
&:hover {
opacity: 1;
}
}
}

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

@ -1,5 +1,4 @@
import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@ -7,6 +6,7 @@ import { takeUntil } from 'rxjs/operators';
import { fuseAnimations } from '@fuse/animations';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'fuse-theme-options',
@ -18,16 +18,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
fuseConfig: any;
fuseConfigForm: FormGroup;
player: AnimationPlayer;
@ViewChild('openButton')
openButton;
@ViewChild('panel')
panel;
@ViewChild('overlay')
overlay: ElementRef;
@HostBinding('class.bar-closed')
barClosed: boolean;
@ -35,11 +25,20 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FormBuilder} _formBuilder
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSidebarService} _fuseSidebarService
* @param {Renderer2} _renderer
*/
constructor(
private _animationBuilder: AnimationBuilder,
private _formBuilder: FormBuilder,
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
private _fuseSidebarService: FuseSidebarService,
private _renderer: Renderer2
)
{
@ -92,15 +91,22 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
});
// Subscribe to the form value changes
this.fuseConfigForm.valueChanges.subscribe((config) => {
this.fuseConfigForm.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
// Update the config
this._fuseConfigService.config = config;
});
// Listen for the overlay's click event
this._renderer.listen(this.overlay.nativeElement, 'click', () => {
this.closeBar();
// Subscribe to the layout style value changes
const layoutControls: any = this.fuseConfigForm.controls.layout;
layoutControls.controls.style.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((layout) => {
// Reset the config
this.resetConfig(layout);
});
// Add customize nav item that opens the bar programmatically
@ -115,7 +121,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
'type' : 'item',
'icon' : 'settings',
'function': () => {
this.openBar();
this._toggleSidebarOpen('themeOptionsPanel');
}
}
]
@ -137,48 +143,93 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
this._fuseNavigationService.removeNavigationItem('custom-function');
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar open
*
* @param key
* @private
*/
private _toggleSidebarOpen(key): void
{
this._fuseSidebarService.getSidebar(key).toggleOpen();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* On config change
*/
onConfigChange(layoutChanged = false): void
{
this._fuseConfigService.config = this.fuseConfig;
// If the layout changed, reset the settings
if ( layoutChanged )
{
this.resetConfig();
}
}
/**
* Reset the config correctly
*/
resetConfig(): void
resetConfig(layout): void
{
console.log(layout);
// Check the layout style and reset the
// configuration properly so we don't end
// up with options that don't work with
// selected layout style
switch ( this.fuseConfig.layout.style )
switch ( layout )
{
// Vertical
// Layout 1
case 'vertical-layout-1':
{
this._fuseConfigService.config = {
// Reset the config form
this.fuseConfigForm.patchValue({
layout: {
style : 'vertical-layout-1',
navigation: {
position: 'left'
folder: false
},
toolbar : {
position: 'below'
}
}
};
});
break;
}
// Layout 2
case 'vertical-layout-2':
{
console.log('resetting the options for vertical-layout-2...');
// Reset the config form
this.fuseConfigForm.patchValue({
layout: {
navigation: {
folder: false
},
toolbar : {
position: 'below'
}
}
});
break;
}
// Layout 3
case 'vertical-layout-3':
{
// Reset the config form
this.fuseConfigForm.patchValue({
layout: {
navigation: {
folder: false
},
toolbar : {
position: 'below'
}
}
});
break;
}
@ -189,40 +240,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
}
}
}
/**
* Open the bar
*/
openBar(): void
{
this.barClosed = false;
this.player =
this._animationBuilder
.build([
style({transform: 'translate3d(100%,0,0)'}),
animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
]).create(this.panel.nativeElement);
this.player.play();
}
/**
* Close the bar
*/
closeBar(): void
{
this.player =
this._animationBuilder
.build([
style({transform: 'translate3d(0,0,0)'}),
animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
]).create(this.panel.nativeElement);
this.player.play();
this.player.onDone(() => {
this.barClosed = true;
});
}
}

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

@ -4,7 +4,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
import { FuseDirectivesModule } from '@fuse/directives/directives';
import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
@NgModule({
@ -27,7 +30,9 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
MatSelectModule,
MatSlideToggleModule,
FuseMaterialColorPickerModule
FuseDirectivesModule,
FuseMaterialColorPickerModule,
FuseSidebarModule
],
exports : [
FuseThemeOptionsComponent

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

@ -12,3 +12,13 @@
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
<vertical-layout-3></vertical-layout-3>
</ng-container>
<!-- THEME OPTIONS PANEL -->
<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
(click)="_toggleSidebarOpen('themeOptionsPanel')">
<mat-icon>settings</mat-icon>
</button>
<fuse-sidebar name="themeOptionsPanel" position="right" [invisibleOverlay]="true">
<fuse-theme-options></fuse-theme-options>
</fuse-sidebar>

25
src/app/app.component.scss
View File

@ -1,6 +1,31 @@
:host {
position: relative;
display: flex;
flex: 1 1 auto;
width: 100%;
min-width: 0;
.theme-options-button {
position: absolute;
top: 160px;
right: 0;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
cursor: pointer;
border-radius: 0;
margin: 0;
pointer-events: auto;
opacity: .75;
z-index: 998;
mat-icon {
animation: rotating 3s linear infinite;
}
&:hover {
opacity: 1;
}
}
}

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

@ -5,6 +5,7 @@ import { takeUntil } from 'rxjs/operators';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
@ -30,6 +31,7 @@ export class AppComponent implements OnInit, OnDestroy
*
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSidebarService} _fuseSidebarService
* @param {FuseSplashScreenService} _fuseSplashScreenService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
* @param {TranslateService} _translateService
@ -37,6 +39,7 @@ export class AppComponent implements OnInit, OnDestroy
constructor(
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
private _fuseSidebarService: FuseSidebarService,
private _fuseSplashScreenService: FuseSplashScreenService,
private _fuseTranslationLoaderService: FuseTranslationLoaderService,
private _translateService: TranslateService
@ -93,4 +96,19 @@ export class AppComponent implements OnInit, OnDestroy
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar open
*
* @param key
* @private
*/
private _toggleSidebarOpen(key): void
{
this._fuseSidebarService.getSidebar(key).toggleOpen();
}
}

8
src/app/app.module.ts
View File

@ -4,12 +4,14 @@ import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatButtonModule, MatIconModule } from '@angular/material';
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 { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { fuseConfig } from 'app/fuse-config';
@ -68,9 +70,15 @@ const appRoutes: Routes = [
// Material moment date module
MatMomentDateModule,
// Material
MatButtonModule,
MatIconModule,
// Fuse modules
FuseModule.forRoot(fuseConfig),
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
// App modules
LayoutModule,

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

@ -55,7 +55,7 @@
</div>
<!-- NAVBAR: Right -->
<fuse-sidebar [name]="'navbar'" [align]="'right'"
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
@ -75,9 +75,7 @@
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" [align]="'right'" class="quick-panel">
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
<fuse-theme-options></fuse-theme-options>

3
src/app/layout/vertical/layout-1/layout-1.module.ts
View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { FuseSidebarModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { ContentModule } from 'app/layout/components/content/content.module';
@ -18,7 +18,6 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
imports : [
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
ContentModule,
FooterModule,

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

@ -55,7 +55,7 @@
</div>
<!-- NAVBAR: Right -->
<fuse-sidebar [name]="'navbar'" [align]="'right'"
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
@ -75,9 +75,7 @@
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" [align]="'right'" class="quick-panel">
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
<fuse-theme-options></fuse-theme-options>

3
src/app/layout/vertical/layout-2/layout-2.module.ts
View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { FuseSidebarModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { ContentModule } from 'app/layout/components/content/content.module';
@ -18,7 +18,6 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
imports : [
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
ContentModule,
FooterModule,

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

@ -47,7 +47,7 @@
</div>
<!-- NAVBAR: Right -->
<fuse-sidebar [name]="'navbar'" [align]="'right'"
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navigation.background"
@ -75,9 +75,7 @@
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" [align]="'right'" class="quick-panel">
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
<fuse-theme-options></fuse-theme-options>

3
src/app/layout/vertical/layout-3/layout-3.module.ts
View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { FuseSidebarModule } from '@fuse/components';
import { FuseSharedModule } from '@fuse/shared.module';
import { ContentModule } from 'app/layout/components/content/content.module';
@ -18,7 +18,6 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
imports : [
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
ContentModule,
FooterModule,