Merge pull request #39483 from nextcloud/fix/files-vue-favorite-icon

fix(files): Adjust files favorite marker for vue file list being cropped

apps/files/src/components/FavoriteIcon.vue

@@ -0,0 +1,82 @@
+<!--
+  - @copyright Copyright (c) 2023 Ferdinand Thiessen <[email protected]>
+  -
+  - @author Ferdinand Thiessen <[email protected]>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - 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>
+	<CustomSvgIconRender class="favorite-marker-icon" :svg="StarSvg" />
+</template>
+
+<script>
+import StarSvg from '@mdi/svg/svg/star.svg?raw'
+import CustomSvgIconRender from './CustomSvgIconRender.vue'
+
+/**
+ * A favorite icon to be used for overlaying favorite entries like the file preview / icon
+ * It has a stroke around the star icon to ensure enough contrast for accessibility.
+ *
+ * If the background has a hover state you might want to also apply it to the stroke like this:
+ * ```scss
+ * .parent:hover :deep(.favorite-marker-icon svg path) {
+ *      stroke: var(--color-background-hover);
+ * }
+ * ```
+ */
+export default {
+	name: 'FavoriteIcon',
+	components: {
+		CustomSvgIconRender,
+	},
+	data() {
+		return {
+			StarSvg,
+		}
+	},
+	mounted() {
+		// 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;
+
+	:deep() {
+		svg {
+			// We added a stroke for a11y so we must increase the size to include the stroke
+			width: 26px;
+			height: 26px;
+
+			// Sow a border around the icon for better contrast
+			path {
+				stroke: var(--color-main-background);
+				stroke-width: 8px;
+				stroke-linejoin: round;
+				paint-order: stroke;
+			}
+		}
+	}
+}
+</style>

apps/files/src/components/FileEntry.vue

@@ -3,7 +3,7 @@
   -
   - @author John Molakvoæ <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -53,7 +53,7 @@
 				<span v-if="isFavorite"
 					class="files-list__row-icon-favorite"
 					:aria-label="t('files', 'Favorite')">
-					<StarIcon aria-hidden="true" :size="20" />
+					<FavoriteIcon :aria-hidden="true" />
 				</span>
 			</span>
 
@@ -164,7 +164,6 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-import StarIcon from 'vue-material-design-icons/Star.vue'
 import Vue from 'vue'
 import type moment from 'moment'
 
@@ -180,6 +179,7 @@ import { useUserConfigStore } from '../store/userconfig.ts'
 import { useRenamingStore } from '../store/renaming.ts'
 import CustomElementRender from './CustomElementRender.vue'
 import CustomSvgIconRender from './CustomSvgIconRender.vue'
+import FavoriteIcon from './FavoriteIcon.vue'
 import logger from '../logger.js'
 
 // The registered actions list
@@ -193,6 +193,7 @@ export default Vue.extend({
 	components: {
 		CustomElementRender,
 		CustomSvgIconRender,
+		FavoriteIcon,
 		FileIcon,
 		FolderIcon,
 		Fragment,
@@ -201,7 +202,6 @@ export default Vue.extend({
 		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
 		NcTextField,
-		StarIcon,
 	},
 
 	props: {

apps/files/src/components/FilesListVirtual.vue

@@ -3,7 +3,7 @@
   -
   - @author John Molakvoæ <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -242,6 +242,11 @@ export default Vue.extend({
 			}
 		}
 
+		// Hover state of the row should also change the favorite markers background
+		.files-list__row:hover .favorite-marker-icon svg path {
+			stroke: var(--color-background-dark);
+		}
+
 		// Entry preview or mime icon
 		.files-list__row-icon {
 			position: relative;
@@ -284,16 +289,8 @@ export default Vue.extend({
 
 			&-favorite {
 				position: absolute;
-				top: 4px;
-				right: -8px;
-				color: #a08b00;
-				// Sow a border around the icon for better contrast
-				svg path {
-					stroke: var(--color-main-background);
-					stroke-width: 10px;
-					stroke-linejoin: round;
-					paint-order: stroke
-				}
+				top: 0px;
+				right: -10px;
 			}
 		}