(fix) message avatar position

Author: antoine92190

src/lib/Message/Message.scss

@@ -59,15 +59,25 @@
 		line-height: 1.4;
 	}
 
+	$avatar-size: 28px;
+
 	.vac-avatar {
-		height: 28px;
-		width: 28px;
-		min-height: 28px;
-		min-width: 28px;
+		height: $avatar-size;
+		width: $avatar-size;
+		min-height: $avatar-size;
+		min-width: $avatar-size;
 		margin: 0 0 2px 0;
 		align-self: flex-end;
 	}
 
+	.vac-avatar-current-offset {
+		margin-right: $avatar-size;
+	}
+
+	.vac-avatar-offset {
+		margin-left: $avatar-size;
+	}
+
 	.vac-failure-container {
 		position: relative;
 		align-self: flex-end;
@@ -225,18 +235,28 @@
 			max-width: 80%;
 		}
 
+		$avatar-size-small: 25px;
+
 		.vac-avatar {
-			height: 25px;
-			width: 25px;
-			min-height: 25px;
-			min-width: 25px;
+			height: $avatar-size-small;
+			width: $avatar-size-small;
+			min-height: $avatar-size-small;
+			min-width: $avatar-size-small;
 			margin: 0 6px 1px 0;
 
 			&.vac-avatar-current {
 				margin: 0 0 1px 6px;
 			}
 		}
 
+		.vac-avatar-current-offset {
+			margin-right: calc(#{$avatar-size-small} + 6px);
+		}
+
+		.vac-avatar-offset {
+			margin-left: calc(#{$avatar-size-small} + 6px);
+		}
+
 		.vac-failure-container {
 			margin-left: 2px;
 

src/lib/Message/Message.vue

@@ -33,6 +33,10 @@
 					class="vac-avatar"
 					:style="{ 'background-image': `url('${message.avatar}')` }"
 				/>
+				<div
+					v-if="hasSenderUserAvatar && !message.avatar"
+					class="vac-avatar-offset"
+				/>
 				<div
 					class="vac-message-container"
 					:class="{
@@ -194,6 +198,10 @@
 					class="vac-avatar vac-avatar-current"
 					:style="{ 'background-image': `url('${message.avatar}')` }"
 				/>
+				<div
+					v-if="hasCurrentUserAvatar && !message.avatar"
+					class="vac-avatar-current-offset"
+				/>
 			</slot>
 		</div>
 	</div>
@@ -292,6 +300,16 @@ export default {
 				!this.message.deleted &&
 				(this.message.saved || this.message.distributed || this.message.seen)
 			)
+		},
+		hasCurrentUserAvatar() {
+			return this.messages.some(
+				message => message.senderId === this.currentUserId && message.avatar
+			)
+		},
+		hasSenderUserAvatar() {
+			return this.messages.some(
+				message => message.senderId !== this.currentUserId && message.avatar
+			)
 		}
 	},