aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-10 12:06:12 +0200
committerChocobozzz <me@florianbigard.com>2022-06-10 13:51:12 +0200
commit60d360137158e8be28eb34524122b01dd7da4369 (patch)
tree4ab19c5ec3a4413ef67e3b560a9fee731d438b55
parentdb66f3914bad31a21df5d7ffb3452b80655d6794 (diff)
downloadPeerTube-60d360137158e8be28eb34524122b01dd7da4369.tar.gz
PeerTube-60d360137158e8be28eb34524122b01dd7da4369.tar.zst
PeerTube-60d360137158e8be28eb34524122b01dd7da4369.zip
Fix list overflow
-rw-r--r--client/src/app/shared/shared-main/misc/list-overflow.component.html8
-rw-r--r--client/src/app/shared/shared-main/misc/list-overflow.component.scss3
-rw-r--r--client/src/app/shared/shared-main/misc/list-overflow.component.ts9
3 files changed, 16 insertions, 4 deletions
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
index b2e0982f1..ea22a3445 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.html
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -1,4 +1,4 @@
1<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent"> 1<div #itemsParent class="list-overflow-parent">
2 <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id"> 2 <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
3 <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container> 3 <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
4 </span> 4 </span>
@@ -8,7 +8,11 @@
8 <span class="glyphicon glyphicon-chevron-down"></span> 8 <span class="glyphicon glyphicon-chevron-down"></span>
9 </button> 9 </button>
10 10
11 <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)"> 11 <div
12 *ngIf="!isInMobileView" class="list-overflow-menu"
13 ngbDropdown container="body" #dropdown="ngbDropdown"
14 (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)"
15 >
12 <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }" 16 <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
13 ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button" 17 ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
14 > 18 >
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
index 19c055fd3..b06418568 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -7,6 +7,9 @@
7 7
8.list-overflow-parent { 8.list-overflow-parent {
9 overflow: hidden; 9 overflow: hidden;
10 display: flex;
11 // For the menu icon
12 max-width: calc(100vw - 30px);
10} 13}
11 14
12.list-overflow-menu { 15.list-overflow-menu {
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.ts b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
index fbc481093..541991f74 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.ts
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
@@ -15,6 +15,9 @@ import {
15} from '@angular/core' 15} from '@angular/core'
16import { ScreenService } from '@app/core' 16import { ScreenService } from '@app/core'
17import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap' 17import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
18import * as debug from 'debug'
19
20const logger = debug('peertube:main:ListOverflowItem')
18 21
19export interface ListOverflowItem { 22export interface ListOverflowItem {
20 label: string 23 label: string
@@ -37,7 +40,6 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
37 40
38 showItemsUntilIndexExcluded: number 41 showItemsUntilIndexExcluded: number
39 active = false 42 active = false
40 isInTouchScreen = false
41 isInMobileView = false 43 isInMobileView = false
42 44
43 private openedOnHover = false 45 private openedOnHover = false
@@ -58,13 +60,14 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
58 60
59 @HostListener('window:resize') 61 @HostListener('window:resize')
60 onWindowResize () { 62 onWindowResize () {
61 this.isInTouchScreen = !!this.screenService.isInTouchScreen()
62 this.isInMobileView = !!this.screenService.isInMobileView() 63 this.isInMobileView = !!this.screenService.isInMobileView()
63 64
64 const parentWidth = this.parent.nativeElement.getBoundingClientRect().width 65 const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
65 let showItemsUntilIndexExcluded: number 66 let showItemsUntilIndexExcluded: number
66 let accWidth = 0 67 let accWidth = 0
67 68
69 logger('Parent width is %d', parentWidth)
70
68 for (const [ index, el ] of this.itemsRendered.toArray().entries()) { 71 for (const [ index, el ] of this.itemsRendered.toArray().entries()) {
69 accWidth += el.nativeElement.getBoundingClientRect().width 72 accWidth += el.nativeElement.getBoundingClientRect().width
70 if (showItemsUntilIndexExcluded === undefined) { 73 if (showItemsUntilIndexExcluded === undefined) {
@@ -76,6 +79,8 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
76 e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden' 79 e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
77 } 80 }
78 81
82 logger('Accumulated children width is %d so exclude index is %d', accWidth, showItemsUntilIndexExcluded)
83
79 this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded 84 this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
80 this.cdr.markForCheck() 85 this.cdr.markForCheck()
81 } 86 }