2 files changed, 136 insertions, 45 deletions
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index e59e7497..7d46eb5a 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -1,6 +1,7 @@
 import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
+import Timeago from '../timeago/timeago.vue'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -8,22 +9,29 @@ const Notification = {
   data () {
     return {
       userExpanded: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+      unmuted: false
     }
   },
   props: [ 'notification' ],
   components: {
-    Status, UserAvatar, UserCard
+    Status,
+    UserAvatar,
+    UserCard,
+    Timeago
   },
   methods: {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
     },
-    userProfileLink (user) {
+    generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     },
     getUser (notification) {
       return this.$store.state.users.usersObject[notification.from_profile.id]
+    },
+    toggleMute () {
+      this.unmuted = !this.unmuted
     }
   },
   computed: {
@@ -31,7 +39,7 @@ const Notification = {
       return highlightClass(this.notification.from_profile)
     },
     userStyle () {
-      const highlight = this.$store.state.config.highlight
+      const highlight = this.$store.getters.mergedConfig.highlight
       const user = this.notification.from_profile
       return highlightStyle(highlight[user.screen_name])
     },
@@ -43,6 +51,12 @@ const Notification = {
         return this.userInStore
       }
       return this.notification.from_profile
+    },
+    userProfileLink () {
+      return this.generateUserProfileLink(this.user)
+    },
+    needMute () {
+      return this.user.muted
     }
   }
 }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 3427b9c5..1f192c77 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -3,50 +3,127 @@
     v-if="notification.type === 'mention'"
     :compact="true"
     :statusoid="notification.status"
-  >
-  </status>
-  <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]" v-else>
-    <a class='avatar-container' :href="notification.from_profile.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-      <UserAvatar :compact="true" :betterShadow="betterShadow" :user="notification.from_profile"/>
-    </a>
-    <div class='notification-right'>
-      <UserCard :user="getUser(notification)" :rounded="true" :bordered="true" v-if="userExpanded" />
-      <span class="notification-details">
-        <div class="name-and-action">
-          <span class="username" v-if="!!notification.from_profile.name_html" :title="'@'+notification.from_profile.screen_name" v-html="notification.from_profile.name_html"></span>
-          <span class="username" v-else :title="'@'+notification.from_profile.screen_name">{{ notification.from_profile.name }}</span>
-          <span v-if="notification.type === 'like'">
-            <i class="fa icon-star lit"></i>
-            <small>{{$t('notifications.favorited_you')}}</small>
-          </span>
-          <span v-if="notification.type === 'repeat'">
-            <i class="fa icon-retweet lit" :title="$t('tool_tip.repeat')"></i>
-            <small>{{$t('notifications.repeated_you')}}</small>
-          </span>
-          <span v-if="notification.type === 'follow'">
-            <i class="fa icon-user-plus lit"></i>
-            <small>{{$t('notifications.followed_you')}}</small>
-          </span>
-        </div>
-        <div class="timeago" v-if="notification.type === 'follow'">
-          <span class="faint">
-            <timeago :since="notification.created_at" :auto-update="240"></timeago>
-          </span>
-        </div>
-        <div class="timeago" v-else>
-          <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link">
-            <timeago :since="notification.created_at" :auto-update="240"></timeago>
+  />
+  <div v-else>
+    <div
+      v-if="needMute && !unmuted"
+      class="container muted"
+    >
+      <small>
+        <router-link :to="userProfileLink">
+          {{ notification.from_profile.screen_name }}
+        </router-link>
+      </small>
+      <a
+        href="#"
+        class="unmute"
+        @click.prevent="toggleMute"
+      ><i class="button-icon icon-eye-off" /></a>
+    </div>
+    <div
+      v-else
+      class="non-mention"
+      :class="[userClass, { highlighted: userStyle }]"
+      :style="[ userStyle ]"
+    >
+      <a
+        class="avatar-container"
+        :href="notification.from_profile.statusnet_profile_url"
+        @click.stop.prevent.capture="toggleUserExpanded"
+      >
+        <UserAvatar
+          :compact="true"
+          :better-shadow="betterShadow"
+          :user="notification.from_profile"
+        />
+      </a>
+      <div class="notification-right">
+        <UserCard
+          v-if="userExpanded"
+          :user="getUser(notification)"
+          :rounded="true"
+          :bordered="true"
+        />
+        <span class="notification-details">
+          <div class="name-and-action">
+            <!-- eslint-disable vue/no-v-html -->
+            <span
+              v-if="!!notification.from_profile.name_html"
+              class="username"
+              :title="'@'+notification.from_profile.screen_name"
+              v-html="notification.from_profile.name_html"
+            />
+            <!-- eslint-enable vue/no-v-html -->
+            <span
+              v-else
+              class="username"
+              :title="'@'+notification.from_profile.screen_name"
+            >{{ notification.from_profile.name }}</span>
+            <span v-if="notification.type === 'like'">
+              <i class="fa icon-star lit" />
+              <small>{{ $t('notifications.favorited_you') }}</small>
+            </span>
+            <span v-if="notification.type === 'repeat'">
+              <i
+                class="fa icon-retweet lit"
+                :title="$t('tool_tip.repeat')"
+              />
+              <small>{{ $t('notifications.repeated_you') }}</small>
+            </span>
+            <span v-if="notification.type === 'follow'">
+              <i class="fa icon-user-plus lit" />
+              <small>{{ $t('notifications.followed_you') }}</small>
+            </span>
+          </div>
+          <div
+            v-if="notification.type === 'follow'"
+            class="timeago"
+          >
+            <span class="faint">
+              <Timeago
+                :time="notification.created_at"
+                :auto-update="240"
+              />
+            </span>
+          </div>
+          <div
+            v-else
+            class="timeago"
+          >
+            <router-link
+              v-if="notification.status"
+              :to="{ name: 'conversation', params: { id: notification.status.id } }"
+              class="faint-link"
+            >
+              <Timeago
+                :time="notification.created_at"
+                :auto-update="240"
+              />
+            </router-link>
+          </div>
+          <a
+            v-if="needMute"
+            href="#"
+            @click.prevent="toggleMute"
+          ><i class="button-icon icon-eye-off" /></a>
+        </span>
+        <div
+          v-if="notification.type === 'follow'"
+          class="follow-text"
+        >
+          <router-link :to="userProfileLink">
+            @{{ notification.from_profile.screen_name }}
           </router-link>
         </div>
-      </span>
-      <div class="follow-text" v-if="notification.type === 'follow'">
-        <router-link :to="userProfileLink(notification.from_profile)">
-          @{{notification.from_profile.screen_name}}
-        </router-link>
+        <template v-else>
+          <status
+            class="faint"
+            :compact="true"
+            :statusoid="notification.action"
+            :no-heading="true"
+          />
+        </template>
       </div>
-      <template v-else>
-        <status class="faint" :compact="true" :statusoid="notification.action" :noHeading="true"></status>
-      </template>
     </div>
   </div>
 </template>