Add sticky avatar

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/assets/variables.scss

@@ -57,4 +57,4 @@ $navigation-width: 300px;
 $breakpoint-mobile: 1024px;
 
 //message width
-$message-width: 600px;
+$message-width: 650px;

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -30,7 +30,7 @@ the main body of the message as well as a quote.
 		:class="{ 'hover': hover }"
 		@mouseover="hover=true"
 		@mouseleave="hover=false">
-		<div class="message__author">
+		<div v-if="isFirstMessage" class="message__author">
 			<h6>{{ actorDisplayName }}</h6>
 		</div>
 		<div class="message__main">
@@ -40,7 +40,7 @@ the main body of the message as well as a quote.
 			<div v-show="isTemporary" class="message__main__right icon-loading-small" />
 			<div v-show="!isTemporary" class="message__main__right">
 				<h6>{{ messageTime }}</h6>
-				<Actions v-show="hover" class="actions">
+				<Actions v-show="hover" class="message__main__right__actions">
 					<ActionButton icon="icon-delete" @click="handleDelete">
 						Delete
 					</ActionButton>
@@ -107,6 +107,10 @@ export default {
 		isTemporary: {
 			type: Boolean,
 			required: true
+		},
+		isFirstMessage: {
+			type: Boolean,
+			required: true
 		}
 	},
 	computed: {
@@ -126,12 +130,8 @@ export default {
 @import '../../../../assets/variables';
 
 .message {
-	min-width: 100%;
 	padding: 4px 0 4px 0;
 	flex-direction: column;
-	&:hover {
-		background-color: rgba(47, 47, 47, 0.068);
-	}
 	&__author {
 		color: var(--color-text-maxcontrast);
 	}
@@ -140,38 +140,24 @@ export default {
 		justify-content: space-between;
 		min-width: 100%;
 		&__text {
-			width: 400px;
+			flex: 1 1 400px;
 			color: var(--color-text-light);
-		}
-		&__right {
-			width: 80px;
-		}
-	}
-}
-
-.message {
-	&-main {
-		display: inline-flex;
-		flex-grow: 1;
-		flex-direction: column;
-
-		&--quote {
+			&--quote {
 			border-left: 4px solid var(--color-primary);
 			padding: 4px 0 0 8px;
+			}
+		}
+		&__right {
+			flex: 0 0 150px;
+			display: flex;
+			color: var(--color-text-maxcontrast);
+			font-size: 13px;
+			padding: 0 8px 0 8px;
+			&__actions {
+				position: absolute;
+				margin: -10px 0 0 60px
+			}
 		}
 	}
 }
-
-.right {
-		display: flex;
-		min-width: 110px;
-		color: #989898;
-		padding: 0 8px 0 8px;
-	}
-
-	.actions {
-		position: absolute;
-		margin: -14px 0 0 50px;
-		padding:2px;
-	}
 </style>

src/components/MessagesList/MessagesGroup/MessagesGroup.vue

@@ -29,8 +29,9 @@
 		</div>
 		<div class="messages">
 			<Message
-				v-for="message of messages"
+				v-for="(message, index) of messages"
 				v-bind="message"
+				:isFirstMessage="index === 0"
 				:key="message.id"
 				:hover="hover"
 				:actor-display-name="actorDisplayName"
@@ -103,17 +104,17 @@ export default {
 }
 
 .messages {
+	flex: auto;
 	display: flex;
 	padding: 8px 0 8px 0;
 	flex-direction: column;
 	&__avatar {
 		min-height: 100%;
-		width: 52px;
-		min-width: 52px;
-		padding: 4px 8px 0 8px;
+		flex: 0 0 52px;
+		padding: 20px 8px 10px 8px;
 		&__icon {
 			position: sticky;
-			top: 16px;
+			top: 12px;
 		}
 	}
 }

src/components/NewMessageForm/NewMessageForm.vue

@@ -68,6 +68,7 @@ export default {
 			const message = Object.assign({}, {
 				id: this.createTemporaryMessageId(),
 				actorDisplayName: OC.getCurrentUser().displayName,
+				actorId: OC.getCurrentUser().Id,
 				message: this.text,
 				token: this.token
 			})