Update root folder icon and label for upload location

Signed-off-by: Louis Chemineau <louis@chmn.me>

3 files changed, 23 insertions, 5 deletions

diff --git a/src/components/Settings/PhotosFolder.vue b/src/components/Settings/PhotosFolder.vue
index bc3aa630..4830adc1 100644
--- a/src/components/Settings/PhotosFolder.vue
+++ b/src/components/Settings/PhotosFolder.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="folder">
-		<FolderMultiple v-if="path === '/'" />
+		<component :is="rootFolderIcon" v-if="path === '/'" />
 		<Folder v-else />
 		<span class="folder__info">
 			<div class="folder__path">{{ folderName }}</div>
@@ -23,7 +23,6 @@
 import { defineComponent } from 'vue'
 
 import Folder from 'vue-material-design-icons/Folder.vue'
-import FolderMultiple from 'vue-material-design-icons/FolderMultiple.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 
 import { NcButton } from '@nextcloud/vue'
@@ -35,7 +34,6 @@ export default defineComponent({
 	components: {
 		NcButton,
 		Folder,
-		FolderMultiple,
 		Close,
 	},
 
@@ -52,6 +50,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		rootFolderIcon: {
+			type: Object,
+			required: true,
+		},
 	},
 
 	emits: ['remove-folder'],
diff --git a/src/components/Settings/PhotosSourceLocationsSettings.vue b/src/components/Settings/PhotosSourceLocationsSettings.vue
index 9db17dd7..418c518b 100644
--- a/src/components/Settings/PhotosSourceLocationsSettings.vue
+++ b/src/components/Settings/PhotosSourceLocationsSettings.vue
@@ -23,7 +23,7 @@
 <template>
 	<div class="photos-locations">
 		<ul>
-			<PhotosFolder :path="photosSourceFolder" :root-folder-label="t('photos', 'All folders')" />
+			<PhotosFolder :path="photosSourceFolder" :root-folder-label="t('photos', 'All folders')" :root-folder-icon="FolderMultiple" />
 			<!-- TODO: uncomment when SEARCH on multiple folders is implemented. -->
 			<!-- <li v-for="(source, index) in photosSourceFolder"
 				:key="index">
@@ -49,6 +49,8 @@
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
 
+import FolderMultiple from 'vue-material-design-icons/FolderMultiple.vue'
+
 import { NcButton } from '@nextcloud/vue'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
@@ -63,6 +65,12 @@ export default defineComponent({
 		PhotosFolder,
 	},
 
+	data() {
+		return {
+			FolderMultiple,
+		}
+	},
+
 	computed: {
 		/** @return {string} */
 		photosSourceFolder() {
diff --git a/src/components/Settings/PhotosUploadLocationSettings.vue b/src/components/Settings/PhotosUploadLocationSettings.vue
index 2a637e4e..d7871f4f 100644
--- a/src/components/Settings/PhotosUploadLocationSettings.vue
+++ b/src/components/Settings/PhotosUploadLocationSettings.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="photos-location">
-		<PhotosFolder :path="photosLocation" :root-folder-label="t('photos', 'Root folder')" />
+		<PhotosFolder :path="photosLocation" :root-folder-label="t('photos', 'Home')" :root-folder-icon="Home" />
 
 		<NcButton :aria-label="t('photos', 'Choose default Photos upload and Albums location')"
 			@click="debounceSelectPhotosFolder">
@@ -35,6 +35,8 @@
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
 
+import Home from 'vue-material-design-icons/Home.vue'
+
 import { NcButton } from '@nextcloud/vue'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
@@ -49,6 +51,12 @@ export default defineComponent({
 		PhotosFolder,
 	},
 
+	data() {
+		return {
+			Home,
+		}
+	},
+
 	computed: {
 		/** @return {string} */
 		photosLocation() {