summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSebastien Douheret <sebastien.douheret@iot.bzh>2018-01-05 10:43:35 +0100
committerSebastien Douheret <sebastien.douheret@iot.bzh>2018-01-05 10:43:35 +0100
commit3a51ad34bfe80aad964ab8da08a6c1eb742b9040 (patch)
treedc2e4ac09c4d1b71ea6ae78381a0c307efd016f3
parentbbef877fbb1c32981e86e407afd095e24d10232a (diff)
Automatically expand/collapse sidebar on mouse over/leave.
-rw-r--r--webapp/src/app/@theme/layouts/xds/xds.layout.html3
-rw-r--r--webapp/src/app/@theme/layouts/xds/xds.layout.ts34
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() {