feat(files): responsive design for mobile and narrow screens

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

3 files changed, 55 insertions, 10 deletions

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 47ed5729a8d..58b86886319 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -115,6 +115,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import isMobileMixin from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import Vue from 'vue'
 
 import { getFileActions } from '../services/FileAction.ts'
@@ -146,6 +147,10 @@ export default Vue.extend({
 		NcLoadingIcon,
 	},
 
+	mixins: [
+		isMobileMixin,
+	],
+
 	props: {
 		active: {
 			type: Boolean,
@@ -295,13 +300,20 @@ export default Vue.extend({
 		},
 
 		enabledInlineActions() {
+			if (this.isMobile) {
+				return []
+			}
 			return this.enabledActions.filter(action => action?.inline?.(this.source, this.currentView))
 		},
 
 		enabledMenuActions() {
+			if (this.isMobile) {
+				return this.enabledActions
+			}
+
 			return [
 				...this.enabledInlineActions,
-				...actions.filter(action => !action.inline),
+				...this.enabledActions.filter(action => !action.inline),
 			]
 		},
 
@@ -311,10 +323,10 @@ export default Vue.extend({
 
 		openedMenu: {
 			get() {
-				return this.actionsMenuStore.opened === this
+				return this.actionsMenuStore.opened === this.uniqueId
 			},
 			set(opened) {
-				this.actionsMenuStore.opened = opened ? this : null
+				this.actionsMenuStore.opened = opened ? this.uniqueId : null
 			},
 		},
 	},
@@ -515,7 +527,7 @@ export default Vue.extend({
 
 			// If the clicked row is in the selection, open global menu
 			const isMoreThanOneSelected = this.selectedFiles.length > 1
-			this.actionsMenuStore.opened = this.isSelected && isMoreThanOneSelected ? 'global' : this
+			this.actionsMenuStore.opened = this.isSelected && isMoreThanOneSelected ? 'global' : this.uniqueId
 
 			// Prevent any browser defaults
 			event.preventDefault()
diff --git a/apps/files/src/components/FilesListHeaderActions.vue b/apps/files/src/components/FilesListHeaderActions.vue
index f136e281f09..13e24ec77e6 100644
--- a/apps/files/src/components/FilesListHeaderActions.vue
+++ b/apps/files/src/components/FilesListHeaderActions.vue
@@ -1,7 +1,7 @@
 <!--
-  - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
+  - @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
   -
-  - @author Gary Kim <gary@garykim.dev>
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -24,7 +24,8 @@
 		<NcActions ref="actionsMenu"
 			:disabled="!!loading || areSomeNodesLoading"
 			:force-title="true"
-			:inline="3"
+			:inline="inlineActions"
+			:menu-title="inlineActions === 0 ? t('files', 'Actions') : null"
 			:open.sync="openedMenu">
 			<NcActionButton v-for="action in enabledActions"
 				:key="action.id"
@@ -43,8 +44,8 @@
 <script lang="ts">
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate } from '@nextcloud/l10n'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import Vue from 'vue'
 
@@ -52,6 +53,7 @@ import { getFileActions } from '../services/FileAction.ts'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
+import clientWidthMixin from '../mixins/clientWidth.ts'
 import CustomSvgIconRender from './CustomSvgIconRender.vue'
 import logger from '../logger.js'
 
@@ -68,6 +70,10 @@ export default Vue.extend({
 		NcLoadingIcon,
 	},
 
+	mixins: [
+		clientWidthMixin,
+	],
+
 	props: {
 		currentView: {
 			type: Object,
@@ -122,6 +128,16 @@ export default Vue.extend({
 				this.actionsMenuStore.opened = opened ? 'global' : null
 			},
 		},
+
+		inlineActions() {
+			if (this.clientWidth < 480) {
+				return 1
+			}
+			if (this.clientWidth < 768) {
+				return 2
+			}
+			return 3
+		},
 	},
 
 	methods: {
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 16e25e33d1f..fe9b9f635bc 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -226,6 +226,8 @@ export default Vue.extend({
 			// Show same padding as the checkbox right padding for visual balance
 			margin-right: var(--checkbox-padding);
 			color: var(--color-primary-element);
+			// No shrinking or growing allowed
+			flex: 0 0 var(--icon-preview-size);
 
 			& > span {
 				justify-content: flex-start;
@@ -285,7 +287,7 @@ export default Vue.extend({
 				margin: 0 var(--cell-margin);
 			}
 
-			& > button {
+			button {
 				.button-vue__text {
 					// Remove bold from default button styling
 					font-weight: normal;
@@ -316,7 +318,22 @@ export default Vue.extend({
 		.files-list__row-column-custom {
 			width: calc(var(--row-height) * 2);
 		}
+
+		@media (max-width: 768px) {
+			// Hide any column after the size menu on mobile
+			.files-list__row-size ~ td,
+			.files-list__row-size ~ th {
+				display: none;
+			}
+		}
+
+		@media (max-width: 480px) {
+			// Hide any column after the actions menu on short mobile
+			.files-list__row-actions ~ td,
+			.files-list__row-actions ~ th {
+				display: none;
+			}
+		}
 	}
 }
-
 </style>