(fix) image hover effect

Author: antoine92190

src/lib/Message/Message.vue

@@ -98,7 +98,6 @@
 							:room-users="roomUsers"
 							:text-formatting="textFormatting"
 							:link-options="linkOptions"
-							:image-hover="imageHover"
 							@open-file="openFile"
 						>
 							<template v-for="(i, name) in $scopedSlots" #[name]="data">
@@ -234,7 +233,6 @@ export default {
 	data() {
 		return {
 			hoverMessageId: null,
-			imageHover: false,
 			messageHover: false,
 			optionsOpened: false,
 			emojiOpened: false,
@@ -303,15 +301,13 @@ export default {
 
 	methods: {
 		onHoverMessage() {
-			this.imageHover = true
 			this.messageHover = true
 			if (this.canEditMessage()) this.hoverMessageId = this.message._id
 		},
 		canEditMessage() {
 			return !this.message.deleted
 		},
 		onLeaveMessage() {
-			this.imageHover = false
 			if (!this.optionsOpened && !this.emojiOpened) this.messageHover = false
 			this.hoverMessageId = null
 		},

src/lib/Message/MessageFile/MessageFile.vue

@@ -1,6 +1,11 @@
 <template>
 	<div class="vac-message-file-container">
-		<div v-if="isImage" :ref="'imageRef' + index">
+		<div
+			v-if="isImage"
+			:ref="'imageRef' + index"
+			@mouseover="imageHover = true"
+			@mouseleave="imageHover = false"
+		>
 			<loader
 				:style="{ top: `${imageResponsive.loaderTop}px` }"
 				:show="isImageLoading"
@@ -63,7 +68,6 @@ export default {
 		currentUserId: { type: [String, Number], required: true },
 		message: { type: Object, required: true },
 		file: { type: Object, required: true },
-		imageHover: { type: Boolean, required: true },
 		index: { type: Number, required: true }
 	},
 
@@ -72,7 +76,8 @@ export default {
 	data() {
 		return {
 			imageResponsive: '',
-			imageLoading: false
+			imageLoading: false,
+			imageHover: false
 		}
 	},
 

src/lib/Message/MessageFiles/MessageFiles.scss

@@ -13,10 +13,10 @@
 		margin: 3px 0 5px;
 		padding: 10px;
 		cursor: pointer;
-		transition: all 0.2s;
+		transition: all 0.6s;
 
 		&:hover {
-			transform: scale(1.03);
+			opacity: 0.85;
 		}
 
 		svg {

src/lib/Message/MessageFiles/MessageFiles.vue

@@ -5,7 +5,6 @@
 				:file="file"
 				:current-user-id="currentUserId"
 				:message="message"
-				:image-hover="imageHover"
 				:index="idx"
 				@open-file="$emit('open-file', $event)"
 			>
@@ -66,16 +65,11 @@ export default {
 		message: { type: Object, required: true },
 		roomUsers: { type: Array, required: true },
 		textFormatting: { type: Boolean, required: true },
-		linkOptions: { type: Object, required: true },
-		imageHover: { type: Boolean, required: true }
+		linkOptions: { type: Object, required: true }
 	},
 
 	emits: ['open-file', 'open-user-tag'],
 
-	data() {
-		return {}
-	},
-
 	computed: {
 		imageVideoFiles() {
 			return this.message.files.filter(