7 files changed, 280 insertions, 98 deletions

diff --git a/client/src/app/menu/index.ts b/client/src/app/menu/index.ts
index 39dbde750..7f62c1100 100644
--- a/client/src/app/menu/index.ts
+++ b/client/src/app/menu/index.ts
@@ -1,3 +1,3 @@
 export * from './language-chooser.component'
-export * from './avatar-notification.component'
+export * from './notification.component'
 export * from './menu.component'
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index bba5fdadf..5b1c24c7a 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -3,32 +3,28 @@
     <div class="top-menu">
       <div *ngIf="isLoggedIn" class="logged-in-block">
         <div>
-          <my-avatar-notification [user]="user" (navigate)="onActiveLinkScrollToAnchor($event)"></my-avatar-notification>
-
-          <div class="logged-in-info">
-            <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="logged-in-display-name">{{ user.account?.displayName }}</a>
-            <a *ngIf="!user.account" routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a>
-
-            <div class="logged-in-username">@{{ user.username }}</div>
-          </div>
-
-          <div class="logged-in-more" ngbDropdown [placement]="loggedInMorePlacement" container="body" autoClose="outside">
-            <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
+          <div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside">
+            <div ngbDropdownToggle>
+              <img [src]="user.accountAvatarUrl" alt="Avatar" />
+              <div class="logged-in-info">
+                <div class="logged-in-display-name">{{ user.account?.displayName }}</div>
+
+                <div class="logged-in-username">@{{ user.username }}</div>
+              </div>
+
+              <div class="dropdown-toggle-indicator">
+                <span class="glyphicon glyphicon-chevron-down"></span>
+              </div>
+            </div>
 
             <div ngbDropdownMenu>
-              <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/accounts', user.account.nameWithHost ]">
+              <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/accounts', user.account.nameWithHost ]"
+                #profile (click)="onActiveLinkScrollToAnchor(profile)">
                 <my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
               </a>
 
               <div class="dropdown-divider"></div>
 
-              <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/notifications"
-                #notifications (click)="onActiveLinkScrollToAnchor(notifications)">
-                <my-global-icon iconName="inbox-full" aria-hidden="true"></my-global-icon> <ng-container i18n>My notifications</ng-container>
-              </a>
-
-              <div class="dropdown-divider"></div>
-
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()">
                 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
                 <span i18n>Interface:</span>
@@ -42,7 +38,7 @@
                 <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span>
               </a>
 
-              <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings"
+              <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
                 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
                 (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)">
                 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon>
@@ -60,7 +56,7 @@
 
               <div class="dropdown-divider"></div>
 
-              <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openHotkeysCheatSheet()">
+              <a *ngIf="!isInMobileView" ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openHotkeysCheatSheet()">
                 <my-global-icon iconName="command" aria-hidden="true"></my-global-icon>
                 <ng-container i18n>Keyboard shortcuts</ng-container>
               </a>
@@ -71,6 +67,8 @@
               </a>
             </div>
           </div>
