fix(FilePicker): Make height of FilePicker fixed and fill with loadin…

…g skeletons

Signed-off-by: Ferdinand Thiessen <[email protected]>

lib/components/FilePicker/FileList.vue

@@ -51,7 +51,7 @@
 			</thead>
 			<tbody>
 				<template v-if="loading">
-					<LoadingTableRow v-for="i in [1, 2, 3, 4]" :key="i" :show-checkbox="multiselect"/>
+					<LoadingTableRow v-for="index in skeletonNumber" :key="index" :show-checkbox="multiselect"/>
 				</template>
 				<template v-else>
 					<FileListRow v-for="file in sortedFiles"
@@ -74,6 +74,7 @@ import { FileType, type Node } from '@nextcloud/files'
 
 import { getCanonicalLocale } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { useWindowSize } from '@vueuse/core'
 import { join } from 'path'
 import { t } from '../../utils/l10n'
 import { computed, ref, type Ref } from 'vue'
@@ -184,6 +185,16 @@ function onNodeSelected(file: Node) {
 function onChangeDirectory(dir: Node) {
 	emit('update:path', join(props.path, dir.basename))
 }
+
+/**
+ * Number of loading skeletons to use to fill the filepicker
+ */
+ const skeletonNumber = computed(() => {
+	const dialogHeight = width.value < 512 ? height.value : Math.min(height.value * 0.8, 800)
+	// dialog height - other elements / height of row
+	return Math.floor((dialogHeight - (width.value < 1000 ? 250 : 200)) / 50)
+})
+const { height, width } = useWindowSize()
 </script>
 
 <style scoped lang="scss">
@@ -192,7 +203,6 @@ function onChangeDirectory(dir: Node) {
 		// ensure focus outlines are visible
 		margin: 2px;
 		margin-inline-start: 12px; // align with bread crumbs
-		min-height: calc(5 * var(--row-height, 50px)); // make file list not jumping when loading (1x header 4x loading placeholders)
 		overflow: scroll auto;
 
 		table {

lib/components/FilePicker/FilePicker.vue

@@ -259,8 +259,6 @@ export default {
 
 <style scoped lang="scss">
 .file-picker {
-	height: min(80vh, 800px); // Dialog is max. 900px wide so the best looking height seems to be 800px
-
 	&__view {
 		height: 50px; // align with breadcrumbs
 		display: flex;
@@ -289,6 +287,18 @@ export default {
 	}
 }
 
+:deep(.file-picker) {
+	// Dialog is max. 900px wide so the best looking height seems to be 800px
+	height: min(80vh, 800px);
+}
+
+@media (max-width: 512px) {
+	:deep(.file-picker) {
+		// below 512px the modal is fullscreen so we use 100% height - margin of heading (4px + 12px) - height of heading (default-clickable-area)
+		height: calc(100% - 16px - var(--default-clickable-area));
+	}
+}
+
 :deep(.file-picker__content) {
 	display: flex;
 	flex-direction: column;