Changed layout names to make them easier to understand

New navigation structure for documentation and Angular Material elements
This commit is contained in:
Sercan Yemen 2018-06-12 10:44:00 +03:00
parent a6a7442607
commit 507fe97e84
16 changed files with 193 additions and 192 deletions

View File

@ -18,25 +18,30 @@
<h2>Layout Styles</h2> <h2>Layout Styles</h2>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style"> <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
<mat-radio-button class="mb-12" value="vertical-layout-1-content-scroll">
Vertical Layout #1 - Content Scroll <mat-radio-button class="mb-12" value="vertical-layout-1">
</mat-radio-button> Vertical Layout #1
<mat-radio-button class="mb-12" value="vertical-layout-1-body-scroll">
Vertical Layout #1 - Body Scroll
</mat-radio-button> </mat-radio-button>
<mat-radio-button class="mb-12" value="vertical-layout-2"> <mat-radio-button class="mb-12" value="vertical-layout-2">
Vertical Layout #2 Vertical Layout #2
</mat-radio-button> </mat-radio-button>
<mat-radio-button class="mb-12" value="vertical-layout-3">
Vertical Layout #3
</mat-radio-button>
<mat-radio-button class="mb-12" value="horizontal-layout-1"> <mat-radio-button class="mb-12" value="horizontal-layout-1">
Horizontal Layout #1 Horizontal Layout #1
</mat-radio-button> </mat-radio-button>
</mat-radio-group> </mat-radio-group>
<!-- DIFFERENT FORMS BASED ON LAYOUT STYLES --> <!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
<ng-container [ngSwitch]="fuseConfig.layout.style"> <ng-container [ngSwitch]="fuseConfig.layout.style">
<!-- VERTICAL LAYOUT #1 - CONTENT SCROLL --> <!-- VERTICAL LAYOUT #1 -->
<ng-container *ngSwitchCase="'vertical-layout-1-content-scroll'"> <ng-container *ngSwitchCase="'vertical-layout-1'">
<!-- LAYOUT WIDTH --> <!-- LAYOUT WIDTH -->
<div class="group mt-32"> <div class="group mt-32">
@ -108,79 +113,6 @@
</ng-container> </ng-container>
<!-- VERTICAL LAYOUT #1 - BODY SCROLL -->
<ng-container *ngSwitchCase="'vertical-layout-1-body-scroll'">
<!-- 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>
<mat-slide-toggle class="mt-24" formControlName="folded">
Folded
</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="left">Left</mat-radio-button>
<mat-radio-button class="mb-16" value="right">Right</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-static">Above Static</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>
</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-static">Above Static</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>
</div>
</ng-container>
<!-- VERTICAL LAYOUT #2 --> <!-- VERTICAL LAYOUT #2 -->
<ng-container *ngSwitchCase="'vertical-layout-2'"> <ng-container *ngSwitchCase="'vertical-layout-2'">
@ -216,6 +148,79 @@
</div> </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-static">Above Static</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>
</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-static">Above Static</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>
</div>
</ng-container>
<!-- VERTICAL LAYOUT #3 -->
<ng-container *ngSwitchCase="'vertical-layout-3'">
<!-- 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>
<mat-slide-toggle class="mt-24" formControlName="folded">
Folded
</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="left">Left</mat-radio-button>
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
</mat-radio-group>
</div>
<!-- TOOLBAR --> <!-- TOOLBAR -->
<div class="group" formGroupName="toolbar"> <div class="group" formGroupName="toolbar">

View File

