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>

1 files changed, 11 insertions, 8 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
 			}