(feature) add optional message avatar

Author: antoine92190

README.md

@@ -462,6 +462,7 @@ messages="[
     content: 'message 1',
     senderId: 1234,
     username: 'John Doe',
+    avatar: 'assets/imgs/doe.png',
     date: '13 November',
     timestamp: '10:20',
     system: false,

demo/src/ChatContainer.vue

@@ -426,6 +426,7 @@ export default {
 					timestamp: parseTimestamp(timestamp, 'HH:mm'),
 					date: parseTimestamp(timestamp, 'DD MMMM YYYY'),
 					username: senderUser ? senderUser.username : null,
+					avatar: senderUser ? senderUser.avatar : null,
 					distributed: true
 				}
 			}

src/ChatWindow/Message/Message.vue

@@ -19,6 +19,11 @@
 			:class="{ 'vac-offset-current': message.senderId === currentUserId }"
 		>
 			<slot name="message" v-bind="{ message }">
+				<div
+					v-if="message.avatar && message.senderId !== currentUserId"
+					class="vac-avatar"
+					:style="{ 'background-image': `url('${message.avatar}')` }"
+				/>
 				<div
 					class="vac-message-container"
 					:class="{
@@ -399,6 +404,15 @@ export default {
 	line-height: 1.4;
 }
 
+.vac-avatar {
+	height: 28px;
+	width: 28px;
+	min-height: 28px;
+	min-width: 28px;
+	margin: 0 0 2px 0;
+	align-self: flex-end;
+}
+
 .vac-message-container {
 	position: relative;
 	padding: 2px 10px;
@@ -557,6 +571,14 @@ export default {
 		max-width: 80%;
 	}
 
+	.vac-avatar {
+		height: 25px;
+		width: 25px;
+		min-height: 25px;
+		min-width: 25px;
+		margin: 0 6px 1px 0;
+	}
+
 	.vac-offset-current {
 		margin-left: 20%;
 	}

src/ChatWindow/Room/RoomHeader.vue

@@ -20,7 +20,7 @@
 					<slot name="room-header-avatar" v-bind="{ room }">
 						<div
 							v-if="room.avatar"
-							class="vac-room-avatar"
+							class="vac-avatar"
 							:style="{ 'background-image': `url('${room.avatar}')` }"
 						/>
 					</slot>
@@ -219,7 +219,7 @@ export default {
 			line-height: 16px;
 		}
 
-		.vac-room-avatar {
+		.vac-avatar {
 			height: 37px;
 			width: 37px;
 			min-height: 37px;

src/ChatWindow/Room/RoomUsersTag.vue

@@ -14,7 +14,7 @@
 				<div class="vac-tags-info">
 					<div
 						v-if="user.avatar"
-						class="vac-room-avatar vac-tags-avatar"
+						class="vac-avatar vac-tags-avatar"
 						:style="{ 'background-image': `url('${user.avatar}')` }"
 					/>
 					<div class="vac-tags-username">

src/ChatWindow/RoomsList/RoomContent.vue

@@ -3,7 +3,7 @@
 		<slot name="room-list-item" v-bind="{ room }">
 			<div
 				v-if="room.avatar"
-				class="vac-room-avatar"
+				class="vac-avatar"
 				:style="{ 'background-image': `url('${room.avatar}')` }"
 			/>
 			<div class="vac-name-container vac-text-ellipsis">

src/styles/helper.scss

@@ -46,7 +46,7 @@
 	opacity: 0.7;
 }
 
-.vac-room-avatar {
+.vac-avatar {
 	background-size: cover;
 	background-position: center center;
 	background-repeat: no-repeat;