aboutsummaryrefslogtreecommitdiffstats
path: root/apps/files/src
diff options
context:
space:
mode:
Diffstat (limited to 'apps/files/src')
-rw-r--r--apps/files/src/actions/deleteAction.ts2
-rw-r--r--apps/files/src/components/FileEntry.vue19
-rw-r--r--apps/files/src/components/FilesListFooter.vue11
-rw-r--r--apps/files/src/components/FilesListHeader.vue8
-rw-r--r--apps/files/src/components/FilesListHeaderActions.vue13
-rw-r--r--apps/files/src/components/FilesListVirtual.vue35
-rw-r--r--apps/files/src/components/NavigationQuota.vue13
-rw-r--r--apps/files/src/mixins/filesListWidth.ts (renamed from apps/files/src/mixins/clientWidth.ts)18
-rw-r--r--apps/files/src/store/files.ts13
-rw-r--r--apps/files/src/store/paths.ts6
10 files changed, 75 insertions, 63 deletions
diff --git a/apps/files/src/actions/deleteAction.ts b/apps/files/src/actions/deleteAction.ts
index d8ed4d35204..087884b3362 100644
--- a/apps/files/src/actions/deleteAction.ts
+++ b/apps/files/src/actions/deleteAction.ts
@@ -50,7 +50,7 @@ registerFileAction(new FileAction({
// Let's delete even if it's moved to the trashbin
// since it has been removed from the current view
// and changing the view will trigger a reload anyway.
- emit('files:file:deleted', node)
+ emit('files:node:deleted', node)
return true
} catch (error) {
logger.error('Error while deleting a file', { error, source: node.source, node })
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/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue
index bfcbaea3776..d38d4d2fd9e 100644
--- a/apps/files/src/components/NavigationQuota.vue
+++ b/apps/files/src/components/NavigationQuota.vue
@@ -80,15 +80,10 @@ export default {
*/
setInterval(this.throttleUpdateStorageStats, 60 * 1000)
- subscribe('files:file:created', this.throttleUpdateStorageStats)
- subscribe('files:file:deleted', this.throttleUpdateStorageStats)
- subscribe('files:file:moved', this.throttleUpdateStorageStats)
- subscribe('files:file:updated', this.throttleUpdateStorageStats)
-
- subscribe('files:folder:created', this.throttleUpdateStorageStats)
- subscribe('files:folder:deleted', this.throttleUpdateStorageStats)
- subscribe('files:folder:moved', this.throttleUpdateStorageStats)
- subscribe('files:folder:updated', this.throttleUpdateStorageStats)
+ subscribe('files:node:created', this.throttleUpdateStorageStats)
+ subscribe('files:node:deleted', this.throttleUpdateStorageStats)
+ subscribe('files:node:moved', this.throttleUpdateStorageStats)
+ subscribe('files:node:updated', this.throttleUpdateStorageStats)
},
methods: {
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()
},
})
diff --git a/apps/files/src/store/files.ts b/apps/files/src/store/files.ts
index d276b6bf0b7..11e4fc970a4 100644
--- a/apps/files/src/store/files.ts
+++ b/apps/files/src/store/files.ts
@@ -91,15 +91,10 @@ export const useFilesStore = () => {
const fileStore = store()
// Make sure we only register the listeners once
if (!fileStore._initialized) {
- // subscribe('files:file:created', fileStore.onCreatedNode)
- subscribe('files:file:deleted', fileStore.onDeletedNode)
- // subscribe('files:file:moved', fileStore.onMovedNode)
- // subscribe('files:file:updated', fileStore.onUpdatedNode)
-
- // subscribe('files:folder:created', fileStore.onCreatedNode)
- subscribe('files:folder:deleted', fileStore.onDeletedNode)
- // subscribe('files:folder:moved', fileStore.onMovedNode)
- // subscribe('files:folder:updated', fileStore.onUpdatedNode)
+ // subscribe('files:node:created', fileStore.onCreatedNode)
+ subscribe('files:node:deleted', fileStore.onDeletedNode)
+ // subscribe('files:node:moved', fileStore.onMovedNode)
+ // subscribe('files:node:updated', fileStore.onUpdatedNode)
fileStore._initialized = true
}
diff --git a/apps/files/src/store/paths.ts b/apps/files/src/store/paths.ts
index 28cd55be25a..bcd7375518c 100644
--- a/apps/files/src/store/paths.ts
+++ b/apps/files/src/store/paths.ts
@@ -59,9 +59,9 @@ export const usePathsStore = () => {
// Make sure we only register the listeners once
if (!pathsStore._initialized) {
// TODO: watch folders to update paths?
- // subscribe('files:folder:created', pathsStore.onCreatedNode)
- // subscribe('files:folder:deleted', pathsStore.onDeletedNode)
- // subscribe('files:folder:moved', pathsStore.onMovedNode)
+ // subscribe('files:node:created', pathsStore.onCreatedNode)
+ // subscribe('files:node:deleted', pathsStore.onDeletedNode)
+ // subscribe('files:node:moved', pathsStore.onMovedNode)
pathsStore._initialized = true
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-29 04:10:17 +0000