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