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

(Sidebar) Added "foldedWidth" input for controlling the width of the folded sidebar

Browse Source 
(Sidebar) Replaced the margin with padding on the folded sidebar's sibling
(Docs) Updated Sidebar docs
This commit is contained in:
Sercan Yemen 2018-07-03 13:54:19 +03:00
parent 89f71735a8
commit d781e59928
3 changed files with 52 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,12 +37,6 @@ fuse-sidebar {
position: absolute !important;
top: 0;
bottom: 0;
&:not(.unfolded) {
width: 64px;
min-width: 64px;
max-width: 64px;
}
}
&.animations-enabled {

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

@ -40,6 +40,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
@HostBinding('class.locked-open')
isLockedOpen: boolean;
// Folded width
@Input()
foldedWidth: number;
// Folded unfolded
@HostBinding('class.unfolded')
unfolded: boolean;
@ -92,6 +96,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
)
{
// Set the defaults
this.foldedWidth = 64;
this.foldedChanged = new EventEmitter();
this.openedChanged = new EventEmitter();
this.opened = false;
@ -108,7 +113,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// @ Accessors
// -----------------------------------------------------------------------------------------------------
// Folded
/**
* Folded
*
* @param {boolean} value
*/
@Input()
set folded(value: boolean)
{
@ -121,23 +130,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
return;
}
// Programmatically add/remove margin to the element
// Programmatically add/remove padding to the element
// that comes after or before based on the position
let sibling,
styleRule;
const styleValue = '64px';
const styleValue = this.foldedWidth + 'px';
// Get the sibling and set the style rule
if ( this.position === 'left' )
{
sibling = this._elementRef.nativeElement.nextElementSibling;
styleRule = 'margin-left';
styleRule = 'padding-left';
}
else
{
sibling = this._elementRef.nativeElement.previousElementSibling;
styleRule = 'margin-right';
styleRule = 'padding-right';
}
// If there is no sibling, return...
@ -152,6 +161,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Fold the sidebar
this.fold();
// Set the folded width
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);
// Set the style and class
this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
this._renderer.addClass(this._elementRef.nativeElement, 'folded');
@ -162,6 +176,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Unfold the sidebar
this.unfold();
// 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');
// Remove the style and class
this._renderer.removeStyle(sibling, styleRule);
this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
@ -375,23 +394,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
return;
}
// Programmatically add/remove margin to the element
// Programmatically add/remove padding to the element
// that comes after or before based on the position
let sibling,
styleRule;
const styleValue = '64px';
const styleValue = this.foldedWidth + 'px';
// Get the sibling and set the style rule
if ( this.position === 'left' )
{
sibling = this._elementRef.nativeElement.nextElementSibling;
styleRule = 'margin-left';
styleRule = 'padding-left';
}
else
{
sibling = this._elementRef.nativeElement.previousElementSibling;
styleRule = 'margin-right';
styleRule = 'padding-right';
}
// If there is no sibling, return...
@ -403,6 +422,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Fold the sidebar
this.fold();
// Set the folded width
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);
// Set the style and class
this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
this._renderer.addClass(this._elementRef.nativeElement, 'folded');
@ -645,6 +669,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// 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();
}
@ -667,6 +696,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// 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();
}

7
src/app/main/documentation/components/sidebar/sidebar.component.html
View File

@ -47,6 +47,13 @@
</p>
</div>
<div class="my-48">
<h3><code>[foldedWidth]</code></h3>
<p class="py-8">
Controls the width of the sidebar when it's folded.
</p>
</div>
<div class="my-48">
<h3><code>[position]</code></h3>
<p class="py-8">