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

(Theme Options) component added.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-04 12:15:36 +03:00
parent 522a5ec976
commit f08fdf3f54
5 changed files with 160 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/core/components/theme-options/theme-options.component.html Normal file
View File

@ -0,0 +1,40 @@
<button #openButton *ngIf="!isOpened" md-icon-button class="open-button md-primary-bg mat-elevation-z2" (click)="openBar()">
<md-icon>settings</md-icon>
</button>
<div #panel class="theme-options-panel md-white-bg mat-elevation-z2 p-16">
<button md-icon-button class="close-button" (click)="closeBar()">
<md-icon>close</md-icon>
</button>
<md-list>
<h3 md-subheader>Navigation:</h3>
<md-list-item>
<md-radio-group [(ngModel)]="layoutSettings.navigation" (ngModelChange)="onLayoutSettingsChanged()">
<md-radio-button class="mr-8" value="left">Left</md-radio-button>
<md-radio-button class="mr-8" value="right">Right</md-radio-button>
<md-radio-button class="mr-8" value="none">None</md-radio-button>
</md-radio-group>
</md-list-item>
<h3 md-subheader>Toolbar:</h3>
<md-list-item>
<md-radio-group [(ngModel)]="layoutSettings.toolbar" (ngModelChange)="onLayoutSettingsChanged()">
<md-radio-button class="mr-8" value="below">Below</md-radio-button>
<md-radio-button class="mr-8" value="above">Above</md-radio-button>
<md-radio-button class="mr-8" value="none">None</md-radio-button>
</md-radio-group>
</md-list-item>
<h3 md-subheader>Footer:</h3>
<md-list-item>
<md-radio-group [(ngModel)]="layoutSettings.footer" (ngModelChange)="onLayoutSettingsChanged()">
<md-radio-button class="mr-8" value="below">Below</md-radio-button>
<md-radio-button class="mr-8" value="above">Above</md-radio-button>
<md-radio-button class="mr-8" value="none">None</md-radio-button>
</md-radio-group>
</md-list-item>
</md-list>
</div>

46
src/app/core/components/theme-options/theme-options.component.scss Normal file
View File

@ -0,0 +1,46 @@
@import "src/app/core/scss/fuse";
:host {
position: fixed;
display: block;
right: 0;
top: 160px;
.theme-options-panel {
position: absolute;
right: 0;
top: 0;
width: 320px;
height: 480px;
transform: translate3d(100%, 0, 0);
z-index: 999;
.close-button {
position: absolute;
top: 0;
right: 0;
}
}
.open-button {
position: absolute;
top: 0;
left: -48px;
z-index: 998;
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;
&:hover {
opacity: 1;
}
}
}

70
src/app/core/components/theme-options/theme-options.component.ts Normal file
View File

@ -0,0 +1,70 @@
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { style, animate, sequence, AnimationBuilder, AnimationPlayer } from '@angular/animations';
import { Subscription } from 'rxjs/Subscription';
import { FuseLayoutService } from '../../services/layout.service';
@Component({
selector : 'fuse-theme-options',
templateUrl: './theme-options.component.html',
styleUrls : ['./theme-options.component.scss']
})
export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
@ViewChild('openButton') openButton;
@ViewChild('panel') panel;
public player: AnimationPlayer;
onSettingsChanged: Subscription;
layoutSettings: { navigation: string, toolbar: string, footer: string };
constructor(
private animationBuilder: AnimationBuilder,
private layoutService: FuseLayoutService
)
{
this.onSettingsChanged =
this.layoutService.onSettingsChanged
.subscribe(
(newSettings) => {
this.layoutSettings = newSettings;
}
);
}
closeBar()
{
this.player =
this.animationBuilder
.build([
style({transform: 'translate3d(0,0,0)'}),
animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
]).create(this.panel.nativeElement);
this.player.play();
}
openBar()
{
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();
}
ngOnInit()
{
}
ngOnDestroy()
{
this.onSettingsChanged.unsubscribe();
}
onLayoutSettingsChanged()
{
this.layoutService.onSettingsChanged.next(this.layoutSettings);
}
}

2
src/app/main/main.component.html
View File

@ -49,3 +49,5 @@
<!-- / QUICK PANEL -->
</md-sidenav-container>
<fuse-theme-options></fuse-theme-options>

2
src/app/main/main.module.ts
View File

@ -9,6 +9,7 @@ import { FuseToolbarComponent } from './toolbar/toolbar.component';
import { FuseNavigationModule } from '../core/components/navigation/navigation.module';
import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive';
import { QuickPanelComponent } from './quick-panel/quick-panel.component';
import { FuseThemeOptionsComponent } from '../core/components/theme-options/theme-options.component';
@NgModule({
declarations: [
@ -18,6 +19,7 @@ import { QuickPanelComponent } from './quick-panel/quick-panel.component';
FuseNavbarComponent,
FuseToolbarComponent,
FuseNavbarToggleDirective,
FuseThemeOptionsComponent,
QuickPanelComponent
],
imports : [