Emoji Reactions - fixes and improvements
This commit is contained in:
Shpuld Shpludson
lain
parent
17b6d8ddb8
commit
f6b482be51
18 changed files with 236 additions and 47 deletions
|
|
@ -1,17 +1,55 @@
|
|||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
|
||||
const EMOJI_REACTION_COUNT_CUTOFF = 12
|
||||
|
||||
const EmojiReactions = {
|
||||
name: 'EmojiReactions',
|
||||
components: {
|
||||
UserAvatar
|
||||
},
|
||||
props: ['status'],
|
||||
data: () => ({
|
||||
showAll: false,
|
||||
popperOptions: {
|
||||
modifiers: {
|
||||
preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
|
||||
}
|
||||
}
|
||||
}),
|
||||
computed: {
|
||||
tooManyReactions () {
|
||||
return this.status.emoji_reactions.length > EMOJI_REACTION_COUNT_CUTOFF
|
||||
},
|
||||
emojiReactions () {
|
||||
return this.status.emoji_reactions
|
||||
return this.showAll
|
||||
? this.status.emoji_reactions
|
||||
: this.status.emoji_reactions.slice(0, EMOJI_REACTION_COUNT_CUTOFF)
|
||||
},
|
||||
showMoreString () {
|
||||
return `+${this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF}`
|
||||
},
|
||||
accountsForEmoji () {
|
||||
return this.status.emoji_reactions.reduce((acc, reaction) => {
|
||||
acc[reaction.name] = reaction.accounts || []
|
||||
return acc
|
||||
}, {})
|
||||
},
|
||||
loggedIn () {
|
||||
return !!this.$store.state.users.currentUser
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleShowAll () {
|
||||
this.showAll = !this.showAll
|
||||
},
|
||||
reactedWith (emoji) {
|
||||
const user = this.$store.state.users.currentUser
|
||||
const reaction = this.status.emoji_reactions.find(r => r.emoji === emoji)
|
||||
return reaction.accounts && reaction.accounts.find(u => u.id === user.id)
|
||||
return this.status.emoji_reactions.find(r => r.name === emoji).me
|
||||
},
|
||||
fetchEmojiReactionsByIfMissing () {
|
||||
const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
|
||||
if (hasNoAccounts) {
|
||||
this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
|
||||
}
|
||||
},
|
||||
reactWith (emoji) {
|
||||
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
|
||||
|
|
@ -20,6 +58,8 @@ const EmojiReactions = {
|
|||
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
|
||||
},
|
||||
emojiOnClick (emoji, event) {
|
||||
if (!this.loggedIn) return
|
||||
|
||||
if (this.reactedWith(emoji)) {
|
||||
this.unreact(emoji)
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,58 @@
|
|||
<template>
|
||||
<div class="emoji-reactions">
|
||||
<button
|
||||
<v-popover
|
||||
v-for="(reaction) in emojiReactions"
|
||||
:key="reaction.emoji"
|
||||
class="emoji-reaction btn btn-default"
|
||||
:class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
|
||||
@click="emojiOnClick(reaction.emoji, $event)"
|
||||
:key="reaction.name"
|
||||
:popper-options="popperOptions"
|
||||
trigger="hover"
|
||||
placement="top"
|
||||
>
|
||||
<span class="reaction-emoji">{{ reaction.emoji }}</span>
|
||||
<span>{{ reaction.count }}</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
slot="popover"
|
||||
class="reacted-users"
|
||||
>
|
||||
<div v-if="accountsForEmoji[reaction.name].length">
|
||||
<div
|
||||
v-for="(account) in accountsForEmoji[reaction.name]"
|
||||
:key="account.id"
|
||||
class="reacted-user"
|
||||
>
|
||||
<UserAvatar
|
||||
:user="account"
|
||||
class="avatar-small"
|
||||
:compact="true"
|
||||
/>
|
||||
<div class="reacted-user-names">
|
||||
<span class="reacted-user-name" v-html="account.name_html" />
|
||||
<span class="reacted-user-screen-name">{{ account.screen_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<i class="icon-spin4 animate-spin" />
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="emoji-reaction btn btn-default"
|
||||
:class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
|
||||
@click="emojiOnClick(reaction.name, $event)"
|
||||
@mouseenter="fetchEmojiReactionsByIfMissing()"
|
||||
>
|
||||
<span class="reaction-emoji">{{ reaction.name }}</span>
|
||||
<span>{{ reaction.count }}</span>
|
||||
</button>
|
||||
</v-popover>
|
||||
<a
|
||||
v-if="tooManyReactions"
|
||||
@click="toggleShowAll"
|
||||
class="emoji-reaction-expand faint"
|
||||
href='javascript:void(0)'
|
||||
>
|
||||
{{ showAll ? $t('general.show_less') : showMoreString }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script src="./emoji_reactions.js" ></script>
|
||||
|
|
@ -23,6 +65,31 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.reacted-users {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.reacted-user {
|
||||
padding: 0.25em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.reacted-user-names {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.5em;
|
||||
|
||||
img {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.reacted-user-screen-name {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-reaction {
|
||||
padding: 0 0.5em;
|
||||
margin-right: 0.5em;
|
||||
|
|
@ -38,6 +105,26 @@
|
|||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.not-clickable {
|
||||
cursor: default;
|
||||
&:hover {
|
||||
box-shadow: $fallback--buttonShadow;
|
||||
box-shadow: var(--buttonShadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-reaction-expand {
|
||||
padding: 0 0.5em;
|
||||
margin-right: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.picked-reaction {
|
||||
|
|
|
|||
|
|
@ -78,6 +78,13 @@
|
|||
<i class="fa icon-arrow-curved lit" />
|
||||
<small>{{ $t('notifications.migrated_to') }}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'pleroma:emoji_reaction'">
|
||||
<small>
|
||||
<i18n path="notifications.reacted_with">
|
||||
<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
|
||||
</i18n>
|
||||
</small>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="notification.type === 'follow' || notification.type === 'move'"
|
||||
|
|
|
|||
|
|
@ -94,6 +94,10 @@
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.emoji-reaction-emoji {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.notification-details {
|
||||
min-width: 0px;
|
||||
word-wrap: break-word;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,12 @@ const ReactButton = {
|
|||
this.showTooltip = false
|
||||
},
|
||||
addReaction (event, emoji) {
|
||||
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
|
||||
const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
|
||||
if (existingReaction && existingReaction.me) {
|
||||
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
|
||||
} else {
|
||||
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
|
||||
}
|
||||
this.closeReactionSelect()
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -54,6 +54,10 @@
|
|||
|
||||
.reaction-picker-filter {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.reaction-picker-divider {
|
||||
|
|
|
|||
|
|
@ -92,6 +92,11 @@
|
|||
{{ $t('settings.reply_link_preview') }}
|
||||
</Checkbox>
|
||||
</li>
|
||||
<li>
|
||||
<Checkbox v-model="emojiReactionsOnTimeline">
|
||||
{{ $t('settings.emoji_reactions_on_timeline') }}
|
||||
</Checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -328,6 +333,11 @@
|
|||
{{ $t('settings.notification_visibility_moves') }}
|
||||
</Checkbox>
|
||||
</li>
|
||||
<li>
|
||||
<Checkbox v-model="notificationVisibility.emojiReactions">
|
||||
{{ $t('settings.notification_visibility_emoji_reactions') }}
|
||||
</Checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -369,6 +369,7 @@
|
|||
</transition>
|
||||
|
||||
<EmojiReactions
|
||||
v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
|
||||
:status="status"
|
||||
/>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue