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

(FuseNavBar) default folded option added, responsive, right/left sidenav issues fixed.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-15 15:34:24 +03:00
parent 117f5a85b2
commit da97ab7e4b
4 changed files with 106 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/main/main.component.html
View File

@ -10,7 +10,7 @@
<div id="wrapper">
<fuse-navbar class="md-primary-700-bg" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
<fuse-navbar [folded]="true" class="md-primary-700-bg left-navbar" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
<div class="content-wrapper">
@ -30,7 +30,7 @@
</div>
<fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
<fuse-navbar [folded]="true" class="md-primary-700-bg right-navbar" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
</div>

6
src/app/main/navbar/navbar-toggle.directive.ts
View File

@ -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]();
}
}

45
src/app/main/navbar/navbar.component.scss
View File

@ -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 {

88
src/app/main/navbar/navbar.component.ts
View File

@ -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();