From e611e73a3c8f724658063eda9ad2ac5e60e36e33 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 28 Aug 2023 17:53:00 +0200
Subject: [PATCH 1/3] fix(FilePicker): Ensure only the table is scrolled and
 fix design issues

* Make sure scrolled elements can not be seen through the table header
* Ensure the buttons are not overlaying the files list content

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/DialogBase.vue                 | 19 ++++++++++++++-----
 lib/components/FilePicker/FileList.vue        |  4 ++--
 lib/components/FilePicker/FilePicker.vue      |  9 ++++-----
 .../FilePicker/FilePickerNavigation.vue       |  2 ++
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/lib/components/DialogBase.vue b/lib/components/DialogBase.vue
index ddc853b3..1fb111f4 100644
--- a/lib/components/DialogBase.vue
+++ b/lib/components/DialogBase.vue
@@ -5,14 +5,14 @@
 		@close="handleClose">
 		<!-- The dialog name / header -->
 		<h2 class="dialog__name" v-text="name" />
-		<div class="dialog">
+		<div class="dialog" :class="dialogClasses">
 			<div ref="wrapper" :class="['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]">
 				<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->
-				<nav v-if="hasNavigation" :class="['dialog__navigation', ...navigationClasses]">
+				<nav v-if="hasNavigation" class="dialog__navigation" :class="navigationClasses">
 					<slot name="navigation" :is-collapsed="isNavigationCollapsed" />
 				</nav>
 				<!-- Main dialog content -->
-				<div :class="['dialog__content', ...contentClasses]">
+				<div class="dialog__content" :class="contentClasses">
 					<slot>
 						<p>{{ props.message }}</p>
 					</slot>
@@ -32,10 +32,13 @@
 </template>
 
 <script setup lang="ts">
+import type { IDialogButton } from './types'
+
 import { NcModal } from '@nextcloud/vue'
-import { computed, ref, useSlots } from 'vue'
-import DialogButton, { type IDialogButton } from './DialogButton.vue'
 import { useElementSize } from '@vueuse/core'
