upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-04-22 14:50:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 53

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

Browse source 
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
This commit is contained in:
Grigorii K. Shartsev 2023-09-06 14:58:24 +02:00
parent 597965145c
commit be8d9042b5
2 changed files with 42 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
apps/comments/src/components/Comment.vue
View file

@ -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 {

7
apps/comments/src/views/Comments.vue
View file

@ -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 {