Fix top menu dropdown
This commit is contained in:
parent
743f023c53
commit
64545a834b
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
<a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
|
<a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
|
||||||
|
|
||||||
<div *ngIf="!menuEntry.routerLink" ngbDropdown container="body" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
|
<div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
|
||||||
<span
|
<span
|
||||||
(mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
|
(mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
|
||||||
(click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
|
(click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { NavigationEnd, Router } from '@angular/router'
|
||||||
import { Subscription } from 'rxjs'
|
import { Subscription } from 'rxjs'
|
||||||
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
|
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
|
||||||
import { GlobalIconName } from '@app/shared/images/global-icon.component'
|
import { GlobalIconName } from '@app/shared/images/global-icon.component'
|
||||||
|
import { ScreenService } from '@app/shared/misc/screen.service'
|
||||||
|
|
||||||
export type TopMenuDropdownParam = {
|
export type TopMenuDropdownParam = {
|
||||||
label: string
|
label: string
|
||||||
|
@ -27,11 +28,15 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
suffixLabels: { [ parentLabel: string ]: string }
|
suffixLabels: { [ parentLabel: string ]: string }
|
||||||
hasIcons = false
|
hasIcons = false
|
||||||
|
container: undefined | 'body' = undefined
|
||||||
|
|
||||||
private openedOnHover = false
|
private openedOnHover = false
|
||||||
private routeSub: Subscription
|
private routeSub: Subscription
|
||||||
|
|
||||||
constructor (private router: Router) {}
|
constructor (
|
||||||
|
private router: Router,
|
||||||
|
private screen: ScreenService
|
||||||
|
) {}
|
||||||
|
|
||||||
ngOnInit () {
|
ngOnInit () {
|
||||||
this.updateChildLabels(window.location.pathname)
|
this.updateChildLabels(window.location.pathname)
|
||||||
|
@ -43,6 +48,12 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
|
||||||
this.hasIcons = this.menuEntries.some(
|
this.hasIcons = this.menuEntries.some(
|
||||||
e => e.children && e.children.some(c => !!c.iconName)
|
e => e.children && e.children.some(c => !!c.iconName)
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// FIXME: We have to set body for the container to avoid because of scroll overflow on mobile view
|
||||||
|
// But this break our hovering system
|
||||||
|
if (this.screen.isInMobileView()) {
|
||||||
|
this.container = 'body'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy () {
|
ngOnDestroy () {
|
||||||
|
|
Loading…
Reference in New Issue