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

Added SidePanel to the layouts for controlling the chat bar and possible other bar properties via FuseConfig

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-12 13:19:34 +03:00
parent 2c7ef4de00
commit 6b8cd41d5e
13 changed files with 227 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,6 +132,23 @@
</div> </div>
<!-- SIDE PANEL -->
<div class="group" formGroupName="sidepanel">
<h2>Side Panel</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
</mat-radio-group>
</div>
</ng-container> </ng-container>
<!-- VERTICAL LAYOUT #2 --> <!-- VERTICAL LAYOUT #2 -->
@ -226,6 +243,23 @@
</div> </div>
<!-- SIDE PANEL -->
<div class="group" formGroupName="sidepanel">
<h2>Side Panel</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
</mat-radio-group>
</div>
</ng-container> </ng-container>
<!-- VERTICAL LAYOUT #3 --> <!-- VERTICAL LAYOUT #3 -->
@ -318,6 +352,23 @@
</div> </div>
<!-- SIDE PANEL -->
<div class="group" formGroupName="sidepanel">
<h2>Side Panel</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
</mat-radio-group>
</div>
</ng-container> </ng-container>
<!-- HORIZONTAL LAYOUT #1 --> <!-- HORIZONTAL LAYOUT #1 -->
@ -405,6 +456,23 @@
</div> </div>
<!-- SIDE PANEL -->
<div class="group" formGroupName="sidepanel">
<h2>Side Panel</h2>
<mat-slide-toggle formControlName="hidden">
Hide
</mat-slide-toggle>
<h3 class="mt-24">Position:</h3>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
</mat-radio-group>
</div>
</ng-container> </ng-container>
</ng-container> </ng-container>

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

@ -62,24 +62,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
// noinspection TypeScriptValidateTypes // noinspection TypeScriptValidateTypes
this.form = this._formBuilder.group({ this.form = this._formBuilder.group({
layout : this._formBuilder.group({ layout : this._formBuilder.group({
style : new FormControl(), style : new FormControl(),
width : new FormControl(), width : new FormControl(),
navbar : this._formBuilder.group({ navbar : this._formBuilder.group({
background: new FormControl(), background: new FormControl(),
folded : new FormControl(), folded : new FormControl(),
hidden : new FormControl(), hidden : new FormControl(),
position : new FormControl(), position : new FormControl(),
variant : new FormControl() variant : new FormControl()
}), }),
toolbar: this._formBuilder.group({ toolbar : this._formBuilder.group({
background: new FormControl(), background: new FormControl(),
hidden : new FormControl(), hidden : new FormControl(),
position : new FormControl() position : new FormControl()
}), }),
footer : this._formBuilder.group({ footer : this._formBuilder.group({
background: new FormControl(), background: new FormControl(),
hidden : new FormControl(), hidden : new FormControl(),
position : new FormControl() position : new FormControl()
}),
sidepanel: this._formBuilder.group({
hidden: new FormControl(),
position : new FormControl()
}) })
}), }),
customScrollbars: new FormControl() customScrollbars: new FormControl()

4
src/@fuse/types/fuse-config.ts
View File

@ -19,6 +19,10 @@ export interface FuseConfig
background: string, background: string,
hidden: boolean, hidden: boolean,
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed' position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
},
sidepanel: {
hidden: boolean,
position: 'left' | 'right'
} }
}; };
customScrollbars: boolean; customScrollbars: boolean;

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

@ -20,6 +20,7 @@
<!-- THEME OPTIONS PANEL --> <!-- THEME OPTIONS PANEL -->
<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button" <button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
[ngClass]="{'right-side-panel': fuseConfig.layout.sidepanel.position === 'right'}"
(click)="toggleSidebarOpen('themeOptionsPanel')"> (click)="toggleSidebarOpen('themeOptionsPanel')">
<mat-icon>settings</mat-icon> <mat-icon>settings</mat-icon>
</button> </button>

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

