forked from AkkomaGang/akkoma-fe
Merge branch '657' into 'develop'
Collapse fav/repeat notifications from muted users Closes #657 See merge request pleroma/pleroma-fe!945
This commit is contained in:
commit
61bb02ef06
3 changed files with 128 additions and 93 deletions
src/components
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue