Minor rendering improvements

Signed-off-by: Louis Chemineau <[email protected]>

Author: artonge

src/components/File.vue

@@ -51,8 +51,8 @@
 					@error="onError">
 			</div>
 
-			<!-- image name -->
-			<p :id="ariaDescription" class="file__hidden-description">{{ item.basename }}</p>
+			<!-- image description -->
+			<p :id="ariaDescription" class="file__hidden-description" :class="{show: error}">{{ item.basename }}</p>
 		</a>
 
 		<CheckboxRadioSwitch v-if="allowSelection"
@@ -261,7 +261,9 @@ export default {
 		// Make the checkbox background round on hover.
 		::v-deep .checkbox-radio-switch__label {
 			padding: 10px;
+			box-sizing: border-box;
 
+			// Add a background to the checkbox so we do not see the image through it.
 			&::after {
 				content: '';
 				background: var(--color-primary-light);
@@ -305,6 +307,7 @@ export default {
 				height: 100%;
 				object-fit: cover;
 				position: absolute;
+				color: transparent; /// Hide alt text when loading.
 			}
 
 			.loading-overlay {
@@ -330,6 +333,12 @@ export default {
 			width: 1px;
 			height: 1px;
 			overflow: hidden;
+
+			&.show {
+				position: initial;
+				width: fit-content;
+				height: fit-content;
+			}
 		}
 	}
 }

src/components/FilesListViewer.vue

@@ -42,10 +42,11 @@
 						:file="item"
 						:visibility="row.visibility" />
 				</TiledRows>
+				<template v-if="loading" #loader>
+					<Loader class="files-list-viewer__loader" />
+				</template>
 			</VirtualScrolling>
 		</TiledLayout>
-
-		<Loader v-if="loading" />
 	</div>
 </template>
 <script>
@@ -81,7 +82,7 @@ export default {
 			type: Object,
 			default: undefined,
 		},
-		// A list of ordered sections.
+		// The list of sorted sections.
 		sections: {
 			type: Array,
 			default: undefined,
@@ -202,6 +203,7 @@ export default {
 <style lang="scss" scoped>
 .files-list-viewer {
 	height: 100%;
+	position: relative;
 
 	::v-deep .empty-content__icon {
 		width: 200px;
@@ -212,5 +214,9 @@ export default {
 			height: 200px;
 		}
 	}
+
+	&__loader {
+		margin: 50px 0;
+	}
 }
 </style>

src/components/FilesPicker.vue

@@ -27,18 +27,18 @@
 					:key="month"
 					class="file-picker__navigation__month"
 					:class="{selected: targetMonth === month}"
-					@click="scrollTo(month)">
+					@click="targetMonth = month">
 					{{ month | dateMonthAndYear }}
 				</div>
 			</div>
 			<FilesListViewer class="file-picker__file-list"
-				:file-ids-by-section="filesListByMonth"
+				:file-ids-by-section="fileIdsByMonth"
 				:sections="monthsList"
-				:loading="loadingFiles && fetchedFileIds.length !== 0"
+				:loading="loadingFiles"
 				:base-height="100"
 				:section-header-height="50"
 				:scroll-to-section="targetMonth"
-				@need-content="fetchedFileIds">
+				@need-content="fetchFiles">
 				<template slot-scope="{file, height, visibility}">
 					<h3 v-if="file.sectionHeader"
 						:id="`file-picker-section-header-${file.id}`"
@@ -84,6 +84,7 @@ import FetchFilesMixin from '../mixins/FetchFilesMixin.js'
 import FilesSelectionMixin from '../mixins/FilesSelectionMixin.js'
 import FilesListViewer from './FilesListViewer.vue'
 import File from './File.vue'
+import FilesByMonthMixin from '../mixins/FilesByMonthMixin.js'
 
 export default {
 	name: 'FilesPicker',
@@ -107,6 +108,7 @@ export default {
 
 	mixins: [
 		FetchFilesMixin,
+		FilesByMonthMixin,
 		FilesSelectionMixin,
 	],
 
@@ -121,34 +123,6 @@ export default {
 		}
 	},
 
-	computed: {
-		/**
-		 * @return {string[]}
-		 */
-		filesListByMonth() {
-			const filesByMonth = {}
-			for (const fileId of Object.keys(this.files)) {
-				const file = this.files[fileId]
-				filesByMonth[file.month] = filesByMonth[file.month] ?? []
-				filesByMonth[file.month].push(file.fileid)
-			}
-
-			// Sort files in sections.
-			Object.keys(filesByMonth).forEach(month => filesByMonth[month].sort(this.sortFilesByTimestamp))
-
-			return filesByMonth
-		},
-
-		/**
-		 * @return {string[]}
-		 */
-		monthsList() {
-			return Object
-				.keys(this.filesListByMonth)
-				.sort((month1, month2) => month1 > month2 ? -1 : 1)
-		},
-	},
-
 	watch: {
 		monthsList(value) {
 			if (this.targetMonth === null) {
@@ -182,6 +156,7 @@ export default {
 
 	&__content {
 		display: flex;
+		align-items: flex-start;
 		flex-grow: 1;
 		height: 500px;
 	}
@@ -191,6 +166,7 @@ export default {
 		overflow: scroll;
 		margin-right: 8px;
 		padding-right: 8px;
+		height: 100%;
 
 		&__month {
 			font-weight: bold;
@@ -213,6 +189,7 @@ export default {
 	&__file-list {
 		flex-grow: 1;
 		min-width: 0;
+		height: 100%;
 
 		.section-header {
 			font-weight: bold;

src/components/TiledLayout.vue

@@ -23,7 +23,7 @@
 	<div ref="tiledLayoutContainer"
 		class="tiled-container">
 		<!-- Slot to allow changing the rows before passing them to TiledRows -->
-		<!-- Useful for partially rendering rows like in VirtualScrolling -->
+		<!-- Useful for partially rendering rows like with VirtualScrolling -->
 		<slot :rows="rows">
 			<!-- Default rendering -->
 			<TiledRows :rows="rows" />
@@ -32,6 +32,7 @@
 </template>
 
 <script>
+import logger from '../services/logger.js'
 import { splitItemsInRows } from '../services/TiledLayout.js'
 import TiledRows from './TiledRows.vue'
 
@@ -64,6 +65,8 @@ export default {
 	computed: {
 		/** @return {import('../services/TiledLayout.js').TiledRow[]} */
 		rows() {
+			logger.debug('[TiledLayout] Computing rows', this.items)
+
 			return splitItemsInRows(this.items, this.containerWidth, this.baseHeight)
 		},
 	},

src/components/VirtualScrolling.vue

@@ -25,17 +25,22 @@
 			class="vs-rows-container"
 			:style="rowsContainerStyle">
 			<slot :rendered-rows="visibleRows" />
+			<slot name="loader" />
 		</div>
 	</div>
 	<div v-else
 		ref="rowsContainer"
 		class="vs-rows-container"
 		:style="rowsContainerStyle">
 		<slot :rendered-rows="visibleRows" />
+		<slot name="loader" />
 	</div>
 </template>
 
 <script>
+import { debounce } from 'debounce'
+
+import logger from '../services/logger.js'
 /**
  * @typedef {object} Row
  * @property {number} height - The height of the row.
@@ -72,7 +77,7 @@ export default {
 		},
 		willBeVisibleWindowRatio: {
 			type: Number,
-			default: 4,
+			default: 5,
 		},
 		visibleWindowRatio: {
 			type: Number,
@@ -104,6 +109,8 @@ export default {
 		 * @return {VisibleRow[]}
 		 */
 		visibleRows() {
+			logger.debug('[VirtualScrolling] Computing visible rows', this.rows)
+
 			// Optimisation: get those computed properties once to not go through vue's internal every time we need them.
 			const scrollPosition = this.scrollPosition
 			const containerHeight = this.containerHeight
@@ -205,6 +212,7 @@ export default {
 		 * @return {HTMLElement}
 		 */
 		container() {
+			logger.debug('[VirtualScrolling] Computing container')
 			if (this.containerElement !== null) {
 				return this.containerElement
 			} else if (this.useWindow) {
@@ -277,13 +285,14 @@ export default {
 	},
 
 	methods: {
-		updateScrollPosition() {
+		updateScrollPosition: debounce(function() {
 			if (this.useWindow) {
 				this.scrollPosition = this.container.scrollY
 			} else {
 				this.scrollPosition = this.container.scrollTop
 			}
-		},
+		}, 200),
+
 		updateContainerSize() {
 			this.containerHeight = window.innerHeight
 		},
@@ -296,4 +305,8 @@ export default {
 	overflow-y: scroll;
 	height: 100%;
 }
+
+.vs-rows-container {
+	box-sizing: border-box;
+}
 </style>

src/mixins/FetchAlbumsMixin.js

@@ -22,6 +22,7 @@
 
 import { mapGetters } from 'vuex'
 
+import logger from '../services/logger.js'
 import getAlbums from '../services/Albums.js'
 import cancelableRequest from '../utils/CancelableRequest.js'
 
@@ -65,6 +66,7 @@ export default {
 
 				const albums = await request()
 				this.$store.dispatch('addAlbums', { albums })
+				logger.debug(`Fetched ${albums.length} new files: `, albums)
 			} catch (error) {
 				if (error.response && error.response.status) {
 					if (error.response.status === 404) {

src/mixins/FetchFilesMixin.js

@@ -100,11 +100,13 @@ export default {
 					this.doneFetchingFiles = true
 				}
 
-				const fileIds = fetchedFiles.map(file => file.fileid).filter(fileId => !this.fetchedFileIds.includes(fileId)) // Filter to prevent duplicate fileId.
+				const fileIds = fetchedFiles.map(file => file.fileid).filter(fileId => !this.fetchedFileIds.includes(fileId)) // Filter to prevent duplicate fileIds.
 				this.fetchedFileIds.push(...fileIds)
 
 				this.$store.dispatch('appendFiles', fetchedFiles)
 
+				logger.debug(`Fetched ${fileIds.length} new files: `, fileIds)
+
 				return fileIds
 			} catch (error) {
 				if (error.response && error.response.status) {