Merge pull request #44171 from nextcloud/backport/40294/stable27

[stable27] fix(comments): move new comment instructions placeholder to description
nextcloud · Mar 15, 2024 · 13543ff · 13543ff
2 parents d0f63c9 + 9f6d13e
commit 13543ff
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 28 deletions.
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
@@ -68,26 +68,35 @@
 			</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>
+
+			<form v-if="editor || editing" class="comment__editor" @submit.prevent>
+				<div class="comment__editor-group">
+					<NcRichContenteditable ref="editor"
+						:placeholder="t('comments', 'Write a message …')"
+						:auto-complete="autoComplete"
+						:contenteditable="!loading"
+						:value="localMessage"
+						:user-data="userData"
+						aria-describedby="tab-comments__editor-description"
+						@update:value="updateLocalMessage"
+						@submit="onSubmit" />
+					<div class="comment__submit">
+						<NcButton 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>
+				</div>
+				<div id="tab-comments__editor-description" class="comment__editor-description">
+					{{ t('comments', '"@" for mentions, ":" for emoji, "/" for smart picker') }}
+				</div>
+			</form>
 
 			<!-- Message content -->
 			<!-- The html is escaped and sanitized before rendering -->
@@ -279,6 +288,14 @@ $comment-padding: 10px;
 		padding-top: 16px;
 	}
 
+	&__editor-group {
+		position: relative;
+	}
+	&__editor-description {
+		color: var(--color-text-maxcontrast);
+		padding-block: var(--default-grid-baseline);
+	}
+
 	&__body {
 		display: flex;
 		flex-grow: 1;
@@ -312,10 +329,8 @@ $comment-padding: 10px;
 
 	&__submit {
 		position: absolute !important;
-		right: 0;
 		bottom: 0;
-		// Align with input border
-		margin: 1px;
+		right: 0;
 	}
 
 	&__message {

diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue
@@ -299,10 +299,13 @@ export default {
 
 <style lang="scss" scoped>
 .comments {
-	// Do not add emptycontent top margin
+	min-height: 100%;
+	display: flex;
+	flex-direction: column;
+
 	&__empty,
 	&__error {
-		margin-top: 0 !important;
+		flex: 1 0;
 	}
 
 	&__retry {