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

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>
<!-- 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>
<!-- VERTICAL LAYOUT #2 -->
@ -226,6 +243,23 @@
</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>
<!-- VERTICAL LAYOUT #3 -->
@ -318,6 +352,23 @@
</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>
<!-- HORIZONTAL LAYOUT #1 -->
@ -405,6 +456,23 @@
</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>

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

@ -80,6 +80,10 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
background: new FormControl(),
hidden : new FormControl(),
position : new FormControl()
}),
sidepanel: this._formBuilder.group({
hidden: new FormControl(),
position : new FormControl()
})
}),
customScrollbars: new FormControl()

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

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

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

@ -20,6 +20,7 @@
<!-- THEME OPTIONS PANEL -->
<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')">
<mat-icon>settings</mat-icon>
</button>

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

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

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

@ -28,6 +28,10 @@ export const fuseConfig: FuseConfig = {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'below-fixed'
},
sidepanel: {
hidden : false,
position: 'right'
}
},
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>
</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>
</button>

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

@ -10,6 +10,11 @@ chat-panel {
z-index: 99;
overflow: hidden;
@include media-breakpoint-down('xs') {
max-width: none !important;
width: 100% !important;
}
.header {
height: 64px;
max-height: 64px;
@ -26,6 +31,7 @@ chat-panel {
transition: opacity 300ms ease-in-out;
}
}
}
#contacts-list {
@ -350,6 +356,20 @@ fuse-sidebar {
width: 100vw !important;
}
&.left-chat-panel {
.header {
.toggle-sidebar-folded,
.toggle-sidebar-open {
mat-icon {
transform: rotate(180deg);
}
}
}
}
// 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
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar folded status
*/
toggleSidebarFolded(): void
{
this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
}
/**
* Fold the temporarily unfolded sidebar back
*/

22
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'}">
<!-- TOOLBAR: Above -->
@ -55,14 +69,20 @@
</div>
<!-- SIDE PANEL -->
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
<!-- CHAT PANEL -->
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
<fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<!-- QUICK PANEL -->
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
<quick-panel></quick-panel>

22
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'}">
<!-- TOOLBAR: Above -->
@ -67,14 +81,20 @@
</div>
<!-- SIDE PANEL -->
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
<!-- CHAT PANEL -->
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
<fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<!-- QUICK PANEL -->
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
<quick-panel></quick-panel>

22
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'}">
<!-- TOOLBAR: Above fixed -->
@ -67,14 +81,20 @@
</div>
<!-- SIDE PANEL -->
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
<!-- CHAT PANEL -->
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
<fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<!-- QUICK PANEL -->
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
<quick-panel></quick-panel>

22
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'}">
<!-- TOOLBAR: Above fixed -->
@ -53,14 +67,20 @@
</div>
<!-- SIDE PANEL -->
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
<!-- CHAT PANEL -->
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
<fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
lockedOpen="gt-md">
<chat-panel></chat-panel>
</fuse-sidebar>
<!-- / CHAT PANEL -->
</ng-container>
<!-- / SIDE PANEL -->
<!-- QUICK PANEL -->
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
<quick-panel></quick-panel>