From 329fbb5a38eb180c057fb5aee04fa1af17fa2434 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sat, 10 Mar 2018 14:32:37 +0300 Subject: [PATCH 1/3] Fix issues with folded navigation --- .../components/sidebar/sidebar.component.ts | 175 ++++++++++++------ 1 file changed, 121 insertions(+), 54 deletions(-) diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index cff12192..0af20005 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -1,11 +1,11 @@ -import { Component, ElementRef, HostBinding, HostListener, Inject, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; +import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { ObservableMedia } from '@angular/flex-layout'; import { Subscription } from 'rxjs/Subscription'; import { FuseSidebarService } from './sidebar.service'; import { FuseMatchMediaService } from '@fuse/services/match-media.service'; -import { DOCUMENT } from '@angular/common'; +import { FuseConfigService } from '@fuse/services/config.service'; @Component({ selector : 'fuse-sidebar', @@ -21,7 +21,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Align @Input() - align: string; + align: 'left' | 'right'; // Open @HostBinding('class.open') @@ -38,21 +38,57 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Folded @HostBinding('class.folded') @Input() - set folded(value) + set folded(value: boolean) { + // Only work if the sidebar is not closed + if ( !this.opened ) + { + return; + } + + // Set the folded this._folded = value; - if ( value ) + // Programmatically add/remove margin to the element + // that comes after or before based on the alignment + let sibling, + styleRule; + + const styleValue = '64px'; + + // Get the sibling and set the style rule + if ( this.align === 'left' ) { - this.fold(); + sibling = this.elementRef.nativeElement.nextElementSibling; + styleRule = 'marginLeft'; } else { - this.unfold(); + sibling = this.elementRef.nativeElement.previousElementSibling; + styleRule = 'marginRight'; + } + + // If there is no sibling, return... + if ( !sibling ) + { + return; + } + + // If folded... + if ( value ) + { + // Set the style + this.renderer.setStyle(sibling, styleRule, styleValue); + } + // If unfolded... + else + { + // Remove the style + this.renderer.removeStyle(sibling, styleRule); } } - get folded() + get folded(): boolean { return this._folded; } @@ -62,31 +98,31 @@ export class FuseSidebarComponent implements OnInit, OnDestroy unfolded: boolean; // Private - private _folded = false; + private _folded: boolean; private _wasActive: boolean; private _backdrop: HTMLElement | null = null; private _player: AnimationPlayer; - private _matchMediaWatcher: Subscription; + private _onMediaChangeSubscription: Subscription; /** * Constructor * - * @param renderer - * @param elementRef - * @param animationBuilder - * @param sidebarService - * @param matchMedia - * @param media - * @param document + * @param {Renderer2} renderer + * @param {ElementRef} elementRef + * @param {AnimationBuilder} animationBuilder + * @param {ObservableMedia} observableMedia + * @param {FuseConfigService} fuseConfigService + * @param {FuseSidebarService} fuseSidebarService + * @param {FuseMatchMediaService} fuseMatchMediaService */ constructor( private renderer: Renderer2, private elementRef: ElementRef, private animationBuilder: AnimationBuilder, - private sidebarService: FuseSidebarService, - private matchMedia: FuseMatchMediaService, - private media: ObservableMedia, - @Inject(DOCUMENT) private document: any + private observableMedia: ObservableMedia, + private fuseConfigService: FuseConfigService, + private fuseSidebarService: FuseSidebarService, + private fuseMatchMediaService: FuseMatchMediaService ) { // Set the defaults @@ -101,7 +137,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy ngOnInit(): void { // Register the sidebar - this.sidebarService.register(this.name, this); + this.fuseSidebarService.register(this.name, this); // Setup alignment this._setupAlignment(); @@ -115,27 +151,35 @@ export class FuseSidebarComponent implements OnInit, OnDestroy */ ngOnDestroy(): void { - // Unregister the sidebar - this.sidebarService.unregister(this.name); + // If the sidebar is folded, unfold it to revert modifications + if ( this.folded ) + { + this.unfold(); + } - // Unregister the media watcher - this._matchMediaWatcher.unsubscribe(); + // Unregister the sidebar + this.fuseSidebarService.unregister(this.name); + + // Unsubscribe from the media watcher subscription + this._onMediaChangeSubscription.unsubscribe(); } /** - * Setup the alignment + * Set the sidebar alignment * * @private */ private _setupAlignment(): void { - if ( this.align === 'left' ) + // Add the correct class name to the sidebar + // element depending on the align attribute + if ( this.align === 'right' ) { - this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned'); + this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned'); } else { - this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned'); + this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned'); } } @@ -156,12 +200,12 @@ export class FuseSidebarComponent implements OnInit, OnDestroy this._wasActive = false; // Act on every media change - this._matchMediaWatcher = + this._onMediaChangeSubscription = - this.matchMedia.onMediaChange.subscribe(() => { + this.fuseMatchMediaService.onMediaChange.subscribe(() => { // Get the active status - const isActive = this.media.isActive(this.lockedOpen); + const isActive = this.observableMedia.isActive(this.lockedOpen); // If the both status are the same, don't act if ( this._wasActive === isActive ) @@ -169,14 +213,24 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return; } - // Store the new active status - this._wasActive = isActive; - // Activate the lockedOpen if ( isActive ) { // Set the lockedOpen status this.isLockedOpen = true; + + // 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.fuseConfigService.config.layout.navigationFolded ) + { + this.fold(); + } + + // Hide the backdrop if any exists + this.hideBackdrop(); } // De-Activate the lockedOpen else @@ -186,7 +240,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Unfold the sidebar in case if it was folded this.unfold(); + + // Force the the opened status to close + this.opened = false; } + + // Store the new active status + this._wasActive = isActive; }); } @@ -205,9 +265,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Set the opened status this.opened = true; - - // Add a css class to the body - this.renderer.addClass(this.document.body, 'fuse-sidebar-opened'); } /** @@ -215,7 +272,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy */ close(): void { - if ( !this.opened ) + if ( !this.opened || this.isLockedOpen ) { return; } @@ -225,9 +282,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Set the opened status this.opened = false; - - // Remove the css class from the body - this.renderer.removeClass(this.document.body, 'fuse-sidebar-opened'); } /** @@ -259,9 +313,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Unfold the sidebar temporarily this.unfolded = true; - - // Add a css class to the body - this.renderer.addClass(this.document.body, 'fuse-sidebar-folded-unfolded'); } /** @@ -278,9 +329,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Fold the sidebar back this.unfolded = false; - - // Remove the css class from the body - this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded-unfolded'); } /** @@ -288,8 +336,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy */ fold(): void { - // Add a css class to the body - this.renderer.addClass(this.document.body, 'fuse-sidebar-folded'); + // Only work if the sidebar is not folded + if ( this.folded ) + { + return; + } + + // Fold + this.folded = true; } /** @@ -297,8 +351,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy */ unfold(): void { - // Remove the css class from the body - this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded'); + // Only work if the sidebar is folded + if ( !this.folded ) + { + return; + } + + // Unfold + this.folded = false; } /** @@ -306,7 +366,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy */ toggleFold(): void { - this.folded = !this.folded; + if ( this.folded ) + { + this.unfold(); + } + else + { + this.fold(); + } } /** From 874ef26f0ba98fc38b76361c32311fe57bb6d60c Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sat, 10 Mar 2018 14:34:17 +0300 Subject: [PATCH 2/3] Increase the version number --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7e7036d8..8626eaf9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "fuse", - "version": "5.2.9", + "version": "5.2.10", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 3299e4e6..541bfb4c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fuse", - "version": "5.2.9", + "version": "5.2.10", "license": "https://themeforest.net/licenses/terms/regular", "scripts": { "ng": "ng", From 7af9c579773508eda1fa291aadd4d375460e16fd Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sat, 10 Mar 2018 14:35:09 +0300 Subject: [PATCH 3/3] Changed the title --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index c71f25e8..f9ccb3a3 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - Fuse2 - Angular 5+ Material Design Admin Template + Fuse - Angular 5+ Material Design Admin Template