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

(FuseSidebar) Exported temporary fold & unfold methods

Browse Source 
(FuseSidebar) Added [foldedAutoTriggerOnHover] input for disabling the fold/unfold on mouseenter/mouseleave
(Chat Panel) Don't unfold the panel on hover
(Chat Panel) Always keep the contacts list in view
This commit is contained in:
Sercan Yemen 2018-07-10 14:55:08 +03:00
parent ac70ecc616
commit 585709cf93
1 changed files with 65 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,6 +44,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
@Input() @Input()
foldedWidth: number; foldedWidth: number;
// Folded auto trigger on hover
@Input()
foldedAutoTriggerOnHover: boolean;
// Folded unfolded // Folded unfolded
@HostBinding('class.unfolded') @HostBinding('class.unfolded')
unfolded: boolean; unfolded: boolean;
@ -96,6 +100,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
) )
{ {
// Set the defaults // Set the defaults
this.foldedAutoTriggerOnHover = true;
this.foldedWidth = 64; this.foldedWidth = 64;
this.foldedChanged = new EventEmitter(); this.foldedChanged = new EventEmitter();
this.openedChanged = new EventEmitter(); this.openedChanged = new EventEmitter();
@ -657,25 +662,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
@HostListener('mouseenter') @HostListener('mouseenter')
onMouseEnter(): void onMouseEnter(): void
{ {
// Only work if the sidebar is folded // Only work if the auto trigger is enabled
if ( !this.folded ) if ( !this.foldedAutoTriggerOnHover )
{ {
return; return;
} }
// Enable the animations this.unfoldTemporarily();
this._enableAnimations();
// Unfold the sidebar temporarily
this.unfolded = true;
// Remove the folded width
this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
// Mark for check
this._changeDetectorRef.markForCheck();
} }
/** /**
@ -684,27 +677,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
@HostListener('mouseleave') @HostListener('mouseleave')
onMouseLeave(): void onMouseLeave(): void
{ {
// Only work if the sidebar is folded // Only work if the auto trigger is enabled
if ( !this.folded ) if ( !this.foldedAutoTriggerOnHover )
{ {
return; return;
} }
// Enable the animations this.foldTemporarily();
this._enableAnimations();
// Fold the sidebar back
this.unfolded = false;
// Set the folded width
const styleValue = this.foldedWidth + 'px';
this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
// Mark for check
this._changeDetectorRef.markForCheck();
} }
/** /**
@ -763,4 +742,58 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
this.fold(); this.fold();
} }
} }
/**
* Fold the temporarily unfolded sidebar back
*/
foldTemporarily(): void
{
// Only work if the sidebar is folded
if ( !this.folded )
{
return;
}
// Enable the animations
this._enableAnimations();
// Fold the sidebar back
this.unfolded = false;
// Set the folded width
const styleValue = this.foldedWidth + 'px';
this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Unfold the sidebar temporarily
*/
unfoldTemporarily(): void
{
// Only work if the sidebar is folded
if ( !this.folded )
{
return;
}
// Enable the animations
this._enableAnimations();
// Unfold the sidebar temporarily
this.unfolded = true;
// Remove the folded width
this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
// Mark for check
this._changeDetectorRef.markForCheck();
}
} }