diff options
Diffstat (limited to 'apps/files/src/components/BreadCrumbs.vue')
| -rw-r--r-- | apps/files/src/components/BreadCrumbs.vue | 242 |
1 files changed, 192 insertions, 50 deletions
diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue index f50a4d14fd8..8458fd65f3d 100644 --- a/apps/files/src/components/BreadCrumbs.vue +++ b/apps/files/src/components/BreadCrumbs.vue @@ -1,40 +1,28 @@ <!-- - - @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com> - - - - @author John Molakvoæ <skjnldsv@protonmail.com> - - - - @license AGPL-3.0-or-later - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <NcBreadcrumbs - data-cy-files-content-breadcrumbs - :aria-label="t('files', 'Current directory path')"> + <NcBreadcrumbs data-cy-files-content-breadcrumbs + :aria-label="t('files', 'Current directory path')" + class="files-list__breadcrumbs" + :class="{ 'files-list__breadcrumbs--with-progress': wrapUploadProgressBar }"> <!-- Current path sections --> <NcBreadcrumb v-for="(section, index) in sections" :key="section.dir" v-bind="section" dir="auto" :to="section.to" + :force-icon-text="index === 0 && fileListWidth >= 486" :title="titleForSection(index, section)" :aria-description="ariaForSection(section)" - @click.native="onClick(section.to)"> + @click.native="onClick(section.to)" + @dragover.native="onDragOver($event, section.dir)" + @drop="onDrop($event, section.dir)"> <template v-if="index === 0" #icon> - <Home :size="20"/> + <NcIconSvgWrapper :size="20" + :svg="viewIcon" /> </template> </NcBreadcrumb> @@ -47,24 +35,35 @@ <script lang="ts"> import type { Node } from '@nextcloud/files' +import type { FileSource } from '../types.ts' -import { translate as t} from '@nextcloud/l10n' import { basename } from 'path' -import Home from 'vue-material-design-icons/Home.vue' -import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js' -import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js' import { defineComponent } from 'vue' +import { Permission } from '@nextcloud/files' +import { translate as t } from '@nextcloud/l10n' +import HomeSvg from '@mdi/svg/svg/home.svg?raw' +import NcBreadcrumb from '@nextcloud/vue/components/NcBreadcrumb' +import NcBreadcrumbs from '@nextcloud/vue/components/NcBreadcrumbs' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import { useNavigation } from '../composables/useNavigation.ts' +import { onDropInternalFiles, dataTransferToFileTree, onDropExternalFiles } from '../services/DropService.ts' +import { useFileListWidth } from '../composables/useFileListWidth.ts' +import { showError } from '@nextcloud/dialogs' +import { useDragAndDropStore } from '../store/dragging.ts' import { useFilesStore } from '../store/files.ts' import { usePathsStore } from '../store/paths.ts' +import { useSelectionStore } from '../store/selection.ts' +import { useUploaderStore } from '../store/uploader.ts' +import logger from '../logger' export default defineComponent({ name: 'BreadCrumbs', components: { - Home, NcBreadcrumbs, NcBreadcrumb, + NcIconSvgWrapper, }, props: { @@ -75,19 +74,28 @@ export default defineComponent({ }, setup() { + const draggingStore = useDragAndDropStore() const filesStore = useFilesStore() const pathsStore = usePathsStore() + const selectionStore = useSelectionStore() + const uploaderStore = useUploaderStore() + const fileListWidth = useFileListWidth() + const { currentView, views } = useNavigation() + return { + draggingStore, filesStore, pathsStore, + selectionStore, + uploaderStore, + + currentView, + fileListWidth, + views, } }, computed: { - currentView() { - return this.$navigation.active - }, - dirs(): string[] { const cumulativePath = (acc: string) => (value: string) => (acc += `${value}/`) // Generate a cumulative path for each path segment: ['/', '/foo', '/foo/bar', ...] etc @@ -97,34 +105,83 @@ export default defineComponent({ }, sections() { - return this.dirs.map((dir: string) => { - const fileid = this.getFileIdFromPath(dir) - const to = { ...this.$route, params: { fileid }, query: { dir } } + return this.dirs.map((dir: string, index: number) => { + const source = this.getFileSourceFromPath(dir) + const node: Node | undefined = source ? this.getNodeFromSource(source) : undefined return { dir, exact: true, name: this.getDirDisplayName(dir), - to, + to: this.getTo(dir, node), + // disable drop on current directory + disableDrop: index === this.dirs.length - 1, } }) }, + + isUploadInProgress(): boolean { + return this.uploaderStore.queue.length !== 0 + }, + + // Hide breadcrumbs if an upload is ongoing + wrapUploadProgressBar(): boolean { + // if an upload is ongoing, and on small screens / mobile, then + // show the progress bar for the upload below breadcrumbs + return this.isUploadInProgress && this.fileListWidth < 512 + }, + + // used to show the views icon for the first breadcrumb + viewIcon(): string { + return this.currentView?.icon ?? HomeSvg + }, + + selectedFiles() { + return this.selectionStore.selected as FileSource[] + }, + + draggingFiles() { + return this.draggingStore.dragging as FileSource[] + }, }, methods: { - getNodeFromId(id: number): Node | undefined { - return this.filesStore.getNode(id) + getNodeFromSource(source: FileSource): Node | undefined { + return this.filesStore.getNode(source) }, - getFileIdFromPath(path: string): number | undefined { - return this.pathsStore.getPath(this.currentView?.id, path) + getFileSourceFromPath(path: string): FileSource | null { + return (this.currentView && this.pathsStore.getPath(this.currentView.id, path)) ?? null }, getDirDisplayName(path: string): string { if (path === '/') { - return t('files', 'Home') + return this.currentView?.name || t('files', 'Home') } - const fileId: number | undefined = this.getFileIdFromPath(path) - const node: Node | undefined = (fileId) ? this.getNodeFromId(fileId) : undefined - return node?.attributes?.displayName || basename(path) + const source = this.getFileSourceFromPath(path) + const node = source ? this.getNodeFromSource(source) : undefined + return node?.displayname || basename(path) + }, + + getTo(dir: string, node?: Node): Record<string, unknown> { + if (dir === '/') { + return { + ...this.$route, + params: { view: this.currentView?.id }, + query: {}, + } + } + if (node === undefined) { + const view = this.views.find(view => view.params?.dir === dir) + return { + ...this.$route, + params: { fileid: view?.params?.fileid ?? '' }, + query: { dir }, + } + } + return { + ...this.$route, + params: { fileid: String(node.fileid) }, + query: { dir: node.path }, + } }, onClick(to) { @@ -133,6 +190,81 @@ export default defineComponent({ } }, + onDragOver(event: DragEvent, path: string) { + if (!event.dataTransfer) { + return + } + + // Cannot drop on the current directory + if (path === this.dirs[this.dirs.length - 1]) { + event.dataTransfer.dropEffect = 'none' + return + } + + // Handle copy/move drag and drop + if (event.ctrlKey) { + event.dataTransfer.dropEffect = 'copy' + } else { + event.dataTransfer.dropEffect = 'move' + } + }, + + async onDrop(event: DragEvent, path: string) { + // skip if native drop like text drag and drop from files names + if (!this.draggingFiles && !event.dataTransfer?.items?.length) { + return + } + + // Do not stop propagation, so the main content + // drop event can be triggered too and clear the + // dragover state on the DragAndDropNotice component. + event.preventDefault() + + // Caching the selection + const selection = this.draggingFiles + const items = [...event.dataTransfer?.items || []] as DataTransferItem[] + + // We need to process the dataTransfer ASAP before the + // browser clears it. This is why we cache the items too. + const fileTree = await dataTransferToFileTree(items) + + // We might not have the target directory fetched yet + const contents = await this.currentView?.getContents(path) + const folder = contents?.folder + if (!folder) { + showError(this.t('files', 'Target folder does not exist any more')) + return + } + + const canDrop = (folder.permissions & Permission.CREATE) !== 0 + const isCopy = event.ctrlKey + + // If another button is pressed, cancel it. This + // allows cancelling the drag with the right click. + if (!canDrop || event.button !== 0) { + return + } + + logger.debug('Dropped', { event, folder, selection, fileTree }) + + // Check whether we're uploading files + if (fileTree.contents.length > 0) { + await onDropExternalFiles(fileTree, folder, contents.contents) + return + } + + // Else we're moving/copying files + const nodes = selection.map(source => this.filesStore.getNode(source)) as Node[] + await onDropInternalFiles(nodes, folder, contents.contents, isCopy) + + // Reset selection after we dropped the files + // if the dropped files are within the selection + if (selection.some(source => this.selectedFiles.includes(source))) { + logger.debug('Dropped selection, resetting select store...') + this.selectionStore.reset() + } + }, + titleForSection(index, section) { if (section?.to?.query?.dir === this.$route.query.dir) { return t('files', 'Reload current directory') @@ -155,14 +287,24 @@ export default defineComponent({ </script> <style lang="scss" scoped> -.breadcrumb { +.files-list__breadcrumbs { // Take as much space as possible flex: 1 1 100% !important; width: 100%; + height: 100%; + margin-block: 0; + margin-inline: 10px; + min-width: 0; + + :deep() { + a { + cursor: pointer !important; + } + } - ::v-deep a { - cursor: pointer !important; + &--with-progress { + flex-direction: column !important; + align-items: flex-start !important; } } - </style> |