diff options
Diffstat (limited to 'apps/comments/src/components/Comment.vue')
| -rw-r--r-- | apps/comments/src/components/Comment.vue | 36 |
1 files changed, 25 insertions, 11 deletions
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue index c883f9b848b..8c6287d9ecb 100644 --- a/apps/comments/src/components/Comment.vue +++ b/apps/comments/src/components/Comment.vue @@ -23,22 +23,27 @@ 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" + <NcActionButton close-after-click @click="onEdit"> + <template #icon> + <IconEdit :size="20" /> + </template> {{ t('comments', 'Edit comment') }} </NcActionButton> <NcActionSeparator /> - <NcActionButton :close-after-click="true" - icon="icon-delete" + <NcActionButton close-after-click @click="onDeleteWithUndo"> + <template #icon> + <IconDelete :size="20" /> + </template> {{ t('comments', 'Delete comment') }} </NcActionButton> </template> - <NcActionButton v-else - icon="icon-close" - @click="onEditCancel"> + <NcActionButton v-else @click="onEditCancel"> + <template #icon> + <IconClose :size="20" /> + </template> {{ t('comments', 'Cancel edit') }} </NcActionButton> </NcActions> @@ -73,8 +78,8 @@ :disabled="isEmptyMessage" @click="onSubmit"> <template #icon> - <span v-if="loading" class="icon-loading-small" /> - <ArrowRight v-else :size="20" /> + <NcLoadingIcon v-if="loading" /> + <IconArrowRight v-else :size="20" /> </template> </NcButton> </div> @@ -107,8 +112,13 @@ import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator. import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js' +import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor.js' -import ArrowRight from 'vue-material-design-icons/ArrowRight.vue' + +import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue' +import IconClose from 'vue-material-design-icons/Close.vue' +import IconDelete from 'vue-material-design-icons/Delete.vue' +import IconEdit from 'vue-material-design-icons/Pencil.vue' import CommentMixin from '../mixins/CommentMixin.js' @@ -119,13 +129,17 @@ export default { name: 'Comment', components: { - ArrowRight, + IconArrowRight, + IconClose, + IconDelete, + IconEdit, NcActionButton, NcActions, NcActionSeparator, NcAvatar, NcButton, NcDateTime, + NcLoadingIcon, NcRichContenteditable, }, mixins: [RichEditorMixin, CommentMixin], |