(refactor) add message file css helper

Author: antoine92190

src/lib/Message/MessageFiles/MessageFiles.scss

@@ -1,17 +1,8 @@
 .vac-image-container {
-	.vac-file-message {
+	.vac-file-container {
 		height: 60px;
 		width: 60px;
-		display: flex;
-		align-content: center;
-		justify-content: center;
-		flex-wrap: wrap;
-		text-align: center;
-		background: var(--chat-bg-color-input);
-		border: var(--chat-border-style-input);
-		border-radius: 4px;
 		margin: 3px 0 5px;
-		padding: 10px;
 		cursor: pointer;
 		transition: all 0.6s;
 
@@ -23,11 +14,5 @@
 			height: 30px;
 			width: 30px;
 		}
-
-		.vac-text-extension {
-			font-size: 12px;
-			color: var(--chat-message-color-file-extension);
-			margin-top: -2px;
-		}
 	}
 }

src/lib/Message/MessageFiles/MessageFiles.vue

@@ -15,7 +15,7 @@
 		</div>
 
 		<div v-for="(file, idx) in otherFiles" :key="idx + 'a'">
-			<div class="vac-file-message" @click.stop="openFile(file, 'download')">
+			<div class="vac-file-container" @click.stop="openFile(file, 'download')">
 				<div class="vac-svg-button">
 					<slot name="document-icon">
 						<svg-icon name="document" />

src/lib/Room/RoomFiles/RoomFiles.scss

@@ -36,26 +36,6 @@
 		.vac-file-container {
 			height: 80px;
 			width: 80px;
-			display: flex;
-			align-content: center;
-			justify-content: center;
-			flex-wrap: wrap;
-			text-align: center;
-			background: var(--chat-bg-color-input);
-			border: var(--chat-border-style-input);
-			border-radius: 4px;
-			padding: 10px;
-
-			svg {
-				height: 28px;
-				width: 28px;
-			}
-
-			.vac-text-extension {
-				font-size: 14px;
-				color: var(--chat-message-color-file-extension);
-				margin-top: -2px;
-			}
 		}
 
 		.vac-icon-remove {

src/lib/Room/RoomFiles/RoomFiles.vue

@@ -29,7 +29,7 @@
 							<source :src="file.localUrl || file.url" />
 						</video>
 
-						<div v-else-if="file" class="vac-file-container">
+						<div v-else class="vac-file-container">
 							<div class="vac-icon-file">
 								<slot name="file-icon">
 									<svg-icon name="file" />

src/lib/Room/RoomMessageReply/RoomMessageReply.scss

@@ -50,6 +50,10 @@
 	.vac-audio-reply {
 		margin-right: 10px;
 	}
+
+	.vac-file-container {
+		max-width: 80px;
+	}
 }
 
 @media only screen and (max-width: 768px) {

src/lib/Room/RoomMessageReply/RoomMessageReply.vue

@@ -26,9 +26,11 @@
 				</div>
 
 				<img v-if="isImageFile" :src="firstFile.url" class="vac-image-reply" />
+
 				<video v-else-if="isVideoFile" controls class="vac-image-reply">
 					<source :src="firstFile.url" />
 				</video>
+
 				<audio-player
 					v-else-if="isAudioFile"
 					:src="firstFile.url"
@@ -38,6 +40,23 @@
 						<slot :name="name" v-bind="data" />
 					</template>
 				</audio-player>
+
+				<div v-else-if="isOtherFile" class="vac-image-reply vac-file-container">
+					<div class="vac-icon-file">
+						<slot name="file-icon">
+							<svg-icon name="file" />
+						</slot>
+					</div>
+					<div class="vac-text-ellipsis">
+						{{ firstFile.name }}
+					</div>
+					<div
+						v-if="firstFile.extension"
+						class="vac-text-ellipsis vac-text-extension"
+					>
+						{{ firstFile.extension }}
+					</div>
+				</div>
 			</div>
 
 			<div class="vac-icon-reply">
@@ -92,6 +111,14 @@ export default {
 		},
 		isAudioFile() {
 			return isAudioFile(this.firstFile)
+		},
+		isOtherFile() {
+			return (
+				this.messageReply.files &&
+				!this.isAudioFile &&
+				!this.isVideoFile &&
+				!this.isAudioFile
+			)
 		}
 	}
 }

src/styles/helper.scss

@@ -121,3 +121,26 @@
 	color: var(--chat-message-color-tag);
 	cursor: pointer;
 }
+
+.vac-file-container {
+	display: flex;
+	align-content: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	text-align: center;
+	background: var(--chat-bg-color-input);
+	border: var(--chat-border-style-input);
+	border-radius: 4px;
+	padding: 10px;
+
+	svg {
+		height: 28px;
+		width: 28px;
+	}
+
+	.vac-text-extension {
+		font-size: 14px;
+		color: var(--chat-message-color-file-extension);
+		margin-top: -2px;
+	}
+}