Merge pull request #747 from nextcloud/fix/recommendations-folder

nextcloud · May 30, 2024 · 69234c7 · 69234c7
2 parents ec645b1 + f495cad
commit 69234c7
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 8 deletions.
diff --git a/js/recommendations-dashboard.js b/js/recommendations-dashboard.js
diff --git a/js/recommendations-dashboard.js.map b/js/recommendations-dashboard.js.map
diff --git a/js/recommendations-main.js b/js/recommendations-main.js
diff --git a/js/recommendations-main.js.map b/js/recommendations-main.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "@nextcloud/vue-dashboard": "^2.0.1",
     "lodash": "^4.17.21",
     "vue": "^2.7.16",
+    "vue-material-design-icons": "^5.3.0",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

diff --git a/src/components/RecommendedFile.vue b/src/components/RecommendedFile.vue
@@ -10,8 +10,11 @@
 		:title="path"
 		@click.prevent="navigate"
 		@keyup.enter.prevent="navigate">
-		<div class="thumbnail"
-			:style="{ 'background-image': 'url(' + previewUrl + ')' }" />
+		<!-- Preview or mime icon -->
+		<FolderIcon v-if="isFolder" class="thumbnail" />
+		<div v-else class="thumbnail" :style="{ 'background-image': 'url(' + previewUrl + ')' }" />
+
+		<!-- Details -->
 		<div class="details">
 			<div class="file-name">
 				<template v-if="extension">
@@ -37,8 +40,15 @@ import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { joinPaths } from '@nextcloud/paths'
 
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+
 export default {
 	name: 'RecommendedFile',
+
+	components: {
+		FolderIcon,
+	},
+
 	props: {
 		id: {
 			type: String,
@@ -163,6 +173,15 @@ export default {
 		background-size: contain;
 		flex-shrink: 0;
 		border-radius: var(--border-radius);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		// For the folder icon
+		:deep(svg) {
+			color: var(--color-primary-element);
+			width: 100%;
+			height: 100%;
+		}
 	}
 
 	.details {