Fix top menu dropdown

This commit is contained in:
Chocobozzz 2019-04-26 11:39:03 +02:00
parent 743f023c53
commit 64545a834b
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 13 additions and 2 deletions

View File

@ -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"

View File

@ -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 () {