Merge pull request #2517 from nextcloud/artonge/backport/2514/stable29

[stable29] Various fix from 30

src/components/Collection/CollectionContent.vue

@@ -41,7 +41,7 @@
 		<slot v-if="sortedCollectionFileIds.length === 0 && !loading" name="empty-content" />
 
 		<!-- Media list -->
-		<FilesListViewer v-if="collection !== undefined"
+		<FilesListViewer v-if="collection !== undefined && sortedCollectionFileIds.length > 0 "
 			:container-element="appContent"
 			class="collection__media"
 			:file-ids="sortedCollectionFileIds"

src/components/File.vue

@@ -163,26 +163,19 @@ export default {
 	},
 
 	watch: {
-		file() {
+		async file() {
 			this.initialized = false
 			this.loadedSmall = false
 			this.errorSmall = false
 			this.loadedLarge = false
 			this.errorLarge = false
+
+			await this.init()
 		},
 	},
 
 	async mounted() {
-		[this.loadedSmall, this.loadedLarge] = await Promise.all([
-			await isCachedPreview(this.srcSmall),
-			await isCachedPreview(this.srcLarge),
-		])
-
-		this.initialized = true
-
-		await this.$nextTick() // Wait for next tick to have the canvas in the DOM
-
-		this.drawBlurhash()
+		await this.init()
 	},
 
 	beforeDestroy() {
@@ -196,6 +189,19 @@ export default {
 	},
 
 	methods: {
+		async init() {
+			[this.loadedSmall, this.loadedLarge] = await Promise.all([
+				await isCachedPreview(this.srcSmall),
+				await isCachedPreview(this.srcLarge),
+			])
+
+			this.initialized = true
+
+			await this.$nextTick() // Wait for next tick to have the canvas in the DOM
+
+			this.drawBlurhash()
+		},
+
 		emitClick() {
 			this.$emit('click', this.file.fileid)
 		},

src/components/PhotosPicker.vue

@@ -201,6 +201,10 @@ export default defineComponent({
 		...mapGetters([
 			'files',
 		]),
+
+		photosLocationFolder() {
+			return this.$store.state.userConfig.photosLocationFolder
+		},
 	},
 
 	watch: {
@@ -241,9 +245,6 @@ export default defineComponent({
 			}
 			return moment(date, 'YYYYMM').format('MMMM YYYY')
 		},
-		photosLocationFolder() {
-			return this.$store.state.userConfig.photosLocationFolder
-		},
 	},
 })
 </script>

src/router/index.js

@@ -127,7 +127,7 @@ const router = new Router({
 		{
 			path: '/albums/:albumName*',
 			component: AlbumContent,
-			name: 'albums',
+			name: 'albumsContent',
 			props: route => ({
 				albumName: route.params.albumName,
 			}),
@@ -150,7 +150,7 @@ const router = new Router({
 		{
 			path: '/sharedalbums/:albumName*',
 			component: SharedAlbumContent,
-			name: 'sharedAlbums',
+			name: 'sharedAlbumsContent',
 			props: route => ({
 				albumName: route.params.albumName,
 			}),
@@ -181,7 +181,7 @@ const router = new Router({
 		{
 			path: '/places/:placeName*',
 			component: PlaceContent,
-			name: 'places',
+			name: 'placesContent',
 			props: route => ({
 				placeName: route.params.placeName,
 			}),

src/store/index.js

@@ -34,8 +34,18 @@ import folders from './folders.js'
 import systemtags from './systemtags.js'
 import userConfig, { getFolder } from './userConfig.js'
 
+/**
+ * Get the information of photosLocation and store it as photosLocationFolder
+ * @param store
+ * @param state
+ */
+async function initPhotosLocationFolder(store, state) {
+	const photosLocationFolder = await getFolder(state.userConfig.photosLocation)
+	store.commit('updateUserConfig', { key: 'photosLocationFolder', value: photosLocationFolder })
+}
+
 Vue.use(Vuex)
-export default new Store({
+const photosStore = new Store({
 	modules: {
 		files,
 		folders,
@@ -51,14 +61,17 @@ export default new Store({
 
 	plugins: [
 		(store) => {
+			initPhotosLocationFolder(store, store.state)
+
 			store.subscribe(async (mutation, state) => {
 				if (mutation.type === 'updateUserConfig' && mutation.payload.key === 'photosLocation') {
-					const photosLocationFolder = await getFolder(state.userConfig.photosLocation)
-					store.commit('updateUserConfig', { key: 'photosLocationFolder', value: photosLocationFolder })
+					initPhotosLocationFolder(store, state)
 				}
 			})
 		},
 	],
 
 	strict: process.env.NODE_ENV !== 'production',
 })
+
+export default photosStore

src/views/AlbumContent.vue

@@ -20,9 +20,8 @@
  -
  -->
 <template>
-	<div>
-		<CollectionContent v-if="true"
-			ref="collectionContent"
+	<div class="album-container">
+		<CollectionContent ref="collectionContent"
 			:collection="album"
 			:collection-file-ids="albumFileIds"
 			:loading="loadingCollection || loadingCollectionFiles"
@@ -53,8 +52,7 @@
 				</template>
 
 				<template v-if="album !== undefined" slot="right">
-					<UploadPicker v-if="album.nbItems !== 0"
-						:accept="allowedMimes"
+					<UploadPicker :accept="allowedMimes"
 						:context="uploadContext"
 						:destination="albumAsFolder"
 						:root="uploadContext.root"
@@ -127,7 +125,8 @@
 			</NcEmptyContent>
 		</CollectionContent>
 
-		<PhotosPicker :open.sync="showAddPhotosModal"
+		<PhotosPicker v-if="album !== undefined"
+			:open.sync="showAddPhotosModal"
 			:blacklist-ids="albumFileIds"
 			:destination="album.basename"
 			:name="t('photos', 'Add photos to {albumName}', {albumName: albumName})"
@@ -400,6 +399,14 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.album-container {
+	height: 100%;
+
+	:deep(.collection) {
+		height: 100%;
+	}
+}
+
 .album {
 	&__title {
 		width: 100%;
@@ -424,19 +431,19 @@ export default {
 	&--uploading {
 		margin-bottom: 30px;
 	}
-}
 
-:deep(.upload-picker) {
-	.upload-picker__progress {
-		position: absolute;
-		bottom: -30px;
-		left: 64px;
-		margin: 0;
-	}
-	.upload-picker__cancel {
-		position: absolute;
-		bottom: -24px;
-		right: 50px;
+	:deep(.upload-picker) {
+		.upload-picker__progress {
+			position: absolute;
+			bottom: -30px;
+			left: 64px;
+			margin: 0;
+		}
+		.upload-picker__cancel {
+			position: absolute;
+			bottom: -24px;
+			right: 50px;
+		}
 	}
 }
 </style>

src/views/Folders.vue

@@ -321,21 +321,20 @@ export default {
 	&--uploading {
 		margin-bottom: 30px;
 	}
-}
 
-:deep(.upload-picker) {
-	.upload-picker__progress {
-		position: absolute;
-		bottom: -30px;
-		left: 64px;
-		margin: 0;
-	}
+	:deep(.upload-picker) {
+		.upload-picker__progress {
+			position: absolute;
+			bottom: -30px;
+			left: 64px;
+			margin: 0;
+		}
 
-	.upload-picker__cancel {
-		position: absolute;
-		bottom: -24px;
-		right: 50px;
+		.upload-picker__cancel {
+			position: absolute;
+			bottom: -24px;
+			right: 50px;
+		}
 	}
 }
-
 </style>