Merge pull request #40771 from nextcloud/fix/37098/migrate-to-nc-icon-svg-wrapper

apps/files/src/components/CustomSvgIconRender.vue

@@ -1,68 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-<template>
-	<span class="custom-svg-icon" />
-</template>
-
-<script>
-// eslint-disable-next-line import/named
-import { sanitize } from 'dompurify'
-
-export default {
-	name: 'CustomSvgIconRender',
-	props: {
-		svg: {
-			type: String,
-			required: true,
-		},
-	},
-	watch: {
-		svg() {
-			this.$el.innerHTML = sanitize(this.svg)
-		},
-	},
-	mounted() {
-		this.$el.innerHTML = sanitize(this.svg)
-	},
-}
-</script>
-<style lang="scss" scoped>
-.custom-svg-icon {
-	display: flex;
-	align-items: center;
-	align-self: center;
-	justify-content: center;
-	justify-self: center;
-	width: 44px;
-	height: 44px;
-	opacity: 1;
-
-	::v-deep svg {
-		// mdi icons have a size of 24px
-		// 22px results in roughly 16px inner size
-		height: 22px;
-		width: 22px;
-		fill: currentColor;
-	}
-}
-
-</style>

apps/files/src/components/FavoriteIcon.vue

@@ -20,12 +20,12 @@
   -
   -->
 <template>
-	<CustomSvgIconRender class="favorite-marker-icon" :svg="StarSvg" />
+	<NcIconSvgWrapper class="favorite-marker-icon" :svg="StarSvg" />
 </template>
 
 <script>
 import StarSvg from '@mdi/svg/svg/star.svg?raw'
