diff options
| author | Grigorii K. Shartsev <me@shgk.me> | 2023-09-06 14:58:24 +0200 |
|---|---|---|
| committer | Grigorii K. Shartsev <me@shgk.me> | 2023-10-07 08:45:53 +0200 |
| commit | be8d9042b539fea6dabc93be5b285aa40d87046f (patch) | |
| tree | ee8aac1b03043921b49804ebad1eadfdeb835cfa /apps | |
| parent | 597965145c944ba494fe91b0b08e78585099fc21 (diff) | |
| download | nextcloud-server-be8d9042b539fea6dabc93be5b285aa40d87046f.tar.gz nextcloud-server-be8d9042b539fea6dabc93be5b285aa40d87046f.zip | |
fix(comments): move new comment instructions placeholder to description
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/comments/src/components/Comment.vue | 61 | ||||
| -rw-r--r-- | apps/comments/src/views/Comments.vue | 7 |
2 files changed, 42 insertions, 26 deletions
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue index 9301df12a73..e8ae9a88e77 100644 --- a/apps/comments/src/components/Comment.vue +++ b/apps/comments/src/components/Comment.vue @@ -68,26 +68,33 @@ </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" + :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 --> @@ -273,7 +280,6 @@ $comment-padding: 10px; .comment { display: flex; gap: 16px; - position: relative; padding: 5px $comment-padding; &__side { @@ -313,12 +319,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 index 00d39539341..93e9031df5a 100644 --- a/apps/comments/src/views/Comments.vue +++ b/apps/comments/src/views/Comments.vue @@ -315,10 +315,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 { |