Fix list overflow

This commit is contained in:
Chocobozzz 2022-06-10 12:06:12 +02:00
parent db66f3914b
commit 60d3601371
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 16 additions and 4 deletions

View File

@ -1,4 +1,4 @@
<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
<div #itemsParent class="list-overflow-parent">
<span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
<ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
</span>
@ -8,7 +8,11 @@
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
<div
*ngIf="!isInMobileView" class="list-overflow-menu"
ngbDropdown container="body" #dropdown="ngbDropdown"
(mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)"
>
<button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
>

View File

@ -7,6 +7,9 @@
.list-overflow-parent {
overflow: hidden;
display: flex;
// For the menu icon
max-width: calc(100vw - 30px);
}
.list-overflow-menu {

View File

@ -15,6 +15,9 @@ import {
} from '@angular/core'
import { ScreenService } from '@app/core'
import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
import * as debug from 'debug'
const logger = debug('peertube:main:ListOverflowItem')
export interface ListOverflowItem {
label: string
@ -37,7 +40,6 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
showItemsUntilIndexExcluded: number
active = false
isInTouchScreen = false
isInMobileView = false
private openedOnHover = false
@ -58,13 +60,14 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
@HostListener('window:resize')
onWindowResize () {
this.isInTouchScreen = !!this.screenService.isInTouchScreen()
this.isInMobileView = !!this.screenService.isInMobileView()
const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
let showItemsUntilIndexExcluded: number
let accWidth = 0
logger('Parent width is %d', parentWidth)
for (const [ index, el ] of this.itemsRendered.toArray().entries()) {
accWidth += el.nativeElement.getBoundingClientRect().width
if (showItemsUntilIndexExcluded === undefined) {
@ -76,6 +79,8 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
}
logger('Accumulated children width is %d so exclude index is %d', accWidth, showItemsUntilIndexExcluded)
this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
this.cdr.markForCheck()
}