-import CustomSvgIconRender from './CustomSvgIconRender.vue'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
 /**
  * A favorite icon to be used for overlaying favorite entries like the file preview / icon
@@ -41,33 +41,37 @@ import CustomSvgIconRender from './CustomSvgIconRender.vue'
 export default {
 	name: 'FavoriteIcon',
 	components: {
-		CustomSvgIconRender,
+		NcIconSvgWrapper,
 	},
 	data() {
 		return {
 			StarSvg,
 		}
 	},
-	mounted() {
+	async mounted() {
+		await this.$nextTick()
 		// MDI default viewbox is "0 0 24 24" but we add a stroke of 10px so we must adjust it
 		const el = this.$el.querySelector('svg')
 		el.setAttribute('viewBox', '-4 -4 30 30')
-		el.setAttribute('width', '25')
-		el.setAttribute('height', '25')
 	},
 }
 </script>
 <style lang="scss" scoped>
 .favorite-marker-icon {
 	color: #a08b00;
-	width: fit-content;
-	height: fit-content;
+	// Override NcIconSvgWrapper defaults (clickable area)
+	min-width: unset !important;
+    min-height: unset !important;
 
 	:deep() {
 		svg {
 			// We added a stroke for a11y so we must increase the size to include the stroke
-			width: 26px;
-			height: 26px;
+			width: 26px !important;
+			height: 26px !important;
+
+			// Override NcIconSvgWrapper defaults of 20px
+			max-width: unset !important;
+			max-height: unset !important;
 
 			// Sow a border around the icon for better contrast
 			path {

apps/files/src/components/FileEntry.vue

@@ -75,7 +75,7 @@
 				<span v-if="isFavorite"
 					class="files-list__row-icon-favorite"
 					:aria-label="t('files', 'Favorite')">
-					<FavoriteIcon :aria-hidden="true" />
+					<FavoriteIcon />
 				</span>
 			</span>
 
@@ -146,7 +146,7 @@
 					@click="onActionClick(action)">
 					<template #icon>
 						<NcLoadingIcon v-if="loading === action.id" :size="18" />
-						<CustomSvgIconRender v-else :svg="action.iconSvgInline([source], currentView)" />
+						<NcIconSvgWrapper v-else :svg="action.iconSvgInline([source], currentView)" />
 					</template>
 					{{ actionDisplayName(action) }}
 				</NcActionButton>
@@ -186,7 +186,7 @@
 	</tr>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 import type { PropType } from 'vue'
 
 import { emit } from '@nextcloud/event-bus'
@@ -213,6 +213,7 @@ import AccountPlusIcon from 'vue-material-design-icons/AccountPlus.vue'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
@@ -229,7 +230,6 @@ import { useRenamingStore } from '../store/renaming.ts'
 import { useSelectionStore } from '../store/selection.ts'
 import { useUserConfigStore } from '../store/userconfig.ts'
 import CustomElementRender from './CustomElementRender.vue'
-import CustomSvgIconRender from './CustomSvgIconRender.vue'
 import FavoriteIcon from './FavoriteIcon.vue'
 import logger from '../logger.js'
 import { loadState } from '@nextcloud/initial-state'
@@ -248,7 +248,6 @@ export default Vue.extend({
 		AccountGroupIcon,
 		AccountPlusIcon,
 		CustomElementRender,
-		CustomSvgIconRender,
 		FavoriteIcon,
 		FileIcon,
 		FolderIcon,
@@ -258,6 +257,7 @@ export default Vue.extend({
 		NcActionButton,
 		NcActions,
 		NcCheckboxRadioSwitch,
+		NcIconSvgWrapper,
 		NcLoadingIcon,
 		NcTextField,
 		NetworkIcon,
@@ -656,6 +656,7 @@ export default Vue.extend({
 		/**
 		 * If renaming starts, select the file name
 		 * in the input, without the extension.
+		 * @param renaming
 		 */
 		isRenaming(renaming) {
 			if (renaming) {

apps/files/src/components/FilesListHeaderActions.vue

@@ -33,7 +33,7 @@
 				@click="onActionClick(action)">
 				<template #icon>
 					<NcLoadingIcon v-if="loading === action.id" :size="18" />
-					<CustomSvgIconRender v-else :svg="action.iconSvgInline(nodes, currentView)" />
+					<NcIconSvgWrapper v-else :svg="action.iconSvgInline(nodes, currentView)" />
 				</template>
 				{{ action.displayName(nodes, currentView) }}
 			</NcActionButton>
@@ -46,6 +46,7 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import Vue from 'vue'
 
@@ -53,7 +54,6 @@ import { getFileActions, useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
 import filesListWidthMixin from '../mixins/filesListWidth.ts'
-import CustomSvgIconRender from './CustomSvgIconRender.vue'
 import logger from '../logger.js'
 import { NodeStatus } from '@nextcloud/files'
 
@@ -64,9 +64,9 @@ export default Vue.extend({
 	name: 'FilesListHeaderActions',
 
 	components: {
-		CustomSvgIconRender,
 		NcActions,
 		NcActionButton,
+		NcIconSvgWrapper,
 		NcLoadingIcon,
 	},
 

apps/files/src/components/FilesListTableHeaderActions.vue

@@ -33,7 +33,7 @@
 				@click="onActionClick(action)">
 				<template #icon>
 					<NcLoadingIcon v-if="loading === action.id" :size="18" />
-					<CustomSvgIconRender v-else :svg="action.iconSvgInline(nodes, currentView)" />
+					<NcIconSvgWrapper v-else :svg="action.iconSvgInline(nodes, currentView)" />
 				</template>
 				{{ action.displayName(nodes, currentView) }}
 			</NcActionButton>
@@ -47,6 +47,7 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import Vue from 'vue'
 
@@ -54,7 +55,6 @@ import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
 import filesListWidthMixin from '../mixins/filesListWidth.ts'
-import CustomSvgIconRender from './CustomSvgIconRender.vue'
 import logger from '../logger.js'
 
 // The registered actions list
@@ -64,9 +64,9 @@ export default Vue.extend({
 	name: 'FilesListTableHeaderActions',
 
 	components: {
-		CustomSvgIconRender,
 		NcActions,
 		NcActionButton,
+		NcIconSvgWrapper,
 		NcLoadingIcon,
 	},