+
+          <my-notification (navigate)="onActiveLinkScrollToAnchor($event)"></my-notification>
         </div>
 
         <div class="logged-in-menu">
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index e79ecb5c7..89dc26e87 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -88,47 +88,118 @@ menu {
     height: 80px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
 
-    .logged-in-info {
-      @include ellipsis;
+    .logged-in-more {
+      $main-radius: 25px;
 
-      flex-grow: 1;
+      margin-left: 13px;
+      border-radius: $main-radius;
+      transition: all .1s ease-in-out;
+      cursor: pointer;
 
-      .logged-in-display-name {
-        font-size: 16px;
-        font-weight: $font-semibold;
-        color: pvar(--menuForegroundColor);
-        cursor: pointer;
+      *, & {
+        line-height: 1;
+      }
 
-        @include disable-default-a-behaviour;
+      &.show {
+        background-color: rgba(255, 255, 255, 0.20);
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
       }
 
-      .logged-in-username {
-        @include ellipsis;
+      @mixin display-hints($is-mobile: false) {
+        background-color: rgba(255, 255, 255, 0.15);
 
-        font-size: 13px;
-        color: #C6C6C6;
-        max-width: 140px;
-        cursor: pointer;
+        @if $is-mobile {
+          .dropdown-toggle-indicator {
+            display: inherit !important;
+          }
+          .dropdown-toggle:first-child {
+            padding-right: 30px !important;
+          }
+        }
       }
-    }
 
-    .logged-in-more {
-      margin-right: 20px;
+      &:hover {
+        @include display-hints;
+      }
 
-      my-global-icon.dropdown-toggle {
-        cursor: pointer;
+      /* smartphones and touchscreens */
+      @media (hover: none) and (pointer: coarse) {
+        @include display-hints($is-mobile: true);
 
+        /* fill space when on mobile */
+        max-width: calc(100% - 80px);
+        .dropdown-toggle {
+          max-width: 100%;
+        }
+        .logged-in-info {
+          max-width: calc(100% - 45px) !important;
+        }
+
+      }
+
+      .dropdown-toggle-indicator {
+        position: relative;
+        width: 0;
+        display: none;
+
+        span {
+          position: absolute;
+          right: -35px;
+          top: -8px;
+          color: grey;
+          width: $main-radius;
+        }
+      }
+
+      .dropdown-toggle {
         &::after {
           border: none;
         }
+      }
 
-        ::ng-deep {
-          @include apply-svg-color(pvar(--menuForegroundColor));
+      .dropdown-toggle:first-child {
+        display: inline-flex;
+        align-items: center;
+        padding: 5px 7px;
+      }
+
+      img {
+        @include avatar(34px);
+
+        margin-right: 10px;
+      }
+
+      .logged-in-info {
+        max-width: 105px;
+
+        flex-grow: 1;
+
+        .logged-in-display-name,
+        .logged-in-username {
+          @include ellipsis;
+        }
+
+        .logged-in-display-name {
+          font-size: 16px;
+          font-weight: $font-semibold;
+          color: pvar(--menuForegroundColor);
+
+          @include disable-default-a-behaviour;
+        }
+
+        .logged-in-username {
+          font-size: 13px;
+          color: #C6C6C6;
         }
       }
     }
+
+    my-notification {
+      margin-left: auto;
+      margin-right: 15px;
+    }
   }
 
   .logged-in-menu {
@@ -343,6 +414,12 @@ menu {
     my-global-icon.hover-display-toggle {
       display: none;
     }
+
+    &.settings-sensitive {
+      my-global-icon ::ng-deep svg {
+        margin-top: 2px !important;
+      }
+    }
   }
 }
 
@@ -364,4 +441,14 @@ menu {
   .top-menu, .footer {
     width: 100% !important;
   }
+
+  .dropdown-menu {
+    width: calc(100vw - 30px);
+  }
+
+  .dropdown-item:hover, .dropdown-item:active {
+    &.settings-sensitive my-global-icon ::ng-deep svg {
+      margin-top: 0px !important;
+    }
+  }
 }
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index bdc95127b..50ff0e2b3 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -9,6 +9,7 @@ import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, Screen
 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
 import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
+import { NgbDropdown, NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap'
 
 const logger = debug('peertube:menu:MenuComponent')
 
@@ -20,6 +21,7 @@ const logger = debug('peertube:menu:MenuComponent')
 export class MenuComponent implements OnInit {
   @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent
   @ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent
+  @ViewChild('dropdown') dropdown: NgbDropdown
 
   user: AuthUser
   isLoggedIn: boolean
@@ -30,8 +32,6 @@ export class MenuComponent implements OnInit {
   videoLanguages: string[] = []
   nsfwPolicy: string
 
-  loggedInMorePlacement: string
-
   currentInterfaceLanguage: string
 
   private languages: VideoConstant<string>[] = []
@@ -54,8 +54,27 @@ export class MenuComponent implements OnInit {
     private hotkeysService: HotkeysService,
     private screenService: ScreenService,
     private menuService: MenuService,
+    private dropdownConfig: NgbDropdownConfig,
     private router: Router
-  ) { }
+  ) {
+    this.dropdownConfig.container = 'body'
+  }
+
+  get isInMobileView () {
+    return this.screenService.isInMobileView()
+  }
+
+  get dropdownContainer () {
+    if (this.isInMobileView) {
+      return null
+    } else {
+      return this.dropdownConfig.container
+    }
+  }
+
+  get language () {
+    return this.languageChooserModal.getCurrentLanguage()
+  }
 
   get instanceName () {
     return this.serverConfig.instance.name
@@ -76,10 +95,6 @@ export class MenuComponent implements OnInit {
 
     this.computeAdminAccess()
 
-    this.loggedInMorePlacement = this.screenService.isInMobileView()
-      ? 'left-top auto'
-      : 'right-top auto'
-
     this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
 
     this.authService.loginChangedSource.subscribe(
@@ -203,6 +218,29 @@ export class MenuComponent implements OnInit {
     }
   }
 
+  // Lock menu scroll when menu scroll to avoid fleeing / detached dropdown
+  onMenuScrollEvent () {
+    document.querySelector('menu').scrollTo(0, 0)
+  }
+
+  onDropdownOpenChange (opened: boolean) {
+    if (this.screenService.isInMobileView()) return
+
+    // Close dropdown when window scroll to avoid dropdown quick jump for re-position
+    const onWindowScroll = () => {
+      this.dropdown.close()
+      window.removeEventListener('scroll', onWindowScroll)
+    }
+
+    if (opened) {
+      window.addEventListener('scroll', onWindowScroll)
+      document.querySelector('menu').scrollTo(0, 0) // Reset menu scroll to easy lock
+      document.querySelector('menu').addEventListener('scroll', this.onMenuScrollEvent)
+    } else {
+      document.querySelector('menu').removeEventListener('scroll', this.onMenuScrollEvent)
+    }
+  }
+
   private buildUserLanguages () {
     if (!this.user) {
       this.videoLanguages = []
diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/notification.component.html
index b24bd0309..beda1c43c 100644
--- a/client/src/app/menu/avatar-notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -1,10 +1,19 @@
 <div
-  [ngbPopover]="popContent" autoClose="outside" placement="bottom-left" container="body" popoverClass="popover-notifications"
-  i18n-title title="View your notifications" class="notification-avatar" #popover="ngbPopover" (hidden)="onPopoverHidden()"
+  [ngbPopover]="popContent" autoClose="outside" placement="bottom" container={this} popoverClass="popover-notifications"
+  i18n-title title="View your notifications" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }"
+  #popover="ngbPopover" (shown)="onPopoverShown()" (hidden)="onPopoverHidden()"
 >
   <div *ngIf="unreadNotifications > 0" class="unread-notifications">{{ unreadNotifications }}</div>
 
-  <img [src]="user.accountAvatarUrl" alt="Avatar" />
+  <my-global-icon iconName="bell"></my-global-icon>
+</div>
+
+<div *ngIf="isInMobileView" i18n-title title="View your notifications" class="notification-inbox-link">
+  <div *ngIf="unreadNotifications > 0" class="unread-notifications">{{ unreadNotifications }}</div>
+
+  <a routerLink="/my-account/notifications" routerLinkActive="active" #link (click)="onNavigate(link)">
+    <my-global-icon iconName="bell"></my-global-icon>
+  </a>
 </div>
 
 <ng-template #popContent>
@@ -15,7 +24,7 @@
       <div>
         <button
           *ngIf="unreadNotifications"
-          i18n-title title="Mark all as read" class="glyphicon glyphicon-inbox mr-2"
+          i18n-title title="Mark all as read" class="glyphicon glyphicon-ok mr-2"
           (click)="markAllAsRead()"
         ></button>
         <a
@@ -36,7 +45,7 @@
     ></my-user-notifications>
 
     <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)">
-      <my-global-icon class="mr-1" iconName="inbox-full" aria-hidden="true"></my-global-icon>
+      <my-global-icon class="mr-1" iconName="bell" aria-hidden="true"></my-global-icon>
       <span i18n>See all your notifications</span>
     </a>
   </div>
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/notification.component.scss
index 88f2b6296..40feb9e66 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -1,17 +1,62 @@
 @import '_variables';
 @import '_mixins';
 
+
+.notification-inbox-popover {
+  padding: 10px;
+}
+
+.notification-inbox-link a {
+  padding: 13px 10px;
+}
+
+.notification-inbox-popover,
+.notification-inbox-link a {
+  @include apply-svg-color(#808080);
+  ::ng-deep {
+    svg {
+      transition: color .1s ease-in-out;
+    }
+  }
+
+  transition: all .1s ease-in-out;
+  border-radius: 25px;
+  cursor: pointer;
+
+  &:hover, &:active {
+    background-color: rgba(255, 255, 255, 0.15);
+    @include apply-svg-color(#fff);
+  }
+}
+
+.notification-inbox-popover.shown,
+.notification-inbox-link a.active {
+  @include apply-svg-color(#fff);
+
+  background-color: rgba(255, 255, 255, 0.28);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
+}
+
+.notification-inbox-popover.hidden {
+  display: none;
+}
+
 ::ng-deep {
   .popover-notifications.popover {
     max-width: none;
+    top: -6px !important;
     left: 7px !important;
 
+    .arrow {
+      display: none;
+    }
+
     .popover-body {
       padding: 0;
       font-size: 14px;
       font-family: $main-fonts;
       width: 400px;
-      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
 
       .loader {
         display: flex;
@@ -42,19 +87,22 @@
         display: flex;
         justify-content: space-between;
 
-        background-color: rgba(0, 0, 0, 0.10);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         align-items: center;
-        padding: 0 10px;
-        font-size: 16px;
-        min-height: 50px;
+        padding: 0 12px;
+        font-size: 14px;
+        font-weight: bold;
+        color: rgba(0, 0, 0, 0.5);
+        text-transform: uppercase;
+        min-height: 40px;
 
         a {
           @include disable-default-a-behaviour;
         }
-        
+
         button {
           @include peertube-button;
-        
+
           padding: 0;
           background: transparent;
         }
@@ -82,25 +130,23 @@
   }
 }
 
-.notification-avatar {
+.notification-inbox-popover, .notification-inbox-link {
   cursor: pointer;
   position: relative;
 
-  img,
   .unread-notifications {
     margin-left: 20px;
   }
 
-  img {
-    @include avatar(34px);
-
-    margin-right: 10px;
-  }
-
   .unread-notifications {
     position: absolute;
-    top: -5px;
-    left: -5px;
+    top: 6px;
+    left: 0;
+
+    @media screen and (max-width: $mobile-view) {
+      top: -4px;
+      left: -2px;
+    }
 
     display: flex;
     align-items: center;
@@ -116,19 +162,3 @@
     height: 15px;
   }
 }
-
-@media screen and (max-width: $mobile-view) {
-  ::ng-deep {
-    .popover-notifications.popover {
-      left: unset !important;
-
-      .arrow {
-        left: calc(2em + 7px);
-      }
-
-      .popover-body {
-        width: 100vw;
-      }
-    }
-  }
-}
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/notification.component.ts
index ed3ffc2d8..b7d9e9abb 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/notification.component.ts
@@ -1,24 +1,24 @@
 import { Subject, Subscription } from 'rxjs'
 import { filter } from 'rxjs/operators'
-import { Component, EventEmitter, Input, Output, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, EventEmitter, Output, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { NavigationEnd, Router } from '@angular/router'
-import { Notifier, User, PeerTubeSocket } from '@app/core'
+import { Notifier, PeerTubeSocket, ScreenService } from '@app/core'
 import { UserNotificationService } from '@app/shared/shared-main'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
-  selector: 'my-avatar-notification',
-  templateUrl: './avatar-notification.component.html',
-  styleUrls: [ './avatar-notification.component.scss' ]
+  selector: 'my-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: [ './notification.component.scss' ]
 })
-export class AvatarNotificationComponent implements OnInit, OnDestroy {
+export class NotificationComponent implements OnInit, OnDestroy {
   @ViewChild('popover', { static: true }) popover: NgbPopover
 
-  @Input() user: User
   @Output() navigate = new EventEmitter<HTMLAnchorElement>()
 
   unreadNotifications = 0
   loaded = false
+  opened = false
 
   markAllAsReadSubject = new Subject<boolean>()
 
@@ -27,6 +27,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
 
   constructor (
     private userNotificationService: UserNotificationService,
+    private screenService: ScreenService,
     private peertubeSocket: PeerTubeSocket,
     private notifier: Notifier,
     private router: Router
@@ -54,12 +55,31 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
     if (this.routeSub) this.routeSub.unsubscribe()
   }
 
+  get isInMobileView () {
+    return this.screenService.isInMobileView()
+  }
+
   closePopover () {
     this.popover.close()
   }
 
+  onPopoverShown () {
+    this.opened = true
+
+    document.querySelector('menu').scrollTo(0, 0) // Reset menu scroll to easy lock
+    document.querySelector('menu').addEventListener('scroll', this.onMenuScrollEvent)
+  }
+
   onPopoverHidden () {
     this.loaded = false
+    this.opened = false
+
+    document.querySelector('menu').removeEventListener('scroll', this.onMenuScrollEvent)
+  }
+
+  // Lock menu scroll when menu scroll to avoid fleeing / detached dropdown
+  onMenuScrollEvent () {
+    document.querySelector('menu').scrollTo(0, 0)
   }
 
   onNotificationLoaded () {
@@ -67,6 +87,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
   }
 
   onNavigate (link: HTMLAnchorElement) {
+    this.closePopover()
     this.navigate.emit(link)
   }
 
@@ -83,5 +104,4 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
       if (data.type === 'read-all') return this.unreadNotifications = 0
     })
   }
-
 }