From da97ab7e4bc1fb04a97137d714fa67eb6e34ff9e Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Tue, 15 Aug 2017 15:34:24 +0300 Subject: [PATCH] (FuseNavBar) default folded option added, responsive, right/left sidenav issues fixed. --- src/app/main/main.component.html | 4 +- .../main/navbar/navbar-toggle.directive.ts | 6 +- src/app/main/navbar/navbar.component.scss | 45 ++++++++-- src/app/main/navbar/navbar.component.ts | 88 +++++++++++++------ 4 files changed, 106 insertions(+), 37 deletions(-) diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html index d96e65ef..fe5924d6 100644 --- a/src/app/main/main.component.html +++ b/src/app/main/main.component.html @@ -10,7 +10,7 @@
- +
@@ -30,7 +30,7 @@
- +
diff --git a/src/app/main/navbar/navbar-toggle.directive.ts b/src/app/main/navbar/navbar-toggle.directive.ts index 50e41ee5..1e18aafa 100644 --- a/src/app/main/navbar/navbar-toggle.directive.ts +++ b/src/app/main/navbar/navbar-toggle.directive.ts @@ -10,18 +10,20 @@ export class FuseNavbarToggleDirective @Input() fuseNavbar: string; navbar: FuseNavbarComponent; - constructor(navbar: FuseNavbarService) + constructor(private navbarService: FuseNavbarService) { - this.navbar = navbar.getNavBar(); } @HostListener('click') onClick() { + this.navbar = this.navbarService.getNavBar(); + if ( !this.navbar[this.fuseNavbar] ) { return; } + this.navbar[this.fuseNavbar](); } } diff --git a/src/app/main/navbar/navbar.component.scss b/src/app/main/navbar/navbar.component.scss index 4f4b48ef..4c2213ed 100644 --- a/src/app/main/navbar/navbar.component.scss +++ b/src/app/main/navbar/navbar.component.scss @@ -5,7 +5,14 @@ body { &.fuse-nav-bar-folded { .content-wrapper { - padding-left: 64px !important; + + &:last-child { + padding-left: 64px !important; + } + + &:first-child { + padding-right: 64px !important; + } } } } @@ -27,6 +34,13 @@ fuse-navbar { &.folded { position: absolute; + &.left-navbar { + left: 0; + } + &.right-navbar { + right: 0; + } + &:not(.folded-open) { width: 64px; min-width: 64px; @@ -42,20 +56,35 @@ fuse-navbar { } } - &.open { - transform: translateX(0) !important; - } - &.close { - transform: translateX(-100%) !important; + &.left-navbar { + transform: translateX(-100%) !important; + } + &.right-navbar { + transform: translateX(100%) !important; + } + box-shadow: none; } @include media-breakpoint('xs') { position: absolute; top: 0; - left: 0; bottom: 0; - transform: translateX(-100%); + &.left-navbar { + left: 0; + } + &.right-navbar { + right: 0; + } + + &:not(.initialized) { + &.left-navbar { + transform: translateX(-100%); + } + &.right-navbar { + transform: translateX(100%); + } + } } .navbar-header { diff --git a/src/app/main/navbar/navbar.component.ts b/src/app/main/navbar/navbar.component.ts index 3932b1b9..9702b3a5 100644 --- a/src/app/main/navbar/navbar.component.ts +++ b/src/app/main/navbar/navbar.component.ts @@ -1,8 +1,9 @@ -import { Component, HostBinding, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { AppComponent } from '../../app.component'; import { Subscription } from 'rxjs/Subscription'; import { FuseMatchMedia } from '../../core/services/match-media.service'; import { FuseNavbarService } from './navbar.service'; +import { ObservableMedia } from '@angular/flex-layout'; @Component({ selector : 'fuse-navbar', @@ -13,39 +14,70 @@ import { FuseNavbarService } from './navbar.service'; export class FuseNavbarComponent implements OnInit, OnDestroy { @HostBinding('class.close') isClosed: boolean; - @HostBinding('class.open') isOpened: boolean = !this.isClosed; - @HostBinding('class.folded') isFoldedActive: boolean; @HostBinding('class.folded-open') isFoldedOpen: boolean; + @HostBinding('class.initialized') initialized: boolean; + @Input('folded') foldedByDefault = false; matchMediaWatcher: Subscription; constructor( private bodyEl: AppComponent, private fuseMatchMedia: FuseMatchMedia, - private navBarService: FuseNavbarService + private navBarService: FuseNavbarService, + public media: ObservableMedia ) { navBarService.setNavBar(this); - this.isClosed = false; - this.isFoldedActive = false; - this.isFoldedOpen = false; - this.updateCssClasses(); this.matchMediaWatcher = this.fuseMatchMedia.onMediaChange .subscribe((mediaStep) => { - if ( mediaStep === 'xs' ) - { - this.closeBar(); - } - else - { - this.openBar(); - } + setTimeout(() => { + + if ( mediaStep === 'xs' ) + { + this.closeBar(); + this.deActivateFolded(); + } + else + { + this.openBar(); + } + }); }); } + ngOnInit() + { + this.isClosed = false; + this.isFoldedActive = this.foldedByDefault; + this.isFoldedOpen = false; + this.initialized = false; + this.updateCssClasses(); + + setTimeout(() => { + this.initialized = true; + }); + + if ( this.media.isActive('xs') ) + { + this.closeBar(); + this.deActivateFolded(); + } + else + { + if ( !this.foldedByDefault ) + { + this.deActivateFolded(); + } + else + { + this.activateFolded(); + } + } + } + openBar() { this.isClosed = false; @@ -74,14 +106,25 @@ export class FuseNavbarComponent implements OnInit, OnDestroy { if ( !this.isFoldedActive ) { - this.isFoldedActive = true; - this.bodyEl.addClass('fuse-nav-bar-folded'); + this.activateFolded(); } else { - this.isFoldedActive = false; - this.bodyEl.removeClass('fuse-nav-bar-folded'); + this.deActivateFolded(); } + } + + activateFolded() + { + this.isFoldedActive = true; + this.bodyEl.addClass('fuse-nav-bar-folded'); + this.isFoldedOpen = false; + } + + deActivateFolded() + { + this.isFoldedActive = false; + this.bodyEl.removeClass('fuse-nav-bar-folded'); this.isFoldedOpen = false; } @@ -111,11 +154,6 @@ export class FuseNavbarComponent implements OnInit, OnDestroy } } - ngOnInit() - { - - } - ngOnDestroy() { this.matchMediaWatcher.unsubscribe();