fix: Make file picker dialog height fixed - ensure only file table is…

… scrolled Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Aug 15, 2023 · 8e0ae91 · 8e0ae91
1 parent 0085747
commit 8e0ae91
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 15 deletions.
diff --git a/l10n/messages.pot b/l10n/messages.pot
@@ -26,11 +26,11 @@ msgstr ""
 msgid "Copy"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:213
+#: lib/components/FilePicker/FilePicker.vue:214
 msgid "Could not create the new folder"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:136
+#: lib/components/FilePicker/FilePicker.vue:137
 #: lib/components/FilePicker/FilePickerNavigation.vue:65
 msgid "Favorites"
 msgstr ""
@@ -51,7 +51,7 @@ msgstr ""
 msgid "Name"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:136
+#: lib/components/FilePicker/FilePicker.vue:137
 #: lib/components/FilePicker/FilePickerNavigation.vue:61
 msgid "Recent"
 msgstr ""

diff --git a/lib/components/DialogBase.vue b/lib/components/DialogBase.vue
@@ -1,6 +1,6 @@
 <template>
-	<NcModal v-if="open" v-bind="modalProps" @close="handleClose">
-		<Fragment>
+	<NcModal v-if="open" v-bind="modalProps" class="dialog__modal" @close="handleClose">
+		<div class="dialog">
 			<div ref="wrapper" :class="['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]">
 				<!-- If the navigation is shown on top of the content, the header should be above the navigation -->
 				<h2 v-if="isNavigationCollapsed" class="dialog__name">
@@ -11,7 +11,7 @@
 					<slot name="navigation" :is-collapsed="isNavigationCollapsed" />
 				</nav>
 				<!-- Main dialog content -->
-				<div class="dialog__content">
+				<div :class="['dialog__content', ...contentClasses]">
 					<!-- If the navigation is shown on the side the header should be directly aligned with the content -->
 					<h2 v-if="!isNavigationCollapsed" class="dialog__name">
 						{{ props.name }}
@@ -30,30 +30,31 @@
 						@click="handleClose" />
 				</slot>
 			</div>
-		</Fragment>
+		</div>
 	</NcModal>
 </template>
 
 <script setup lang="ts">
 import { NcModal } from '@nextcloud/vue'
 import { computed, ref, useSlots } from 'vue'
 import DialogButton, { type IDialogButton } from './DialogButton.vue'
-import { Fragment } from 'vue-frag' // can be dropped with vue3
 import { useElementSize } from '@vueuse/core'
 
 const props = withDefaults(defineProps<{
 	/** Name of the dialog (the heading) */
 	name: string
 	/** Text of the dialog */
 	message?: string
+	/** Additional elements to add to the focus trap */
+	additionalTrapElements?: string[]
 	/**
-	 * The element here to mount the dialog
+	 * The element where to mount the dialog, if `null` is passed the dialog is mounted in place
 	 * @default 'body'
 	 */
-	container?: string
+	container?: string | null
 	/**
 	 * Size of the underlying NcModal
-	 * @default 'normal'
+	 * @default 'small'
 	 */
 	size?: 'small' | 'normal' | 'large' | 'full'
 	/**
@@ -76,12 +77,19 @@ const props = withDefaults(defineProps<{
 	 * ```
 	 */
 	navigationClasses?: string[]
+	/**
+	 * Optionally pass additionaly classes which will be set on the content wrapper for custom styling
+	 * @default []
+	 */
+	contentClasses?: string[]
 }>(), {
-	size: 'normal',
-	container: 'body',
-	message: '',
+	additionalTrapElements: () => [],
 	buttons: () => [],
+	container: undefined,
+	message: '',
+	contentClasses: () => [],
 	navigationClasses: () => [],
+	size: 'small',
 })
 
 const emit = defineEmits<{
@@ -128,7 +136,8 @@ const handleClose = () => {
  * Properties to pass to the underlying NcModal
  */
 const modalProps = computed(() => ({
-	container: props.container,
+	additionalTrapElements: props.additionalTrapElements,
+	container: props.container === undefined ? 'body' : props.container,
 	name: props.name,
 	size: props.size,
 	enableSlideshow: false,
@@ -138,11 +147,25 @@ const modalProps = computed(() => ({
 
 <style lang="scss" scoped>
 .dialog {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	&__modal {
+		:deep(.modal-container) {
+			display: flex !important;
+		}
+	}
+
 	&__wrapper {
 		margin-inline: 12px;
 		margin-block: 0 12px; // remove margin to align header with close button
 		display: flex;
 		flex-direction: row;
+		// Auto scale to fit
+		flex: 1;
+		min-height: 0;
 
 		&--collapsed {
 			flex-direction: column;
@@ -151,6 +174,7 @@ const modalProps = computed(() => ({
 
 	&__navigation {
 		display: flex;
+		flex-shrink: 0;
 	}
 
 	// Navigation styling when side-by-side with content
@@ -183,6 +207,12 @@ const modalProps = computed(() => ({
 		margin-block: 4px 12px; // start = 4px to align with close button
 	}
 
+	&__content {
+		// Auto fit
+		flex: 1;
+		min-height: 0;
+	}
+
 	&__actions {
 		display: flex;
 		gap: 6px;

diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue
@@ -182,6 +182,10 @@ function onChangeDirectory(dir: Node) {
 			table-layout: fixed;
 		}
 		th {
+			position: sticky;
+			top: 0;
+			background-color: var(--color-main-background);
+
 			&.row-checkbox {
 				width: 44px;
 			}

diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
@@ -112,6 +112,7 @@ const dialogProps = computed(() => ({
 	buttons: dialogButtons.value,
 	size: 'large',
 	navigationClasses: ['file-picker__navigation'],
+	contentClasses: ['file-picker__content'],
 }))
 
 /**
@@ -242,6 +243,16 @@ export default {
 
 	&__main {
 		width: 100%;
+		display: flex;
+		flex-direction: column;
+		// Auto fit height
+		min-height: 0;
+		flex: 1;
 	}
 }
+
+:deep(.file-picker__content) {
+	display: flex;
+	flex-direction: column;
+}
 </style>