Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #1932 Use el-popper instead of vue-popper for emoji picker in statuses

This commit is contained in:
AkiraFukushima 2020-11-28 22:20:36 +09:00
parent 730c1b08c6
commit ea3b3c530e
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/renderer/components/organisms/Toot.vue
View File

@ -131,7 +131,7 @@
> >
</template> </template>
</div> </div>
<div class="tool-box" v-click-outside="hideEmojiPicker"> <div class="tool-box">
<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>
</el-button> </el-button>
@ -179,10 +179,7 @@
<icon name="quote-right" scale="0.9"></icon> <icon name="quote-right" scale="0.9"></icon>
</el-button> </el-button>
<template v-if="sns !== 'mastodon'"> <template v-if="sns !== 'mastodon'">
<el-button class="emoji" type="text" @click="toggleEmojiPicker"> <el-popover placement="bottom" width="281" trigger="click" popper-class="status-emoji-picker" ref="status_emoji_picker">
<icon name="regular/smile" scale="0.9"></icon>
</el-button>
<div v-if="openEmojiPicker" class="emoji-picker">
<picker <picker
set="emojione" set="emojione"
:autoFocus="true" :autoFocus="true"
@ -193,12 +190,15 @@
:showPreview="false" :showPreview="false"
:emojiTooltip="true" :emojiTooltip="true"
/> />
</div> <el-button slot="reference" class="emoji" type="text">
<icon name="regular/smile" scale="0.9"></icon>
</el-button>
</el-popover>
</template> </template>
<el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned"> <el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned">
<icon name="thumbtack" scale="0.9"></icon> <icon name="thumbtack" scale="0.9"></icon>
</el-button> </el-button>
<el-popover placement="bottom" width="200" trigger="click" popper-class="status-menu-popper" ref="popper"> <el-popover placement="bottom" width="200" trigger="click" popper-class="status-menu-popper" ref="status_menu_popper">
<ul class="menu-list"> <ul class="menu-list">
<li role="button" @click="openDetail(message)" v-show="!detailed"> <li role="button" @click="openDetail(message)" v-show="!detailed">
{{ $t('cards.toot.view_toot_detail') }} {{ $t('cards.toot.view_toot_detail') }}
@ -485,28 +485,28 @@ export default {
this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent') this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message) this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true) this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
this.$refs.popper.doClose() this.$refs.status_menu_popper.doClose()
}, },
openBrowser(message) { openBrowser(message) {
window.shell.openExternal(message.url) window.shell.openExternal(message.url)
this.$refs.popper.doClose() this.$refs.status_menu_popper.doClose()
}, },
copyLink(message) { copyLink(message) {
window.clipboard.writeText(message.url, 'toot-link') window.clipboard.writeText(message.url, 'toot-link')
this.$refs.popper.doClose() this.$refs.status_menu_popper.doClose()
}, },
reportUser() { reportUser() {
this.$store.dispatch('TimelineSpace/Modals/Report/openReport', this.originalMessage) this.$store.dispatch('TimelineSpace/Modals/Report/openReport', this.originalMessage)
this.$refs.popper.doClose() this.$refs.status_menu_popper.doClose()
}, },
confirmMute() { confirmMute() {
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', this.originalMessage.account) this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', this.originalMessage.account)
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true) this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true)
this.$refs.popper.doClose() this.$refs.status_menu_popper.doClose()
}, },
block() { block() {
this.$store.dispatch('organisms/Toot/block', this.originalMessage.account) this.$store.dispatch('organisms/Toot/block', this.originalMessage.account)
this.$refs.popper.doClose() this.$refs.status_menu_popper.doClose()
}, },
changeReblog(message) { changeReblog(message) {
if (message.reblogged) { if (message.reblogged) {
@ -687,19 +687,13 @@ export default {
}) })
this.$emit('update', status) this.$emit('update', status)
}, },
toggleEmojiPicker() {
this.openEmojiPicker = !this.openEmojiPicker
},
hideEmojiPicker() {
this.openEmojiPicker = false
},
async selectEmoji(emoji) { async selectEmoji(emoji) {
const status = await this.$store.dispatch('organisms/Toot/sendReaction', { const status = await this.$store.dispatch('organisms/Toot/sendReaction', {
status_id: this.originalMessage.id, status_id: this.originalMessage.id,
native: emoji.native native: emoji.native
}) })
this.$emit('update', status) this.$emit('update', status)
this.hideEmojiPicker() this.$refs.status_emoji_picker.doClose()
}, },
async addReaction(native) { async addReaction(native) {
const status = await this.$store.dispatch('organisms/Toot/sendReaction', { const status = await this.$store.dispatch('organisms/Toot/sendReaction', {
@ -1023,4 +1017,9 @@ export default {
} }
} }
} }
.status-emoji-picker {
padding: 0;
border: none;
}
</style> </style>