Update notifications modal with new component

app/assets/stylesheets/navigation/notifications.scss

@@ -4,14 +4,6 @@
 .sci--navigation--notificaitons-flyout-container {
   position: relative;
 
-  .sci--navigation--notificaitons-flyout-backdrop {
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-  }
-
   .has-unseen {
     &::after {
       align-items: center;
@@ -31,99 +23,94 @@
       white-space: nowrap;
     }
   }
+}
 
   .sci--navigation--notificaitons-flyout {
-    background-color: $color-white;
-    border-radius: 0 0  $border-radius-default $border-radius-default;
-    box-shadow: $flyout-shadow;
     display: flex;
     flex-direction: column;
-    height: calc(100vh - var(--top-navigation-height) - 2em);
+    height: calc(100vh - 8rem);
     padding: 1.5rem;
-    position: absolute;
-    right: 0;
-    top: calc(var(--top-navigation-height) - 1.5rem);
     width: 400px;
 
-    .sci--navigation--notificaitons-flyout-title {
+  .sci--navigation--notificaitons-flyout-title {
-      @include font-h2;
+    @include font-h2;
+    align-items: center;
+    display: flex;
+    margin-bottom: .625rem;
+
+    .sn-icon {
+      @include font-button;
+      cursor: pointer;
+      margin-left: auto;
+    }
+  }
+
+  hr {
+    margin: .625rem 0;
+  }
+
+  .sci-navigation--notificaitons-flyout-subtitle {
+    @include font-main;
+    line-height: 2.25rem;
+    margin-bottom: .625rem;
+  }
+
+  .sci--navigation--notificaitons-flyout-notifications {
+    margin-left: -1.5rem;
+    overscroll-behavior: contain;
+    padding: 0 1.5rem;
+    position: relative;
+    width: calc(100% + 3rem);
+
+    .next-page-loader {
       align-items: center;
       display: flex;
-      margin-bottom: .625rem;
+      justify-content: center;
+      margin: 1rem 0;
+    }
+  }
 
-      .sn-icon {
+  .sci-navigation--notificaitons-flyout-notification {
-        @include font-button;
+    border-bottom: $border-tertiary;
+    padding: 1rem 0;
+
+    .sci-navigation--notificaitons-flyout-notification-icon {
+      align-items: center;
+      background-color: $brand-primary;
+      border-radius: 50%;
+      color: $color-white;
+      display: flex;
+      grid-row: 1 / 5;
+      height: 2rem;
+      justify-content: center;
+      margin-right: .75rem;
+      width: 2rem;
+
+      &.deliver {
+        background-color: $brand-warning;
+      }
+
+      &.system {
+        background-color: $brand-success;
+      }
+    }
+
+    .sci-navigation--notificaitons-flyout-notification-date {
+      @include font-small;
+      color: $color-silver-chalice;
+    }
+
+    .sci-navigation--notificaitons-flyout-notification-title {
+      margin: .25rem 0;
+
+      &:not([data-seen="true"]) {
+        font-weight: bold;
+      }
+    }
+
+    .sci-navigation--notificaitons-flyout-notification-message {
+      &[data-notification="system"] {
         cursor: pointer;
-        margin-left: auto;
-      }
-    }
-
-    hr {
-      margin: .625rem 0;
-    }
-
-    .sci-navigation--notificaitons-flyout-subtitle {
-      @include font-main;
-      line-height: 2.25rem;
-      margin-bottom: .625rem;
-    }
-
-    .sci--navigation--notificaitons-flyout-notifications {
-      margin-left: -1.5rem;
-      padding: 0 1.5rem;
-      position: relative;
-      width: calc(100% + 3rem);
-
-      .next-page-loader {
-        align-items: center;
-        display: flex;
-        justify-content: center;
-        margin: 1rem 0;
-      }
-    }
-
-    .sci-navigation--notificaitons-flyout-notification {
-      border-bottom: $border-tertiary;
-      padding: 1rem 0;
-
-      .sci-navigation--notificaitons-flyout-notification-icon {
-        align-items: center;
-        background-color: $brand-primary;
-        border-radius: 50%;
-        color: $color-white;
-        display: flex;
-        grid-row: 1 / 5;
-        height: 2rem;
-        justify-content: center;
-        margin-right: .75rem;
-        width: 2rem;
-
-        &.deliver {
-          background-color: $brand-warning;
-        }
-
-        &.system {
-          background-color: $brand-success;
-        }
-      }
-
-      .sci-navigation--notificaitons-flyout-notification-date {
-        @include font-small;
-        color: $color-silver-chalice;
-      }
-
-      .sci-navigation--notificaitons-flyout-notification-title {
-        margin: .25rem 0;
-
-        &:not([data-seen="true"]) {
-          font-weight: bold;
-        }
-      }
-
-      .sci-navigation--notificaitons-flyout-notification-message {
-        &[data-notification="system"] {
-          cursor: pointer;
-        }
       }
     }
   }

app/javascript/vue/navigation/notifications/notifications_flyout.vue

@@ -5,7 +5,7 @@
       <i class="sn-icon sn-icon-close" @click="$emit('close')"></i>
     </div>
     <hr>
-    <perfect-scrollbar ref="scrollContainer" class="sci--navigation--notificaitons-flyout-notifications">
+    <perfect-scrollbar @wheel="preventPropagation" ref="scrollContainer" class="sci--navigation--notificaitons-flyout-notifications">
       <div class="sci-navigation--notificaitons-flyout-subtitle" v-if="todayNotifications.length">
         {{ i18n.t('nav.notifications.today') }}
       </div>
@@ -73,6 +73,10 @@ export default {
     }
   },
   methods: {
+    preventPropagation(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
     loadNotifications() {
       if (this.nextPageUrl == null || this.loadingPage) return;
 

app/javascript/vue/navigation/top_menu.vue

@@ -20,23 +20,28 @@
       :position="'right'"
       :btnIcon="'sn-icon sn-icon-settings'"
     ></MenuDropdown>
-    <div v-if="user" class="sci--navigation--notificaitons-flyout-container" >
+    <GeneralDropdown
-      <button class="btn btn-light icon-btn btn-black"
+      v-if="user"
+      ref="notificationDropdown"
+      position="right"
+      class="sci--navigation--notificaitons-flyout-container">
+      <template v-slot:field>
+        <button class="btn btn-light icon-btn btn-black"
               :title="i18n.t('nav.notifications.title')"
               :class="{ 'has-unseen': unseenNotificationsCount > 0 }"
               :data-unseen="unseenNotificationsCount"
-              data-toggle="dropdown"
+              data-toggle="dropdown">
-              @click="notificationsOpened = !notificationsOpened">
+          <i class="sn-icon sn-icon-notifications"></i>
-        <i class="sn-icon sn-icon-notifications"></i>
+        </button>
-      </button>
+      </template>
-      <div v-if="notificationsOpened" class="sci--navigation--notificaitons-flyout-backdrop" @click="notificationsOpened = false"></div>
+      <template v-slot:flyout >
-      <NotificationsFlyout
+        <NotificationsFlyout
-        v-if="notificationsOpened"
+          :notificationsUrl="notificationsUrl"
-        :notificationsUrl="notificationsUrl"
+          :unseenNotificationsCount="unseenNotificationsCount"
-        :unseenNotificationsCount="unseenNotificationsCount"
+          @update:unseenNotificationsCount="checkUnseenNotifications()"
-        @update:unseenNotificationsCount="checkUnseenNotifications()"
+          @close="$refs.notificationDropdown.$refs.field.click();"/>
-        @close="notificationsOpened = false" />
+      </template>
-    </div>
+    </GeneralDropdown>
     <div v-if="user" class="dropdown" :title="i18n.t('nav.user_profile')">
       <div class="sci--navigation--top-menu-user btn btn-light icon-btn btn-black" data-toggle="dropdown">
         <img class="avatar w-6 h-6" :src="user.avatar_url">
@@ -63,6 +68,7 @@ import NotificationsFlyout from './notifications/notifications_flyout.vue';
 import DropdownSelector from '../shared/legacy/dropdown_selector.vue';
 import SelectDropdown from '../shared/select_dropdown.vue';
 import MenuDropdown from '../shared/menu_dropdown.vue';
+import GeneralDropdown from '../shared/general_dropdown.vue';
 
 export default {
   name: 'TopMenuContainer',
@@ -70,7 +76,8 @@ export default {
     DropdownSelector,
     NotificationsFlyout,
     SelectDropdown,
-    MenuDropdown
+    MenuDropdown,
+    GeneralDropdown
   },
   props: {
     url: String,
@@ -88,7 +95,6 @@ export default {
       helpMenu: null,
       settingsMenu: null,
       userMenu: null,
-      notificationsOpened: false,
       unseenNotificationsCount: 0
     };
   },
@@ -119,15 +125,6 @@ export default {
       );
     }
   },
-  watch: {
-    notificationsOpened(newVal) {
-      if (newVal === true) {
-        document.body.style.overflow = 'hidden';
-      } else if (newVal === false) {
-        document.body.style.overflow = 'scroll';
-      }
-    }
-  },
   methods: {
     fetchData() {
       $.get(this.url, (result) => {

app/javascript/vue/shared/general_dropdown.vue

@@ -33,7 +33,8 @@ export default {
     btnText: { type: String, required: false },
     btnIcon: { type: String, required: false },
     caret: { type: Boolean, default: false },
-    alwaysShow: { type: Boolean, default: false }
+    alwaysShow: { type: Boolean, default: false },
+    closeDropdown: { type: Boolean, default: false }
   },
   data() {
     return {