Refine file comments design

Signed-off-by: Quentin Guidée <quentin.guidee@gmail.com>

1 files changed, 84 insertions, 72 deletions

diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index 062dda74756..df9a22a1709 100644
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -24,75 +24,79 @@
 		:class="{'comment--loading': loading}"
 		class="comment">
 		<!-- Comment header toolbar -->
-		<div class="comment__header">
+		<div class="comment__side">
 			<!-- Author -->
 			<NcAvatar class="comment__avatar"
 				:display-name="actorDisplayName"
 				:user="actorId"
 				:size="32" />
-			<span class="comment__author">{{ actorDisplayName }}</span>
-
-			<!-- Comment actions,
-				show if we have a message id and current user is author -->
-			<NcActions v-if="isOwnComment && id && !loading" class="comment__actions">
-				<template v-if="!editing">
-					<NcActionButton :close-after-click="true"
-						icon="icon-rename"
-						@click="onEdit">
-						{{ t('comments', 'Edit comment') }}
-					</NcActionButton>
-					<NcActionSeparator />
-					<NcActionButton :close-after-click="true"
-						icon="icon-delete"
-						@click="onDeleteWithUndo">
-						{{ t('comments', 'Delete comment') }}
-					</NcActionButton>
-				</template>
-
-				<NcActionButton v-else
-					icon="icon-close"
-					@click="onEditCancel">
-					{{ t('comments', 'Cancel edit') }}
-				</NcActionButton>
-			</NcActions>
-
-			<!-- Show loading if we're editing or deleting, not on new ones -->
-			<div v-if="id && loading" class="comment_loading icon-loading-small" />
-
-			<!-- Relative time to the comment creation -->
-			<Moment v-else-if="creationDateTime" class="comment__timestamp" :timestamp="timestamp" />
 		</div>
-
-		<!-- Message editor -->
-		<div v-if="editor || editing" class="comment__editor ">
-			<NcRichContenteditable ref="editor"
-				:auto-complete="autoComplete"
-				:contenteditable="!loading"
-				:value="localMessage"
-				:user-data="userData"
-				@update:value="updateLocalMessage"
-				@submit="onSubmit" />
-			<NcButton class="comment__submit"
-				type="tertiary-no-background"
-				native-type="submit"
-				:aria-label="t('comments', 'Post comment')"
-				:disabled="isEmptyMessage"
-				@click="onSubmit">
-				<template #icon>
-					<span v-if="loading" class="icon-loading-small" />
-					<ArrowRight v-else :size="20" />
-				</template>
-			</NcButton>
+		<div class="comment__body">
+			<div class="comment__header">
+				<span class="comment__author">{{ actorDisplayName }}</span>
+
+				<!-- Comment actions,
+					show if we have a message id and current user is author -->
+				<NcActions v-if="isOwnComment && id && !loading" class="comment__actions">
+					<template v-if="!editing">
+						<NcActionButton :close-after-click="true"
+							icon="icon-rename"
+							@click="onEdit">
+							{{ t('comments', 'Edit comment') }}
+						</NcActionButton>
+						<NcActionSeparator />
+						<NcActionButton :close-after-click="true"
+							icon="icon-delete"
+							@click="onDeleteWithUndo">
+							{{ t('comments', 'Delete comment') }}
+						</NcActionButton>
+					</template>
+
+					<NcActionButton v-else
+						icon="icon-close"
+						@click="onEditCancel">
+						{{ t('comments', 'Cancel edit') }}
+					</NcActionButton>
+				</NcActions>
+
+				<!-- Show loading if we're editing or deleting, not on new ones -->
+				<div v-if="id && loading" class="comment_loading icon-loading-small" />
+
+				<!-- Relative time to the comment creation -->
+				<Moment v-else-if="creationDateTime" class="comment__timestamp" :timestamp="timestamp" />
+			</div>
+
+			<!-- Message editor -->
+			<div v-if="editor || editing" class="comment__editor ">
+				<NcRichContenteditable ref="editor"
+					:auto-complete="autoComplete"
+					:contenteditable="!loading"
+					:value="localMessage"
+					:user-data="userData"
+					@update:value="updateLocalMessage"
+					@submit="onSubmit" />
+				<NcButton class="comment__submit"
+					type="tertiary-no-background"
+					native-type="submit"
+					:aria-label="t('comments', 'Post comment')"
+					:disabled="isEmptyMessage"
+					@click="onSubmit">
+					<template #icon>
+						<span v-if="loading" class="icon-loading-small" />
+						<ArrowRight v-else :size="20" />
+					</template>
+				</NcButton>
+			</div>
+
+			<!-- Message content -->
+			<!-- The html is escaped and sanitized before rendering -->
+			<!-- eslint-disable-next-line vue/no-v-html-->
+			<div v-else
+				:class="{'comment__message--expanded': expanded}"
+				class="comment__message"
+				@click="onExpand"
+				v-html="renderedContent" />
 		</div>
-
-		<!-- Message content -->
-		<!-- The html is escaped and sanitized before rendering -->
-		<!-- eslint-disable-next-line vue/no-v-html-->
-		<div v-else
-			:class="{'comment__message--expanded': expanded}"
-			class="comment__message"
-			@click="onExpand"
-			v-html="renderedContent" />
 	</div>
 </template>
 
@@ -258,17 +262,29 @@ export default {
 $comment-padding: 10px;
 
 .comment {
+	display: flex;
+	gap: 16px;
 	position: relative;
-	padding: $comment-padding 0 $comment-padding * 1.5;
+	padding: 5px $comment-padding;
+
+	&__side {
+		display: flex;
+		align-items: flex-start;
+		padding-top: 16px;
+	}
+
+	&__body {
+		display: flex;
+		flex-grow: 1;
+		flex-direction: column;
+	}
 
 	&__header {
 		display: flex;
 		align-items: center;
 		min-height: 44px;
-		padding: math.div($comment-padding, 2) 0;
 	}
 
-	&__author,
 	&__actions {
 		margin-left: $comment-padding !important;
 	}
@@ -283,16 +299,11 @@ $comment-padding: 10px;
 	&_loading,
 	&__timestamp {
 		margin-left: auto;
+		text-align: right;
+		white-space: nowrap;
 		color: var(--color-text-maxcontrast);
 	}
 
-	&__editor,
-	&__message {
-		position: relative;
-		// Avatar size, align with author name
-		padding-left: 32px + $comment-padding;
-	}
-
 	&__submit {
 		position: absolute !important;
 		right: 0;
@@ -306,6 +317,7 @@ $comment-padding: 10px;
 		word-break: break-word;
 		max-height: 70px;
 		overflow: hidden;
+		margin-top: -6px;
 		&--expanded {
 			max-height: none;
 			overflow: visible;