collapse fav/repeat notifications from muted users

src/components/notification/notification.js

@@ -9,7 +9,8 @@ const Notification = {
   data () {
     return {
       userExpanded: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+      unmuted: false
     }
   },
   props: [ 'notification' ],
@@ -23,11 +24,14 @@ const Notification = {
     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: {
@@ -47,6 +51,12 @@ const Notification = {
         return this.userInStore
       }
       return this.notification.from_profile
+    },
+    userProfileLink () {
+      return this.generateUserProfileLink(this.notification.from_profile)
+    },
+    needMute () {
+      return this.notification.from_profile.muted
     }
   }
 }

src/components/notification/notification.vue

@@ -4,104 +4,126 @@
     :compact="true"
     :statusoid="notification.status"
   />
-  <div
+  <div v-else>
-    v-else
+    <div
-    class="non-mention"
+      v-if="needMute && !unmuted"
-    :class="[userClass, { highlighted: userStyle }]"
+      class="container muted"
-    :style="[ userStyle ]"
-  >
-    <a
-      class="avatar-container"
-      :href="notification.from_profile.statusnet_profile_url"
-      @click.stop.prevent.capture="toggleUserExpanded"
     >
-      <UserAvatar
+      <small>
-        :compact="true"
+        <router-link :to="userProfileLink">
-        :better-shadow="betterShadow"
+          {{ notification.from_profile.screen_name }}
-        :user="notification.from_profile"
+        </router-link>
-      />
+      </small>
-    </a>
+      <a
-    <div class="notification-right">
+        href="#"
-      <UserCard
+        class="unmute"
-        v-if="userExpanded"
+        @click.prevent="toggleMute"
-        :user="getUser(notification)"
+      ><i class="button-icon icon-eye-off" /></a>
-        :rounded="true"
+    </div>
-        :bordered="true"
+    <div
-      />
+      v-else
-      <span class="notification-details">
+      class="non-mention"
-        <div class="name-and-action">
+      :class="[userClass, { highlighted: userStyle }]"
-          <!-- eslint-disable vue/no-v-html -->
+      :style="[ userStyle ]"
-          <span
+    >
-            v-if="!!notification.from_profile.name_html"
+      <a
-            class="username"
+        class="avatar-container"
-            :title="'@'+notification.from_profile.screen_name"
+        :href="notification.from_profile.statusnet_profile_url"
-            v-html="notification.from_profile.name_html"
+        @click.stop.prevent.capture="toggleUserExpanded"
-          />
+      >
-          <!-- eslint-enable vue/no-v-html -->
+        <UserAvatar
-          <span
+          :compact="true"
-            v-else
+          :better-shadow="betterShadow"
-            class="username"
+          :user="notification.from_profile"
-            :title="'@'+notification.from_profile.screen_name"
+        />
-          >{{ notification.from_profile.name }}</span>
+      </a>
-          <span v-if="notification.type === 'like'">
+      <div class="notification-right">
-            <i class="fa icon-star lit" />
+        <UserCard
-            <small>{{ $t('notifications.favorited_you') }}</small>
+          v-if="userExpanded"
-          </span>
+          :user="getUser(notification)"
-          <span v-if="notification.type === 'repeat'">
+          :rounded="true"
-            <i
+          :bordered="true"
-              class="fa icon-retweet lit"
+        />
-              :title="$t('tool_tip.repeat')"
+        <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"
             />
-            <small>{{ $t('notifications.repeated_you') }}</small>
+            <!-- eslint-enable vue/no-v-html -->
-          </span>
+            <span
-          <span v-if="notification.type === 'follow'">
+              v-else
-            <i class="fa icon-user-plus lit" />
+              class="username"
-            <small>{{ $t('notifications.followed_you') }}</small>
+              :title="'@'+notification.from_profile.screen_name"
-          </span>
+            >{{ notification.from_profile.name }}</span>
-        </div>
+            <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="timeago"
+          class="follow-text"
         >
-          <span class="faint">
+          <router-link :to="userProfileLink">
-            <Timeago
+            @{{ notification.from_profile.screen_name }}
-              :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>
-      </span>
+        <template v-else>
-      <div
+          <status
-        v-if="notification.type === 'follow'"
+            class="faint"
-        class="follow-text"
+            :compact="true"
-      >
+            :statusoid="notification.action"
-        <router-link :to="userProfileLink(notification.from_profile)">
+            :no-heading="true"
-          @{{ notification.from_profile.screen_name }}
+          />
-        </router-link>
+        </template>
       </div>
-      <template v-else>
-        <status
-          class="faint"
-          :compact="true"
-          :statusoid="notification.action"
-          :no-heading="true"
-        />
-      </template>
     </div>
   </div>
 </template>

src/components/notifications/notifications.scss

@@ -33,7 +33,6 @@
 
 .notification {
   box-sizing: border-box;
-  display: flex;
   border-bottom: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
@@ -47,6 +46,10 @@
     }
   }
 
+  .muted {
+    padding: .25em .6em;
+  }
+
   .non-mention {
     display: flex;
     flex: 1;