diff options
author | John Molakvoæ <skjnldsv@protonmail.com> | 2023-10-14 16:08:53 +0200 |
---|---|---|
committer | John Molakvoæ <skjnldsv@protonmail.com> | 2023-10-17 11:19:02 +0200 |
commit | 116c396f0e947c765ce6d512c16c037eb960f31e (patch) | |
tree | 8c37c153db302cb3b42b54f9408465c16388ec9a /apps | |
parent | c4b8abd343bab47cff241b2746f8e81e004d6041 (diff) | |
download | nextcloud-server-116c396f0e947c765ce6d512c16c037eb960f31e.tar.gz nextcloud-server-116c396f0e947c765ce6d512c16c037eb960f31e.zip |
feat(files): add grid toggle button
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Diffstat (limited to 'apps')
-rw-r--r-- | apps/files/lib/Service/UserConfig.php | 6 | ||||
-rw-r--r-- | apps/files/src/components/FilesListVirtual.vue | 17 | ||||
-rw-r--r-- | apps/files/src/store/userconfig.ts | 1 | ||||
-rw-r--r-- | apps/files/src/views/FilesList.vue | 29 | ||||
-rw-r--r-- | apps/files/src/views/Settings.vue | 4 |
5 files changed, 53 insertions, 4 deletions
diff --git a/apps/files/lib/Service/UserConfig.php b/apps/files/lib/Service/UserConfig.php index c39719ae8ed..be32dce0d63 100644 --- a/apps/files/lib/Service/UserConfig.php +++ b/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; diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index e4c9694eda7..77c8dc6ea02 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/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') }, diff --git a/apps/files/src/store/userconfig.ts b/apps/files/src/store/userconfig.ts index 42530a3b54d..cbd3f71600a 100644 --- a/apps/files/src/store/userconfig.ts +++ b/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) { diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue index a7bb55fb2cd..f7c648fcd2e 100644 --- a/apps/files/src/views/FilesList.vue +++ b/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 diff --git a/apps/files/src/views/Settings.vue b/apps/files/src/views/Settings.vue index 957b26b30dc..1241b063dcf 100644 --- a/apps/files/src/views/Settings.vue +++ b/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--> |