refs #1281 Add reaction buttion and refresh after reaction
This commit is contained in:
parent
0355d6e6d0
commit
5f8c86aa3c
|
@ -103,6 +103,16 @@
|
||||||
<bdi v-html="username(message.account)"></bdi>
|
<bdi v-html="username(message.account)"></bdi>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="emoji-reactions">
|
||||||
|
<template v-for="reaction in reactions">
|
||||||
|
<el-button v-if="reaction.me" type="success" size="medium" class="reaction" @click="removeReaction(reaction.name)"
|
||||||
|
>{{ reaction.name }} {{ reaction.count }}</el-button
|
||||||
|
>
|
||||||
|
<el-button v-else type="text" size="medium" class="reaction" @click="addReaction(reaction.name)"
|
||||||
|
>{{ reaction.name }} {{ reaction.count }}</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
<div class="tool-box" v-click-outside="hideEmojiPicker">
|
<div class="tool-box" v-click-outside="hideEmojiPicker">
|
||||||
<el-button type="text" @click="openReply()" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')">
|
<el-button type="text" @click="openReply()" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')">
|
||||||
<icon name="reply" scale="0.9"></icon>
|
<icon name="reply" scale="0.9"></icon>
|
||||||
|
@ -228,7 +238,8 @@ export default {
|
||||||
hideAllAttachments: this.$store.state.App.hideAllAttachments,
|
hideAllAttachments: this.$store.state.App.hideAllAttachments,
|
||||||
now: Date.now(),
|
now: Date.now(),
|
||||||
pollResponse: null,
|
pollResponse: null,
|
||||||
openEmojiPicker: false
|
openEmojiPicker: false,
|
||||||
|
reactionResponse: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
@ -321,6 +332,13 @@ export default {
|
||||||
return this.originalMessage.poll
|
return this.originalMessage.poll
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
reactions: function () {
|
||||||
|
if (this.reactionResponse) {
|
||||||
|
return this.reactionResponse
|
||||||
|
} else {
|
||||||
|
return this.originalMessage.emoji_reactions
|
||||||
|
}
|
||||||
|
},
|
||||||
sensitive: function () {
|
sensitive: function () {
|
||||||
return (this.hideAllAttachments || this.originalMessage.sensitive) && this.mediaAttachments.length > 0
|
return (this.hideAllAttachments || this.originalMessage.sensitive) && this.mediaAttachments.length > 0
|
||||||
},
|
},
|
||||||
|
@ -616,11 +634,26 @@ export default {
|
||||||
this.openEmojiPicker = false
|
this.openEmojiPicker = false
|
||||||
},
|
},
|
||||||
async selectEmoji(emoji) {
|
async selectEmoji(emoji) {
|
||||||
await this.$store.dispatch('organisms/Toot/sendReaction', {
|
const res = await this.$store.dispatch('organisms/Toot/sendReaction', {
|
||||||
status_id: this.originalMessage.id,
|
status_id: this.originalMessage.id,
|
||||||
native: emoji.native
|
native: emoji.native
|
||||||
})
|
})
|
||||||
|
this.reactionResponse = res
|
||||||
this.hideEmojiPicker()
|
this.hideEmojiPicker()
|
||||||
|
},
|
||||||
|
async addReaction(native) {
|
||||||
|
const res = await this.$store.dispatch('organisms/Toot/sendReaction', {
|
||||||
|
status_id: this.originalMessage.id,
|
||||||
|
native: native
|
||||||
|
})
|
||||||
|
this.reactionResponse = res
|
||||||
|
},
|
||||||
|
async removeReaction(native) {
|
||||||
|
const res = await this.$store.dispatch('organisms/Toot/deleteReaction', {
|
||||||
|
status_id: this.originalMessage.id,
|
||||||
|
native: native
|
||||||
|
})
|
||||||
|
this.reactionResponse = res
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -795,6 +828,12 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.emoji-reactions {
|
||||||
|
.reaction {
|
||||||
|
padding: 10px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tool-box {
|
.tool-box {
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
|
|
|
@ -116,7 +116,7 @@ const actions: ActionTree<TootState, RootState> = {
|
||||||
const res = await client.getPoll(id)
|
const res = await client.getPoll(id)
|
||||||
return res.data
|
return res.data
|
||||||
},
|
},
|
||||||
sendReaction: async ({ rootState }, params: ReactionParam): Promise<Entity.Status> => {
|
sendReaction: async ({ rootState }, params: ReactionParam): Promise<Array<Entity.Reaction>> => {
|
||||||
const client = generator(
|
const client = generator(
|
||||||
rootState.TimelineSpace.sns,
|
rootState.TimelineSpace.sns,
|
||||||
rootState.TimelineSpace.account.baseURL,
|
rootState.TimelineSpace.account.baseURL,
|
||||||
|
@ -125,7 +125,24 @@ const actions: ActionTree<TootState, RootState> = {
|
||||||
rootState.App.proxyConfiguration
|
rootState.App.proxyConfiguration
|
||||||
)
|
)
|
||||||
const res = await client.createEmojiReaction(params.status_id, params.native)
|
const res = await client.createEmojiReaction(params.status_id, params.native)
|
||||||
return res.data
|
if (res.data.reblog) {
|
||||||
|
return res.data.reblog.emoji_reactions
|
||||||
|
}
|
||||||
|
return res.data.emoji_reactions
|
||||||
|
},
|
||||||
|
deleteReaction: async ({ rootState }, params: ReactionParam): Promise<Array<Entity.Reaction>> => {
|
||||||
|
const client = generator(
|
||||||
|
rootState.TimelineSpace.sns,
|
||||||
|
rootState.TimelineSpace.account.baseURL,
|
||||||
|
rootState.TimelineSpace.account.accessToken,
|
||||||
|
rootState.App.userAgent,
|
||||||
|
rootState.App.proxyConfiguration
|
||||||
|
)
|
||||||
|
const res = await client.deleteEmojiReaction(params.status_id, params.native)
|
||||||
|
if (res.data.reblog) {
|
||||||
|
return res.data.reblog.emoji_reactions
|
||||||
|
}
|
||||||
|
return res.data.emoji_reactions
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue