aboutsummaryrefslogtreecommitdiff
path: root/src/components/notifications/notifications.vue
blob: eb6c4dd02458367e944d8c997e8cdc497ae2dff4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div class="notifications">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="title">
          {{$t('notifications.notifications')}}
          <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
        </div>
        <div @click.prevent class="loadmore-error alert error" v-if="error">
          {{$t('timeline.error_fetching')}}
        </div>
        <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$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>
      </div>
      <div class="panel-footer">
        <a href="#" v-on:click.prevent='fetchOlderNotifications()' v-if="!notifications.loading">
          <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
        </a>
        <div class="new-status-notification text-center panel-footer" v-else>...</div>
      </div>
    </div>
  </div>
</template>

<script src="./notifications.js"></script>
<style lang="scss" src="./notifications.scss"></style>