Merge pull request #750 from nextcloud/backport/747/stable28

package.json

@@ -31,6 +31,7 @@
     "lodash": "^4.17.21",
     "nextcloud-server": "^0.15.10",
     "vue": "^2.7.14",
+    "vue-material-design-icons": "^5.3.0",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
@@ -47,4 +48,4 @@
   "browserslist": [
     "extends @nextcloud/browserslist-config"
   ]
-}
+}

src/components/RecommendedFile.vue

@@ -1,23 +1,7 @@
 <!--
-  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
-  -
-  - @author 2019 Christoph Wurst <[email protected]>
-  -
-  - @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/>.
-  -->
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 
 <template>
 	<a class="recommendation"
@@ -26,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">
@@ -51,8 +38,15 @@
 <script>
 import { generateUrl } from '@nextcloud/router'
 
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+
 export default {
 	name: 'RecommendedFile',
+
+	components: {
+		FolderIcon,
+	},
+
 	props: {
 		id: {
 			type: String,
@@ -170,6 +164,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 {