-<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>
<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"
>
} 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
showItemsUntilIndexExcluded: number
active = false
- isInTouchScreen = false
isInMobileView = false
private openedOnHover = false
@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) {
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()
}