@ -11,7 +11,7 @@
.theme-options-button { .theme-options-button {
position: absolute; position: absolute;
top: 160px; top: 160px;
right: 70px; right: 0;
width: 48px; width: 48px;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
@ -23,8 +23,12 @@
opacity: .90; opacity: .90;
z-index: 998; z-index: 998;
@include media-breakpoint-down('md') {
right: 0; &.right-side-panel {
@include media-breakpoint-up('lg') {
right: 70px;
}
} }
mat-icon { mat-icon {

14
src/app/fuse-config/index.ts
View File

@ -10,24 +10,28 @@ import { FuseConfig } from '@fuse/types';
export const fuseConfig: FuseConfig = { export const fuseConfig: FuseConfig = {
layout : { layout : {
style : 'vertical-layout-1', style : 'vertical-layout-1',
width : 'fullwidth', width : 'fullwidth',
navbar : { navbar : {
background: 'mat-fuse-dark-700-bg', background: 'mat-fuse-dark-700-bg',
folded : false, folded : false,
hidden : false, hidden : false,
position : 'left', position : 'left',
variant : 'vertical-style-1' variant : 'vertical-style-1'
}, },
toolbar: { toolbar : {
background: 'mat-white-500-bg', background: 'mat-white-500-bg',
hidden : false, hidden : false,
position : 'below-static' position : 'below-static'
}, },
footer : { footer : {
background: 'mat-fuse-dark-900-bg', background: 'mat-fuse-dark-900-bg',
hidden : false, hidden : false,
position : 'below-fixed' position : 'below-fixed'
},
sidepanel: {
hidden : false,
position: 'right'
} }
}, },
customScrollbars: true customScrollbars: true

2
src/app/layout/components/chat-panel/chat-panel.component.html
View File

@ -22,7 +22,7 @@
<mat-icon class="secondary-text s-20">arrow_forward</mat-icon> <mat-icon class="secondary-text s-20">arrow_forward</mat-icon>
</button> </button>
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md> <button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
<mat-icon class="secondary-text">arrow_forward</mat-icon> <mat-icon class="secondary-text">arrow_forward</mat-icon>
</button> </button>

20
src/app/layout/components/chat-panel/chat-panel.component.scss
View File

@ -10,6 +10,11 @@ chat-panel {
z-index: 99; z-index: 99;
overflow: hidden; overflow: hidden;
@include media-breakpoint-down('xs') {
max-width: none !important;
width: 100% !important;
}
.header { .header {
height: 64px; height: 64px;
max-height: 64px; max-height: 64px;
@ -26,6 +31,7 @@ chat-panel {
transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out;
} }
} }
} }
#contacts-list { #contacts-list {
@ -350,6 +356,20 @@ fuse-sidebar {
width: 100vw !important; width: 100vw !important;
} }
&.left-chat-panel {
.header {
.toggle-sidebar-folded,
.toggle-sidebar-open {
mat-icon {
transform: rotate(180deg);
}
}
}
}
// Folded // Folded
&.folded { &.folded {

8
src/app/layout/components/chat-panel/chat-panel.component.ts
View File

@ -142,14 +142,6 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar folded status
*/
toggleSidebarFolded(): void
{
this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
}
/** /**
* Fold the temporarily unfolded sidebar back * Fold the temporarily unfolded sidebar back
*/ */

34
src/app/layout/horizontal/layout-1/layout-1.component.html
View File

@ -1,3 +1,17 @@
<!-- SIDE PANEL -->
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
<!-- CHAT PANEL -->
<fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}"> <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
<!-- TOOLBAR: Above --> <!-- TOOLBAR: Above -->
@ -55,13 +69,19 @@
</div> </div>
<!-- CHAT PANEL --> <!-- SIDE PANEL -->
<fuse-sidebar class="chat-panel" name="chatPanel" position="right" <ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md"> <!-- CHAT PANEL -->
<chat-panel></chat-panel> <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
</fuse-sidebar> [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
<!-- / CHAT PANEL --> lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<!-- QUICK PANEL --> <!-- QUICK PANEL -->
<fuse-sidebar name="quickPanel" position="right" class="quick-panel"> <fuse-sidebar name="quickPanel" position="right" class="quick-panel">

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

@ -1,3 +1,17 @@
<!-- SIDE PANEL -->
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
<!-- CHAT PANEL -->
<fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}"> <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
<!-- TOOLBAR: Above --> <!-- TOOLBAR: Above -->
@ -67,13 +81,19 @@
</div> </div>
<!-- CHAT PANEL --> <!-- SIDE PANEL -->
<fuse-sidebar class="chat-panel" name="chatPanel" position="right" <ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md"> <!-- CHAT PANEL -->
<chat-panel></chat-panel> <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
</fuse-sidebar> [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
<!-- / CHAT PANEL --> lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<!-- QUICK PANEL --> <!-- QUICK PANEL -->
<fuse-sidebar name="quickPanel" position="right" class="quick-panel"> <fuse-sidebar name="quickPanel" position="right" class="quick-panel">

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

@ -1,3 +1,17 @@
<!-- SIDE PANEL -->
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
<!-- CHAT PANEL -->
<fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}"> <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
<!-- TOOLBAR: Above fixed --> <!-- TOOLBAR: Above fixed -->
@ -67,13 +81,19 @@
</div> </div>
<!-- CHAT PANEL --> <!-- SIDE PANEL -->
<fuse-sidebar class="chat-panel" name="chatPanel" position="right" <ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md"> <!-- CHAT PANEL -->
<chat-panel></chat-panel> <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
</fuse-sidebar> [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
<!-- / CHAT PANEL --> lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<!-- QUICK PANEL --> <!-- QUICK PANEL -->
<fuse-sidebar name="quickPanel" position="right" class="quick-panel"> <fuse-sidebar name="quickPanel" position="right" class="quick-panel">

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

@ -1,3 +1,17 @@
<!-- SIDE PANEL -->
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
<!-- CHAT PANEL -->
<fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}"> <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
<!-- TOOLBAR: Above fixed --> <!-- TOOLBAR: Above fixed -->
@ -53,13 +67,19 @@
</div> </div>
<!-- CHAT PANEL --> <!-- SIDE PANEL -->
<fuse-sidebar class="chat-panel" name="chatPanel" position="right" <ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md"> <!-- CHAT PANEL -->
<chat-panel></chat-panel> <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
</fuse-sidebar> [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
<!-- / CHAT PANEL --> lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<!-- QUICK PANEL --> <!-- QUICK PANEL -->
<fuse-sidebar name="quickPanel" position="right" class="quick-panel"> <fuse-sidebar name="quickPanel" position="right" class="quick-panel">