Merge pull request #49305 from nextcloud/refactor/files-filelist-width

refactor(files): Provide `useFileListWidth` composable

apps/files/src/components/BreadCrumbs.vue

@@ -14,7 +14,7 @@
 			v-bind="section"
 			dir="auto"
 			:to="section.to"
-			:force-icon-text="index === 0 && filesListWidth >= 486"
+			:force-icon-text="index === 0 && fileListWidth >= 486"
 			:title="titleForSection(index, section)"
 			:aria-description="ariaForSection(section)"
 			@click.native="onClick(section.to)"
@@ -46,15 +46,15 @@ import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
-import { useNavigation } from '../composables/useNavigation'
-import { onDropInternalFiles, dataTransferToFileTree, onDropExternalFiles } from '../services/DropService'
+import { useNavigation } from '../composables/useNavigation.ts'
+import { onDropInternalFiles, dataTransferToFileTree, onDropExternalFiles } from '../services/DropService.ts'
+import { useFileListWidth } from '../composables/useFileListWidth.ts'
 import { showError } from '@nextcloud/dialogs'
 import { useDragAndDropStore } from '../store/dragging.ts'
 import { useFilesStore } from '../store/files.ts'
 import { usePathsStore } from '../store/paths.ts'
 import { useSelectionStore } from '../store/selection.ts'
 import { useUploaderStore } from '../store/uploader.ts'
