Merge pull request #882 from nextcloud-libraries/fix/mobile-filepicker

FilePicker: Navigation and filter should be on separate rows on mobile
nextcloud-libraries · Aug 10, 2023 · 6b44dce · 6b44dce
2 parents 2c0a86d + 046f789
commit 6b44dce
Show file tree

Hide file tree

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

diff --git a/lib/components/DialogBase.vue b/lib/components/DialogBase.vue
@@ -7,7 +7,7 @@
 					{{ props.name }}
 				</h2>
 				<!-- 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">
+				<nav v-if="hasNavigation" :class="['dialog__navigation', ...navigationClasses]">
 					<slot name="navigation" :is-collapsed="isNavigationCollapsed" />
 				</nav>
 				<!-- Man dialog content -->
@@ -61,11 +61,27 @@ const props = withDefaults(defineProps<{
 	 * @default []
 	 */
 	buttons?: readonly IDialogButton[]
+	/**
+	 * Optionally pass additionaly classes which will be set on the navigation for custom styling
+	 * @default []
+	 * @example
+	 * ```html
+	 * <DialogBase :navigation-classes="['mydialog-navigation']"><!-- --></DialogBase>
+	 * <!-- ... -->
+	 * <style lang="scss">
+	 * :deep(.mydialog-navigation) {
+	 *     flex-direction: row-reverse;
+	 * }
+	 * </style>
+	 * ```
+	 */
+	navigationClasses?: string[]
 }>(), {
 	size: 'normal',
 	container: 'body',
 	message: '',
 	buttons: () => [],
+	navigationClasses: () => [],
 })
 
 const emit = defineEmits<{

diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
@@ -111,6 +111,7 @@ const dialogProps = computed(() => ({
 	name: props.name,
 	buttons: dialogButtons.value,
 	size: 'large',
+	navigationClasses: ['file-picker__navigation'],
 }))
 
 /**

diff --git a/lib/components/FilePicker/FilePickerNavigation.vue b/lib/components/FilePicker/FilePickerNavigation.vue
@@ -122,9 +122,35 @@ const updateFilterValue = (value: string) => emit('update:filterString', value)
 
 		}
 	}
+}
+@media (max-width: 512px) {
+	.file-picker {
+		&__side {
+			flex-direction: row;
+			min-width: unset;
+
+		}
+		&__filter-input {
+			max-width: unset;
+		}
+	}
+}
+</style>
+
+<style>
+.file-picker__navigation .v-select.select {
+	min-width: 220px;
+}
+
+@media (min-width: 513px) and (max-width: 736px) {
+	.file-picker__navigation {
+		gap: 11px;
+	}
+}
 
-	:deep(.dialog__navigation .v-select.select) {
-		min-width: 160px;
+@media (max-width: 512px) {
+	.file-picker__navigation {
+		flex-direction: column-reverse!important;
 	}
 }
 </style>