Merge pull request #7700 from nextcloud/bugfix/noid/move-reactions-to-vue-buttons

Move reactions to vue buttons

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;
 	}
 }