Added horizontal layout to the new layout system

Added boxed layout width

src/@fuse/components/theme-options/theme-options.component.html

@@ -27,8 +27,9 @@
                 <mat-radio-button class="mb-12" value="vertical-layout-2">
                     Vertical Layout #2
                 </mat-radio-button>
-                <mat-radio-button class="mb-12" value="horizontal-layout-1">Horizontal Layout #1</mat-radio-button>
+                <mat-radio-button class="mb-12" value="horizontal-layout-1">
-                <mat-radio-button value="horizontal-layout-2">Horizontal Layout #2</mat-radio-button>
+                    Horizontal Layout #1
+                </mat-radio-button>
             </mat-radio-group>
 
             <!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
@@ -38,7 +39,7 @@
                 <ng-container *ngSwitchCase="'vertical-layout-1-content-scroll'">
 
                     <!-- LAYOUT WIDTH -->
-                    <div class="group mt-48">
+                    <div class="group mt-32">
 
                         <h2>Layout Width</h2>
                         <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
@@ -82,7 +83,6 @@
                         <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                             <mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
                             <mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="below-sticky">Below Sticky</mat-radio-button>
                             <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                         </mat-radio-group>
 
@@ -101,7 +101,6 @@
                         <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                             <mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
                             <mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="below-sticky">Below Sticky</mat-radio-button>
                             <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                         </mat-radio-group>
 
@@ -113,7 +112,7 @@
                 <ng-container *ngSwitchCase="'vertical-layout-1-body-scroll'">
 
                     <!-- LAYOUT WIDTH -->
-                    <div class="group mt-48">
+                    <div class="group mt-32">
 
                         <h2>Layout Width</h2>
                         <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
@@ -156,7 +155,6 @@
                         <h3 class="mt-24">Position:</h3>
                         <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                             <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
@@ -175,7 +173,6 @@
                         <h3 class="mt-24">Position:</h3>
                         <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                             <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
@@ -188,7 +185,7 @@
                 <ng-container *ngSwitchCase="'vertical-layout-2'">
 
                     <!-- LAYOUT WIDTH -->
-                    <div class="group mt-48">
+                    <div class="group mt-32">
 
                         <h2>Layout Width</h2>
                         <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
@@ -231,7 +228,6 @@
                         <h3 class="mt-24">Position:</h3>
                         <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                             <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                         </mat-radio-group>
 
@@ -249,7 +245,6 @@
                         <h3 class="mt-24">Position:</h3>
                         <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                             <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="above-sticky">Above Sticky</mat-radio-button>
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                         </mat-radio-group>
 
@@ -257,6 +252,72 @@
 
                 </ng-container>
 
+                <!-- HORIZONTAL LAYOUT #1 -->
+                <ng-container *ngSwitchCase="'horizontal-layout-1'">
+
+                    <!-- LAYOUT WIDTH -->
+                    <div class="group mt-32">
+
+                        <h2>Layout Width</h2>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
+                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- NAVBAR -->
+                    <div class="group" formGroupName="navbar">
+
+                        <h2>Navbar</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-16" value="top">Top</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- TOOLBAR -->
+                    <div class="group" formGroupName="toolbar">
+
+                        <h2>Toolbar</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="above">Above</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- FOOTER -->
+                    <div class="group" formGroupName="footer">
+
+                        <h2>Footer</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="above-fixed">Above Fixed</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                </ng-container>
+
             </ng-container>
 
         </div>

src/@fuse/components/theme-options/theme-options.component.ts

@@ -250,6 +250,34 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
                 break;
             }
+
+            // Horizontal Layout #1
+            case 'horizontal-layout-1':
+            {
+                this.form.patchValue({
+                    layout: {
+                        width  : 'fullwidth',
+                        navbar : {
+                            hidden    : false,
+                            position  : 'top',
+                            folded    : false,
+                            background: 'mat-fuse-dark-700-bg'
+                        },
+                        toolbar: {
+                            hidden    : false,
+                            position  : 'above',
+                            background: 'mat-white-500-bg'
+                        },
+                        footer : {
+                            hidden    : false,
+                            position  : 'above-fixed',
+                            background: 'mat-fuse-dark-900-bg'
+                        }
+                    }
+                });
+
+                break;
+            }
         }
     }
 

