aboutsummaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
authorJohn Molakvoæ <skjnldsv@protonmail.com>2023-10-14 16:08:53 +0200
committerJohn Molakvoæ <skjnldsv@protonmail.com>2023-10-17 11:19:02 +0200
commit116c396f0e947c765ce6d512c16c037eb960f31e (patch)
tree8c37c153db302cb3b42b54f9408465c16388ec9a /apps
parentc4b8abd343bab47cff241b2746f8e81e004d6041 (diff)
downloadnextcloud-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.php6
-rw-r--r--apps/files/src/components/FilesListVirtual.vue17
-rw-r--r--apps/files/src/store/userconfig.ts1
-rw-r--r--apps/files/src/views/FilesList.vue29
-rw-r--r--apps/files/src/views/Settings.vue4
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-->