Merge branch 'master' into skeleton

(Chat Panel) Style and logic tweaks
(Navbar) Fixed: IE11 issues
2025-12-25 06:07:09 +00:00 · 2018-07-12 17:46:33 +03:00 · 2018-07-12 17:45:46 +03:00 · 2018-07-12 16:04:56 +03:00 · 2018-07-12 15:48:55 +03:00 · 2018-07-12 13:59:51 +03:00
12 changed files with 163 additions and 12 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "fuse",
-  "version": "6.2.1",
+  "version": "6.2.3",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "fuse",
-  "version": "6.2.1",
+  "version": "6.2.3",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
--- a/src/@fuse/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -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>
--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/src/@fuse/components/theme-options/theme-options.component.ts
@@ -62,24 +62,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
        // noinspection TypeScriptValidateTypes
        this.form = this._formBuilder.group({
            layout          : this._formBuilder.group({
-                style  : new FormControl(),
-                width  : new FormControl(),
-                navbar : this._formBuilder.group({
+                style    : new FormControl(),
+                width    : new FormControl(),
+                navbar   : this._formBuilder.group({
                    background: new FormControl(),
                    folded    : new FormControl(),
                    hidden    : new FormControl(),
                    position  : new FormControl(),
                    variant   : new FormControl()
                }),
-                toolbar: this._formBuilder.group({
+                toolbar  : this._formBuilder.group({
                    background: new FormControl(),
                    hidden    : new FormControl(),
                    position  : new FormControl()
                }),
-                footer : this._formBuilder.group({
+                footer   : this._formBuilder.group({
                    background: new FormControl(),
                    hidden    : new FormControl(),
                    position  : new FormControl()
+                }),
+                sidepanel: this._formBuilder.group({
+                    hidden: new FormControl(),
+                    position  : new FormControl()
                })
            }),
            customScrollbars: new FormControl()
--- a/src/@fuse/types/fuse-config.ts
+++ b/src/@fuse/types/fuse-config.ts
@@ -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;
--- a/src/app/fuse-config/index.ts
+++ b/src/app/fuse-config/index.ts
@@ -10,24 +10,28 @@ import { FuseConfig } from '@fuse/types';

 export const fuseConfig: FuseConfig = {
    layout          : {
-        style  : 'vertical-layout-1',
-        width  : 'fullwidth',
-        navbar : {
+        style    : 'vertical-layout-1',
+        width    : 'fullwidth',
+        navbar   : {
            background: 'mat-fuse-dark-700-bg',
            folded    : false,
            hidden    : false,
            position  : 'left',
            variant   : 'vertical-style-1'
        },
-        toolbar: {
+        toolbar  : {
            background: 'mat-white-500-bg',
            hidden    : false,
            position  : 'below-static'
        },
-        footer : {
+        footer   : {
            background: 'mat-fuse-dark-900-bg',
            hidden    : false,
            position  : 'below-fixed'
+        },
+        sidepanel: {
+            hidden  : false,
+            position: 'right'
        }
    },
    customScrollbars: true
--- a/src/app/layout/components/navbar/navbar.component.scss
+++ b/src/app/layout/components/navbar/navbar.component.scss
@@ -3,4 +3,5 @@ navbar {
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
+    height: 100%;
 }
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
@@ -41,6 +41,8 @@ fuse-sidebar {
                                position: relative;
                                top: auto;
                                padding: 0;
+                                transform: translateX(0);
+                                left: auto;

                                .avatar {
                                    width: 40px;
@@ -79,11 +81,13 @@ navbar {
            align-items: center;
            justify-content: space-between;
            min-height: 64px;
+            max-height: 64px;
            height: 64px;
            padding: 12px 12px 12px 20px;

            @include media-breakpoint('xs') {
                min-height: 56px;
+                max-height: 56px;
                height: 56px;
            }

@@ -134,6 +138,8 @@ navbar {
                    top: 92px;
                    border-radius: 50%;
                    padding: 8px;
+                    transform: translateX(-50%);
+                    left: 50%;

                    .avatar {
                        width: 72px;
--- a/src/app/layout/horizontal/layout-1/layout-1.component.html
+++ b/src/app/layout/horizontal/layout-1/layout-1.component.html
@@ -1,3 +1,11 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">

    <!-- TOOLBAR: Above -->
@@ -55,6 +63,14 @@

 </div>

+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
    <quick-panel></quick-panel>
--- a/src/app/layout/vertical/layout-1/layout-1.component.html
+++ b/src/app/layout/vertical/layout-1/layout-1.component.html
@@ -1,3 +1,11 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">

    <!-- TOOLBAR: Above -->
@@ -67,6 +75,14 @@

 </div>

+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
    <quick-panel></quick-panel>
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/src/app/layout/vertical/layout-2/layout-2.component.html
@@ -1,3 +1,11 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">

    <!-- TOOLBAR: Above fixed -->
@@ -67,6 +75,14 @@

 </div>

+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
    <quick-panel></quick-panel>
--- a/src/app/layout/vertical/layout-3/layout-3.component.html
+++ b/src/app/layout/vertical/layout-3/layout-3.component.html
@@ -1,3 +1,11 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">

    <!-- TOOLBAR: Above fixed -->
@@ -53,6 +61,14 @@

 </div>

+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
    <quick-panel></quick-panel>
Author	SHA1	Message	Date
Sercan Yemen	d25ce3601a	Merge branch 'master' into skeleton	2018-07-12 17:46:33 +03:00
Sercan Yemen	ffbd000fe2	(Chat Panel) Style and logic tweaks	2018-07-12 17:45:46 +03:00
Sercan Yemen	b6ebd2b839	(Navbar) Fixed: IE11 issues (Chat Panel) Fixed: IE11 issues	2018-07-12 16:04:56 +03:00
Sercan Yemen	4d4d52ba05	(Navbar) Fixed: Style variant 2 doesn't scroll on Firefox, IE & Edge (Chat Panel) Fixed: Doesn't scroll on Firefox, IE & Edge Increased Fuse version	2018-07-12 15:48:55 +03:00
Sercan Yemen	251732f221	Updated changelog	2018-07-12 13:59:51 +03:00
Sercan Yemen	4642b730cb	Merge branch 'master' into skeleton	2018-07-12 13:52:29 +03:00
Sercan Yemen	0982d5369b	Merge branch 'master' into skeleton	2018-07-12 13:47:38 +03:00
Sercan Yemen	1c34a65034	Increased Fuse version	2018-07-12 13:30:17 +03:00
Sercan Yemen	b8803a055f	Removed side panel from auth pages Updated the changelog Theme options button adjustments	2018-07-12 13:27:26 +03:00
Sercan Yemen	6b8cd41d5e	Added SidePanel to the layouts for controlling the chat bar and possible other bar properties via FuseConfig	2018-07-12 13:19:34 +03:00