src/@fuse/types/fuse-config.ts

@@ -11,12 +11,12 @@ export interface FuseConfig
         },
         toolbar: {
             hidden: boolean,
-            position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed',
+            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
             background: string
         }
         footer: {
             hidden: boolean,
-            position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed',
+            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
             background: string
         }
     };

src/app/app.component.html

@@ -15,7 +15,7 @@
 
 <!-- HORIZONTAL LAYOUT 1 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
-
+    <horizontal-layout-1></horizontal-layout-1>
 </ng-container>
 
 <!-- THEME OPTIONS PANEL -->

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -1,91 +1,100 @@
-<div id="main">
+<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above -->
-    <ng-container *ngIf="fuseConfig.layout.toolbar === 'above'">
+    <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
-        <toolbar class="above" [ngClass]="fuseConfig.colorClasses.toolbar"></toolbar>
+        <ng-container *ngTemplateOutlet="toolbar"></ng-container>
     </ng-container>
     <!-- / TOOLBAR: Above -->
 
     <!-- NAVBAR: Top -->
-    <!--<navbar layout="horizontal"
+    <ng-container>
-            class="top-navbar" fxHide fxShow.gt-md
+        <ng-container *ngTemplateOutlet="topNavbar"></ng-container>
-            [ngClass]="fuseConfig.colorClasses.navbar"
+    </ng-container>
-            *ngIf="fuseConfig.layout.navigation.position === 'top'">
-    </navbar>-->
     <!-- / NAVBAR: Top -->
 
+    <!-- TOOLBAR: Below -->
+    <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
+        <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+    </ng-container>
+    <!-- / TOOLBAR: Below -->
+
     <div id="container-1" class="container">
 
         <!-- NAVBAR: Left -->
-        <fuse-sidebar [name]="'navbar'"
+        <ng-container>
-                      [folded]="fuseConfig.layout.navigation.folded"
+            <ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
-                      [lockedOpen]="'gt-md'"
+        </ng-container>
-                      class="left-navbar" [ngClass]="fuseConfig.colorClasses.navbar"
-                      *ngIf="fuseConfig.layout.navigation.position === 'left' || fuseConfig.layout.navigation.position === 'top'">
-            <navbar layout="vertical"></navbar>
-        </fuse-sidebar>
         <!-- / NAVBAR: Left -->
 
         <div id="container-2" class="container">
 
-            <!-- TOOLBAR: Below sticky -->
+            <div id="container-3" class="container" fusePerfectScrollbar updateOnNavigationEnd>
-            <ng-container *ngIf="fuseConfig.layout.toolbar === 'below-sticky'">
-                <toolbar class="below-sticky" [ngClass]="fuseConfig.colorClasses.toolbar"></toolbar>
-            </ng-container>
-            <!-- / TOOLBAR: Below sticky -->
-
-            <div id="container-3" class="container" fusePerfectScrollbar>
-
-                <!-- TOOLBAR: Below -->
-                <ng-container *ngIf="fuseConfig.layout.toolbar === 'below'">
-                    <toolbar class="below" [ngClass]="fuseConfig.colorClasses.toolbar"></toolbar>
-                </ng-container>
-                <!-- / TOOLBAR: Below -->
 
                 <!-- CONTENT -->
                 <content></content>
                 <!-- / CONTENT -->
 
                 <!-- FOOTER: Below -->
-                <ng-container *ngIf="fuseConfig.layout.footer === 'below'">
+                <ng-container *ngIf="fuseConfig.layout.footer.position === 'above-static'">
-                    <footer class="below" [ngClass]="fuseConfig.colorClasses.footer"></footer>
+                    <ng-container *ngTemplateOutlet="footer"></ng-container>
                 </ng-container>
                 <!-- / FOOTER: Below -->
 
             </div>
 
