fix(comments): move new comment instructions placeholder to description

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
nextcloud · Sep 6, 2023 · 32bc99a · 32bc99a
1 parent 00c0813
commit 32bc99a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 24 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">
+					<!-- Hard-coded placeholder emulates https://github.com/nextcloud-libraries/nextcloud-vue/pull/4408/ -->
+					<NcRichContenteditable ref="editor"
+						:auto-complete="autoComplete"
+						:contenteditable="!loading"
+						:value="localMessage"
+						:user-data="userData"
+						:placeholder="t('comments', 'Write a message …')"
+						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 -->
@@ -273,7 +282,6 @@ $comment-padding: 10px;
 .comment {
 	display: flex;
 	gap: 16px;
-	position: relative;
 	padding: 5px $comment-padding;
 
 	&__side {
@@ -313,12 +321,19 @@ $comment-padding: 10px;
 		color: var(--color-text-maxcontrast);
 	}
 
+	&__editor-group {
+		position: relative;
+	}
+
+	&__editor-description {
+		color: var(--color-text-maxcontrast);
+		padding-block: var(--default-grid-baseline);
+	}
+
 	&__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
@@ -315,12 +315,22 @@ export default {
 
 <style lang="scss" scoped>
 .comments {
+	min-height: 100%;
+	display: flex;
+	flex-direction: column;
+
 	// Do not add emptycontent top margin
 	&__empty,
 	&__error {
 		margin-top: 0 !important;
 	}
 
+	&__empty {
+		flex: 1 0;
+		// Alternative: https://github.com/nextcloud-libraries/nextcloud-vue/pull/4506
+		justify-content: center;
+	}
+
 	&__retry {
 		margin: 0 auto;
 	}