feat(files): better breakpoints and sidebar responsive design

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

6 files changed, 63 insertions, 41 deletions

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index d485d9d78df..7db22482220 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -104,7 +104,7 @@
 <script lang='ts'>
 import { debounce } from 'debounce'
 import { formatFileSize } from '@nextcloud/files'
-import { Fragment } from 'vue-fragment'
+import { Fragment } from 'vue-frag'
 import { join } from 'path'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate } from '@nextcloud/l10n'
@@ -115,7 +115,6 @@ 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'
@@ -147,10 +146,6 @@ export default Vue.extend({
 		NcLoadingIcon,
 	},
 
-	mixins: [
-		isMobileMixin,
-	],
-
 	props: {
 		active: {
 			type: Boolean,
@@ -172,6 +167,10 @@ export default Vue.extend({
 			type: Array,
 			required: true,
 		},
+		filesListWidth: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	setup() {
@@ -207,6 +206,10 @@ export default Vue.extend({
 		},
 
 		columns() {
+			// Hide columns if the list is too small
+			if (this.filesListWidth < 512) {
+				return []
+			}
 			return this.currentView?.columns || []
 		},
 
@@ -300,14 +303,14 @@ export default Vue.extend({
 		},
 
 		enabledInlineActions() {
-			if (this.isMobile) {
+			if (this.filesListWidth < 768) {
 				return []
 			}
 			return this.enabledActions.filter(action => action?.inline?.(this.source, this.currentView))
 		},
 
 		enabledMenuActions() {
-			if (this.isMobile) {
+			if (this.filesListWidth < 768) {
 				return this.enabledActions
 			}
 
diff --git a/apps/files/src/components/FilesListFooter.vue b/apps/files/src/components/FilesListFooter.vue
index 9004a397945..80047f404fc 100644
--- a/apps/files/src/components/FilesListFooter.vue
+++ b/apps/files/src/components/FilesListFooter.vue
@@ -38,7 +38,8 @@
 		<td class="files-list__row-actions" />
 
 		<!-- Size -->
-		<td v-if="isSizeAvailable" class="files-list__column files-list__row-size">
+		<td v-if="isSizeAvailable"
+			class="files-list__column files-list__row-size">
 			<span>{{ totalSize }}</span>
 		</td>
 
@@ -78,6 +79,10 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+		filesListWidth: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	setup() {
@@ -112,6 +117,10 @@ export default Vue.extend({
 		},
 
 		columns() {
+			// Hide columns if the list is too small
+			if (this.filesListWidth < 512) {
+				return []
+			}
 			return this.currentView?.columns || []
 		},
 
diff --git a/apps/files/src/components/FilesListHeader.vue b/apps/files/src/components/FilesListHeader.vue
index 0edafb2db21..2edfb4aa30e 100644
--- a/apps/files/src/components/FilesListHeader.vue
+++ b/apps/files/src/components/FilesListHeader.vue
@@ -102,6 +102,10 @@ export default Vue.extend({
 			type: Array,
 			required: true,
 		},
+		filesListWidth: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	setup() {
@@ -123,6 +127,10 @@ export default Vue.extend({
 		},
 
 		columns() {
+			// Hide columns if the list is too small
+			if (this.filesListWidth < 512) {
+				return []
+			}
 			return this.currentView?.columns || []
 		},
 
diff --git a/apps/files/src/components/FilesListHeaderActions.vue b/apps/files/src/components/FilesListHeaderActions.vue
index 13e24ec77e6..c9f0c66be03 100644
--- a/apps/files/src/components/FilesListHeaderActions.vue
+++ b/apps/files/src/components/FilesListHeaderActions.vue
@@ -25,7 +25,7 @@
 			:disabled="!!loading || areSomeNodesLoading"
 			:force-title="true"
 			:inline="inlineActions"
-			:menu-title="inlineActions === 0 ? t('files', 'Actions') : null"
+			:menu-title="inlineActions <= 1 ? t('files', 'Actions') : null"
 			:open.sync="openedMenu">
 			<NcActionButton v-for="action in enabledActions"
 				:key="action.id"
@@ -53,7 +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 filesListWidthMixin from '../mixins/filesListWidth.ts'
 import CustomSvgIconRender from './CustomSvgIconRender.vue'
 import logger from '../logger.js'
 
@@ -71,7 +71,7 @@ export default Vue.extend({
 	},
 
 	mixins: [
-		clientWidthMixin,
+		filesListWidthMixin,
 	],
 
 	props: {
@@ -130,10 +130,13 @@ export default Vue.extend({
 		},
 
 		inlineActions() {
-			if (this.clientWidth < 480) {
+			if (this.filesListWidth < 512) {
+				return 0
+			}
+			if (this.filesListWidth < 768) {
 				return 1
 			}
-			if (this.clientWidth < 768) {
+			if (this.filesListWidth < 1024) {
 				return 2
 			}
 			return 3
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index b590621c5b0..ad0ba2069ff 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -36,6 +36,7 @@
 			<FileEntry :active="active"
 				:index="index"
 				:is-size-available="isSizeAvailable"
+				:files-list-width="filesListWidth"
 				:nodes="nodes"
 				:source="item" />
 		</template>
@@ -48,12 +49,17 @@
 			</caption>
 
 			<!-- Thead-->
-			<FilesListHeader :is-size-available="isSizeAvailable" :nodes="nodes" />
+			<FilesListHeader :files-list-width="filesListWidth"
+				:is-size-available="isSizeAvailable"
+				:nodes="nodes" />
 		</template>
 
 		<template #after>
 			<!-- Tfoot-->
-			<FilesListFooter :is-size-available="isSizeAvailable" :nodes="nodes" :summary="summary" />
+			<FilesListFooter :files-list-width="filesListWidth"
+				:is-size-available="isSizeAvailable"
+				:nodes="nodes"
+				:summary="summary" />
 		</template>
 	</RecycleScroller>
 </template>
@@ -66,6 +72,7 @@ import Vue from 'vue'
 import FileEntry from './FileEntry.vue'
 import FilesListFooter from './FilesListFooter.vue'
 import FilesListHeader from './FilesListHeader.vue'
+import filesListWidthMixin from '../mixins/filesListWidth.ts'
 
 export default Vue.extend({
 	name: 'FilesListVirtual',
@@ -77,6 +84,10 @@ export default Vue.extend({
 		FilesListFooter,
 	},
 
+	mixins: [
+		filesListWidthMixin,
+	],
+
 	props: {
 		currentView: {
 			type: Object,
@@ -111,6 +122,10 @@ export default Vue.extend({
 			return translate('files', '{summaryFile} and {summaryFolder}', this)
 		},
 		isSizeAvailable() {
+			// Hide size column on narrow screens
+			if (this.filesListWidth < 768) {
+				return false
+			}
 			return this.nodes.some(node => node.attributes.size !== undefined)
 		},
 	},
@@ -318,22 +333,6 @@ 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>
diff --git a/apps/files/src/mixins/clientWidth.ts b/apps/files/src/mixins/filesListWidth.ts
index ffbf21d0963..a2bb6b486bc 100644
--- a/apps/files/src/mixins/clientWidth.ts
+++ b/apps/files/src/mixins/filesListWidth.ts
@@ -25,19 +25,19 @@ import Vue from 'vue'
 export default Vue.extend({
 	data() {
 		return {
-			clientWidth: null as number | null,
+			filesListWidth: null as number | null,
 		}
 	},
 	created() {
-		window.addEventListener('resize', this.handleWindowResize)
-		this.handleWindowResize()
+		const fileListEl = document.querySelector('#app-content-vue')
+		this.$resizeObserver = new ResizeObserver((entries) => {
+			if (entries.length > 0 && entries[0].target === fileListEl) {
+				this.filesListWidth = entries[0].contentRect.width
+			}
+		})
+		this.$resizeObserver.observe(fileListEl as Element)
 	},
 	beforeDestroy() {
-		window.removeEventListener('resize', this.handleWindowResize)
-	},
-	methods: {
-		handleWindowResize() {
-			this.clientWidth = document.documentElement.clientWidth
-		},
+		this.$resizeObserver.disconnect()
 	},
 })