logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

notifications.vue (3364B)

    

  1. <template>
  2.   <teleport
  3.     :disabled="minimalMode || disableTeleport"
  4.     :to="teleportTarget"
  5.   >
  6.     <component
  7.       :is="noHeading ? 'div' : 'aside'"
  8.       ref="root"
  9.       :class="{ minimal: minimalMode }"
  10.       class="Notifications"
  11.     >
  12.       <div :class="mainClass">
  13.         <div
  14.           v-if="!noHeading"
  15.           class="notifications-heading panel-heading -sticky"
  16.         >
  17.           <div class="title">
  18.             {{ $t('notifications.notifications') }}
  19.             <span
  20.               v-if="unseenCountBadgeText"
  21.               class="badge -notification unseen-count"
  22.             >{{ unseenCountBadgeText }}</span>
  23.           </div>
  24.           <div
  25.             v-if="showScrollTop"
  26.             class="rightside-button"
  27.           >
  28.             <button
  29.               class="button-unstyled scroll-to-top-button"
  30.               type="button"
  31.               :title="$t('general.scroll_to_top')"
  32.               @click="scrollToTop"
  33.             >
  34.               <FALayers class="fa-scale-110 fa-old-padding-layer">
  35.                 <FAIcon icon="arrow-up" />
  36.                 <FAIcon
  37.                   icon="minus"
  38.                   transform="up-7"
  39.                 />
  40.               </FALayers>
  41.             </button>
  42.           </div>
  43.           <button
  44.             v-if="unseenCount"
  45.             class="button-default read-button"
  46.             type="button"
  47.             @click.prevent="markAsSeen"
  48.           >
  49.             {{ $t('notifications.read') }}
  50.           </button>
  51.           <NotificationFilters class="rightside-button" />
  52.         </div>
  53.         <div
  54.           class="panel-body"
  55.           role="feed"
  56.         >
  57.           <div
  58.             v-if="showExtraNotifications"
  59.             role="listitem"
  60.             class="notification"
  61.           >
  62.             <extra-notifications />
  63.           </div>
  64.           <div
  65.             v-for="notification in notificationsToDisplay"
  66.             :key="notification.id"
  67.             role="listitem"
  68.             class="notification"
  69.             :class="{unseen: !minimalMode && shouldShowUnseen(notification)}"
  70.             @click="e => notificationClicked(notification)"
  71.           >
  72.             <div class="notification-overlay" />
  73.             <notification
  74.               :notification="notification"
  75.               @interacted="e => notificationInteracted(notification)"
  76.             />
  77.           </div>
  78.         </div>
  79.         <div class="panel-footer">
  80.           <div
  81.             v-if="bottomedOut"
  82.             class="new-status-notification text-center faint"
  83.           >
  84.             {{ $t('notifications.no_more_notifications') }}
  85.           </div>
  86.           <button
  87.             v-else-if="!loading"
  88.             class="button-unstyled -link text-center"
  89.             @click.prevent="fetchOlderNotifications()"
  90.           >
  91.             <div class="new-status-notification text-center">
  92.               {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
  93.             </div>
  94.           </button>
  95.           <div
  96.             v-else
  97.             class="new-status-notification text-center"
  98.           >
  99.             <FAIcon
  100.               icon="circle-notch"
  101.               spin
  102.               size="lg"
  103.             />
  104.           </div>
  105.         </div>
  106.       </div>
  107.     </component>
  108.   </teleport>
  109. </template>
  111. <script src="./notifications.js"></script>
  112. <style lang="scss" src="./notifications.scss"></style>