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, 164 insertions, 0 deletions

diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
new file mode 100644
index 000000000..40feb9e66
--- /dev/null
+++ b/client/src/app/menu/notification.component.scss
@@ -0,0 +1,164 @@
+@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 2px 6px 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;
+
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        align-items: center;
+        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;
+        }
+
+        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-inbox-popover, .notification-inbox-link {
+  cursor: pointer;
+  position: relative;
+
+  .unread-notifications {
+    margin-left: 20px;
+  }
+
+  .unread-notifications {
+    position: absolute;
+    top: 6px;
+    left: 0;
+
+    @media screen and (max-width: $mobile-view) {
+      top: -4px;
+      left: -2px;
+    }
+
+    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;
+  }
+}