Merge branch '657' into 'develop'

Collapse fav/repeat notifications from muted users

Closes 

See merge request 
This commit is contained in:
Shpuld Shpludson 2019-09-25 06:24:41 +00:00
commit 61bb02ef06
3 changed files with 128 additions and 93 deletions
src/components

View file

@ -9,7 +9,8 @@ const Notification = {
data () { data () {
return { return {
userExpanded: false, userExpanded: false,
betterShadow: this.$store.state.interface.browserSupport.cssFilter betterShadow: this.$store.state.interface.browserSupport.cssFilter,
unmuted: false
} }
}, },
props: [ 'notification' ], props: [ 'notification' ],
@ -23,11 +24,14 @@ const Notification = {
toggleUserExpanded () { toggleUserExpanded () {
this.userExpanded = !this.userExpanded this.userExpanded = !this.userExpanded
}, },
userProfileLink (user) { generateUserProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
}, },
getUser (notification) { getUser (notification) {
return this.$store.state.users.usersObject[notification.from_profile.id] return this.$store.state.users.usersObject[notification.from_profile.id]
},
toggleMute () {
this.unmuted = !this.unmuted
} }
}, },
computed: { computed: {
@ -47,6 +51,12 @@ const Notification = {
return this.userInStore return this.userInStore
} }
return this.notification.from_profile return this.notification.from_profile
},
userProfileLink () {
return this.generateUserProfileLink(this.user)
},
needMute () {
return this.user.muted
} }
} }
} }

View file

@ -4,104 +4,126 @@
:compact="true" :compact="true"
:statusoid="notification.status" :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 <div
v-if="notification.type === 'follow'" 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> </router-link>
</div> </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> </div>
<template v-else>
<status
class="faint"
:compact="true"
:statusoid="notification.action"
:no-heading="true"
/>
</template>
</div> </div>
</div> </div>
</template> </template>

View file

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