6 files changed, 262 insertions, 1 deletions

diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index f55a516e4..3c8b66cd5 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -17,6 +17,7 @@
 
 ::ng-deep {
   .help-popover {
+    z-index: z(help-popover) !important;
     max-width: 300px;
 
     .popover-body {
@@ -26,7 +27,7 @@
       font-size: 13px;
       background-color: var(--mainBackgroundColor);
       color: var(--mainForegroundColor);
-      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
 
       p {
         margin-bottom: 0;
diff --git a/client/src/app/shared/misc/list-overflow.component.html b/client/src/app/shared/misc/list-overflow.component.html
new file mode 100644
index 000000000..986572801
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.html
@@ -0,0 +1,35 @@
+<div #itemsParent class="d-flex align-items-center text-nowrap w-100 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>
+  
+  <ng-container *ngIf="isMenuDisplayed()">
+    <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
+      <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)">
+      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ routeActive: active }"
+        ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
+      >
+        <span class="glyphicon glyphicon-chevron-down"></span>
+      </button>
+  
+      <div ngbDropdownMenu>
+        <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+          [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item">
+          {{ item.label }}
+        </a>
+      </div>
+    </div>
+  </ng-container>
+</div >
+
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-body">
+    <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+       [routerLink]="item.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+       {{ item.label }}
+    </a>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/misc/list-overflow.component.scss b/client/src/app/shared/misc/list-overflow.component.scss
new file mode 100644
index 000000000..1e5fe4c10
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.scss
@@ -0,0 +1,61 @@
+@import '_mixins';
+
+:host {
+  width: 100%;
+}
+
+.list-overflow-parent {
+  overflow: hidden;
+}
+
+.list-overflow-menu {
+  position: absolute;
+  right: 25px;
+}
+
+button {
+  width: 30px;
+  border: none;
+
+  &::after {
+    display: none;
+  }
+
+  &.routeActive {
+    &::after {
+      display: inherit;
+      border: 2px solid var(--mainColor);
+      position: relative;
+      right: 95%;
+      top: 50%;
+    }
+  }
+}
+
+::ng-deep .dropdown-menu {
+  margin-top: 0 !important;
+  position: static;
+  right: auto;
+  bottom: auto
+}
+
+.modal-body {
+  a {
+    @include disable-default-a-behaviour;
+
+    color: currentColor;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.2rem;
+    padding: 9px 12px;
+    text-align: initial;
+    text-transform: unset;
+    width: 100%;
+
+    &.active {
+      color: var(--mainBackgroundColor) !important;
+      background-color: var(--mainHoverColor);
+      opacity: .9;
+    }
+  }
+}
diff --git a/client/src/app/shared/misc/list-overflow.component.ts b/client/src/app/shared/misc/list-overflow.component.ts
new file mode 100644
index 000000000..30f43ba43
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.ts
@@ -0,0 +1,120 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewChildren
+} from '@angular/core'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { lowerFirst, uniqueId } from 'lodash-es'
+import { ScreenService } from './screen.service'
+import { take } from 'rxjs/operators'
+
+export interface ListOverflowItem {
+  label: string
+  routerLink: string | any[]
+}
+
+@Component({
+  selector: 'list-overflow',
+  templateUrl: './list-overflow.component.html',
+  styleUrls: [ './list-overflow.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListOverflowComponent<T extends ListOverflowItem> implements AfterViewInit {
+  @Input() items: T[]
+  @Input() itemTemplate: TemplateRef<{item: T}>
+
+  @ViewChild('modal', { static: true }) modal: ElementRef
+  @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
+  @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
+
+  showItemsUntilIndexExcluded: number
+  active = false
+  isInTouchScreen = false
+  isInMobileView = false
+
+  private openedOnHover = false
+
+  constructor (
+    private cdr: ChangeDetectorRef,
+    private modalService: NgbModal,
+    private screenService: ScreenService
+  ) {}
+
+  ngAfterViewInit () {
+    setTimeout(() => this.onWindowResize(), 0)
+  }
+
+  isMenuDisplayed () {
+    return !!this.showItemsUntilIndexExcluded
+  }
+
+  @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
+
+    for (const [index, el] of this.itemsRendered.toArray().entries()) {
+      accWidth += el.nativeElement.getBoundingClientRect().width
+      if (showItemsUntilIndexExcluded === undefined) {
+        showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
+      }
+
+      const e = document.getElementById(this.getId(index))
+      const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
+      e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
+    }
+
+    this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
+    this.cdr.markForCheck()
+  }
+
+  openDropdownOnHover (dropdown: NgbDropdown) {
+    this.openedOnHover = true
+    dropdown.open()
+
+    // Menu was closed
+    dropdown.openChange
+            .pipe(take(1))
+            .subscribe(() => this.openedOnHover = false)
+  }
+
+  dropdownAnchorClicked (dropdown: NgbDropdown) {
+    if (this.openedOnHover) {
+      this.openedOnHover = false
+      return
+    }
+
+    return dropdown.toggle()
+  }
+
+  closeDropdownIfHovered (dropdown: NgbDropdown) {
+    if (this.openedOnHover === false) return
+
+    dropdown.close()
+    this.openedOnHover = false
+  }
+
+  toggleModal () {
+    this.modalService.open(this.modal, { centered: true })
+  }
+
+  dismissOtherModals () {
+    this.modalService.dismissAll()
+  }
+
+  getId (id: number | string = uniqueId()): string {
+    return lowerFirst(this.constructor.name) + '_' + id
+  }
+}
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index 220d41d59..9c71a8c83 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -14,6 +14,10 @@ export class ScreenService {
     return this.getWindowInnerWidth() < 800
   }
 
+  isInMediumView () {
+    return this.getWindowInnerWidth() < 1100
+  }
+
   isInMobileView () {
     return this.getWindowInnerWidth() < 500
   }
diff --git a/client/src/app/shared/misc/storage.service.ts b/client/src/app/shared/misc/storage.service.ts
new file mode 100644
index 000000000..0d4a8ab53
--- /dev/null
+++ b/client/src/app/shared/misc/storage.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core'
+import { Observable, Subject } from 'rxjs'
+import {
+  peertubeLocalStorage,
+  peertubeSessionStorage
+} from './peertube-web-storage'
+import { filter } from 'rxjs/operators'
+
+abstract class StorageService {
+  protected instance: Storage
+  static storageSub = new Subject<string>()
+
+  watch (keys?: string[]): Observable<string> {
+    return StorageService.storageSub.asObservable().pipe(filter(val => keys ? keys.includes(val) : true))
+  }
+
+  getItem (key: string) {
+    return this.instance.getItem(key)
+  }
+
+  setItem (key: string, data: any, notifyOfUpdate = true) {
+    this.instance.setItem(key, data)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+
+  removeItem (key: string, notifyOfUpdate = true) {
+    this.instance.removeItem(key)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+}
+
+@Injectable()
+export class LocalStorageService extends StorageService {
+  protected instance: Storage = peertubeLocalStorage
+}
+
+@Injectable()
+export class SessionStorageService extends StorageService {
+  protected instance: Storage = peertubeSessionStorage
+}