Fix menus and tooltips

Signed-off-by: marco <marcoambrosini@pm.me>

src/components/MessagesList/MessagesGroup/Message/Message.spec.js

@@ -563,7 +563,7 @@ describe('Message.vue', () => {
 			expect(messageButtonsBar.exists()).toBe(false)
 		})
 
-		test('actions become visible on mouse over', async () => {
+		test('Buttons bar becomes visible on mouse over', async () => {
 			messageProps.sendingFailure = 'timeout'
 			const wrapper = mount(Message, {
 				localVue,
@@ -578,12 +578,12 @@ describe('Message.vue', () => {
 			expect(wrapper.vm.showMessageButtonsBar).toBe(false)
 			expect(messageButtonsBar.isVisible()).toBe(false)
 
-			await wrapper.find('.message-body').trigger('mouseover')
+			await wrapper.find('.message').trigger('mouseover')
 
 			expect(wrapper.vm.showMessageButtonsBar).toBe(true)
 			expect(messageButtonsBar.isVisible()).toBe(true)
 
-			await wrapper.find('.message-body').trigger('mouseleave')
+			await wrapper.find('.message').trigger('mouseleave')
 
 			expect(wrapper.vm.showMessageButtonsBar).toBe(false)
 			expect(messageButtonsBar.isVisible()).toBe(false)

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -31,11 +31,12 @@ the main body of the message as well as a quote.
 		:data-seen="seen"
 		:data-next-message-id="nextMessageId"
 		:data-previous-message-id="previousMessageId"
-		class="message">
+		class="message"
+		tabindex="0"
+		@mouseover="handleMouseover"
+		@mouseleave="handleMouseleave">
 		<div :class="{'normal-message-body': !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
-			class="message-body"
-			@mouseover="handleMouseover"
-			@mouseleave="handleMouseleave">
+			class="message-body">
 			<div v-if="isFirstMessage && showAuthor"
 				class="message-body__author"
 				role="heading"
@@ -137,7 +138,7 @@ the main body of the message as well as a quote.
 				</Popover>
 
 				<!-- More reactions picker -->
-				<EmojiPicker :per-line="5" @select="addReactionToMessage">
+				<EmojiPicker :per-line="5" :container="`#message_${id}`" @select="addReactionToMessage">
 					<button class="reaction-button">
 						<EmoticonOutline :size="15" />
 					</button>
@@ -147,8 +148,9 @@ the main body of the message as well as a quote.
 
 		<!-- Message actions -->
 		<MessageButtonsBar v-if="hasMessageButtonsBar"
-			v-show="showMessageButtonsBar"
+			v-show="showMessageButtonsBar || isActionMenuOpen"
 			ref="messageButtonsBar"
+			:is-action-menu-open.sync="isActionMenuOpen"
 			:message-api-data="messageApiData"
 			:message-object="messageObject"
 			v-bind="$props"
@@ -616,8 +618,9 @@ export default {
 		},
 
 		handleMouseover() {
-			this.showMessageButtonsBar = true
-
+			if (!this.showMessageButtonsBar) {
+				this.showMessageButtonsBar = true
+			}
 		},
 
 		handleReactionsMouseOver() {
@@ -627,7 +630,8 @@ export default {
 		},
 
 		handleMouseleave() {
-			if (!this.isActionMenuOpen) {
+			// We leave the buttonsbar visible if the actions menu is open
+			if (this.showMessageButtonsBar) {
 				this.showMessageButtonsBar = false
 			}
 		},
@@ -731,11 +735,9 @@ export default {
 @import '../../../../assets/variables';
 @import '../../../../assets/buttons';
 
-.normal-message-body {
-	&:hover {
-		border-radius: 8px;
-		background-color: var(--color-background-hover);
-	}
+.message:hover .normal-message-body {
+	border-radius: 8px;
+	background-color: var(--color-background-hover);
 }
 
 .message {
@@ -824,16 +826,9 @@ export default {
 	padding: 4px 4px 4px 8px;
 }
 
-.hover, .highlight-animation {
-	border-radius: 8px;
-}
-
-.hover {
-	background-color: var(--color-background-hover);
-}
-
 .highlight-animation {
 	animation: highlight-animation 5s 1;
+	border-radius: 8px;
 }
 
 @keyframes highlight-animation {

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue

@@ -36,8 +36,10 @@
 				</ActionButton>
 			</Actions>
 			<Actions :force-menu="true"
-				:container="container"
-				:boundaries-element="containerElement">
+				:container="`#message_${id}`"
+				:boundaries-element="containerElement"
+				@open="onMenuOpen"
+				@close="onMenuClose">
 				<ActionButton v-if="isPrivateReplyable"
 					icon="icon-user"
 					:close-after-click="true"
@@ -111,7 +113,8 @@
 					<span>❤️</span>
 				</template>
 			</Button>
-			<EmojiPicker @select="addReactionToMessage">
+			<EmojiPicker :container="`#message_${id}`"
+				@select="addReactionToMessage">
 				<Button type="tertiary">
 					<template #icon>
 						<Plus :size="20" />
@@ -289,10 +292,6 @@ export default {
 			return this.$store.getters.conversation(this.token)
 		},
 
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		containerElement() {
 			return document.querySelector(this.container)
 		},
@@ -372,15 +371,6 @@ export default {
 			EventBus.$emit('focus-chat-input')
 		},
 
-		handleActionMenuUpdate(type) {
-			if (type === 'open') {
-				this.isActionMenuOpen = true
-			} else if (type === 'close') {
-				this.isActionMenuOpen = false
-				this.showActions = false
-			}
-		},
-
 		async handlePrivateReply() {
 			// open the 1:1 conversation
 			const conversation = await this.$store.dispatch('createOneToOneConversation', this.actorId)
@@ -428,6 +418,14 @@ export default {
 		handleDelete() {
 			this.$emit('delete')
 		},
+
+		onMenuOpen() {
+			this.$emit('update:isActionMenuOpen', true)
+		},
+
+		onMenuClose() {
+			this.$emit('update:isActionMenuOpen', false)
+		},
 	},
 }
 </script>