@ -123,6 +123,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
'id' : 'custom-function', 'id' : 'custom-function',
'title' : 'Custom Function', 'title' : 'Custom Function',
'type' : 'group', 'type' : 'group',
'icon' : 'settings',
'children': [ 'children': [
{ {
'id' : 'customize', 'id' : 'customize',
@ -167,8 +168,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{ {
switch ( value ) switch ( value )
{ {
// Vertical Layout #1 - Content scroll // Vertical Layout #1
case 'vertical-layout-1-content-scroll': case 'vertical-layout-1':
{ {
this.form.patchValue({ this.form.patchValue({
layout: { layout: {
@ -195,36 +196,36 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
break; break;
} }
// Vertical Layout #1 - Body scroll
case 'vertical-layout-1-body-scroll':
{
this.form.patchValue({
layout: {
width : 'fullwidth',
navbar : {
hidden : false,
position : 'left',
folded : false,
background: 'mat-fuse-dark-700-bg'
},
toolbar: {
hidden : false,
position : 'below',
background: 'mat-white-500-bg'
},
footer : {
hidden : false,
position : 'below',
background: 'mat-fuse-dark-900-bg'
}
}
});
break;
}
// Vertical Layout #2 // Vertical Layout #2
case 'vertical-layout-2': case 'vertical-layout-2':
{
this.form.patchValue({
layout: {
width : 'fullwidth',
navbar : {
hidden : false,
position : 'left',
folded : false,
background: 'mat-fuse-dark-700-bg'
},
toolbar: {
hidden : false,
position : 'below',
background: 'mat-white-500-bg'
},
footer : {
hidden : false,
position : 'below',
background: 'mat-fuse-dark-900-bg'
}
}
});
break;
}
// Vertical Layout #3
case 'vertical-layout-3':
{ {
this.form.patchValue({ this.form.patchValue({
layout: { layout: {
@ -292,8 +293,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
this._fuseSidebarService.getSidebar(key).toggleOpen(); this._fuseSidebarService.getSidebar(key).toggleOpen();
} }
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
} }

View File

@ -1,11 +1,6 @@
<!-- VERTICAL LAYOUT 1 - BODY SCROLL --> <!-- VERTICAL LAYOUT 1 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-body-scroll'"> <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
<vertical-layout-1-body-scroll></vertical-layout-1-body-scroll> <vertical-layout-1></vertical-layout-1>
</ng-container>
<!-- VERTICAL LAYOUT 1 - CONTENT SCROLL -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-content-scroll'">
<vertical-layout-1-content-scroll></vertical-layout-1-content-scroll>
</ng-container> </ng-container>
<!-- VERTICAL LAYOUT 2 --> <!-- VERTICAL LAYOUT 2 -->
@ -13,6 +8,11 @@
<vertical-layout-2></vertical-layout-2> <vertical-layout-2></vertical-layout-2>
</ng-container> </ng-container>
<!-- VERTICAL LAYOUT 3 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
<vertical-layout-3></vertical-layout-3>
</ng-container>
<!-- HORIZONTAL LAYOUT 1 --> <!-- HORIZONTAL LAYOUT 1 -->
<ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'"> <ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
<horizontal-layout-1></horizontal-layout-1> <horizontal-layout-1></horizontal-layout-1>

View File

@ -10,7 +10,7 @@ import { FuseConfig } from '@fuse/types';
export const fuseConfig: FuseConfig = { export const fuseConfig: FuseConfig = {
layout : { layout : {
style : 'vertical-layout-1-content-scroll', style : 'vertical-layout-1',
width : 'fullwidth', width : 'fullwidth',
navbar : { navbar : {
hidden : false, hidden : false,

View File

@ -1,26 +1,23 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { VerticalLayout1BodyScrollModule } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.module'; import { VerticalLayout1Module } from 'app/layout/vertical/layout-1/layout-1.module';
import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.module';
import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module'; import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module';
import { VerticalLayout3Module } from 'app/layout/vertical/layout-3/layout-3.module';
import { HorizontalLayout1Module } from 'app/layout/horizontal/layout-1/layout-1.module'; import { HorizontalLayout1Module } from 'app/layout/horizontal/layout-1/layout-1.module';
@NgModule({ @NgModule({
imports: [ imports: [
VerticalLayout1BodyScrollModule, VerticalLayout1Module,
VerticalLayout1ContentScrollModule,
VerticalLayout2Module, VerticalLayout2Module,
VerticalLayout3Module,
HorizontalLayout1Module HorizontalLayout1Module
], ],
exports: [ exports: [
VerticalLayout1BodyScrollModule, VerticalLayout1Module,
VerticalLayout1ContentScrollModule,
VerticalLayout2Module, VerticalLayout2Module,
VerticalLayout3Module,
HorizontalLayout1Module HorizontalLayout1Module
] ]

View File

@ -1,6 +1,6 @@
@import "src/@fuse/scss/fuse"; @import "src/@fuse/scss/fuse";
vertical-layout-1-content-scroll { vertical-layout-1 {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
width: 100%; width: 100%;

View File

@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
import { navigation } from 'app/navigation/navigation'; import { navigation } from 'app/navigation/navigation';
@Component({ @Component({
selector : 'vertical-layout-1-body-scroll', selector : 'vertical-layout-1',
templateUrl : './body-scroll.component.html', templateUrl : './layout-1.component.html',
styleUrls : ['./body-scroll.component.scss'], styleUrls : ['./layout-1.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class VerticalLayout1BodyScrollComponent implements OnInit, OnDestroy export class VerticalLayout1Component implements OnInit, OnDestroy
{ {
fuseConfig: any; fuseConfig: any;
navigation: any; navigation: any;

View File

@ -10,11 +10,11 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.component'; import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
VerticalLayout1BodyScrollComponent VerticalLayout1Component
], ],
imports : [ imports : [
RouterModule, RouterModule,
@ -29,9 +29,9 @@ import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1
ToolbarModule ToolbarModule
], ],
exports : [ exports : [
VerticalLayout1BodyScrollComponent VerticalLayout1Component
] ]
}) })
export class VerticalLayout1BodyScrollModule export class VerticalLayout1Module
{ {
} }

View File

@ -23,12 +23,26 @@
</ng-container> </ng-container>
<!-- / NAVBAR: Left --> <!-- / NAVBAR: Left -->
<div id="container-3" class="container">
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Below -->
<!-- CONTENT --> <!-- CONTENT -->
<content <content></content>
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
</content>
<!-- / CONTENT --> <!-- / CONTENT -->
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<!-- NAVBAR: Right --> <!-- NAVBAR: Right -->
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'"> <ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container> <ng-container *ngTemplateOutlet="rightNavbar"></ng-container>

View File

@ -39,15 +39,14 @@ vertical-layout-2 {
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
width: 100%; width: 100%;
min-width: 0;
padding: 32px;
// Content component // Container 3
> content { > .container {
position: relative;
display: flex;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column;
min-width: 0; min-width: 0;
@include mat-elevation(3);
} }
} }
} }

View File

@ -23,26 +23,12 @@
</ng-container> </ng-container>
<!-- / NAVBAR: Left --> <!-- / NAVBAR: Left -->
<div id="container-3" class="container">
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
</ng-container>
<!-- / TOOLBAR: Below -->
<!-- CONTENT --> <!-- CONTENT -->
<content></content> <content
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
</content>
<!-- / CONTENT --> <!-- / CONTENT -->
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</ng-container>
<!-- / FOOTER: Below -->
</div>
<!-- NAVBAR: Right --> <!-- NAVBAR: Right -->
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'"> <ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container> <ng-container *ngTemplateOutlet="rightNavbar"></ng-container>

View File

@ -1,6 +1,6 @@
@import "src/@fuse/scss/fuse"; @import "../../../../@fuse/scss/fuse";
vertical-layout-1-body-scroll { vertical-layout-3 {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
width: 100%; width: 100%;
@ -39,14 +39,15 @@ vertical-layout-1-body-scroll {
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
width: 100%; width: 100%;
// Container 3
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0; min-width: 0;
padding: 32px;
// Content component
> content {
flex: 1 1 auto;
min-width: 0;
@include mat-elevation(3);
} }
} }
} }

View File

@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
import { navigation } from 'app/navigation/navigation'; import { navigation } from 'app/navigation/navigation';
@Component({ @Component({
selector : 'vertical-layout-1-content-scroll', selector : 'vertical-layout-3',
templateUrl : './content-scroll.component.html', templateUrl : './layout-3.component.html',
styleUrls : ['./content-scroll.component.scss'], styleUrls : ['./layout-3.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class VerticalLayout1ContentScrollComponent implements OnInit, OnDestroy export class VerticalLayout3Component implements OnInit, OnDestroy
{ {
fuseConfig: any; fuseConfig: any;
navigation: any; navigation: any;

View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { FuseSidebarModule } from '@fuse/components'; import { FuseSidebarModule } from '@fuse/components/index';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
import { ContentModule } from 'app/layout/components/content/content.module'; import { ContentModule } from 'app/layout/components/content/content.module';
@ -10,11 +10,11 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.component'; import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
VerticalLayout1ContentScrollComponent VerticalLayout3Component
], ],
imports : [ imports : [
RouterModule, RouterModule,
@ -29,9 +29,9 @@ import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layou
ToolbarModule ToolbarModule
], ],
exports : [ exports : [
VerticalLayout1ContentScrollComponent VerticalLayout3Component
] ]
}) })
export class VerticalLayout1ContentScrollModule export class VerticalLayout3Module
{ {
} }

View File

@ -571,9 +571,10 @@ export const navigation: FuseNavigation[] = [
] ]
}, },
{ {
id : 'angular-material-elements-elements', id : 'angular-material-elements',
title : 'Angular Material Elements', title : 'Angular Material Elements',
type : 'group', type : 'group',
icon : 'layers',
children: [ children: [
{ {
id : 'form-controls', id : 'form-controls',
@ -838,6 +839,7 @@ export const navigation: FuseNavigation[] = [
{ {
id : 'documentation', id : 'documentation',
title : 'Documentation', title : 'Documentation',
icon : 'import_contacts',
type : 'group', type : 'group',
children: [ children: [
{ {