diff options
| -rw-r--r-- | webapp/src/app/@theme/layouts/xds/xds.layout.html | 17 | ||||
| -rw-r--r-- | webapp/src/app/@theme/layouts/xds/xds.layout.scss | 18 | ||||
| -rw-r--r-- | webapp/src/app/@theme/layouts/xds/xds.layout.ts | 53 |
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; } } |