purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-03 23:03:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-17 14:30:19 +03:00
commit 41a93857b6
7 changed files with 109 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "fuse",
"version": "6.1.0",
"version": "6.1.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "fuse",
"version": "6.1.0",
"version": "6.1.1",
"license": "https://themeforest.net/licenses/terms/regular",
"scripts": {
"ng": "ng",

103
src/@fuse/components/sidebar/sidebar.component.ts
View File

@ -2,11 +2,11 @@ import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, In
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { ObservableMedia } from '@angular/flex-layout';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/internal/operators';
import { FuseSidebarService } from './sidebar.service';
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
import { FuseConfigService } from '@fuse/services/config.service';
import { takeUntil } from 'rxjs/internal/operators';
@Component({
selector : 'fuse-sidebar',
@ -20,6 +20,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
@Input()
name: string;
// Key
@Input()
key: string;
// Position
@Input()
position: 'left' | 'right';
@ -48,6 +52,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
private _folded: boolean;
private _fuseConfig: any;
private _wasActive: boolean;
private _wasFolded: boolean;
private _backdrop: HTMLElement | null = null;
private _player: AnimationPlayer;
private _unsubscribeAll: Subject<any>;
@ -79,13 +84,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
)
{
// Set the defaults
this.folded = false;
this.opened = false;
// this.folded = false;
this.position = 'left';
this.invisibleOverlay = false;
// Set the private defaults
this._animationsEnabled = false;
this._folded = false;
this._unsubscribeAll = new Subject();
}
@ -94,19 +100,18 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// -----------------------------------------------------------------------------------------------------
// Folded
@HostBinding('class.folded')
@Input()
set folded(value: boolean)
{
// Only work if the sidebar is not closed
// Set the folded
this._folded = value;
// Return if the sidebar is closed
if ( !this.opened )
{
return;
}
// Set the folded
this._folded = value;
// Programmatically add/remove margin to the element
// that comes after or before based on the position
let sibling,
@ -135,14 +140,22 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// If folded...
if ( value )
{
// Set the style
// Fold the sidebar
this.fold();
// Set the style and class
this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
this._renderer.addClass(this._elementRef.nativeElement, 'folded');
}
// If unfolded...
else
{
// Remove the style
// Unfold the sidebar
this.unfold();
// Remove the style and class
this._renderer.removeStyle(sibling, styleRule);
this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
}
}
@ -178,6 +191,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Setup lockedOpen
this._setupLockedOpen();
// Setup folded
this._setupFolded();
}
/**
@ -253,6 +269,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Set the wasActive for the first time
this._wasActive = false;
// Set the wasFolded
this._wasFolded = this.folded;
// Show the sidebar
this._showSidebar();
@ -282,11 +301,17 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Force the the opened status to true
this.opened = true;
// Read the folded setting from the config
// and fold the sidebar if it's true
if ( this._fuseConfig.layout.navbar.folded )
// If the sidebar was folded, forcefully fold it again
if ( this._wasFolded )
{
this.fold();
// Enable the animations
this._enableAnimations();
// Fold
this.folded = true;
// Mark for check
this._changeDetectorRef.markForCheck();
}
// Hide the backdrop if any exists
@ -313,6 +338,58 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
});
}
/**
* Setup the initial folded status
*
* @private
*/
private _setupFolded(): void
{
// Return, if sidebar is not folded
if ( !this.folded )
{
return;
}
// Return if the sidebar is closed
if ( !this.opened )
{
return;
}
// Programmatically add/remove margin to the element
// that comes after or before based on the position
let sibling,
styleRule;
const styleValue = '64px';
// Get the sibling and set the style rule
if ( this.position === 'left' )
{
sibling = this._elementRef.nativeElement.nextElementSibling;
styleRule = 'margin-left';
}
else
{
sibling = this._elementRef.nativeElement.previousElementSibling;
styleRule = 'margin-right';
}
// If there is no sibling, return...
if ( !sibling )
{
return;
}
// Fold the sidebar
this.fold();
// Set the style and class
this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
this._renderer.addClass(this._elementRef.nativeElement, 'folded');
}
/**
* Show the backdrop
*

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

@ -56,7 +56,7 @@
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
@ -91,7 +91,7 @@
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar [name]="'navbar'"
<fuse-sidebar name="navbar"
[folded]="fuseConfig.layout.navbar.folded"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>

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

@ -68,7 +68,7 @@
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
@ -93,9 +93,9 @@
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar [name]="'navbar'"
<fuse-sidebar name="navbar"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
@ -104,9 +104,9 @@
<!-- RIGHT NAVBAR -->
<ng-template #rightNavbar>
<fuse-sidebar [name]="'navbar'" position="right"
<fuse-sidebar name="navbar" position="right"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>

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

@ -68,7 +68,7 @@
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
@ -93,9 +93,9 @@
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar [name]="'navbar'"
<fuse-sidebar name="navbar"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
@ -104,9 +104,9 @@
<!-- RIGHT NAVBAR -->
<ng-template #rightNavbar>
<fuse-sidebar [name]="'navbar'" position="right"
<fuse-sidebar name="navbar" position="right"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>

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

@ -54,7 +54,7 @@
</div>
<!-- QUICK PANEL -->
<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
<quick-panel></quick-panel>
</fuse-sidebar>
<!-- / QUICK PANEL -->
@ -79,9 +79,9 @@
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar [name]="'navbar'"
<fuse-sidebar name="navbar"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
@ -90,9 +90,9 @@
<!-- RIGHT NAVBAR -->
<ng-template #rightNavbar>
<fuse-sidebar [name]="'navbar'" position="right"
<fuse-sidebar name="navbar" position="right"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>