+import { computed, ref, useSlots } from 'vue'
+
+import DialogButton from './DialogButton.vue'
 
 const props = withDefaults(defineProps<{
 	/** Name of the dialog (the heading) */
@@ -79,12 +82,18 @@ const props = withDefaults(defineProps<{
 	 * @default []
 	 */
 	contentClasses?: string[]
+	/**
+	 * Optionally pass additionaly classes which will be set on the dialog itself
+	 * (the default `class` attribute will be set on the modal wrapper)
+	 */
+	dialogClasses?: string|Record<string, boolean>|(string|Record<string, boolean>)[]
 }>(), {
 	additionalTrapElements: () => [],
 	buttons: () => [],
 	container: undefined,
 	message: '',
 	contentClasses: () => [],
+	dialogClasses: () => [],
 	navigationClasses: () => [],
 	size: 'small',
 })
diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue
index 44f643af..6785e3b5 100644
--- a/lib/components/FilePicker/FileList.vue
+++ b/lib/components/FilePicker/FileList.vue
@@ -190,8 +190,8 @@ function onChangeDirectory(dir: Node) {
 .file-picker {
 	&__files {
 		// ensure focus outlines are visible
-		padding: 2px;
-		padding-inline-start: 12px; // align with bread crumbs
+		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;
 
diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
index 06696b93..fdd7057b 100644
--- a/lib/components/FilePicker/FilePicker.vue
+++ b/lib/components/FilePicker/FilePicker.vue
@@ -126,8 +126,9 @@ const dialogProps = computed(() => ({
 	name: props.name,
 	buttons: dialogButtons.value,
 	size: 'large',
-	navigationClasses: ['file-picker__navigation'],
 	contentClasses: ['file-picker__content'],
+	dialogClasses: ['file-picker'],
+	navigationClasses: ['file-picker__navigation'],
 }))
 
 /**
@@ -258,10 +259,7 @@ export default {
 
 <style scoped lang="scss">
 .file-picker {
-	display: flex;
-	flex-direction: row;
-	min-height: 40vh;
-	gap: 22px;
+	height: min(80vh, 800px); // Dialog is max. 900px wide so the best looking height seems to be 800px
 
 	&__view {
 		height: 50px; // align with breadcrumbs
@@ -294,5 +292,6 @@ export default {
 :deep(.file-picker__content) {
 	display: flex;
 	flex-direction: column;
+	overflow: hidden;
 }
 </style>
diff --git a/lib/components/FilePicker/FilePickerNavigation.vue b/lib/components/FilePicker/FilePickerNavigation.vue
index 888b3a81..6e237c30 100644
--- a/lib/components/FilePicker/FilePickerNavigation.vue
+++ b/lib/components/FilePicker/FilePickerNavigation.vue
@@ -101,6 +101,8 @@ const updateFilterValue = (value: string) => emit('update:filterString', value)
 		min-width: 200px;
 		// ensure focus outline is visible
 		padding-block: 2px;
+		// make only the navigation scroll
+		overflow: auto;
 
 		:deep(.button-vue__wrapper) {
 			justify-content: start;

From acd30a398c3066ba48d64f3ce7c742c3a5115cdb Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 28 Aug 2023 20:39:52 +0200
Subject: [PATCH 2/3] fix(FilePicker): Make height of FilePicker fixed and fill
 with loading skeletons

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/FilePicker/FileList.vue   | 33 +++++++++++++++++++++---
 lib/components/FilePicker/FilePicker.vue | 14 ++++++++--
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue
index 6785e3b5..414ca677 100644
--- a/lib/components/FilePicker/FileList.vue
+++ b/lib/components/FilePicker/FileList.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="file-picker__files">
+	<div class="file-picker__files" ref="fileContainer">
 		<table>
 			<thead>
 				<tr>
@@ -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"
@@ -76,7 +76,7 @@ import { getCanonicalLocale } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { join } from 'path'
 import { t } from '../../utils/l10n'
-import { computed, ref, type Ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, type Ref } from 'vue'
 
 import IconSortAscending from 'vue-material-design-icons/MenuDown.vue'
 import IconSortDescending from 'vue-material-design-icons/MenuUp.vue'
@@ -184,6 +184,32 @@ 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 = ref(4)
+const fileContainer = ref<HTMLDivElement>()
+{
+	const resize = () => nextTick(() => {
+		const nodes = fileContainer.value?.parentElement?.children || []
+		let height = fileContainer.value?.parentElement?.clientHeight || 450
+		for(let index = 0; index < nodes.length; index++) {
+			if (!fileContainer.value?.isSameNode(nodes[index])) {
+				height -= nodes[index].clientHeight
+			}
+		}
+		// container height - 50px table header / row height of 50px
+		skeletonNumber.value = Math.floor((height - 50) / 50)
+	})
+	onMounted(() => {
+		window.addEventListener('resize', resize)
+		resize()
+	})
+	onUnmounted(() => {
+		window.removeEventListener('resize', resize)
+	})
+}
 </script>
 
 <style scoped lang="scss">
@@ -192,7 +218,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 {
diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
index fdd7057b..a0224de5 100644
--- a/lib/components/FilePicker/FilePicker.vue
+++ b/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;

From 247f39e71ccc79004e6fd6cb07a1b839bdd935f8 Mon Sep 17 00:00:00 2001
From: nextcloud-command <nextcloud-command@users.noreply.github.com>
Date: Mon, 4 Sep 2023 10:26:43 +0000
Subject: [PATCH 3/3] Updating l10n asset

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
---
 l10n/messages.pot | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/l10n/messages.pot b/l10n/messages.pot
index b422ddf4..a48113f4 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -38,11 +38,11 @@ msgstr ""
 msgid "Copy to {target}"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:249
+#: lib/components/FilePicker/FilePicker.vue:250
 msgid "Could not create the new folder"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:159
+#: lib/components/FilePicker/FilePicker.vue:160
 #: lib/components/FilePicker/FilePickerNavigation.vue:65
 msgid "Favorites"
 msgstr ""
@@ -51,11 +51,11 @@ msgstr ""
 msgid "File name cannot be empty."
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:235
+#: lib/components/FilePicker/FilePicker.vue:236
 msgid "Files and folders you mark as favorite will show up here."
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:233
+#: lib/components/FilePicker/FilePicker.vue:234
 msgid "Files and folders you recently modified will show up here."
 msgstr ""
 
@@ -75,7 +75,7 @@ msgstr ""
 msgid "Name"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:159
+#: lib/components/FilePicker/FilePicker.vue:160
 #: lib/components/FilePicker/FilePickerNavigation.vue:61
 msgid "Recent"
 msgstr ""
@@ -106,6 +106,6 @@ msgstr ""
 msgid "Unset"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:231
+#: lib/components/FilePicker/FilePicker.vue:232
 msgid "Upload some content or sync with your devices!"
 msgstr ""