User dropdown and notifications popover improvements (#3344)

* hove user dropdown on avatar and username
* rename avatar-notification to notification component
* use a link on mobile for notification component
* add profile user dropdown and mobile notifications link as reusable active link
* replace markAllAsRead inbox glyphicon to ok in notification popover
* remove keyboard shortcuts from user dropdown on mobile
* use common bell icon instead of inbox-full for notifications
* remove duplicated notification in user dropdown since the bell appears on the right
* adjust sensitive icon in user dropdown
* align vertically user buttons popover and dropdown
* adjust ellipsis on user display name and username in menu
* adjust notification bell for mobile in menu
* display background of user dropdown avatar and username for touchscreens
* add right arrow indicator on mobile

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>

1 files changed, 0 insertions, 134 deletions

diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
deleted file mode 100644
index 88f2b6296..000000000
--- a/client/src/app/menu/avatar-notification.component.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-::ng-deep {
-  .popover-notifications.popover {
-    max-width: none;
-    left: 7px !important;
-
-    .popover-body {
-      padding: 0;
-      font-size: 14px;
-      font-family: $main-fonts;
-      width: 400px;
-      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
-
-      .loader {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        padding: 5px 0;
-      }
-
-      .content {
-        max-height: 150px;
-        transition: max-height 0.15s ease-out;
-        display: flex;
-        height: 500px;
-        flex-direction: column;
-
-        &.loaded {
-          max-height: 500px;
-        }
-
-        & > my-user-notifications:nth-child(2) {
-          overflow-y: auto;
-          flex-grow: 1;
-        }
-      }
-
-      .notifications-header {
-        display: flex;
-        justify-content: space-between;
-
-        background-color: rgba(0, 0, 0, 0.10);
-        align-items: center;
-        padding: 0 10px;
-        font-size: 16px;
-        min-height: 50px;
-
-        a {
-          @include disable-default-a-behaviour;
-        }
-        
-        button {
-          @include peertube-button;
-        
-          padding: 0;
-          background: transparent;
-        }
-
-        a, button {
-          color: rgba(20, 20, 20, 0.5);
-
-          &:hover:not(:disabled) {
-            color: rgba(20, 20, 20, 0.8);
-          }
-        }
-      }
-
-      .all-notifications {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: $font-semibold;
-        color: $fg-color;
-        padding: 7px 0;
-        margin-top: auto;
-        text-decoration: none;
-      }
-    }
-  }
-}
-
-.notification-avatar {
-  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;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background-color: pvar(--mainColor);
-    color: #fff;
-    font-size: 10px;
-    font-weight: $font-semibold;
-
-    border-radius: 15px;
-    width: 15px;
-    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;
-      }
-    }
-  }
-}