Merge pull request #44760 from nextcloud/backport/44450/stable29

[stable29] fix(breadcrumbs): improved rendering of breadcrumb progress bar

apps/files/src/components/BreadCrumbs.vue

@@ -21,17 +21,17 @@
   -->
 
 <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"
-			v-show="shouldShowBreadcrumbs"
 			:key="section.dir"
 			v-bind="section"
 			dir="auto"
 			:to="section.to"
-			:force-icon-text="true"
+			:force-icon-text="index === 0 && filesListWidth >= 486"
 			:title="titleForSection(index, section)"
 			:aria-description="ariaForSection(section)"
 			@click.native="onClick(section.to)"
@@ -51,11 +51,12 @@
 </template>
 
 <script lang="ts">
-import { Permission, type Node } from '@nextcloud/files'
+import type { Node } from '@nextcloud/files'
 
 import { basename } from 'path'
 import { defineComponent } from 'vue'
-import { translate as t} from '@nextcloud/l10n'
+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'
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
@@ -140,14 +141,10 @@ export default defineComponent({
 		},
 
 		// 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
+		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.filesListWidth < 512
 		},
 
 		// used to show the views icon for the first breadcrumb
@@ -280,15 +277,23 @@ 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%;
-	margin-inline: 0px 10px 0px 10px;
+	height: 100%;
+	margin-block: 0;
+	margin-inline: 10px;
 
-	::v-deep a {
-		cursor: pointer !important;
+	:deep() {
+		a {
+			cursor: pointer !important;
+		}
+	}
+
+	&--with-progress {
+		flex-direction: column !important;
+		align-items: flex-start !important;
 	}
 }
-
 </style>

apps/files/src/views/FilesList.vue

