feat(files): add grid toggle button

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

apps/files/lib/Service/UserConfig.php

@@ -47,6 +47,12 @@ class UserConfig {
 			'default' => true,
 			'allowed' => [true, false],
 		],
+		[
+			// Whether to show the files list in grid view or not
+			'key' => 'grid_view',
+			'default' => false,
+			'allowed' => [true, false],
+		],
 	];
 
 	protected IConfig $config;

apps/files/src/components/FilesListVirtual.vue

@@ -31,7 +31,7 @@
 			:data-component="FileEntry"
 			:data-key="'source'"
 			:data-sources="nodes"
-			:grid-mode="false"
+			:grid-mode="userConfig.grid_view"
 			:extra-props="{
 				isMtimeAvailable,
 				isSizeAvailable,
@@ -79,8 +79,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from 'vue'
 import type { Node as NcNode } from '@nextcloud/files'
+import type { PropType } from 'vue'
+import type { UserConfig } from '../types.ts'
 
 import { Fragment } from 'vue-frag'
 import { getFileListHeaders, Folder, View, Permission } from '@nextcloud/files'
@@ -89,6 +90,7 @@ import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import Vue from 'vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
+import { useUserConfigStore } from '../store/userconfig.ts'
 import DragAndDropNotice from './DragAndDropNotice.vue'
 import FileEntry from './FileEntryGrid.vue'
 import FilesListHeader from './FilesListHeader.vue'
@@ -129,6 +131,13 @@ export default Vue.extend({
 		},
 	},
 
+	setup() {
+		const userConfigStore = useUserConfigStore()
+		return {
+			userConfigStore,
+		}
+	},
+
 	data() {
 		return {
 			FileEntry,
@@ -140,6 +149,10 @@ export default Vue.extend({
 	},
 
 	computed: {
+		userConfig(): UserConfig {
+			return this.userConfigStore.userConfig
+		},
+
 		files() {
 			return this.nodes.filter(node => node.type === 'file')
 		},

apps/files/src/store/userconfig.ts

@@ -31,6 +31,7 @@ const userConfig = loadState('files', 'config', {
 	show_hidden: false,
 	crop_image_previews: true,
 	sort_favorites_first: true,
+	grid_view: false,
 }) as UserConfig
 
 export const useUserConfigStore = function(...args) {

apps/files/src/views/FilesList.vue

@@ -46,6 +46,17 @@
 				</template>
 			</BreadCrumbs>
 
+			<NcButton :aria-label="gridViewButtonLabel"
+				:title="gridViewButtonLabel"
+				class="files-list__header-grid-button"
+				type="tertiary"
+				@click="toggleGridView">
+				<template #icon>
+					<ListViewIcon v-if="userConfig.grid_view" />
+					<ViewGridIcon v-else />
+				</template>
+			</NcButton>
+
 			<!-- Secondary loading indicator -->
 			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
 		</div>
@@ -99,13 +110,15 @@ import { Type } from '@nextcloud/sharing'
 import { UploadPicker } from '@nextcloud/upload'
 import Vue from 'vue'
 
+import LinkIcon from 'vue-material-design-icons/Link.vue'
+import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import LinkIcon from 'vue-material-design-icons/Link.vue'
 import ShareVariantIcon from 'vue-material-design-icons/ShareVariant.vue'
+import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
 import { useFilesStore } from '../store/files.ts'
@@ -128,6 +141,7 @@ export default Vue.extend({
 		BreadCrumbs,
 		FilesListVirtual,
 		LinkIcon,
+		ListViewIcon,
 		NcAppContent,
 		NcButton,
 		NcEmptyContent,
@@ -135,6 +149,7 @@ export default Vue.extend({
 		NcLoadingIcon,
 		ShareVariantIcon,
 		UploadPicker,
+		ViewGridIcon,
 	},
 
 	mixins: [
@@ -296,6 +311,12 @@ export default Vue.extend({
 			return Type.SHARE_TYPE_USER
 		},
 
+		gridViewButtonLabel() {
+			return this.userConfig.grid_view
+				? this.t('files', 'Switch to list view')
+				: this.t('files', 'Switch to grid view')
+		},
+
 		canUpload() {
 			return this.currentFolder && (this.currentFolder.permissions & Permission.CREATE) !== 0
 		},
@@ -430,6 +451,10 @@ export default Vue.extend({
 			sidebarAction.exec(this.currentFolder, this.currentView, this.currentFolder.path)
 		},
 
+		toggleGridView() {
+			this.userConfigStore.update('grid_view', !this.userConfig.grid_view)
+		},
+
 		t: translate,
 		n: translatePlural,
 	},
@@ -452,7 +477,7 @@ $navigationToggleSize: 50px;
 .files-list {
 	&__header {
 		display: flex;
-		align-content: center;
+		align-items: center;
 		// Do not grow or shrink (vertically)
 		flex: 0 0;
 		// Align with the navigation toggle icon

apps/files/src/views/Settings.vue

@@ -38,6 +38,10 @@
 				@update:checked="setConfig('crop_image_previews', $event)">
 				{{ t('files', 'Crop image previews') }}
 			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch :checked="userConfig.grid_view"
+				@update:checked="setConfig('grid_view', $event)">
+				{{ t('files', 'Enable the grid view') }}
+			</NcCheckboxRadioSwitch>
 		</NcAppSettingsSection>
 
 		<!-- Settings API-->