-import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import logger from '../logger'
 
 export default defineComponent({
@@ -66,10 +66,6 @@ export default defineComponent({
 		NcIconSvgWrapper,
 	},
 
-	mixins: [
-		filesListWidthMixin,
-	],
-
 	props: {
 		path: {
 			type: String,
@@ -83,6 +79,7 @@ export default defineComponent({
 		const pathsStore = usePathsStore()
 		const selectionStore = useSelectionStore()
 		const uploaderStore = useUploaderStore()
+		const fileListWidth = useFileListWidth()
 		const { currentView, views } = useNavigation()
 
 		return {
@@ -93,6 +90,7 @@ export default defineComponent({
 			uploaderStore,
 
 			currentView,
+			fileListWidth,
 			views,
 		}
 	},
@@ -129,7 +127,7 @@ export default defineComponent({
 		wrapUploadProgressBar(): boolean {
 			// if an upload is ongoing, and on small screens / mobile, then
 			// show the progress bar for the upload below breadcrumbs
-			return this.isUploadInProgress && this.filesListWidth < 512
+			return this.isUploadInProgress && this.fileListWidth < 512
 		},
 
 		// used to show the views icon for the first breadcrumb

apps/files/src/components/FileEntry.vue

@@ -36,7 +36,6 @@
 			<FileEntryName ref="name"
 				:basename="basename"
 				:extension="extension"
-				:files-list-width="filesListWidth"
 				:nodes="nodes"
 				:source="source"
 				@auxclick.native="execDefaultAction"
@@ -47,7 +46,6 @@
 		<FileEntryActions v-show="!isRenamingSmallScreen"
 			ref="actions"
 			:class="`files-list__row-actions-${uniqueId}`"
-			:files-list-width="filesListWidth"
 			:loading.sync="loading"
 			:opened.sync="openedMenu"
 			:source="source" />
@@ -91,6 +89,7 @@ import { formatFileSize } from '@nextcloud/files'
 import moment from '@nextcloud/moment'
 
 import { useNavigation } from '../composables/useNavigation.ts'
+import { useFileListWidth } from '../composables/useFileListWidth.ts'
 import { useRouteParameters } from '../composables/useRouteParameters.ts'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useDragAndDropStore } from '../store/dragging.ts'
@@ -135,6 +134,7 @@ export default defineComponent({
 		const filesStore = useFilesStore()
 		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
+		const filesListWidth = useFileListWidth()
 		// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
 		const { currentView } = useNavigation(true)
 		const {
@@ -152,6 +152,7 @@ export default defineComponent({
 			currentDir,
 			currentFileId,
 			currentView,
+			filesListWidth,
 		}
 	},
 

apps/files/src/components/FileEntry/FileEntryActions.vue

@@ -94,6 +94,7 @@ import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
 import CustomElementRender from '../CustomElementRender.vue'
 
 import { useNavigation } from '../../composables/useNavigation'
+import { useFileListWidth } from '../../composables/useFileListWidth.ts'
 import logger from '../../logger.ts'
 
 export default defineComponent({
@@ -110,10 +111,6 @@ export default defineComponent({
 	},
 
 	props: {
-		filesListWidth: {
-			type: Number,
-			required: true,
-		},
 		loading: {
 			type: String,
 			required: true,
@@ -135,11 +132,14 @@ export default defineComponent({
 	setup() {
 		// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
 		const { currentView } = useNavigation(true)
+
+		const filesListWidth = useFileListWidth()
 		const enabledFileActions = inject<FileAction[]>('enabledFileActions', [])
 
 		return {
 			currentView,
 			enabledFileActions,
+			filesListWidth,
 		}
 	},
 

apps/files/src/components/FileEntry/FileEntryName.vue

@@ -48,6 +48,7 @@ import { defineComponent, inject } from 'vue'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import { useNavigation } from '../../composables/useNavigation'
+import { useFileListWidth } from '../../composables/useFileListWidth.ts'
 import { useRouteParameters } from '../../composables/useRouteParameters.ts'
 import { useRenamingStore } from '../../store/renaming.ts'
 import { getFilenameValidity } from '../../utils/filenameValidity.ts'
@@ -75,10 +76,6 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
-		filesListWidth: {
-			type: Number,
-			required: true,
-		},
 		nodes: {
 			type: Array as PropType<Node[]>,
 			required: true,
@@ -97,6 +94,7 @@ export default defineComponent({
 		// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
 		const { currentView } = useNavigation(true)
 		const { directory } = useRouteParameters()
+		const filesListWidth = useFileListWidth()
 		const renamingStore = useRenamingStore()
 
 		const defaultFileAction = inject<FileAction | undefined>('defaultFileAction')
@@ -105,6 +103,7 @@ export default defineComponent({
 			currentView,
 			defaultFileAction,
 			directory,
+			filesListWidth,
 
 			renamingStore,
 		}

apps/files/src/components/FileEntryGrid.vue

@@ -38,7 +38,6 @@
 			<FileEntryName ref="name"
 				:basename="basename"
 				:extension="extension"
-				:files-list-width="filesListWidth"
 				:grid-mode="true"
 				:nodes="nodes"
 				:source="source"
@@ -58,7 +57,6 @@
 		<!-- Actions -->
 		<FileEntryActions ref="actions"
 			:class="`files-list__row-actions-${uniqueId}`"
-			:files-list-width="filesListWidth"
 			:grid-mode="true"
 			:loading.sync="loading"
 			:opened.sync="openedMenu"

apps/files/src/components/FilesListTableHeaderActions.vue

@@ -43,10 +43,10 @@ import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import { useRouteParameters } from '../composables/useRouteParameters.ts'
+import { useFileListWidth } from '../composables/useFileListWidth.ts'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
-import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import logger from '../logger.ts'
 
 // The registered actions list
@@ -62,10 +62,6 @@ export default defineComponent({
 		NcLoadingIcon,
 	},
 
-	mixins: [
-		filesListWidthMixin,
-	],
-
 	props: {
 		currentView: {
 			type: Object as PropType<View>,
@@ -81,10 +77,12 @@ export default defineComponent({
 		const actionsMenuStore = useActionsMenuStore()
 		const filesStore = useFilesStore()
 		const selectionStore = useSelectionStore()
+		const fileListWidth = useFileListWidth()
 		const { directory } = useRouteParameters()
 
 		return {
 			directory,
+			fileListWidth,
 
 			actionsMenuStore,
 			filesStore,
@@ -126,13 +124,13 @@ export default defineComponent({
 		},
 
 		inlineActions() {
-			if (this.filesListWidth < 512) {
+			if (this.fileListWidth < 512) {
 				return 0
 			}
-			if (this.filesListWidth < 768) {
+			if (this.fileListWidth < 768) {
 				return 1
 			}
-			if (this.filesListWidth < 1024) {
+			if (this.fileListWidth < 1024) {
 				return 2
 			}
 			return 3

apps/files/src/components/FilesListVirtual.vue

@@ -12,7 +12,7 @@
 			isMtimeAvailable,
 			isSizeAvailable,
 			nodes,
-			filesListWidth,
+			fileListWidth,
 		}"
 		:scroll-to-index="scrollToIndex"
 		:caption="caption">
@@ -39,7 +39,7 @@
 		<template #header>
 			<!-- Table header and sort buttons -->
 			<FilesListTableHeader ref="thead"
-				:files-list-width="filesListWidth"
+				:files-list-width="fileListWidth"
 				:is-mtime-available="isMtimeAvailable"
 				:is-size-available="isSizeAvailable"
 				:nodes="nodes" />
@@ -48,7 +48,7 @@
 		<!-- Tfoot-->
 		<template #footer>
 			<FilesListTableFooter :current-view="currentView"
-				:files-list-width="filesListWidth"
+				:files-list-width="fileListWidth"
 				:is-mtime-available="isMtimeAvailable"
 				:is-size-available="isSizeAvailable"
 				:nodes="nodes"
@@ -69,6 +69,7 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { defineComponent } from 'vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
+import { useFileListWidth } from '../composables/useFileListWidth.ts'
 import { useRouteParameters } from '../composables/useRouteParameters.ts'
 import { getSummaryFor } from '../utils/fileUtils'
 import { useSelectionStore } from '../store/selection.js'
@@ -79,7 +80,6 @@ import FileEntryGrid from './FileEntryGrid.vue'
 import FilesListHeader from './FilesListHeader.vue'
 import FilesListTableFooter from './FilesListTableFooter.vue'
 import FilesListTableHeader from './FilesListTableHeader.vue'
-import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import VirtualList from './VirtualList.vue'
 import logger from '../logger.ts'
 import FilesListTableHeaderActions from './FilesListTableHeaderActions.vue'
@@ -97,10 +97,6 @@ export default defineComponent({
 		FilesListTableHeaderActions,
 	},
 
-	mixins: [
-		filesListWidthMixin,
-	],
-
 	props: {
 		currentView: {
 			type: View,
@@ -119,10 +115,12 @@ export default defineComponent({
 	setup() {
 		const userConfigStore = useUserConfigStore()
 		const selectionStore = useSelectionStore()
+		const fileListWidth = useFileListWidth()
 		const { fileId, openFile } = useRouteParameters()
 
 		return {
 			fileId,
+			fileListWidth,
 			openFile,
 
 			userConfigStore,
@@ -151,14 +149,14 @@ export default defineComponent({
 
 		isMtimeAvailable() {
 			// Hide mtime column on narrow screens
-			if (this.filesListWidth < 768) {
+			if (this.fileListWidth < 768) {
 				return false
 			}
 			return this.nodes.some(node => node.mtime !== undefined)
 		},
 		isSizeAvailable() {
 			// Hide size column on narrow screens
-			if (this.filesListWidth < 768) {
+			if (this.fileListWidth < 768) {
 				return false
 			}
 			return this.nodes.some(node => node.size !== undefined)

apps/files/src/components/VirtualList.vue

@@ -55,10 +55,9 @@
 import type { File, Folder, Node } from '@nextcloud/files'
 import type { PropType } from 'vue'
 
+import { useFileListWidth } from '../composables/useFileListWidth.ts'
+import { defineComponent } from 'vue'
 import debounce from 'debounce'
-import Vue from 'vue'
-
-import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import logger from '../logger.ts'
 
 interface RecycledPoolItem {
@@ -70,11 +69,9 @@ type DataSource = File | Folder
 
 type DataSourceKey = keyof DataSource
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'VirtualList',
 
-	mixins: [filesListWidthMixin],
-
 	props: {
 		dataComponent: {
 			type: [Object, Function],
@@ -101,14 +98,22 @@ export default Vue.extend({
 			default: false,
 		},
 		/**
-		 * Visually hidden caption for the table accesibility
+		 * Visually hidden caption for the table accessibility
 		 */
 		caption: {
 			type: String,
 			default: '',
 		},
 	},
 
+	setup() {
+		const fileListWidth = useFileListWidth()
+
+		return {
+			fileListWidth,
+		}
+	},
+
 	data() {
 		return {
 			index: this.scrollToIndex,
@@ -151,7 +156,7 @@ export default Vue.extend({
 			if (!this.gridMode) {
 				return 1
 			}
-			return Math.floor(this.filesListWidth / this.itemWidth)
+			return Math.floor(this.fileListWidth / this.itemWidth)
 		},
 
 		/**