Merge remote-tracking branch 'origin/develop' into notifications-thru-sw

2 files changed, 29 insertions, 5 deletions

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d499d3d6..571df0f1 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,12 +1,14 @@
 import { computed } from 'vue'
 import { mapGetters } from 'vuex'
 import Notification from '../notification/notification.vue'
+import ExtraNotifications from '../extra_notifications/extra_notifications.vue'
 import NotificationFilters from './notification_filters.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 import {
   notificationsFromStore,
   filteredNotificationsFromStore,
-  unseenNotificationsFromStore
+  unseenNotificationsFromStore,
+  countExtraNotifications
 } from '../../services/notification_utils/notification_utils.js'
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -23,7 +25,8 @@ const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
 const Notifications = {
   components: {
     Notification,
-    NotificationFilters
+    NotificationFilters,
+    ExtraNotifications
   },
   props: {
     // Disables panel styles, unread mark, potentially other notification-related actions
@@ -31,6 +34,11 @@ const Notifications = {
     minimalMode: Boolean,
     // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
     filterMode: Array,
+    // Do not show extra notifications
+    noExtra: {
+      type: Boolean,
+      default: false
+    },
     // Disable teleporting (i.e. for /users/user/notifications)
     disableTeleport: Boolean
   },
@@ -65,11 +73,17 @@ const Notifications = {
     filteredNotifications () {
       return filteredNotificationsFromStore(this.$store, this.filterMode)
     },
+    unseenCountBadgeText () {
+      return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
+    },
     unseenCount () {
       return this.unseenNotifications.length
     },
+    extraNotificationsCount () {
+      return countExtraNotifications(this.$store)
+    },
     unseenCountTitle () {
-      return this.unseenCount + (this.unreadChatCount) + this.unreadAnnouncementCount
+      return this.unseenNotifications.length + (this.unreadChatCount) + this.unreadAnnouncementCount
     },
     loading () {
       return this.$store.state.statuses.notifications.loading
@@ -94,6 +108,9 @@ const Notifications = {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
+    showExtraNotifications () {
+      return !this.noExtra
+    },
     ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   },
   mounted () {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 633efca6..999f8e9c 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -17,9 +17,9 @@
           <div class="title">
             {{ $t('notifications.notifications') }}
             <span
-              v-if="unseenCount"
+              v-if="unseenCountBadgeText"
               class="badge badge-notification unseen-count"
-            >{{ unseenCount }}</span>
+            >{{ unseenCountBadgeText }}</span>
           </div>
           <div
             v-if="showScrollTop"
@@ -55,6 +55,13 @@
           role="feed"
         >
           <div
+            v-if="showExtraNotifications"
+            role="listitem"
+            class="notification"
+          >
+            <extra-notifications />
+          </div>
+          <div
             v-for="notification in notificationsToDisplay"
             :key="notification.id"
             role="listitem"