replace messages highlighting method with Vue approach

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

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}"
@@ -420,11 +422,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,
@@ -679,20 +684,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)
@@ -704,13 +695,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() {
@@ -973,7 +959,7 @@ export default {
 	padding: 4px 4px 4px 8px;
 }
 
-.highlight-animation {
+.message--highlighted {
 	animation: highlight-animation 5s 1;
 	border-radius: 8px;
 }
@@ -1004,9 +990,8 @@ export default {
 }
 
 .message-status {
-	margin: -8px 0;
 	width: $clickable-area;
-	height: $clickable-area;
+	height: 24px;
 	display: flex;
 	justify-content: center;
 	align-items: center;

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>
 

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"
@@ -1007,8 +1008,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()