Merge pull request #45867 from nextcloud/fix/comments-icons

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

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],

apps/comments/src/views/ActivityCommentEntry.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue'
 import { translate as t } from '@nextcloud/l10n'
 
 import Comment from '../components/Comment.vue'
@@ -36,7 +37,7 @@ export default {
 			required: true,
 		},
 		reloadCallback: {
-			type: Function,
+			type: Function as PropType<() => void>,
 			required: true,
 		},
 	},

dist/3920-3920.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunknextcloud=self.webpackChunknextcloud||[]).push([[3920],{94163:(t,e,n)=>{n.d(e,{A:()=>c});var o=n(71354),m=n.n(o),s=n(76314),r=n.n(s)()(m());r.push([t.id,"\n.comments-activity[data-v-5e783bec] {\n\tpadding: 0;\n}\n","",{version:3,sources:["webpack://./apps/comments/src/views/ActivityCommentEntry.vue"],names:[],mappings:";AAmEA;CACA,UAAA;AACA",sourcesContent:['\x3c!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n--\x3e\n\n<template>\n\t<Comment ref="comment"\n\t\ttag="li"\n\t\tv-bind="comment.props"\n\t\t:auto-complete="autoComplete"\n\t\t:resource-type="resourceType"\n\t\t:message="commentMessage"\n\t\t:resource-id="resourceId"\n\t\t:user-data="genMentionsData(comment.props.mentions)"\n\t\tclass="comments-activity"\n\t\t@delete="reloadCallback()" />\n</template>\n\n<script lang="ts">\nimport type { PropType } from \'vue\'\nimport { translate as t } from \'@nextcloud/l10n\'\n\nimport Comment from \'../components/Comment.vue\'\nimport CommentView from \'../mixins/CommentView\'\n\nexport default {\n\tname: \'ActivityCommentEntry\',\n\n\tcomponents: {\n\t\tComment,\n\t},\n\n\tmixins: [CommentView],\n\tprops: {\n\t\tcomment: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\t\treloadCallback: {\n\t\t\ttype: Function as PropType<() => void>,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcommentMessage: \'\',\n\t\t}\n\t},\n\n\twatch: {\n\t\tcomment() {\n\t\t\tthis.commentMessage = this.comment.props.message\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.commentMessage = this.comment.props.message\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n<\/script>\n\n<style scoped>\n.comments-activity {\n\tpadding: 0;\n}\n</style>\n'],sourceRoot:""}]);const c=r},93920:(t,e,n)=>{n.d(e,{default:()=>f});var o=n(53334),m=n(65463),s=n(70452);const r={name:"ActivityCommentEntry",components:{Comment:m.A},mixins:[s.A],props:{comment:{type:Object,required:!0},reloadCallback:{type:Function,required:!0}},data:()=>({commentMessage:""}),watch:{comment(){this.commentMessage=this.comment.props.message}},mounted(){this.commentMessage=this.comment.props.message},methods:{t:o.Tl}};var c=n(85072),a=n.n(c),i=n(97825),p=n.n(i),l=n(77659),u=n.n(l),d=n(55056),C=n.n(d),y=n(10540),A=n.n(y),g=n(41113),h=n.n(g),v=n(94163),b={};b.styleTagTransform=h(),b.setAttributes=C(),b.insert=u().bind(null,"head"),b.domAPI=p(),b.insertStyleElement=A(),a()(v.A,b),v.A&&v.A.locals&&v.A.locals;const f=(0,n(14486).A)(r,(function(){var t=this;return(0,t._self._c)("Comment",t._b({ref:"comment",staticClass:"comments-activity",attrs:{tag:"li","auto-complete":t.autoComplete,"resource-type":t.resourceType,message:t.commentMessage,"resource-id":t.resourceId,"user-data":t.genMentionsData(t.comment.props.mentions)},on:{delete:function(e){return t.reloadCallback()}}},"Comment",t.comment.props,!1))}),[],!1,null,"5e783bec",null).exports}}]);
+//# sourceMappingURL=3920-3920.js.map?v=d2965aff947ea8ac373f

dist/7888-7888.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunknextcloud=self.webpackChunknextcloud||[]).push([[7888],{86334:(t,e,n)=>{n.d(e,{A:()=>a});var o=n(71354),s=n.n(o),m=n(76314),c=n.n(m)()(s());c.push([t.id,"\n.comments-activity[data-v-d4cfa9b2] {\n\tpadding: 0;\n}\n","",{version:3,sources:["webpack://./apps/comments/src/views/ActivityCommentEntry.vue"],names:[],mappings:";AAkEA;CACA,UAAA;AACA",sourcesContent:['\x3c!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n--\x3e\n\n<template>\n\t<Comment ref="comment"\n\t\ttag="li"\n\t\tv-bind="comment.props"\n\t\t:auto-complete="autoComplete"\n\t\t:resource-type="resourceType"\n\t\t:message="commentMessage"\n\t\t:resource-id="resourceId"\n\t\t:user-data="genMentionsData(comment.props.mentions)"\n\t\tclass="comments-activity"\n\t\t@delete="reloadCallback()" />\n</template>\n\n<script lang="ts">\nimport { translate as t } from \'@nextcloud/l10n\'\n\nimport Comment from \'../components/Comment.vue\'\nimport CommentView from \'../mixins/CommentView\'\n\nexport default {\n\tname: \'ActivityCommentEntry\',\n\n\tcomponents: {\n\t\tComment,\n\t},\n\n\tmixins: [CommentView],\n\tprops: {\n\t\tcomment: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\t\treloadCallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcommentMessage: \'\',\n\t\t}\n\t},\n\n\twatch: {\n\t\tcomment() {\n\t\t\tthis.commentMessage = this.comment.props.message\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.commentMessage = this.comment.props.message\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n<\/script>\n\n<style scoped>\n.comments-activity {\n\tpadding: 0;\n}\n</style>\n'],sourceRoot:""}]);const a=c},37888:(t,e,n)=>{n.d(e,{default:()=>f});var o=n(53334),s=n(65463),m=n(70452);const c={name:"ActivityCommentEntry",components:{Comment:s.A},mixins:[m.A],props:{comment:{type:Object,required:!0},reloadCallback:{type:Function,required:!0}},data:()=>({commentMessage:""}),watch:{comment(){this.commentMessage=this.comment.props.message}},mounted(){this.commentMessage=this.comment.props.message},methods:{t:o.Tl}};var a=n(85072),r=n.n(a),i=n(97825),p=n.n(i),l=n(77659),u=n.n(l),d=n(55056),C=n.n(d),A=n(10540),g=n.n(A),y=n(41113),h=n.n(y),b=n(86334),v={};v.styleTagTransform=h(),v.setAttributes=C(),v.insert=u().bind(null,"head"),v.domAPI=p(),v.insertStyleElement=g(),r()(b.A,v),b.A&&b.A.locals&&b.A.locals;const f=(0,n(14486).A)(c,(function(){var t=this;return(0,t._self._c)("Comment",t._b({ref:"comment",staticClass:"comments-activity",attrs:{tag:"li","auto-complete":t.autoComplete,"resource-type":t.resourceType,message:t.commentMessage,"resource-id":t.resourceId,"user-data":t.genMentionsData(t.comment.props.mentions)},on:{delete:function(e){return t.reloadCallback()}}},"Comment",t.comment.props,!1))}),[],!1,null,"d4cfa9b2",null).exports}}]);
-//# sourceMappingURL=7888-7888.js.map?v=affd42ddb7b473e0e53d