[stable28] feature(files): Hide breadcrumbs when an upload is ongoing on narrow screen #40942

apps/files/src/components/BreadCrumbs.vue

@@ -1,9 +1,32 @@
+<!--
+  - @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/>.
+  -
+  -->
+
 <template>
 	<NcBreadcrumbs 
 		data-cy-files-content-breadcrumbs
 		:aria-label="t('files', 'Current directory path')">
 		<!-- Current path sections -->
 		<NcBreadcrumb v-for="(section, index) in sections"
+			v-show="shouldShowBreadcrumbs"
 			:key="section.dir"
 			v-bind="section"
 			dir="auto"
@@ -28,11 +51,10 @@
 </template>
 
 <script lang="ts">
-import type { Node } from '@nextcloud/files'
+import { Permission, type Node } from '@nextcloud/files'
 
 import { basename } from 'path'
 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/dist/Components/NcBreadcrumb.js'
@@ -45,6 +67,7 @@ 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 filesListWidthMixin from '../mixins/filesListWidth.ts'
 import logger from '../logger'
 
@@ -73,11 +96,14 @@ export default defineComponent({
 		const filesStore = useFilesStore()
 		const pathsStore = usePathsStore()
 		const selectionStore = useSelectionStore()
+		const uploaderStore = useUploaderStore()
+
 		return {
 			draggingStore,
 			filesStore,
 			pathsStore,
 			selectionStore,
+			uploaderStore,
 		}
 	},
 
@@ -86,12 +112,12 @@ export default defineComponent({
 			return this.$navigation.active
 		},
 
-		dirs() {
-			const cumulativePath = (acc) => (value) => (acc += `${value}/`)
+		dirs(): string[] {
+			const cumulativePath = (acc: string) => (value: string) => (acc += `${value}/`)
 			// Generate a cumulative path for each path segment: ['/', '/foo', '/foo/bar', ...] etc
-			const paths = this.path.split('/').filter(Boolean).map(cumulativePath('/'))
+			const paths: string[] = this.path.split('/').filter(Boolean).map(cumulativePath('/'))
 			// Strip away trailing slash
-			return ['/', ...paths.map(path => path.replace(/^(.+)\/$/, '$1'))]
+			return ['/', ...paths.map((path: string) => path.replace(/^(.+)\/$/, '$1'))]
 		},
 
 		sections() {
@@ -109,8 +135,23 @@ export default defineComponent({
 			})
 		},
 
+		isUploadInProgress(): boolean {
+			return this.uploaderStore.queue.length !== 0
+		},
+
+		// Hide breadcrumbs if an upload is ongoing
+		shouldShowBreadcrumbs(): boolean {
+			// If we're uploading files, only show the breadcrumbs
+			// if the files list is greater than 768px wide
+			if (this.isUploadInProgress) {
+				return this.filesListWidth > 768
+			}
+			// If we're not uploading, we have enough space from 400px
+			return this.filesListWidth > 400
+		},
+
 		// used to show the views icon for the first breadcrumb
-		viewIcon() {
+		viewIcon(): string {
 			return this.currentView?.icon ?? HomeSvg
 		},
 
@@ -124,19 +165,19 @@ export default defineComponent({
 	},
 
 	methods: {
-		getNodeFromId(id) {
+		getNodeFromId(id: number): Node | undefined {
 			return this.filesStore.getNode(id)
 		},
-		getFileIdFromPath(path) {
+		getFileIdFromPath(path: string): number | undefined {
 			return this.pathsStore.getPath(this.currentView?.id, path)
 		},
-		getDirDisplayName(path) {
+		getDirDisplayName(path: string): string {
 			if (path === '/') {
 				return this.$navigation?.active?.name || t('files', 'Home')
 			}
 
-			const fileId = this.getFileIdFromPath(path)
-			const node = this.getNodeFromId(fileId)
+			const fileId: number | undefined = this.getFileIdFromPath(path)
+			const node: Node | undefined = (fileId) ? this.getNodeFromId(fileId) : undefined
 			return node?.attributes?.displayName || basename(path)
 		},
 
@@ -243,6 +284,7 @@ export default defineComponent({
 	// Take as much space as possible
 	flex: 1 1 100% !important;
 	width: 100%;
+	margin-inline: 0px 10px 0px 10px;
 
 	::v-deep a {
 		cursor: pointer !important;