-            <!-- FOOTER: Below sticky -->
-            <ng-container *ngIf="fuseConfig.layout.footer === 'below-sticky'">
-                <footer class="below-sticky" [ngClass]="fuseConfig.colorClasses.footer"></footer>
-            </ng-container>
-            <!-- / FOOTER: Below sticky -->
-
         </div>
 
-        <!-- NAVBAR: Right -->
-        <fuse-sidebar [name]="'navbar'" [align]="'right'"
-                      [folded]="fuseConfig.layout.navigation.folded"
-                      [lockedOpen]="'gt-md'"
-                      class="right-navbar" [ngClass]="fuseConfig.colorClasses.navbar"
-                      *ngIf="fuseConfig.layout.navigation.position === 'right'">
-            <navbar layout="vertical"></navbar>
-        </fuse-sidebar>
-        <!-- / NAVBAR: Right -->
-
     </div>
 
     <!-- FOOTER: Above -->
-    <ng-container *ngIf="fuseConfig.layout.footer === 'above'">
+    <ng-container *ngIf="fuseConfig.layout.footer.position === 'above-fixed'">
-        <footer class="above" [ngClass]="fuseConfig.colorClasses.footer"></footer>
+        <ng-container *ngTemplateOutlet="footer"></ng-container>
     </ng-container>
     <!-- FOOTER: Above -->
 
 </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 [navigation]="navigation"></fuse-theme-options>