@@ -631,18 +631,16 @@ export default defineComponent({
 	position: relative !important;
 }
 
-$margin: 4px;
-$navigationToggleSize: 50px;
-
 .files-list {
 	&__header {
 		display: flex;
 		align-items: center;
 		// Do not grow or shrink (vertically)
 		flex: 0 0;
-		// Align with the navigation toggle icon
-		margin: $margin $margin $margin $navigationToggleSize;
 		max-width: 100%;
+		// Align with the navigation toggle icon
+		margin-block: var(--app-navigation-padding, 4px);
+		margin-inline: calc(var(--default-clickable-area, 44px) + 2 * var(--app-navigation-padding, 4px)) var(--app-navigation-padding, 4px);
 
 		>* {
 			// Do not grow or shrink (horizontally)

cypress/e2e/files/FilesUtils.ts

@@ -133,7 +133,7 @@ export const closeSidebar = () => {
 	cy.get('[cy-data-sidebar] .app-sidebar__close').click({ force: true })
 }
 
-export const clickOnBreadcumbs = (label: string) => {
+export const clickOnBreadcrumbs = (label: string) => {
 	cy.intercept('PROPFIND', /\/remote.php\/dav\//).as('propfind')
 	cy.get('[data-cy-files-content-breadcrumbs]').contains(label).click()
 	cy.wait('@propfind')

cypress/e2e/files/live_photos.cy.ts

@@ -21,7 +21,7 @@
  */
 
 import type { User } from '@nextcloud/cypress'
-import { clickOnBreadcumbs, closeSidebar, copyFile, getRowForFile, getRowForFileId, renameFile, triggerActionForFile, triggerInlineActionForFileId } from './FilesUtils'
+import { clickOnBreadcrumbs, closeSidebar, copyFile, getRowForFile, getRowForFileId, renameFile, triggerActionForFile, triggerInlineActionForFileId } from './FilesUtils'
 
 /**
  *
@@ -113,7 +113,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
 
 		it('Copies both files when copying the .jpg', () => {
 			copyFile(`${randomFileName}.jpg`, '.')
-			clickOnBreadcumbs('All files')
+			clickOnBreadcrumbs('All files')
 
 			getRowForFile(`${randomFileName}.jpg`).should('have.length', 1)
 			getRowForFile(`${randomFileName}.mov`).should('have.length', 1)
@@ -123,7 +123,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
 
 		it('Copies both files when copying the .mov', () => {
 			copyFile(`${randomFileName}.mov`, '.')
-			clickOnBreadcumbs('All files')
+			clickOnBreadcrumbs('All files')
 
 			getRowForFile(`${randomFileName}.mov`).should('have.length', 1)
 			getRowForFile(`${randomFileName} (copy).jpg`).should('have.length', 1)
@@ -132,7 +132,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
 
 		it('Moves files when moving the .jpg', () => {
 			renameFile(`${randomFileName}.jpg`, `${randomFileName}_moved.jpg`)
-			clickOnBreadcumbs('All files')
+			clickOnBreadcrumbs('All files')
 
 			getRowForFileId(jpgFileId).invoke('attr', 'data-cy-files-list-row-name').should('equal', `${randomFileName}_moved.jpg`)
 			getRowForFileId(movFileId).invoke('attr', 'data-cy-files-list-row-name').should('equal', `${randomFileName}_moved.mov`)
@@ -140,7 +140,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
 
 		it('Moves files when moving the .mov', () => {
 			renameFile(`${randomFileName}.mov`, `${randomFileName}_moved.mov`)
-			clickOnBreadcumbs('All files')
+			clickOnBreadcrumbs('All files')
 
 			getRowForFileId(jpgFileId).invoke('attr', 'data-cy-files-list-row-name').should('equal', `${randomFileName}_moved.jpg`)
 			getRowForFileId(movFileId).invoke('attr', 'data-cy-files-list-row-name').should('equal', `${randomFileName}_moved.mov`)
@@ -148,7 +148,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
 
 		it('Deletes files when deleting the .jpg', () => {
 			triggerActionForFile(`${randomFileName}.jpg`, 'delete')
-			clickOnBreadcumbs('All files')
+			clickOnBreadcrumbs('All files')
 
 			getRowForFile(`${randomFileName}.jpg`).should('have.length', 0)
 			getRowForFile(`${randomFileName}.mov`).should('have.length', 0)
@@ -161,7 +161,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
 
 		it('Block deletion when deleting the .mov', () => {
 			triggerActionForFile(`${randomFileName}.mov`, 'delete')
-			clickOnBreadcumbs('All files')
+			clickOnBreadcrumbs('All files')
 
 			getRowForFile(`${randomFileName}.jpg`).should('have.length', 1)
 			getRowForFile(`${randomFileName}.mov`).should('have.length', 1)
@@ -176,7 +176,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
 			triggerActionForFile(`${randomFileName}.jpg`, 'delete')
 			cy.visit('/apps/files/trashbin')
 			triggerInlineActionForFileId(jpgFileId, 'restore')
-			clickOnBreadcumbs('Deleted files')
+			clickOnBreadcrumbs('Deleted files')
 
 			getRowForFile(`${randomFileName}.jpg`).should('have.length', 0)
 			getRowForFile(`${randomFileName}.mov`).should('have.length', 0)
@@ -191,7 +191,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
 			triggerActionForFile(`${randomFileName}.jpg`, 'delete')
 			cy.visit('/apps/files/trashbin')
 			triggerInlineActionForFileId(movFileId, 'restore')
-			clickOnBreadcumbs('Deleted files')
+			clickOnBreadcrumbs('Deleted files')
 
 			getRowForFileId(jpgFileId).should('have.length', 1)
 			getRowForFileId(movFileId).should('have.length', 1)

cypress/e2e/files_versions/version_cross_share_move_and_copy.cy.ts

@@ -21,7 +21,7 @@
  */
 
 import { assertVersionContent, openVersionsPanel, setupTestSharedFileFromUser, uploadThreeVersions, nameVersion } from './filesVersionsUtils'
-import { clickOnBreadcumbs, closeSidebar, copyFile, moveFile, navigateToFolder } from '../files/FilesUtils'
+import { clickOnBreadcrumbs, closeSidebar, copyFile, moveFile, navigateToFolder } from '../files/FilesUtils'
 import type { User } from '@nextcloud/cypress'
 
 /**
@@ -31,7 +31,7 @@ import type { User } from '@nextcloud/cypress'
 function assertVersionsContent(filePath: string) {
 	const path = filePath.split('/').slice(0, -1).join('/')
 
-	clickOnBreadcumbs('All files')
+	clickOnBreadcrumbs('All files')
 
 	if (path !== '') {
 		navigateToFolder(path)
@@ -96,7 +96,7 @@ describe('Versions cross share move and copy', () => {
 		beforeEach(() => {
 			randomSubFolderName = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(0, 10)
 			randomSubSubFolderName = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(0, 10)
-			clickOnBreadcumbs('All files')
+			clickOnBreadcrumbs('All files')
 			cy.mkdir(bob, `/${randomSharedFolderName}/${randomSubFolderName}`)
 			cy.mkdir(bob, `/${randomSharedFolderName}/${randomSubFolderName}/${randomSubSubFolderName}`)
 			cy.login(bob)