summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--webapp/src/app/@theme/layouts/xds/xds.layout.html17
-rw-r--r--webapp/src/app/@theme/layouts/xds/xds.layout.scss18
-rw-r--r--webapp/src/app/@theme/layouts/xds/xds.layout.ts53
3 files changed, 66 insertions, 22 deletions
diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.html b/webapp/src/app/@theme/layouts/xds/xds.layout.html
index 74d0f97..ee0a80b 100644
--- a/webapp/src/app/@theme/layouts/xds/xds.layout.html
+++ b/webapp/src/app/@theme/layouts/xds/xds.layout.html
@@ -4,18 +4,21 @@
<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'" state="compacted"
(mouseenter)="onMouseEnter($event)" (mouseleave)="onMouseLeave($event)">
- <nb-sidebar-header (click)="toogleSidebar()">
- <!-- XXX - ugly rework -->
+ <nb-sidebar-header (click)="pinSidebar()">
+ <!-- left sidebar -->
<nb-actions *ngIf="sidebar.id === 'left'" size="small" class="header-container right">
- <nb-action *ngIf="!sidebarCompact" icon="fa fa-angle-double-left" style="margin-left: 80%;"></nb-action>
- <nb-action *ngIf="sidebarCompact" icon="fa fa-angle-double-right"></nb-action>
+ <nb-action id="pin-sidebar" [icon]="(!sidebarPinned || sidebarCompact) ? 'fa fa-angle-double-right':'fa fa-angle-double-left'"
+ [ngbTooltip]="sidebarPinned ? 'Undock the sidebar so it is hidden when no being focused':'Dock the sidebar so you can always see it'" placement="bottom">
+ </nb-action>
</nb-actions>
+ <!-- right sidebar -->
<nb-actions *ngIf="sidebar.id === 'right'" size="small" class="header-container left">
- <nb-action *ngIf="!sidebarCompact" icon="fa fa-angle-double-right" style="margin-right: 80%;"></nb-action>
- <nb-action *ngIf="sidebarCompact" icon="fa fa-angle-double-left"></nb-action>
+ <nb-action id="pin-sidebar" [icon]="(!sidebarPinned || sidebarCompact) ? 'fa fa-angle-double-left':'fa fa-angle-double-right'"
+ [ngbTooltip]="sidebarPinned ? 'Undock the sidebar so it is hidden when no being focused':'Dock the sidebar so you can always see it'" placement="bottom">
+ </nb-action>
</nb-actions>
</nb-sidebar-header>
diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.scss b/webapp/src/app/@theme/layouts/xds/xds.layout.scss
index 7ccf7b7..5ac018e 100644
--- a/webapp/src/app/@theme/layouts/xds/xds.layout.scss
+++ b/webapp/src/app/@theme/layouts/xds/xds.layout.scss
@@ -58,6 +58,12 @@
text-align: center;
}
+ /deep/ .tooltip {
+ animation-name: delayedFadeIn;
+ animation-duration: 2s;
+ width: 8rem;
+ }
+
background: transparent;
.main-btn {
@@ -98,6 +104,12 @@
}
}
}
+
+ &.left.expanded {
+ #pin-sidebar {
+ margin-left: 11rem;
+ }
+ }
}
@include media-breakpoint-down(xs) {
@@ -128,3 +140,9 @@
}
}
}
+
+@Keyframes delayedFadeIn {
+ 0% {opacity: 0;}
+ 75% {opacity: 0;} /* Set this to 99% for no fade-in. */
+ 100% {opacity: 1;}
+}
diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.ts b/webapp/src/app/@theme/layouts/xds/xds.layout.ts
index 7e7f0fd..b362fff 100644
--- a/webapp/src/app/@theme/layouts/xds/xds.layout.ts
+++ b/webapp/src/app/@theme/layouts/xds/xds.layout.ts
@@ -29,6 +29,7 @@ export class XdsLayoutComponent implements OnDestroy {
subMenu: NbMenuItem[] = [];
layout: any = {};
sidebar: any = {};
+ sidebarPinned = false;
sidebarCompact = true;
protected layoutState$: Subscription;
@@ -43,6 +44,7 @@ export class XdsLayoutComponent implements OnDestroy {
protected themeService: NbThemeService,
protected bpService: NbMediaBreakpointsService,
protected sidebarService: NbSidebarService) {
+
this.layoutState$ = this.stateService.onLayoutState()
.subscribe((layout: string) => this.layout = layout);
@@ -52,40 +54,67 @@ export class XdsLayoutComponent implements OnDestroy {
});
const isBp = this.bpService.getByName('is');
+
this.menuClick$ = this.menuService.onItemSelect()
.withLatestFrom(this.themeService.onMediaQueryChange())
.delay(20)
.subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
-
+ /*
this.sidebarCompact = false;
+ */
+ // automatically collapse sidebar for narrow screen / mobile
if (bpTo.width <= isBp.width) {
this.sidebarService.collapse('menu-sidebar');
}
});
// Set sidebarCompact according to sidebar state changes
- this.sidebarService.onToggle().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = !this.sidebarCompact));
+ this.sidebarService.onToggle().subscribe(s => {
+ if (s.tag === 'menu-sidebar') {
+ this.sidebarPinned = false;
+ this.sidebarCompact = !this.sidebarCompact;
+ }
+ });
+
this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true));
- this.sidebarService.onExpand().subscribe(() => this.sidebarCompact = false);
+ this.sidebarService.onExpand().subscribe(s => s.tag === 'menu-sidebar' && (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)
+ .delay(100)
.takeUntil(this._mouseLeaveStream);
})
- .subscribe(e => (this.sidebarCompact) && this.sidebarService.toggle(true, 'menu-sidebar'));
+ .subscribe(e => {
+ if (this.sidebarPinned || !this.sidebarCompact) {
+ return;
+ }
+ // this._mouseLeaveStream.emit(null);
+ this.sidebarService.toggle(false, 'menu-sidebar');
+ });
// Automatically collapse sidebar on mouse leave
this._mouseLeaveStream.flatMap(e => {
return Observable
.of(e)
- .delay(500)
+ .delay(100)
.takeUntil(this._mouseEnterStream);
})
- .subscribe(e => this.sidebarService.toggle(true, 'menu-sidebar'));
+ .subscribe(e => {
+ if (this.sidebarPinned || this.sidebarCompact) {
+ return;
+ }
+ // this._mouseEnterStream.emit(null);
+ this.sidebarService.toggle(true, 'menu-sidebar');
+ });
+ }
+
+ ngOnDestroy() {
+ this.layoutState$.unsubscribe();
+ this.sidebarState$.unsubscribe();
+ this.menuClick$.unsubscribe();
}
onMouseEnter($event) {
@@ -96,13 +125,7 @@ export class XdsLayoutComponent implements OnDestroy {
this._mouseLeaveStream.emit($event);
}
- toogleSidebar() {
- this.sidebarService.toggle(true, 'menu-sidebar');
- }
-
- ngOnDestroy() {
- this.layoutState$.unsubscribe();
- this.sidebarState$.unsubscribe();
- this.menuClick$.unsubscribe();
+ pinSidebar() {
+ this.sidebarPinned = !this.sidebarPinned;
}
}