purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 20:15:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-13 18:58:43 +03:00
commit b08ab47715
16 changed files with 118 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/@fuse/scss/partials/_global.scss
View File

@ -10,4 +10,15 @@ body {
padding: 0;
overflow: hidden;
background: #F5F5F5;
}
body {
// Boxed
&.boxed {
max-width: 1200px;
margin: 0 auto;
@include mat-elevation(8);
}
}

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

@ -6,21 +6,25 @@
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
<vertical-layout-1></vertical-layout-1>
</ng-container>
<!-- / VERTICAL LAYOUT 1 -->
<!-- VERTICAL LAYOUT 2 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-2'">
<vertical-layout-2></vertical-layout-2>
</ng-container>
<!-- / VERTICAL LAYOUT 2 -->
<!-- VERTICAL LAYOUT 3 -->
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
<vertical-layout-3></vertical-layout-3>
</ng-container>
<!-- / VERTICAL LAYOUT 3 -->
<!-- HORIZONTAL LAYOUT 1 -->
<ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
<horizontal-layout-1></horizontal-layout-1>
</ng-container>
<!-- / HORIZONTAL LAYOUT 1 -->
<!-- THEME OPTIONS PANEL -->
<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
@ -30,4 +34,5 @@
<fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
<fuse-theme-options></fuse-theme-options>
</fuse-sidebar>
</fuse-sidebar>
<!-- / THEME OPTIONS PANEL -->

11
src/app/app.component.ts
View File

@ -75,7 +75,7 @@ export class AppComponent implements OnInit, OnDestroy
// Add is-mobile class to the body if the platform is mobile
if ( this._platform.ANDROID || this._platform.IOS )
{
this.document.body.className += ' is-mobile';
this.document.body.classList.add('is-mobile');
}
// Set the private defaults
@ -96,6 +96,15 @@ export class AppComponent implements OnInit, OnDestroy
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
if ( this.fuseConfig.layout.width === 'boxed' )
{
this.document.body.classList.add('boxed');
}
else
{
this.document.body.classList.remove('boxed');
}
});
}

13
src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss
View File

@ -1,3 +1,16 @@
navbar-horizontal-style-1 {
}
navbar {
&.horizontal-style-1 {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
height: 56px;
max-height: 56px;
min-height: 56px;
}
}

6
src/app/layout/components/navbar/navbar.component.scss
View File

@ -1,7 +1,3 @@
navbar {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
height: 100%;
}

44
src/app/layout/components/navbar/navbar.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { Component, ElementRef, Input, Renderer2, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'navbar',
@ -8,16 +8,46 @@ import { Component, Input, ViewEncapsulation } from '@angular/core';
})
export class NavbarComponent
{
// Variant
@Input()
variant;
// Private
_variant: string;
/**
* Constructor
*
* @param {ElementRef} _elementRef
* @param {Renderer2} _renderer
*/
constructor()
constructor(
private _elementRef: ElementRef,
private _renderer: Renderer2
)
{
// Set the defaults
this.variant = 'vertical-style-1';
// Set the private defaults
this._variant = 'vertical-style-1';
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Variant
*/
get variant(): string
{
return this._variant;
}
@Input()
set variant(value: string)
{
// Remove the old class name
this._renderer.removeClass(this._elementRef.nativeElement, this.variant);
// Store the variant value
this._variant = value;
// Add the new class name
this._renderer.addClass(this._elementRef.nativeElement, value);
}
}

28
src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
View File

@ -68,6 +68,24 @@ fuse-sidebar {
navbar {
&.vertical-style-1 {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
height: 100%;
&.right-navbar {
.toggle-sidebar-opened {
mat-icon {
transform: rotate(180deg);
}
}
}
}
navbar-vertical-style-1 {
display: flex;
flex-direction: column;
@ -156,14 +174,4 @@ navbar {
}
}
}
&.right-navbar {
.toggle-sidebar-opened {
mat-icon {
transform: rotate(180deg);
}
}
}
}

28
src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
View File

@ -30,6 +30,24 @@ fuse-sidebar {
navbar {
&.vertical-style-2 {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
height: 100%;
&.right-navbar {
.toggle-sidebar-opened {
mat-icon {
transform: rotate(180deg);
}
}
}
}
navbar-vertical-style-2 {
display: flex;
flex-direction: column;
@ -72,14 +90,4 @@ navbar {
}
}
&.right-navbar {
.toggle-sidebar-opened {
mat-icon {
transform: rotate(180deg);
}
}
}
}

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

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

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

@ -16,13 +16,6 @@ horizontal-layout-1 {
z-index: 1;
min-width: 0;
// Boxed
&.boxed {
max-width: 1200px;
margin: 0 auto;
@include mat-elevation(8);
}
// Container 1
> .container {
position: relative;

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

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

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

@ -16,13 +16,6 @@ vertical-layout-1 {
z-index: 1;
min-width: 0;
// 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

@ -6,7 +6,7 @@
</ng-container>
<!-- / SIDE PANEL -->
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
<div id="main">
<!-- 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

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

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

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

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

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