From 8618857aa36574f52a23106cd0d57fd96782435b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 6 Sep 2019 11:15:22 -0400
Subject: collapse fav/repeat notifications from muted users

---
 src/components/notification/notification.vue | 202 +++++++++++++++------------
 1 file changed, 112 insertions(+), 90 deletions(-)

(limited to 'src/components/notification/notification.vue')

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index bafcd026..1f192c77 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -4,104 +4,126 @@
     :compact="true"
     :statusoid="notification.status"
   />
-  <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"
+  <div v-else>
+    <div
+      v-if="needMute && !unmuted"
+      class="container muted"
     >
-      <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>
+        <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"
             />
-            <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>
+            <!-- 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="timeago"
-        >
-          <span class="faint">
-            <Timeago
-              :time="notification.created_at"
-              :auto-update="240"
-            />
-          </span>
-        </div>
-        <div
-          v-else
-          class="timeago"
+          class="follow-text"
         >
-          <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 :to="userProfileLink">
+            @{{ notification.from_profile.screen_name }}
           </router-link>
         </div>
-      </span>
-      <div
-        v-if="notification.type === 'follow'"
-        class="follow-text"
-      >
-        <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"
-          :no-heading="true"
-        />
-      </template>
     </div>
   </div>
 </template>
-- 
cgit v1.2.3-70-g09d2