replace messages highlighting method with Vue approach

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

3 files changed, 31 insertions, 27 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 7189a60d5..31c630b17 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -32,8 +32,10 @@ the main body of the message as well as a quote.
 		:data-next-message-id="nextMessageId"
 		:data-previous-message-id="previousMessageId"
 		class="message"
-		:class="{'message__last': isLastMessage}"
+		:class="{'message__last': isLastMessage,
+			'message--highlighted': isHighlighted}"
 		tabindex="0"
+		@animationend="isHighlighted = false"
 		@mouseover="handleMouseover"
 		@mouseleave="handleMouseleave">
 		<div :class="{'normal-message-body': !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
@@ -429,11 +431,14 @@ export default {
 		return { isInCall, isTranslationAvailable }
 	},
 
+	expose: ['highlightMessage'],
+
 	data() {
 		return {
 			isHovered: false,
 			showReloadButton: false,
 			isDeleting: false,
+			isHighlighted: false,
 			// whether the message was seen, only used if this was marked as last read message
 			seen: false,
 			isActionMenuOpen: false,
@@ -688,20 +693,6 @@ export default {
 		},
 	},
 
-	mounted() {
-		// define a function, so it can be triggered directly on the DOM element
-		// which can be found with document.getElementById()
-		this.$refs.message.highlightAnimation = () => {
-			this.highlightAnimation()
-		}
-
-		this.$refs.message.addEventListener('animationend', this.highlightAnimationStop)
-	},
-
-	beforeDestroy() {
-		this.$refs.message.removeEventListener('animationend', this.highlightAnimationStop)
-	},
-
 	methods: {
 		userHasReacted(reaction) {
 			return this.reactionsSelf && this.reactionsSelf.includes(reaction)
@@ -713,13 +704,8 @@ export default {
 			}
 		},
 
-		highlightAnimation() {
-			// trigger CSS highlight animation by setting a class
-			this.$refs.message.classList.add('highlight-animation')
-		},
-		highlightAnimationStop() {
-			// when the animation ended, remove the class, so we can trigger it again another time
-			this.$refs.message.classList.remove('highlight-animation')
+		highlightMessage() {
+			this.isHighlighted = true
 		},
 
 		handleRetry() {
@@ -977,7 +963,7 @@ export default {
 	padding: 4px 4px 4px 8px;
 }
 
-.highlight-animation {
+.message--highlighted {
 	animation: highlight-animation 5s 1;
 	border-radius: 8px;
 }
@@ -1008,9 +994,8 @@ export default {
 }
 
 .message-status {
-	margin: -8px 0;
 	width: $clickable-area;
-	height: $clickable-area;
+	height: 24px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 1b9344305..ab70e0609 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -37,6 +37,7 @@
 			<ul class="messages">
 				<Message v-for="(message, index) of messages"
 					:key="message.id"
+					ref="message"
 					v-bind="message"
 					:is-first-message="index === 0"
 					:next-message-id="(messages[index + 1] && messages[index + 1].id) || nextMessageId"
@@ -100,6 +101,8 @@ export default {
 		},
 	},
 
+	expose: ['highlightMessage'],
+
 	computed: {
 		/**
 		 * The message actor type.
@@ -144,6 +147,17 @@ export default {
 			return this.messages[0].systemMessage.length !== 0
 		},
 	},
+
+	methods: {
+		highlightMessage(messageId) {
+			for (const message of this.$refs.message) {
+				if (message.id === messageId) {
+					message.highlightMessage()
+					break
+				}
+			}
+		},
+	},
 }
 </script>
 
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 35eb65918..d0b5ce7e6 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -35,6 +35,7 @@ get the messagesList array and loop through the list to generate the messages.
 		<div v-if="displayMessagesLoader" class="scroller__loading icon-loading" />
 		<MessagesGroup v-for="item of messagesGroupedByAuthor"
 			:key="item.id"
+			ref="messagesGroup"
 			v-bind="item.messages"
 			:token="token"
 			:messages="item.messages"
@@ -1015,8 +1016,12 @@ export default {
 					this.$refs.scroller.scrollTop += this.$refs.scroller.offsetHeight / 4
 				}
 				if (highlightAnimation) {
-					element.focus()
-					element.highlightAnimation()
+					for (const group of this.$refs.messagesGroup) {
+						if (group.messages.some(message => message.id === messageId)) {
+							group.highlightMessage(messageId)
+							break
+						}
+					}
 				}
 				this.isFocusingMessage = false
 				await this.handleScroll()