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

(Sidebar) Changed align to position since align is a native HTML attribute

Browse Source 
Added invisibleOverlay option
This commit is contained in:
Sercan Yemen 2018-05-30 12:22:19 +03:00
parent 83c395b866
commit b918fa4122
2 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/@fuse/components/sidebar/sidebar.component.scss
View File

@ -17,12 +17,12 @@ fuse-sidebar {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
background: white; background: white;
&.left-aligned { &.left-positioned {
left: 0; left: 0;
transform: translateX(-100%); transform: translateX(-100%);
} }
&.right-aligned { &.right-positioned {
right: 0; right: 0;
transform: translateX(100%); transform: translateX(100%);
} }
@ -58,4 +58,8 @@ fuse-sidebar {
z-index: 3; z-index: 3;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
opacity: 0; opacity: 0;
&.fuse-sidebar-overlay-invisible {
background-color: transparent;
}
} }

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

@ -20,9 +20,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
@Input() @Input()
name: string; name: string;
// Align // Position
@Input() @Input()
align: 'left' | 'right'; position: 'left' | 'right';
// Open // Open
@HostBinding('class.open') @HostBinding('class.open')
@ -40,6 +40,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
@HostBinding('class.unfolded') @HostBinding('class.unfolded')
unfolded: boolean; unfolded: boolean;
// Invisible overlay
@Input()
invisibleOverlay: boolean;
// Private // Private
private _folded: boolean; private _folded: boolean;
private _fuseConfig: any; private _fuseConfig: any;
@ -70,9 +74,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
) )
{ {
// Set the defaults // Set the defaults
this.opened = false;
this.folded = false; this.folded = false;
this.align = 'left'; this.opened = false;
this.position = 'left';
this.invisibleOverlay = false;
// Set the private defaults // Set the private defaults
this._unsubscribeAll = new Subject(); this._unsubscribeAll = new Subject();
@ -97,14 +102,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
this._folded = value; this._folded = value;
// Programmatically add/remove margin to the element // Programmatically add/remove margin to the element
// that comes after or before based on the alignment // that comes after or before based on the position
let sibling, let sibling,
styleRule; styleRule;
const styleValue = '64px'; const styleValue = '64px';
// Get the sibling and set the style rule // Get the sibling and set the style rule
if ( this.align === 'left' ) if ( this.position === 'left' )
{ {
sibling = this._elementRef.nativeElement.nextElementSibling; sibling = this._elementRef.nativeElement.nextElementSibling;
styleRule = 'marginLeft'; styleRule = 'marginLeft';
@ -162,8 +167,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Setup visibility // Setup visibility
this._setupVisibility(); this._setupVisibility();
// Setup alignment // Setup position
this._setupAlignment(); this._setupPosition();
// Setup lockedOpen // Setup lockedOpen
this._setupLockedOpen(); this._setupLockedOpen();
@ -193,21 +198,21 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
/** /**
* Set the sidebar alignment * Setup the sidebar position
* *
* @private * @private
*/ */
private _setupAlignment(): void private _setupPosition(): void
{ {
// Add the correct class name to the sidebar // Add the correct class name to the sidebar
// element depending on the align attribute // element depending on the position attribute
if ( this.align === 'right' ) if ( this.position === 'right' )
{ {
this._renderer.addClass(this._elementRef.nativeElement, 'right-aligned'); this._renderer.addClass(this._elementRef.nativeElement, 'right-positioned');
} }
else else
{ {
this._renderer.addClass(this._elementRef.nativeElement, 'left-aligned'); this._renderer.addClass(this._elementRef.nativeElement, 'left-positioned');
} }
} }
@ -314,6 +319,12 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Add a class to the backdrop element // Add a class to the backdrop element
this._backdrop.classList.add('fuse-sidebar-overlay'); this._backdrop.classList.add('fuse-sidebar-overlay');
// Add a class depending on the invisibleOverlay option
if ( this.invisibleOverlay )
{
this._backdrop.classList.add('fuse-sidebar-overlay-invisible');
}
// Append the backdrop to the parent of the sidebar // Append the backdrop to the parent of the sidebar
this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop); this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop);