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 horizontal layout to the new layout system

Browse Source 
Added boxed layout width
This commit is contained in:
Sercan Yemen 2018-06-07 21:12:12 +03:00
parent a39021188e
commit 90fe94a417
13 changed files with 213 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 value="horizontal-layout-2">Horizontal Layout #2</mat-radio-button>
<mat-radio-button class="mb-12" value="horizontal-layout-1">
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>

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

@ -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;
}
}
}

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

@ -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
}
};

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

@ -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 -->

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

@ -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'">
<toolbar class="above" [ngClass]="fuseConfig.colorClasses.toolbar"></toolbar>
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Above -->
<!-- NAVBAR: Top -->
<!--<navbar layout="horizontal"
class="top-navbar" fxHide fxShow.gt-md
[ngClass]="fuseConfig.colorClasses.navbar"
*ngIf="fuseConfig.layout.navigation.position === 'top'">
</navbar>-->
<ng-container>
<ng-container *ngTemplateOutlet="topNavbar"></ng-container>
</ng-container>
<!-- / 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'"
[folded]="fuseConfig.layout.navigation.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.colorClasses.navbar"
*ngIf="fuseConfig.layout.navigation.position === 'left' || fuseConfig.layout.navigation.position === 'top'">
<navbar layout="vertical"></navbar>
</fuse-sidebar>
<ng-container>
<ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
</ng-container>
<!-- / NAVBAR: Left -->
<div id="container-2" class="container">
<!-- TOOLBAR: Below sticky -->
<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 -->
<div id="container-3" class="container" fusePerfectScrollbar updateOnNavigationEnd>
<!-- CONTENT -->
<content></content>
<!-- / CONTENT -->
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseConfig.layout.footer === 'below'">
<footer class="below" [ngClass]="fuseConfig.colorClasses.footer"></footer>
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above-static'">
<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'">
<footer class="above" [ngClass]="fuseConfig.colorClasses.footer"></footer>
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above-fixed'">
<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 -->

101
src/app/layout/horizontal/layout-1/layout-1.component.scss
View File

@ -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);
overflow-x: hidden;
overflow-y: auto;
&.container-scroll {
overflow-x: hidden;
overflow-y: auto;
// Content component
content {
// 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);
}
}

10
src/app/layout/layout.module.ts
View File

@ -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

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

@ -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'">

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

@ -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;

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

@ -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'">

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

@ -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;

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

@ -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'">

7
src/app/layout/vertical/layout-2/layout-2.component.scss
View File

@ -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;