feat(files): grid view

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
nextcloud · Oct 14, 2023 · a495933 · a495933
1 parent 5c4024b
commit a495933
Show file tree

Hide file tree

Showing 8 changed files with 604 additions and 66 deletions.
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
@@ -71,7 +71,7 @@
 			:visible="visible" />
 
 		<!-- Size -->
-		<td v-if="isSizeAvailable"
+		<td v-if="!compact && isSizeAvailable"
 			:style="sizeOpacity"
 			class="files-list__row-size"
 			data-cy-files-list-row-size
@@ -80,7 +80,7 @@
 		</td>
 
 		<!-- Mtime -->
-		<td v-if="isMtimeAvailable"
+		<td v-if="!compact && isMtimeAvailable"
 			:style="mtimeOpacity"
 			class="files-list__row-mtime"
 			data-cy-files-list-row-mtime
@@ -170,6 +170,10 @@ export default Vue.extend({
 			type: Number,
 			default: 0,
 		},
+		compact: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup() {
@@ -200,7 +204,7 @@ export default Vue.extend({
 		},
 		columns() {
 			// Hide columns if the list is too small
-			if (this.filesListWidth < 512) {
+			if (this.filesListWidth < 512 || this.compact) {
 				return []
 			}
 			return this.currentView?.columns || []
@@ -513,27 +517,3 @@ export default Vue.extend({
 	},
 })
 </script>
-
-<style scoped lang='scss'>
-/* Hover effect on tbody lines only */
-tr {
-	&:hover,
-	&:focus {
-		background-color: var(--color-background-dark);
-	}
-}
-</style>
-
-<style>
-/* @keyframes preview-gradient-fade {
-    0% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
-    }
-    100% {
-        opacity: 1;
-    }
-} */
-</style>
diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -105,6 +105,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		gridMode: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup() {
@@ -137,15 +141,15 @@ export default Vue.extend({
 
 		// Enabled action that are displayed inline
 		enabledInlineActions() {
-			if (this.filesListWidth < 768) {
+			if (this.filesListWidth < 768 || this.gridMode) {
 				return []
 			}
 			return this.enabledActions.filter(action => action?.inline?.(this.source, this.currentView))
 		},
 
 		// Enabled action that are displayed inline with a custom render function
 		enabledRenderActions() {
-			if (!this.visible) {
+			if (!this.visible || this.gridMode) {
 				return []
 			}
 			return this.enabledActions.filter(action => typeof action.renderInline === 'function')

diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -23,7 +23,6 @@
 	<!-- Rename input -->
 	<form v-if="isRenaming"
 		v-on-click-outside="stopRenaming"
-		:aria-hidden="!isRenaming"
 		:aria-label="t('files', 'Rename file')"
 		class="files-list__row-rename"
 		@submit.prevent.stop="onRename">
@@ -98,6 +97,10 @@ export default Vue.extend({
 			type: Object as PropType<Node>,
 			required: true,
 		},
+		gridMode: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup() {

diff --git a/apps/files/src/components/FileEntry/FileEntryPreview.vue b/apps/files/src/components/FileEntry/FileEntryPreview.vue
@@ -99,6 +99,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		gridMode: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup() {
@@ -146,8 +150,8 @@ export default Vue.extend({
 				const url = new URL(window.location.origin + previewUrl)
 
 				// Request tiny previews
-				url.searchParams.set('x', '32')
-				url.searchParams.set('y', '32')
+				url.searchParams.set('x', this.gridMode ? '128' : '32')
+				url.searchParams.set('y', this.gridMode ? '128' : '32')
 				url.searchParams.set('mimeFallback', 'true')
 
 				// Handle cropping