diff options
Diffstat (limited to 'apps/files/src')
| -rw-r--r-- | apps/files/src/mixins/filesSorting.ts | 20 | ||||
| -rw-r--r-- | apps/files/src/store/files.ts | 8 | ||||
| -rw-r--r-- | apps/files/src/store/keyboard.ts | 4 | ||||
| -rw-r--r-- | apps/files/src/store/paths.ts | 8 | ||||
| -rw-r--r-- | apps/files/src/store/userconfig.ts | 4 | ||||
| -rw-r--r-- | apps/files/src/store/viewConfig.ts | 12 | ||||
| -rw-r--r-- | apps/files/src/views/Sidebar.vue | 38 |
7 files changed, 55 insertions, 39 deletions
diff --git a/apps/files/src/mixins/filesSorting.ts b/apps/files/src/mixins/filesSorting.ts index 8930587ffab..2f79a3eb171 100644 --- a/apps/files/src/mixins/filesSorting.ts +++ b/apps/files/src/mixins/filesSorting.ts @@ -21,18 +21,14 @@ */ import Vue from 'vue' +import { mapState } from 'pinia' import { useViewConfigStore } from '../store/viewConfig' -import type { Navigation } from '../services/Navigation' +import type { Navigation } from '../services/Navigation' export default Vue.extend({ - setup() { - const viewConfigStore = useViewConfigStore() - return { - viewConfigStore, - } - }, - computed: { + ...mapState(useViewConfigStore, ['getConfig', 'setSortingBy', 'toggleSortingDirection']), + currentView(): Navigation { return this.$navigation.active }, @@ -41,7 +37,7 @@ export default Vue.extend({ * Get the sorting mode for the current view */ sortingMode(): string { - return this.viewConfigStore.getConfig(this.currentView.id)?.sorting_mode + return this.getConfig(this.currentView.id)?.sorting_mode as string || this.currentView?.defaultSortKey || 'basename' }, @@ -50,7 +46,7 @@ export default Vue.extend({ * Get the sorting direction for the current view */ isAscSorting(): boolean { - const sortingDirection = this.viewConfigStore.getConfig(this.currentView.id)?.sorting_direction + const sortingDirection = this.getConfig(this.currentView.id)?.sorting_direction return sortingDirection === 'asc' }, }, @@ -59,11 +55,11 @@ export default Vue.extend({ toggleSortBy(key: string) { // If we're already sorting by this key, flip the direction if (this.sortingMode === key) { - this.viewConfigStore.toggleSortingDirection(this.currentView.id) + this.toggleSortingDirection(this.currentView.id) return } // else sort ASC by this new key - this.viewConfigStore.setSortingBy(key, this.currentView.id) + this.setSortingBy(key, this.currentView.id) }, }, }) diff --git a/apps/files/src/store/files.ts b/apps/files/src/store/files.ts index 11e4fc970a4..ea516a886d9 100644 --- a/apps/files/src/store/files.ts +++ b/apps/files/src/store/files.ts @@ -25,11 +25,11 @@ import type { FilesStore, RootsStore, RootOptions, Service, FilesState } from '. import { defineStore } from 'pinia' import { subscribe } from '@nextcloud/event-bus' -import Vue from 'vue' import logger from '../logger' -import { FileId } from '../types' +import type { FileId } from '../types' +import Vue from 'vue' -export const useFilesStore = () => { +export const useFilesStore = function() { const store = defineStore('files', { state: (): FilesState => ({ files: {} as FilesStore, @@ -88,7 +88,7 @@ export const useFilesStore = () => { } }) - const fileStore = store() + const fileStore = store(...arguments) // Make sure we only register the listeners once if (!fileStore._initialized) { // subscribe('files:node:created', fileStore.onCreatedNode) diff --git a/apps/files/src/store/keyboard.ts b/apps/files/src/store/keyboard.ts index 1ba8285b960..bdce7d55075 100644 --- a/apps/files/src/store/keyboard.ts +++ b/apps/files/src/store/keyboard.ts @@ -28,7 +28,7 @@ import Vue from 'vue' * special keys states. Useful for checking the * current status of a key when executing a method. */ -export const useKeyboardStore = () => { +export const useKeyboardStore = function() { const store = defineStore('keyboard', { state: () => ({ altKey: false, @@ -50,7 +50,7 @@ export const useKeyboardStore = () => { } }) - const keyboardStore = store() + const keyboardStore = store(...arguments) // Make sure we only register the listeners once if (!keyboardStore._initialized) { window.addEventListener('keydown', keyboardStore.onEvent) diff --git a/apps/files/src/store/paths.ts b/apps/files/src/store/paths.ts index bcd7375518c..c9335304bce 100644 --- a/apps/files/src/store/paths.ts +++ b/apps/files/src/store/paths.ts @@ -23,11 +23,11 @@ import type { PathOptions, ServicesState } from '../types.ts' import { defineStore } from 'pinia' -import Vue from 'vue' import { subscribe } from '@nextcloud/event-bus' -import { FileId } from '../types' +import type { FileId } from '../types' +import Vue from 'vue' -export const usePathsStore = () => { +export const usePathsStore = function() { const store = defineStore('paths', { state: (): ServicesState => ({}), @@ -55,7 +55,7 @@ export const usePathsStore = () => { } }) - const pathsStore = store() + const pathsStore = store(...arguments) // Make sure we only register the listeners once if (!pathsStore._initialized) { // TODO: watch folders to update paths? diff --git a/apps/files/src/store/userconfig.ts b/apps/files/src/store/userconfig.ts index c81b7b4d77f..42821951dbf 100644 --- a/apps/files/src/store/userconfig.ts +++ b/apps/files/src/store/userconfig.ts @@ -33,7 +33,7 @@ const userConfig = loadState('files', 'config', { crop_image_previews: true, }) as UserConfig -export const useUserConfigStore = () => { +export const useUserConfigStore = function() { const store = defineStore('userconfig', { state: () => ({ userConfig, @@ -60,7 +60,7 @@ export const useUserConfigStore = () => { } }) - const userConfigStore = store() + const userConfigStore = store(...arguments) // Make sure we only register the listeners once if (!userConfigStore._initialized) { diff --git a/apps/files/src/store/viewConfig.ts b/apps/files/src/store/viewConfig.ts index d7a5ab1daa6..607596dfd68 100644 --- a/apps/files/src/store/viewConfig.ts +++ b/apps/files/src/store/viewConfig.ts @@ -27,12 +27,12 @@ import { loadState } from '@nextcloud/initial-state' import axios from '@nextcloud/axios' import Vue from 'vue' -import { ViewConfigs, ViewConfigStore, ViewId } from '../types.ts' -import { ViewConfig } from '../types' +import type { ViewConfigs, ViewConfigStore, ViewId } from '../types' +import type { ViewConfig } from '../types' const viewConfig = loadState('files', 'viewConfigs', {}) as ViewConfigs -export const useViewConfigStore = () => { +export const useViewConfigStore = function() { const store = defineStore('viewconfig', { state: () => ({ viewConfig, @@ -46,7 +46,7 @@ export const useViewConfigStore = () => { /** * Update the view config local store */ - onUpdate(view: ViewId, key: string, value: boolean) { + onUpdate(view: ViewId, key: string, value: string | number | boolean) { if (!this.viewConfig[view]) { Vue.set(this.viewConfig, view, {}) } @@ -56,7 +56,7 @@ export const useViewConfigStore = () => { /** * Update the view config local store AND on server side */ - async update(view: ViewId, key: string, value: boolean) { + async update(view: ViewId, key: string, value: string | number | boolean) { axios.put(generateUrl(`/apps/files/api/v1/views/${view}/${key}`), { value, }) @@ -88,7 +88,7 @@ export const useViewConfigStore = () => { } }) - const viewConfigStore = store() + const viewConfigStore = store(...arguments) // Make sure we only register the listeners once if (!viewConfigStore._initialized) { diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue index 5c3967b1c93..9b43570e345 100644 --- a/apps/files/src/views/Sidebar.vue +++ b/apps/files/src/views/Sidebar.vue @@ -36,10 +36,16 @@ @closed="handleClosed"> <!-- TODO: create a standard to allow multiple elements here? --> <template v-if="fileInfo" #description> - <LegacyView v-for="view in views" - :key="view.cid" - :component="view" - :file-info="fileInfo" /> + <div class="sidebar__description"> + <SystemTags v-if="isSystemTagsEnabled" + v-show="showTags" + :file-id="fileInfo.id" + @has-tags="value => showTags = value" /> + <LegacyView v-for="view in views" + :key="view.cid" + :component="view" + :file-info="fileInfo" /> + </div> </template> <!-- Actions menu --> @@ -96,22 +102,25 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' import FileInfo from '../services/FileInfo.js' import SidebarTab from '../components/SidebarTab.vue' import LegacyView from '../components/LegacyView.vue' +import SystemTags from '../../../systemtags/src/components/SystemTags.vue' export default { name: 'Sidebar', components: { + LegacyView, NcActionButton, NcAppSidebar, NcEmptyContent, - LegacyView, SidebarTab, + SystemTags, }, data() { return { // reactive state Sidebar: OCA.Files.Sidebar.state, + showTags: false, error: null, loading: true, fileInfo: null, @@ -410,9 +419,7 @@ export default { * Toggle the tags selector */ toggleTags() { - if (OCA.SystemTags && OCA.SystemTags.View) { - OCA.SystemTags.View.toggle() - } + this.showTags = !this.showTags }, /** @@ -505,7 +512,7 @@ export default { </script> <style lang="scss" scoped> .app-sidebar { - &--has-preview::v-deep { + &--has-preview:deep { .app-sidebar-header__figure { background-size: cover; } @@ -525,6 +532,12 @@ export default { height: 100% !important; } + :deep { + .app-sidebar-header__description { + margin: 0 16px 4px 16px !important; + } + } + .svg-icon { ::v-deep svg { width: 20px; @@ -533,4 +546,11 @@ export default { } } } + +.sidebar__description { + display: flex; + flex-direction: column; + width: 100%; + gap: 8px 0; +} </style> |