(UI) improve file display

Author: antoine92190

src/lib/Message/MessageFiles/MessageFiles.scss

@@ -1,23 +1,32 @@
 .vac-image-container {
 	.vac-file-message {
-		display: flex;
 		height: 60px;
 		width: 60px;
 		display: flex;
-		align-items: center;
+		align-content: center;
 		justify-content: center;
-		text-align: 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.2s;
+
+		&:hover {
+			transform: scale(1.03);
+		}
 
 		svg {
 			height: 30px;
 			width: 30px;
 		}
+
+		.vac-text-extension {
+			font-size: 12px;
+			color: var(--chat-message-color-file-extension);
+		}
 	}
 }

src/lib/Message/MessageFiles/MessageFiles.vue

@@ -25,6 +25,9 @@
 				<div class="vac-text-ellipsis">
 					{{ file.name }}
 				</div>
+				<div class="vac-text-ellipsis vac-text-extension">
+					{{ file.extension }}
+				</div>
 			</div>
 		</div>
 

src/lib/Room/RoomFiles/RoomFiles.scss

@@ -34,14 +34,27 @@
 		}
 
 		.vac-file-container {
-			height: 100px;
-			width: 100px;
+			height: 80px;
+			width: 80px;
 			display: flex;
-			align-items: center;
+			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);
+			}
 		}
 
 		.vac-icon-remove {

src/lib/Room/RoomFiles/RoomFiles.vue

@@ -35,6 +35,12 @@
 									<svg-icon name="file" />
 								</slot>
 							</div>
+							<div class="vac-text-ellipsis">
+								{{ file.name }}
+							</div>
+							<div class="vac-text-ellipsis vac-text-extension">
+								{{ file.extension }}
+							</div>
 						</div>
 					</div>
 				</div>

src/styles/helper.scss

@@ -39,11 +39,11 @@
 	display: flex;
 	cursor: pointer;
 	transition: all 0.2s;
-}
 
-.vac-svg-button:hover {
-	transform: scale(1.1);
-	opacity: 0.7;
+	&:hover {
+		transform: scale(1.1);
+		opacity: 0.7;
+	}
 }
 
 .vac-avatar {

src/themes/index.js

@@ -83,7 +83,8 @@ export const defaultThemeStyles = {
 			backgroundAudioRecord: '#eb4034',
 			backgroundAudioLine: 'rgba(0, 0, 0, 0.15)',
 			backgroundAudioProgress: '#455247',
-			backgroundAudioProgressSelector: '#455247'
+			backgroundAudioProgressSelector: '#455247',
+			colorFileExtension: '#757e85'
 		},
 
 		markdown: {
@@ -221,7 +222,8 @@ export const defaultThemeStyles = {
 			backgroundAudioRecord: '#eb4034',
 			backgroundAudioLine: 'rgba(255, 255, 255, 0.15)',
 			backgroundAudioProgress: '#b7d4d3',
-			backgroundAudioProgressSelector: '#b7d4d3'
+			backgroundAudioProgressSelector: '#b7d4d3',
+			colorFileExtension: '#a2a5a8'
 		},
 
 		markdown: {
@@ -372,6 +374,7 @@ export const cssThemeVars = ({
 		'--chat-message-bg-color-audio-progress': message.backgroundAudioProgress,
 		'--chat-message-bg-color-audio-progress-selector':
 			message.backgroundAudioProgressSelector,
+		'--chat-message-color-file-extension': message.colorFileExtension,
 
 		// markdown
 		'--chat-markdown-bg': markdown.background,