diff options
author | marco <marcoambrosini@pm.me> | 2022-02-09 18:18:35 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2022-03-21 14:08:26 +0300 |
commit | 207b935e777c88f66ae9f52b7931939f42801d56 (patch) | |
tree | e87fe693b4442ed3a43c792574e1737aec6a3adc /src/components/MessagesList/MessagesGroup/Message | |
parent | eefa6c8b220893c6f17c78d535cb419effa57224 (diff) |
Add emoji-picker in reactions bar
Signed-off-by: marco <marcoambrosini@pm.me>
Diffstat (limited to 'src/components/MessagesList/MessagesGroup/Message')
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 18 |
1 files changed, 15 insertions, 3 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index 31ba435a6..3079cefb0 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -112,14 +112,18 @@ the main body of the message as well as a quote. </div> </div> </div> - <div v-if="messageObject.reactions !== ''" class="message-body__reactions"> + <div v-if="showMessageReactionsBar" class="message-body__reactions"> <button v-for="reaction in Object.keys(messageObject.reactions)" :key="reaction" - class="reaction-button" - type="secondary"> + class="reaction-button"> <span class="reaction-button__emoji"> {{ reaction }} </span> <span> {{ messageObject.reactions[reaction] }} </span> </button> + <EmojiPicker @select.stop=""> + <button class="reaction-button"> + <EmoticonOutline :size="15" /> + </button> + </EmojiPicker> </div> </div> <MessageButtonsBar v-if="hasMessageButtonsBar" @@ -160,6 +164,8 @@ import moment from '@nextcloud/moment' import Location from './MessagePart/Location' import Contact from './MessagePart/Contact.vue' import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue' +import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker' +import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue' export default { name: 'Message', @@ -177,6 +183,8 @@ export default { CheckAll, Reload, MessageButtonsBar, + EmojiPicker, + EmoticonOutline, }, mixins: [ @@ -529,6 +537,10 @@ export default { apiVersion: 'v3', } }, + + showMessageReactionsBar() { + return this.messageObject.reactions?.length !== 0 + }, }, watch: { |