diff options
| -rw-r--r-- | webapp/src/app/@theme/layouts/xds/xds.layout.html | 3 | ||||
| -rw-r--r-- | webapp/src/app/@theme/layouts/xds/xds.layout.ts | 34 |
2 files changed, 35 insertions, 2 deletions
diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.html b/webapp/src/app/@theme/layouts/xds/xds.layout.html index bf2b4e6..74d0f97 100644 --- a/webapp/src/app/@theme/layouts/xds/xds.layout.html +++ b/webapp/src/app/@theme/layouts/xds/xds.layout.html @@ -4,7 +4,8 @@ <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header> </nb-layout-header> - <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive [right]="sidebar.id === 'right'"> + <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive [right]="sidebar.id === 'right'" + (mouseenter)="onMouseEnter($event)" (mouseleave)="onMouseLeave($event)"> <nb-sidebar-header (click)="toogleSidebar()"> <!-- XXX - ugly rework --> diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.ts b/webapp/src/app/@theme/layouts/xds/xds.layout.ts index 8987584..7e7f0fd 100644 --- a/webapp/src/app/@theme/layouts/xds/xds.layout.ts +++ b/webapp/src/app/@theme/layouts/xds/xds.layout.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy } from '@angular/core'; +import { Component, OnDestroy, EventEmitter } from '@angular/core'; import { NbMediaBreakpoint, NbMediaBreakpointsService, @@ -11,8 +11,11 @@ import { import { StateService } from '../../../@core/data/state.service'; import { Subscription } from 'rxjs/Subscription'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/withLatestFrom'; import 'rxjs/add/operator/delay'; +import 'rxjs/add/observable/of'; +import 'rxjs/add/operator/takeUntil'; // TODO: move layouts into the framework @Component({ @@ -32,6 +35,9 @@ export class XdsLayoutComponent implements OnDestroy { protected sidebarState$: Subscription; protected menuClick$: Subscription; + private _mouseEnterStream: EventEmitter<any> = new EventEmitter(); + private _mouseLeaveStream: EventEmitter<any> = new EventEmitter(); + constructor(protected stateService: StateService, protected menuService: NbMenuService, protected themeService: NbThemeService, @@ -62,6 +68,32 @@ export class XdsLayoutComponent implements OnDestroy { this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true)); this.sidebarService.onExpand().subscribe(() => this.sidebarCompact = false); this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false)); + + // Automatically expand sidebar on mouse over + this._mouseEnterStream.flatMap(e => { + return Observable + .of(e) + .delay(200) + .takeUntil(this._mouseLeaveStream); + }) + .subscribe(e => (this.sidebarCompact) && this.sidebarService.toggle(true, 'menu-sidebar')); + + // Automatically collapse sidebar on mouse leave + this._mouseLeaveStream.flatMap(e => { + return Observable + .of(e) + .delay(500) + .takeUntil(this._mouseEnterStream); + }) + .subscribe(e => this.sidebarService.toggle(true, 'menu-sidebar')); + } + + onMouseEnter($event) { + this._mouseEnterStream.emit($event); + } + + onMouseLeave($event) { + this._mouseLeaveStream.emit($event); } toogleSidebar() { |