diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/comments/src/components/Comment.vue | 156 |
1 files changed, 84 insertions, 72 deletions
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue index 062dda74756..df9a22a1709 100644 --- a/apps/comments/src/components/Comment.vue +++ b/apps/comments/src/components/Comment.vue @@ -24,75 +24,79 @@ :class="{'comment--loading': loading}" class="comment"> <!-- Comment header toolbar --> - <div class="comment__header"> + <div class="comment__side"> <!-- Author --> <NcAvatar class="comment__avatar" :display-name="actorDisplayName" :user="actorId" :size="32" /> - <span class="comment__author">{{ actorDisplayName }}</span> - - <!-- Comment actions, - show if we have a message id and current user is author --> - <NcActions v-if="isOwnComment && id && !loading" class="comment__actions"> - <template v-if="!editing"> - <NcActionButton :close-after-click="true" - icon="icon-rename" - @click="onEdit"> - {{ t('comments', 'Edit comment') }} - </NcActionButton> - <NcActionSeparator /> - <NcActionButton :close-after-click="true" - icon="icon-delete" - @click="onDeleteWithUndo"> - {{ t('comments', 'Delete comment') }} - </NcActionButton> - </template> - - <NcActionButton v-else - icon="icon-close" - @click="onEditCancel"> - {{ t('comments', 'Cancel edit') }} - </NcActionButton> - </NcActions> - - <!-- Show loading if we're editing or deleting, not on new ones --> - <div v-if="id && loading" class="comment_loading icon-loading-small" /> - - <!-- Relative time to the comment creation --> - <Moment v-else-if="creationDateTime" class="comment__timestamp" :timestamp="timestamp" /> </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 class="comment__body"> + <div class="comment__header"> + <span class="comment__author">{{ actorDisplayName }}</span> + + <!-- Comment actions, + show if we have a message id and current user is author --> + <NcActions v-if="isOwnComment && id && !loading" class="comment__actions"> + <template v-if="!editing"> + <NcActionButton :close-after-click="true" + icon="icon-rename" + @click="onEdit"> + {{ t('comments', 'Edit comment') }} + </NcActionButton> + <NcActionSeparator /> + <NcActionButton :close-after-click="true" + icon="icon-delete" + @click="onDeleteWithUndo"> + {{ t('comments', 'Delete comment') }} + </NcActionButton> + </template> + + <NcActionButton v-else + icon="icon-close" + @click="onEditCancel"> + {{ t('comments', 'Cancel edit') }} + </NcActionButton> + </NcActions> + + <!-- Show loading if we're editing or deleting, not on new ones --> + <div v-if="id && loading" class="comment_loading icon-loading-small" /> + + <!-- Relative time to the comment creation --> + <Moment v-else-if="creationDateTime" class="comment__timestamp" :timestamp="timestamp" /> + </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> + + <!-- Message content --> + <!-- The html is escaped and sanitized before rendering --> + <!-- eslint-disable-next-line vue/no-v-html--> + <div v-else + :class="{'comment__message--expanded': expanded}" + class="comment__message" + @click="onExpand" + v-html="renderedContent" /> </div> - - <!-- Message content --> - <!-- The html is escaped and sanitized before rendering --> - <!-- eslint-disable-next-line vue/no-v-html--> - <div v-else - :class="{'comment__message--expanded': expanded}" - class="comment__message" - @click="onExpand" - v-html="renderedContent" /> </div> </template> @@ -258,17 +262,29 @@ export default { $comment-padding: 10px; .comment { + display: flex; + gap: 16px; position: relative; - padding: $comment-padding 0 $comment-padding * 1.5; + padding: 5px $comment-padding; + + &__side { + display: flex; + align-items: flex-start; + padding-top: 16px; + } + + &__body { + display: flex; + flex-grow: 1; + flex-direction: column; + } &__header { display: flex; align-items: center; min-height: 44px; - padding: math.div($comment-padding, 2) 0; } - &__author, &__actions { margin-left: $comment-padding !important; } @@ -283,16 +299,11 @@ $comment-padding: 10px; &_loading, &__timestamp { margin-left: auto; + text-align: right; + white-space: nowrap; color: var(--color-text-maxcontrast); } - &__editor, - &__message { - position: relative; - // Avatar size, align with author name - padding-left: 32px + $comment-padding; - } - &__submit { position: absolute !important; right: 0; @@ -306,6 +317,7 @@ $comment-padding: 10px; word-break: break-word; max-height: 70px; overflow: hidden; + margin-top: -6px; &--expanded { max-height: none; overflow: visible; |