Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (469 commits)
  Feature/add sticker picker
  guard more secure routes
  guard secure routes by redirecting to root
  closest can returns itself as well
  find inside status-content div only
  try to use the closest a tag as target
  Update es.json
  Also apply keyword filter to subjects
  Remove files I accidentally pushed in
  fix issues caused by merges in usersearch on @
  Add user search at
  fix eslint warnings
  remove vue-popperjs
  fix moderation menu partially hidden by usercard boundary
  migrate popper css
  rewrite ModerationTools using v-tooltip
  make popover position for status action dropdow relative to parent node
  rewrite ExtraButtons using v-tooltip
  install v-tooltip
  i18n/Update pedantic Japanese translation
  ...

1 files changed, 53 insertions, 17 deletions

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 634a03ac..c42c35e6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,31 +1,67 @@
 <template>
-  <div class="notifications">
-    <div class="panel panel-default">
-      <div v-if="!noHeading" class="panel-heading">
+  <div
+    :class="{ minimal: minimalMode }"
+    class="notifications"
+  >
+    <div :class="mainClass">
+      <div
+        v-if="!noHeading"
+        class="panel-heading"
+      >
         <div class="title">
-          {{$t('notifications.notifications')}}
-          <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
+          {{ $t('notifications.notifications') }}
+          <span
+            v-if="unseenCount"
+            class="badge badge-notification unseen-count"
+          >{{ unseenCount }}</span>
         </div>
-        <div @click.prevent class="loadmore-error alert error" v-if="error">
-          {{$t('timeline.error_fetching')}}
+        <div
+          v-if="error"
+          class="loadmore-error alert error"
+          @click.prevent
+        >
+          {{ $t('timeline.error_fetching') }}
         </div>
-        <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
+        <button
+          v-if="unseenCount"
+          class="read-button"
+          @click.prevent="markAsSeen"
+        >
+          {{ $t('notifications.read') }}
+        </button>
       </div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
-          <div class="notification-overlay"></div>
-          <notification :notification="notification"></notification>
+        <div
+          v-for="notification in visibleNotifications"
+          :key="notification.id"
+          class="notification"
+          :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
+        >
+          <div class="notification-overlay" />
+          <notification :notification="notification" />
         </div>
       </div>
       <div class="panel-footer">
-        <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
-          {{$t('notifications.no_more_notifications')}}
+        <div
+          v-if="bottomedOut"
+          class="new-status-notification text-center panel-footer faint"
+        >
+          {{ $t('notifications.no_more_notifications') }}
         </div>
-        <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
-          <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
+        <a
+          v-else-if="!loading"
+          href="#"
+          @click.prevent="fetchOlderNotifications()"
+        >
+          <div class="new-status-notification text-center panel-footer">
+            {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
+          </div>
         </a>
-        <div v-else class="new-status-notification text-center panel-footer">
-          <i class="icon-spin3 animate-spin"/>
+        <div
+          v-else
+          class="new-status-notification text-center panel-footer"
+        >
+          <i class="icon-spin3 animate-spin" />
         </div>
       </div>
     </div>