Skip to content

Commit 5a8d32f

Browse files
susnuxsusnux
authored
Merge pull request #49305 from nextcloud/refactor/files-filelist-width
refactor(files): Provide `useFileListWidth` composable
2 parents bdb3d63 + 91ce9c0 commit 5a8d32f

File tree

14 files changed

+158
-87
lines changed

14 files changed

+158
-87
lines changed

‎apps/files/src/components/BreadCrumbs.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
v-bind="section"
1515
dir="auto"
1616
:to="section.to"
17-
:force-icon-text="index === 0 && filesListWidth >= 486"
17+
:force-icon-text="index === 0 && fileListWidth >= 486"
1818
:title="titleForSection(index, section)"
1919
:aria-description="ariaForSection(section)"
2020
@click.native="onClick(section.to)"
@@ -46,15 +46,15 @@ import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
4646
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
4747
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
4848
49-
import { useNavigation } from '../composables/useNavigation'
50-
import { onDropInternalFiles, dataTransferToFileTree, onDropExternalFiles } from '../services/DropService'
49+
import { useNavigation } from '../composables/useNavigation.ts'
50+
import { onDropInternalFiles, dataTransferToFileTree, onDropExternalFiles } from '../services/DropService.ts'
51+
import { useFileListWidth } from '../composables/useFileListWidth.ts'
5152
import { showError } from '@nextcloud/dialogs'
5253
import { useDragAndDropStore } from '../store/dragging.ts'
5354
import { useFilesStore } from '../store/files.ts'
5455
import { usePathsStore } from '../store/paths.ts'
5556
import { useSelectionStore } from '../store/selection.ts'
5657
import { useUploaderStore } from '../store/uploader.ts'
57-
import filesListWidthMixin from '../mixins/filesListWidth.ts'
5858
import logger from '../logger'
5959
6060
export default defineComponent({
@@ -66,10 +66,6 @@ export default defineComponent({
6666
NcIconSvgWrapper,
6767
},
6868
69-
mixins: [
70-
filesListWidthMixin,
71-
],
72-
7369
props: {
7470
path: {
7571
type: String,
@@ -83,6 +79,7 @@ export default defineComponent({
8379
const pathsStore = usePathsStore()
8480
const selectionStore = useSelectionStore()
8581
const uploaderStore = useUploaderStore()
82+
const fileListWidth = useFileListWidth()
8683
const { currentView, views } = useNavigation()
8784
8885
return {
@@ -93,6 +90,7 @@ export default defineComponent({
9390
uploaderStore,
9491
9592
currentView,
93+
fileListWidth,
9694
views,
9795
}
9896
},
@@ -129,7 +127,7 @@ export default defineComponent({
129127
wrapUploadProgressBar(): boolean {
130128
// if an upload is ongoing, and on small screens / mobile, then
131129
// show the progress bar for the upload below breadcrumbs
132-
return this.isUploadInProgress && this.filesListWidth < 512
130+
return this.isUploadInProgress && this.fileListWidth < 512
133131
},
134132
135133
// used to show the views icon for the first breadcrumb

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
<FileEntryName ref="name"
3737
:basename="basename"
3838
:extension="extension"
39-
:files-list-width="filesListWidth"
4039
:nodes="nodes"
4140
:source="source"
4241
@auxclick.native="execDefaultAction"
@@ -47,7 +46,6 @@
4746
<FileEntryActions v-show="!isRenamingSmallScreen"
4847
ref="actions"
4948
:class="`files-list__row-actions-${uniqueId}`"
50-
:files-list-width="filesListWidth"
5149
:loading.sync="loading"
5250
:opened.sync="openedMenu"
5351
:source="source" />
@@ -91,6 +89,7 @@ import { formatFileSize } from '@nextcloud/files'
9189
import moment from '@nextcloud/moment'
9290
9391
import { useNavigation } from '../composables/useNavigation.ts'
92+
import { useFileListWidth } from '../composables/useFileListWidth.ts'
9493
import { useRouteParameters } from '../composables/useRouteParameters.ts'
9594
import { useActionsMenuStore } from '../store/actionsmenu.ts'
9695
import { useDragAndDropStore } from '../store/dragging.ts'
@@ -135,6 +134,7 @@ export default defineComponent({
135134
const filesStore = useFilesStore()
136135
const renamingStore = useRenamingStore()
137136
const selectionStore = useSelectionStore()
137+
const filesListWidth = useFileListWidth()
138138
// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
139139
const { currentView } = useNavigation(true)
140140
const {
@@ -152,6 +152,7 @@ export default defineComponent({
152152
currentDir,
153153
currentFileId,
154154
currentView,
155+
filesListWidth,
155156
}
156157
},
157158

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
9494
import CustomElementRender from '../CustomElementRender.vue'
9595
9696
import { useNavigation } from '../../composables/useNavigation'
97+
import { useFileListWidth } from '../../composables/useFileListWidth.ts'
9798
import logger from '../../logger.ts'
9899
99100
export default defineComponent({
@@ -110,10 +111,6 @@ export default defineComponent({
110111
},
111112
112113
props: {
113-
filesListWidth: {
114-
type: Number,
115-
required: true,
116-
},
117114
loading: {
118115
type: String,
119116
required: true,
@@ -135,11 +132,14 @@ export default defineComponent({
135132
setup() {
136133
// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
137134
const { currentView } = useNavigation(true)
135+
136+
const filesListWidth = useFileListWidth()
138137
const enabledFileActions = inject<FileAction[]>('enabledFileActions', [])
139138
140139
return {
141140
currentView,
142141
enabledFileActions,
142+
filesListWidth,
143143
}
144144
},
145145

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { defineComponent, inject } from 'vue'
4848
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
4949
5050
import { useNavigation } from '../../composables/useNavigation'
51+
import { useFileListWidth } from '../../composables/useFileListWidth.ts'
5152
import { useRouteParameters } from '../../composables/useRouteParameters.ts'
5253
import { useRenamingStore } from '../../store/renaming.ts'
5354
import { getFilenameValidity } from '../../utils/filenameValidity.ts'
@@ -75,10 +76,6 @@ export default defineComponent({
7576
type: String,
7677
required: true,
7778
},
78-
filesListWidth: {
79-
type: Number,
80-
required: true,
81-
},
8279
nodes: {
8380
type: Array as PropType<Node[]>,
8481
required: true,
@@ -97,6 +94,7 @@ export default defineComponent({
9794
// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
9895
const { currentView } = useNavigation(true)
9996
const { directory } = useRouteParameters()
97+
const filesListWidth = useFileListWidth()
10098
const renamingStore = useRenamingStore()
10199
102100
const defaultFileAction = inject<FileAction | undefined>('defaultFileAction')
@@ -105,6 +103,7 @@ export default defineComponent({
105103
currentView,
106104
defaultFileAction,
107105
directory,
106+
filesListWidth,
108107
109108
renamingStore,
110109
}

‎apps/files/src/components/FileEntryGrid.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
<FileEntryName ref="name"
3939
:basename="basename"
4040
:extension="extension"
41-
:files-list-width="filesListWidth"
4241
:grid-mode="true"
4342
:nodes="nodes"
4443
:source="source"
@@ -58,7 +57,6 @@
5857
<!-- Actions -->
5958
<FileEntryActions ref="actions"
6059
:class="`files-list__row-actions-${uniqueId}`"
61-
:files-list-width="filesListWidth"
6260
:grid-mode="true"
6361
:loading.sync="loading"
6462
:opened.sync="openedMenu"

‎apps/files/src/components/FilesListTableHeaderActions.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js
4343
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
4444
4545
import { useRouteParameters } from '../composables/useRouteParameters.ts'
46+
import { useFileListWidth } from '../composables/useFileListWidth.ts'
4647
import { useActionsMenuStore } from '../store/actionsmenu.ts'
4748
import { useFilesStore } from '../store/files.ts'
4849
import { useSelectionStore } from '../store/selection.ts'
49-
import filesListWidthMixin from '../mixins/filesListWidth.ts'
5050
import logger from '../logger.ts'
5151
5252
// The registered actions list
@@ -62,10 +62,6 @@ export default defineComponent({
6262
NcLoadingIcon,
6363
},
6464
65-
mixins: [
66-
filesListWidthMixin,
67-
],
68-
6965
props: {
7066
currentView: {
7167
type: Object as PropType<View>,
@@ -81,10 +77,12 @@ export default defineComponent({
8177
const actionsMenuStore = useActionsMenuStore()
8278
const filesStore = useFilesStore()
8379
const selectionStore = useSelectionStore()
80+
const fileListWidth = useFileListWidth()
8481
const { directory } = useRouteParameters()
8582
8683
return {
8784
directory,
85+
fileListWidth,
8886
8987
actionsMenuStore,
9088
filesStore,
@@ -126,13 +124,13 @@ export default defineComponent({
126124
},
127125
128126
inlineActions() {
129-
if (this.filesListWidth < 512) {
127+
if (this.fileListWidth < 512) {
130128
return 0
131129
}
132-
if (this.filesListWidth < 768) {
130+
if (this.fileListWidth < 768) {
133131
return 1
134132
}
135-
if (this.filesListWidth < 1024) {
133+
if (this.fileListWidth < 1024) {
136134
return 2
137135
}
138136
return 3

‎apps/files/src/components/FilesListVirtual.vue‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
isMtimeAvailable,
1313
isSizeAvailable,
1414
nodes,
15-
filesListWidth,
15+
fileListWidth,
1616
}"
1717
:scroll-to-index="scrollToIndex"
1818
:caption="caption">
@@ -39,7 +39,7 @@
3939
<template #header>
4040
<!-- Table header and sort buttons -->
4141
<FilesListTableHeader ref="thead"
42-
:files-list-width="filesListWidth"
42+
:files-list-width="fileListWidth"
4343
:is-mtime-available="isMtimeAvailable"
4444
:is-size-available="isSizeAvailable"
4545
:nodes="nodes" />
@@ -48,7 +48,7 @@
4848
<!-- Tfoot-->
4949
<template #footer>
5050
<FilesListTableFooter :current-view="currentView"
51-
:files-list-width="filesListWidth"
51+
:files-list-width="fileListWidth"
5252
:is-mtime-available="isMtimeAvailable"
5353
:is-size-available="isSizeAvailable"
5454
:nodes="nodes"
@@ -69,6 +69,7 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
6969
import { defineComponent } from 'vue'
7070
7171
import { action as sidebarAction } from '../actions/sidebarAction.ts'
72+
import { useFileListWidth } from '../composables/useFileListWidth.ts'
7273
import { useRouteParameters } from '../composables/useRouteParameters.ts'
7374
import { getSummaryFor } from '../utils/fileUtils'
7475
import { useSelectionStore } from '../store/selection.js'
@@ -79,7 +80,6 @@ import FileEntryGrid from './FileEntryGrid.vue'
7980
import FilesListHeader from './FilesListHeader.vue'
8081
import FilesListTableFooter from './FilesListTableFooter.vue'
8182
import FilesListTableHeader from './FilesListTableHeader.vue'
82-
import filesListWidthMixin from '../mixins/filesListWidth.ts'
8383
import VirtualList from './VirtualList.vue'
8484
import logger from '../logger.ts'
8585
import FilesListTableHeaderActions from './FilesListTableHeaderActions.vue'
@@ -97,10 +97,6 @@ export default defineComponent({
9797
FilesListTableHeaderActions,
9898
},
9999
100-
mixins: [
101-
filesListWidthMixin,
102-
],
103-
104100
props: {
105101
currentView: {
106102
type: View,
@@ -119,10 +115,12 @@ export default defineComponent({
119115
setup() {
120116
const userConfigStore = useUserConfigStore()
121117
const selectionStore = useSelectionStore()
118+
const fileListWidth = useFileListWidth()
122119
const { fileId, openFile } = useRouteParameters()
123120
124121
return {
125122
fileId,
123+
fileListWidth,
126124
openFile,
127125
128126
userConfigStore,
@@ -151,14 +149,14 @@ export default defineComponent({
151149
152150
isMtimeAvailable() {
153151
// Hide mtime column on narrow screens
154-
if (this.filesListWidth < 768) {
152+
if (this.fileListWidth < 768) {
155153
return false
156154
}
157155
return this.nodes.some(node => node.mtime !== undefined)
158156
},
159157
isSizeAvailable() {
160158
// Hide size column on narrow screens
161-
if (this.filesListWidth < 768) {
159+
if (this.fileListWidth < 768) {
162160
return false
163161
}
164162
return this.nodes.some(node => node.size !== undefined)

‎apps/files/src/components/VirtualList.vue‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,9 @@
5555
import type { File, Folder, Node } from '@nextcloud/files'
5656
import type { PropType } from 'vue'
5757
58+
import { useFileListWidth } from '../composables/useFileListWidth.ts'
59+
import { defineComponent } from 'vue'
5860
import debounce from 'debounce'
59-
import Vue from 'vue'
60-
61-
import filesListWidthMixin from '../mixins/filesListWidth.ts'
6261
import logger from '../logger.ts'
6362
6463
interface RecycledPoolItem {
@@ -70,11 +69,9 @@ type DataSource = File | Folder
7069
7170
type DataSourceKey = keyof DataSource
7271
73-
export default Vue.extend({
72+
export default defineComponent({
7473
name: 'VirtualList',
7574
76-
mixins: [filesListWidthMixin],
77-
7875
props: {
7976
dataComponent: {
8077
type: [Object, Function],
@@ -101,14 +98,22 @@ export default Vue.extend({
10198
default: false,
10299
},
103100
/**
104-
* Visually hidden caption for the table accesibility
101+
* Visually hidden caption for the table accessibility
105102
*/
106103
caption: {
107104
type: String,
108105
default: '',
109106
},
110107
},
111108
109+
setup() {
110+
const fileListWidth = useFileListWidth()
111+
112+
return {
113+
fileListWidth,
114+
}
115+
},
116+
112117
data() {
113118
return {
114119
index: this.scrollToIndex,
@@ -151,7 +156,7 @@ export default Vue.extend({
151156
if (!this.gridMode) {
152157
return 1
153158
}
154-
return Math.floor(this.filesListWidth / this.itemWidth)
159+
return Math.floor(this.fileListWidth / this.itemWidth)
155160
},
156161
157162
/**

0 commit comments

Comments
 (0)