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: [PATCH 1/2] collapse fav/repeat notifications from muted users
---
src/components/notification/notification.js | 14 +-
src/components/notification/notification.vue | 202 ++++++++++--------
.../notifications/notifications.scss | 5 +-
3 files changed, 128 insertions(+), 93 deletions(-)
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 896c6d52..181f7715 100644
--- a/src/components/notification/notification.js
+++ b/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
}
}
}
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"
+ class="follow-text"
>
- <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 :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>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 622d12f4..71876b14 100644
--- a/src/components/notifications/notifications.scss
+++ b/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;
From f8139e369c0ca4ae90cca78c5d1fee69b88375d6 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 10 Sep 2019 16:21:52 -0400
Subject: [PATCH 2/2] wire up user state with global store
---
src/components/notification/notification.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 181f7715..8e817f3b 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -53,10 +53,10 @@ const Notification = {
return this.notification.from_profile
},
userProfileLink () {
- return this.generateUserProfileLink(this.notification.from_profile)
+ return this.generateUserProfileLink(this.user)
},
needMute () {
- return this.notification.from_profile.muted
+ return this.user.muted
}
}
}