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

Changed layout names to make them easier to understand

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,25 +18,30 @@
<h2>Layout Styles</h2>
<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>
<mat-radio-button class="mb-12" value="vertical-layout-1-body-scroll">
Vertical Layout #1 - Body Scroll
<mat-radio-button class="mb-12" value="vertical-layout-1">
Vertical Layout #1
</mat-radio-button>
<mat-radio-button class="mb-12" value="vertical-layout-2">
Vertical Layout #2
</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">
Horizontal Layout #1
</mat-radio-button>
</mat-radio-group>
<!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
<ng-container [ngSwitch]="fuseConfig.layout.style">
<!-- VERTICAL LAYOUT #1 - CONTENT SCROLL -->
<ng-container *ngSwitchCase="'vertical-layout-1-content-scroll'">
<!-- VERTICAL LAYOUT #1 -->
<ng-container *ngSwitchCase="'vertical-layout-1'">
<!-- LAYOUT WIDTH -->
<div class="group mt-32">
@ -108,79 +113,6 @@
</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 -->
<ng-container *ngSwitchCase="'vertical-layout-2'">
@ -216,6 +148,79 @@
</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 -->
<div class="group" formGroupName="toolbar">

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

@ -123,6 +123,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
'id' : 'custom-function',
'title' : 'Custom Function',
'type' : 'group',
'icon' : 'settings',
'children': [
{
'id' : 'customize',
@ -167,8 +168,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
switch ( value )
{
// Vertical Layout #1 - Content scroll
case 'vertical-layout-1-content-scroll':
// Vertical Layout #1
case 'vertical-layout-1':
{
this.form.patchValue({
layout: {
@ -195,36 +196,36 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
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
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({
layout: {
@ -292,8 +293,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
this._fuseSidebarService.getSidebar(key).toggleOpen();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
}

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

@ -1,11 +1,6 @@
<!-- VERTICAL LAYOUT 1 - BODY SCROLL -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-body-scroll'">
<vertical-layout-1-body-scroll></vertical-layout-1-body-scroll>
</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>
<!-- VERTICAL LAYOUT 1 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
<vertical-layout-1></vertical-layout-1>
</ng-container>
<!-- VERTICAL LAYOUT 2 -->
@ -13,6 +8,11 @@
<vertical-layout-2></vertical-layout-2>
</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 -->
<ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
<horizontal-layout-1></horizontal-layout-1>

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

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

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

@ -1,26 +1,23 @@
import { NgModule } from '@angular/core';
import { VerticalLayout1BodyScrollModule } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.module';
import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.module';
import { VerticalLayout1Module } from 'app/layout/vertical/layout-1/layout-1.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';
@NgModule({
imports: [
VerticalLayout1BodyScrollModule,
VerticalLayout1ContentScrollModule,
VerticalLayout1Module,
VerticalLayout2Module,
VerticalLayout3Module,
HorizontalLayout1Module
],
exports: [
VerticalLayout1BodyScrollModule,
VerticalLayout1ContentScrollModule,
VerticalLayout1Module,
VerticalLayout2Module,
VerticalLayout3Module,
HorizontalLayout1Module
]

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

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

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

8
src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts → src/app/layout/vertical/layout-1/layout-1.component.ts
View File

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

8
src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts → src/app/layout/vertical/layout-1/layout-1.module.ts
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 { 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({
declarations: [
VerticalLayout1BodyScrollComponent
VerticalLayout1Component
],
imports : [
RouterModule,
@ -29,9 +29,9 @@ import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1
ToolbarModule
],
exports : [
VerticalLayout1BodyScrollComponent
VerticalLayout1Component
]
})
export class VerticalLayout1BodyScrollModule
export class VerticalLayout1Module
{
}

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

@ -23,12 +23,26 @@
</ng-container>
<!-- / 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
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
</content>
<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 -->
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container>

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

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

20
src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html → src/app/layout/vertical/layout-3/layout-3.component.html
View File

@ -23,26 +23,12 @@
</ng-container>
<!-- / 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
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
</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 -->
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container>

19
src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss → src/app/layout/vertical/layout-3/layout-3.component.scss
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;
flex: 1 1 auto;
width: 100%;
@ -39,14 +39,15 @@ vertical-layout-1-body-scroll {
display: flex;
flex: 1 0 auto;
width: 100%;
// Container 3
> .container {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
padding: 32px;
// Content component
> content {
flex: 1 1 auto;
min-width: 0;
@include mat-elevation(3);
}
}
}

8
src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts → src/app/layout/vertical/layout-3/layout-3.component.ts
View File

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

10
src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts → src/app/layout/vertical/layout-3/layout-3.module.ts
View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FuseSidebarModule } from '@fuse/components';
import { FuseSidebarModule } from '@fuse/components/index';
import { FuseSharedModule } from '@fuse/shared.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 { 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({
declarations: [
VerticalLayout1ContentScrollComponent
VerticalLayout3Component
],
imports : [
RouterModule,
@ -29,9 +29,9 @@ import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layou
ToolbarModule
],
exports : [
VerticalLayout1ContentScrollComponent
VerticalLayout3Component
]
})
export class VerticalLayout1ContentScrollModule
export class VerticalLayout3Module
{
}

4
src/app/navigation/navigation.ts
View File

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