+<!-- ----------------------------------------------------------------------------------------------------- -->
+<!-- @ PARTIALS
+<!-- ----------------------------------------------------------------------------------------------------- -->
+
+<!-- TOOLBAR -->
+<ng-template #toolbar>
+    <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
+             [ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
+</ng-template>
+<!-- / TOOLBAR -->
+
+<!-- FOOTER -->
+<ng-template #footer>
+    <footer *ngIf="!fuseConfig.layout.footer.hidden"
+            [ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
+</ng-template>
+<!-- / FOOTER -->
+
+<!-- TOP NAVBAR -->
+<ng-template #topNavbar>
+    <navbar layout="horizontal"
+            class="top-navbar" fxHide fxShow.gt-md
+            [ngClass]="fuseConfig.layout.navbar.background"
+            *ngIf="!fuseConfig.layout.navbar.hidden">
+    </navbar>
+</ng-template>
+<!-- / TOP NAVBAR -->
+
+<!-- LEFT NAVBAR -->
+<ng-template #leftNavbar>
+    <fuse-sidebar [name]="'navbar'"
+                  [folded]="fuseConfig.layout.navbar.folded"
+                  class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
+                  *ngIf="!fuseConfig.layout.navbar.hidden">
+        <navbar layout="vertical"></navbar>
+    </fuse-sidebar>
+</ng-template>
+<!-- / LEFT NAVBAR -->

src/app/layout/horizontal/layout-1/layout-1.component.scss

@@ -4,6 +4,7 @@ horizontal-layout-1 {
     display: flex;
     flex: 1 1 auto;
     width: 100%;
+    height: 100%;
 
     #main {
         position: relative;
@@ -11,14 +12,24 @@ horizontal-layout-1 {
         flex: 1 1 auto;
         flex-direction: column;
         width: 100%;
+        height: 100%;
         z-index: 1;
 
+        // Boxed
+        &.boxed {
+            max-width: 1200px;
+            margin: 0 auto;
+            @include mat-elevation(8);
+        }
+
         // Container 1
         > .container {
             position: relative;
             display: flex;
             flex: 1 1 auto;
             width: 100%;
+            min-height: 0;
+            min-width: 0;
 
             // Container 2
             > .container {
@@ -35,17 +46,18 @@ horizontal-layout-1 {
                     flex: 1 1 auto;
                     flex-direction: column;
                     transform: translateZ(0);
-
-                    &.container-scroll {
                     overflow-x: hidden;
                     overflow-y: auto;
 
                     // Content component
                     content {
-                            flex: 1 0 auto;
+
+                        &.inner-scroll {
+                            flex: 1 1 auto;
+                            min-height: 0;
 
                             > *:not(router-outlet) {
-                                flex: 1 0 auto;
+                                flex: 1 1 auto;
                             }
                         }
                     }
@@ -54,78 +66,3 @@ horizontal-layout-1 {
         }
     }
 }
-
-vertical-layout-111 {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-
-    /* > .mat-sidenav-container {
-         display: flex;
-         flex: 1;
-
-         > .mat-sidenav-content,
-         > .mat-drawer-content {
-             display: flex;
-             flex: 1;
-             overflow: hidden;
-             height: 100vh;*/
-
-    @include media-breakpoint-down('sm') {
-        height: auto !important;
-    }
-
-    #main-content {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        overflow: hidden;
-        background: #FAFAFA;
-
-        #wrapper {
-            display: flex;
-            position: relative;
-            flex: 1;
-            overflow: hidden;
-
-            .content-wrapper {
-                display: flex;
-                flex-direction: column;
-                flex: 1;
-                overflow: hidden;
-
-                content {
-                    position: relative;
-                    display: flex;
-                    flex: 1;
-                    flex-direction: row;
-                    width: 100%;
-                    overflow: hidden;
-
-                    > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) {
-                        display: flex;
-                        flex: 1;
-                        width: 100%;
-                        min-width: 100%;
-                    }
-
-                    > *.ng-animating {
-
-                        .mat-tab-body {
-                            height: 100vh;
-                        }
-                    }
-                }
-            }
-            //}
-            //}
-        }
-    }
-
-    &[fuse-layout-mode="boxed"] {
-        max-width: 1200px;
-        margin: 0 auto;
-        @include mat-elevation(8);
-    }
-}

src/app/layout/layout.module.ts

@@ -5,18 +5,24 @@ import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1
 
 import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module';
 
+import { HorizontalLayout1Module } from 'app/layout/horizontal/layout-1/layout-1.module';
+
 @NgModule({
     imports: [
         VerticalLayout1BodyScrollModule,
         VerticalLayout1ContentScrollModule,
 
-        VerticalLayout2Module
+        VerticalLayout2Module,
+
+        HorizontalLayout1Module
     ],
     exports: [
         VerticalLayout1BodyScrollModule,
         VerticalLayout1ContentScrollModule,
 
-        VerticalLayout2Module
+        VerticalLayout2Module,
+
+        HorizontalLayout1Module
     ]
 })
 export class LayoutModule

src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html

@@ -1,4 +1,4 @@
-<div id="main">
+<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above fixed -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">

src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss

@@ -15,6 +15,13 @@ vertical-layout-1-body-scroll {
         height: 100%;
         z-index: 1;
 
+        // Boxed
+        &.boxed {
+            max-width: 1200px;
+            margin: 0 auto;
+            @include mat-elevation(8);
+        }
+
         // Container 1 (Scrollable)
         > .container {
             position: relative;

src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html

@@ -1,4 +1,4 @@
-<div id="main">
+<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">

src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss

@@ -15,6 +15,13 @@ vertical-layout-1-content-scroll {
         height: 100%;
         z-index: 1;
 
+        // Boxed
+        &.boxed {
+            max-width: 1200px;
+            margin: 0 auto;
+            @include mat-elevation(8);
+        }
+
         // Container 1
         > .container {
             position: relative;

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -1,4 +1,4 @@
-<div id="main">
+<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above fixed -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">

src/app/layout/vertical/layout-2/layout-2.component.scss

@@ -15,6 +15,13 @@ vertical-layout-2 {
         height: 100%;
         z-index: 1;
 
+        // Boxed
+        &.boxed {
+            max-width: 1200px;
+            margin: 0 auto;
+            @include mat-elevation(8);
+        }
+
         // Container 1 (Scrollable)
         > .container {
             position: relative;