(feat) add download/view icons on image hover

Author: antoine92190

README.md

@@ -164,7 +164,8 @@ colors="{
     pencil: '#1976d2',
     pencilEdited: '#9e9e9e',
     trash: '#f44336',
-    checkmark: '#0696c7'
+    checkmark: '#0696c7',
+    eye: '#9ca6af'
   }
 }"
 ```

src/ChatWindow/ChatMessage.vue

@@ -24,7 +24,7 @@
 				<div
 					class="message-card"
 					:class="{
-						'message-highlight': setMessageElevation(message),
+						'message-highlight': isMessageHover(message),
 						'message-current': message.sender_id === 'me',
 						'message-deleted': message.deleted,
 						'slide-up':
@@ -57,10 +57,26 @@
 							}"
 							:style="{ background: `url(${message.file.url})` }"
 						></div>
+						<transition name="fade">
+							<div class="image-buttons" v-if="imageHover">
+								<div
+									class="svg-button button-view"
+									@click.stop="openFile(message.file)"
+								>
+									<svg-icon name="eye" />
+								</div>
+								<div
+									class="svg-button button-download"
+									@click.stop="openFile(message.file)"
+								>
+									<svg-icon name="document" />
+								</div>
+							</div>
+						</transition>
 						<span>{{ message.content }}</span>
 					</div>
 
-					<div v-else :class="{ 'file-message': message.file && !isImage }">
+					<div v-else class="file-message">
 						<div
 							class="svg-button icon-file"
 							@click.stop="openFile(message.file)"
@@ -113,7 +129,8 @@ export default {
 		return {
 			openMessageId: {},
 			hoverMessageId: null,
-			imageLoading: false
+			imageLoading: false,
+			imageHover: false
 		}
 	},
 
@@ -148,7 +165,7 @@ export default {
 	},
 
 	methods: {
-		setMessageElevation() {
+		isMessageHover() {
 			return (
 				this.editedMessage._id === this.message._id ||
 				this.hoverMessageId === this.message._id ||
@@ -165,12 +182,14 @@ export default {
 			}
 		},
 		onHoverMessage() {
+			this.imageHover = true
 			if (this.canEditMessage()) this.hoverMessageId = this.message._id
 		},
 		canEditMessage() {
 			return this.message.sender_id === 'me' && !this.message.deleted
 		},
 		onLeaveMessage() {
+			this.imageHover = false
 			this.openMessageId.toggle = false
 			this.hoverMessageId = null
 		},
@@ -371,13 +390,15 @@ export default {
 .action-buttons {
 	position: relative;
 
+	svg {
+		height: 18px;
+		width: 18px;
+	}
+
 	.button-delete,
 	.button-edit {
-		max-width: 18px;
 		right: 5px;
-		z-index: 0;
 		position: absolute;
-		width: 100%;
 	}
 
 	.button-delete {
@@ -387,11 +408,47 @@ export default {
 	.button-edit {
 		bottom: 2px;
 	}
+}
 
+.image-buttons {
 	svg {
-		height: 18px;
-		width: 18px;
+		height: 20px;
+		width: 20px;
+	}
+
+	.button-view,
+	.button-download {
+		position: absolute;
+		bottom: 2px;
+		left: 5px;
 	}
+
+	:first-child {
+		left: 30px;
+	}
+
+	.button-view {
+		max-width: 18px;
+		bottom: 4px;
+
+		svg {
+			height: 18px;
+			width: 18px;
+		}
+	}
+}
+
+.fade-enter {
+	opacity: 0;
+}
+
+.fade-enter-active {
+	transition: opacity 1.5s;
+}
+
+.fade-leave-active {
+	transition: opacity 0.5s;
+	opacity: 0;
 }
 
 .icon-check {

src/ChatWindow/SvgIcon.vue

@@ -86,6 +86,11 @@ export default {
 				{
 					name: 'checkmark',
 					path: 'M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'
+				},
+				{
+					name: 'eye',
+					path:
+						'M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z'
 				}
 			]
 		}
@@ -157,4 +162,8 @@ export default {
 #chat-icon-checkmark {
 	fill: var(--chat-icon-color-checkmark);
 }
+
+#chat-icon-eye {
+	fill: var(--chat-icon-color-eye);
+}
 </style>

src/themes/index.js

@@ -35,7 +35,8 @@ export const defaultThemeColors = {
 			pencil: '#1976d2',
 			pencilEdited: '#9e9e9e',
 			trash: '#f44336',
-			checkmark: '#0696c7'
+			checkmark: '#0696c7',
+			eye: '#9ca6af'
 		}
 	},
 	dark: {
@@ -74,7 +75,8 @@ export const defaultThemeColors = {
 			pencil: '#1976d2',
 			pencilEdited: '#ebedf2',
 			trash: '#f44336',
-			checkmark: '#f0d90a'
+			checkmark: '#f0d90a',
+			eye: '#fff'
 		}
 	}
 }
@@ -136,6 +138,7 @@ export const cssThemeVars = ({
 		'--chat-icon-color-pencil': iconsColor.pencil,
 		'--chat-edited-icon-color-pencil': iconsColor.pencilEdited,
 		'--chat-icon-color-trash': iconsColor.trash,
-		'--chat-icon-color-checkmark': iconsColor.checkmark
+		'--chat-icon-color-checkmark': iconsColor.checkmark,
+		'--chat-icon-color-eye': iconsColor.eye
 	}
 }