fix(comments): Use proper icon components instead of icon classes to fix dark mode

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index 912eeb287487b6a8162d8434b95de318d6092634..644b0c0e059c9faf30fee126532c50f9e309469b 100644 (file)
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -40,22 +40,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>
@@ -90,8 +95,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>
@@ -124,8 +129,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'
 
@@ -136,13 +146,17 @@ export default {
        name: 'Comment',
 
        components: {
-               ArrowRight,
+               IconArrowRight,
+               IconClose,
+               IconDelete,
+               IconEdit,
                NcActionButton,
                NcActions,
                NcActionSeparator,
                NcAvatar,
                NcButton,
                NcDateTime,
+               NcLoadingIcon,
                NcRichContenteditable,
        },
        mixins: [RichEditorMixin, CommentMixin],

diff --git a/apps/comments/src/views/ActivityCommentEntry.vue b/apps/comments/src/views/ActivityCommentEntry.vue
index 38fc2d5f1ef2dda71cd65061f3aabbb1c49c2925..55af0d5bc1eac6fb491bae4ee95ebb9e4e63cbf0 100644 (file)
--- a/apps/comments/src/views/ActivityCommentEntry.vue
+++ b/apps/comments/src/views/ActivityCommentEntry.vue
@@ -34,6 +34,7 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue'
 import { translate as t } from '@nextcloud/l10n'
 
 import Comment from '../components/Comment.vue'
@@ -53,7 +54,7 @@ export default {
                        required: true,
                },
                reloadCallback: {
-                       type: Function,
+                       type: Function as PropType<() => void>,
                        required: true,
                },
        },