diff options
author | Joas Schilling <coding@schilljs.com> | 2022-08-10 15:20:26 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2022-08-11 13:24:33 +0300 |
commit | e2ccf8e45e81edbf8636a0fbcfc5521b822ca6e5 (patch) | |
tree | ebd0913251e1810d58bedf6a57f8bbec810ea3b0 /src | |
parent | 7722692f896d872231472c09b4794d549c7570d1 (diff) |
Move reactions to vue buttons
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.spec.js | 14 | ||||
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 37 |
2 files changed, 27 insertions, 24 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js index aaf04708d..fa6743d26 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js +++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js @@ -806,8 +806,8 @@ describe('Message.vue', () => { expect(reactionButtons.length).toBe(3) // Text of the buttons - expect(reactionButtons.wrappers[0].text()).toBe('❤️ 1') - expect(reactionButtons.wrappers[1].text()).toBe('👍 7') + expect(reactionButtons.wrappers[0].text()).toBe('❤️ 1') + expect(reactionButtons.wrappers[1].text()).toBe('👍 7') }) test('shows reaction buttons with the right emoji count but without emoji placeholder when no chat permission', () => { @@ -838,8 +838,8 @@ describe('Message.vue', () => { expect(reactionButtons.length).toBe(2) // Text of the buttons - expect(reactionButtons.wrappers[0].text()).toBe('❤️ 1') - expect(reactionButtons.wrappers[1].text()).toBe('👍 7') + expect(reactionButtons.wrappers[0].text()).toBe('❤️ 1') + expect(reactionButtons.wrappers[1].text()).toBe('👍 7') }) test('no emoji picker is mounted when the bottom bar is not shown', () => { @@ -863,7 +863,7 @@ describe('Message.vue', () => { const addReactionToMessageAction = jest.fn() const userHasReactedGetter = jest.fn().mockReturnValue(() => false) const reactionsLoadedGetter = jest.fn().mockReturnValue(() => true) - testStoreConfig.modules.quoteReplyStore.actions.addReactionToMessage = addReactionToMessageAction + testStoreConfig.modules.messagesStore.actions.addReactionToMessage = addReactionToMessageAction testStoreConfig.modules.messagesStore.getters.userHasReacted = userHasReactedGetter testStoreConfig.modules.messagesStore.getters.reactionsLoaded = reactionsLoadedGetter @@ -906,7 +906,7 @@ describe('Message.vue', () => { const removeReactionFromMessageAction = jest.fn() const userHasReactedGetter = jest.fn().mockReturnValue(() => true) const reactionsLoadedGetter = jest.fn().mockReturnValue(() => true) - testStoreConfig.modules.quoteReplyStore.actions.removeReactionFromMessage = removeReactionFromMessageAction + testStoreConfig.modules.messagesStore.actions.removeReactionFromMessage = removeReactionFromMessageAction testStoreConfig.modules.messagesStore.getters.userHasReacted = userHasReactedGetter testStoreConfig.modules.messagesStore.getters.reactionsLoaded = reactionsLoadedGetter @@ -923,7 +923,7 @@ describe('Message.vue', () => { }) // Click reaction button upon having already reacted - await wrapper.find('.reaction-button').trigger('click') + await wrapper.find('.reaction-button').getComponent(ButtonVue).vm.$emit('click') await wrapper.vm.$nextTick() await wrapper.vm.$nextTick() diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index eb32cc13d..963536820 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -116,14 +116,13 @@ the main body of the message as well as a quote. :key="reaction" :delay="200" trigger="hover"> - <button v-if="simpleReactions[reaction]!== 0" + <ButtonVue v-if="simpleReactions[reaction]!== 0" slot="trigger" class="reaction-button" :class="{'reaction-button__has-reacted': userHasReacted(reaction)}" @click="handleReactionClick(reaction)"> - <span class="reaction-button__emoji">{{ reaction }}</span> - <span> {{ simpleReactions[reaction] }}</span> - </button> + {{ reaction }} {{ simpleReactions[reaction] }} + </ButtonVue> <div v-if="detailedReactions" class="reaction-details"> <span>{{ getReactionSummary(reaction) }}</span> </div> @@ -134,14 +133,18 @@ the main body of the message as well as a quote. :per-line="5" :container="`#message_${id}`" @select="handleReactionClick"> - <button class="reaction-button"> - <EmoticonOutline :size="15" /> - </button> + <ButtonVue class="reaction-button"> + <template #icon> + <EmoticonOutline :size="15" /> + </template> + </ButtonVue> </EmojiPicker> - <button v-else-if="canReact" + <ButtonVue v-else-if="canReact" class="reaction-button"> - <EmoticonOutline :size="15" /> - </button> + <template #icon> + <EmoticonOutline :size="15" /> + </template> + </ButtonVue> </div> </div> @@ -922,21 +925,21 @@ export default { .reaction-button { // Clear server rules min-height: 0 !important; - padding: 0 8px !important; - font-weight: normal !important; + ::v-deep .button-vue__text { + font-weight: normal !important; + } margin: 2px; height: 26px; - background-color: var(--color-main-background); + background-color: var(--color-main-background) !important; + margin-right: 8px !important; &__emoji { margin: 0 4px 0 0; } - &__has-reacted, - &:hover { - border-color: var(--color-primary-element); - background-color: var(--color-primary-element-lighter); + &__has-reacted { + background-color: var(--color-primary-element-lighter) !important; } } |