menu collapsed state change on pageTop button click

This commit is contained in:
nixa 2016-04-29 12:32:37 +03:00
parent 6a7266ddb3
commit 3b02486219
2 changed files with 16 additions and 2 deletions

View file

@ -1,8 +1,10 @@
import {Component, ViewEncapsulation} from 'angular2/core'; import {Component, ViewEncapsulation} from 'angular2/core';
import {Subscription} from 'rxjs/Subscription';
import {MsgCenter} from '../msgCenter'; import {MsgCenter} from '../msgCenter';
import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe'; import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe';
import {ScrollPosition} from '../directives/scrollPosition.directive'; import {ScrollPosition} from '../directives/scrollPosition.directive';
import {SidebarStateService} from '../sidebar/sidebarState.service'
@Component({ @Component({
selector: 'page-top', selector: 'page-top',
@ -13,8 +15,20 @@ import {ScrollPosition} from '../directives/scrollPosition.directive';
}) })
export class PageTop { export class PageTop {
isScrolled: Boolean = false; isScrolled: Boolean = false;
isMenuCollapsed: Boolean = false;
private _sidebarStateSubscription: Subscription;
constructor(private _sidebarStateService: SidebarStateService) {
this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
}
toggleMenu() {
this.isMenuCollapsed = !this.isMenuCollapsed;
this._sidebarStateService.stateChanged(this.isMenuCollapsed);
}
scrolledChanged(isScrolled) { scrolledChanged(isScrolled) {
this.isScrolled = isScrolled; this.isScrolled = isScrolled;
} }
} }

View file

@ -1,6 +1,6 @@
<div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)" [ngClass]="{scrolled: isScrolled}"> <div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)" [ngClass]="{scrolled: isScrolled}">
<a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a> <a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
<a href class="collapse-menu-link ion-navicon" ng-click="isMenuCollapsed=!isMenuCollapsed"></a> <a (click)="toggleMenu()" class="collapse-menu-link ion-navicon"></a>
<div class="search"> <div class="search">
<i class="ion-ios-search-strong" ng-click="startSearch()"></i> <i class="ion-ios-search-strong" ng-click="startSearch()"></i>