Skip to content

Commit cc81480

Browse files
skjnldsvskjnldsv
authored
Merge pull request #44450 from nextcloud/emoral435/fix/fix-breadcrumb-showing-capabilities
2 parents 46fb51b + c252ee5 commit cc81480

File tree

7 files changed

+44
-41
lines changed

7 files changed

+44
-41
lines changed

‎apps/files/src/components/BreadCrumbs.vue‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@
2121
-->
2222

2323
<template>
24-
<NcBreadcrumbs
25-
data-cy-files-content-breadcrumbs
26-
:aria-label="t('files', 'Current directory path')">
24+
<NcBreadcrumbs data-cy-files-content-breadcrumbs
25+
:aria-label="t('files', 'Current directory path')"
26+
class="files-list__breadcrumbs"
27+
:class="{ 'files-list__breadcrumbs--with-progress': wrapUploadProgressBar }">
2728
<!-- Current path sections -->
2829
<NcBreadcrumb v-for="(section, index) in sections"
29-
v-show="shouldShowBreadcrumbs"
3030
:key="section.dir"
3131
v-bind="section"
3232
dir="auto"
3333
:to="section.to"
34-
:force-icon-text="true"
34+
:force-icon-text="index === 0 && filesListWidth >= 486"
3535
:title="titleForSection(index, section)"
3636
:aria-description="ariaForSection(section)"
3737
@click.native="onClick(section.to)"
@@ -51,11 +51,12 @@
5151
</template>
5252

5353
<script lang="ts">
54-
import { Permission, type Node } from '@nextcloud/files'
54+
import type { Node } from '@nextcloud/files'
5555
5656
import { basename } from 'path'
5757
import { defineComponent } from 'vue'
58-
import { translate as t} from '@nextcloud/l10n'
58+
import { Permission } from '@nextcloud/files'
59+
import { translate as t } from '@nextcloud/l10n'
5960
import HomeSvg from '@mdi/svg/svg/home.svg?raw'
6061
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
6162
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
@@ -140,14 +141,10 @@ export default defineComponent({
140141
},
141142
142143
// Hide breadcrumbs if an upload is ongoing
143-
shouldShowBreadcrumbs(): boolean {
144-
// If we're uploading files, only show the breadcrumbs
145-
// if the files list is greater than 768px wide
146-
if (this.isUploadInProgress) {
147-
return this.filesListWidth > 768
148-
}
149-
// If we're not uploading, we have enough space from 400px
150-
return this.filesListWidth > 400
144+
wrapUploadProgressBar(): boolean {
145+
// if an upload is ongoing, and on small screens / mobile, then
146+
// show the progress bar for the upload below breadcrumbs
147+
return this.isUploadInProgress && this.filesListWidth < 512
151148
},
152149
153150
// used to show the views icon for the first breadcrumb
@@ -280,15 +277,23 @@ export default defineComponent({
280277
</script>
281278

282279
<style lang="scss" scoped>
283-
.breadcrumb {
280+
.files-list__breadcrumbs {
284281
// Take as much space as possible
285282
flex: 1 1 100% !important;
286283
width: 100%;
287-
margin-inline: 0px 10px 0px 10px;
284+
height: 100%;
285+
margin-block: 0;
286+
margin-inline: 10px;
288287
289-
::v-deep a {
290-
cursor: pointer !important;
288+
:deep() {
289+
a {
290+
cursor: pointer !important;
291+
}
291292
}
292-
}
293293
294+
&--with-progress {
295+
flex-direction: column !important;
296+
align-items: flex-start !important;
297+
}
298+
}
294299
</style>

‎apps/files/src/views/FilesList.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -631,18 +631,16 @@ export default defineComponent({
631631
position: relative !important;
632632
}
633633
634-
$margin: 4px;
635-
$navigationToggleSize: 50px;
636-
637634
.files-list {
638635
&__header {
639636
display: flex;
640637
align-items: center;
641638
// Do not grow or shrink (vertically)
642639
flex: 0 0;
643-
// Align with the navigation toggle icon
644-
margin: $margin $margin $margin $navigationToggleSize;
645640
max-width: 100%;
641+
// Align with the navigation toggle icon
642+
margin-block: var(--app-navigation-padding, 4px);
643+
margin-inline: calc(var(--default-clickable-area, 44px) + 2 * var(--app-navigation-padding, 4px)) var(--app-navigation-padding, 4px);
646644
647645
>* {
648646
// Do not grow or shrink (horizontally)

‎cypress/e2e/files/FilesUtils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export const closeSidebar = () => {
133133
cy.get('[cy-data-sidebar] .app-sidebar__close').click({ force: true })
134134
}
135135

136-
export const clickOnBreadcumbs = (label: string) => {
136+
export const clickOnBreadcrumbs = (label: string) => {
137137
cy.intercept('PROPFIND', /\/remote.php\/dav\//).as('propfind')
138138
cy.get('[data-cy-files-content-breadcrumbs]').contains(label).click()
139139
cy.wait('@propfind')

‎cypress/e2e/files/live_photos.cy.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
*/
2222

2323
import type { User } from '@nextcloud/cypress'
24-
import { clickOnBreadcumbs, closeSidebar, copyFile, getRowForFile, getRowForFileId, renameFile, triggerActionForFile, triggerInlineActionForFileId } from './FilesUtils'
24+
import { clickOnBreadcrumbs, closeSidebar, copyFile, getRowForFile, getRowForFileId, renameFile, triggerActionForFile, triggerInlineActionForFileId } from './FilesUtils'
2525

2626
/**
2727
*
@@ -113,7 +113,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
113113

114114
it('Copies both files when copying the .jpg', () => {
115115
copyFile(`${randomFileName}.jpg`, '.')
116-
clickOnBreadcumbs('All files')
116+
clickOnBreadcrumbs('All files')
117117

118118
getRowForFile(`${randomFileName}.jpg`).should('have.length', 1)
119119
getRowForFile(`${randomFileName}.mov`).should('have.length', 1)
@@ -123,7 +123,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
123123

124124
it('Copies both files when copying the .mov', () => {
125125
copyFile(`${randomFileName}.mov`, '.')
126-
clickOnBreadcumbs('All files')
126+
clickOnBreadcrumbs('All files')
127127

128128
getRowForFile(`${randomFileName}.mov`).should('have.length', 1)
129129
getRowForFile(`${randomFileName} (copy).jpg`).should('have.length', 1)
@@ -132,23 +132,23 @@ describe('Files: Live photos', { testIsolation: true }, () => {
132132

133133
it('Moves files when moving the .jpg', () => {
134134
renameFile(`${randomFileName}.jpg`, `${randomFileName}_moved.jpg`)
135-
clickOnBreadcumbs('All files')
135+
clickOnBreadcrumbs('All files')
136136

137137
getRowForFileId(jpgFileId).invoke('attr', 'data-cy-files-list-row-name').should('equal', `${randomFileName}_moved.jpg`)
138138
getRowForFileId(movFileId).invoke('attr', 'data-cy-files-list-row-name').should('equal', `${randomFileName}_moved.mov`)
139139
})
140140

141141
it('Moves files when moving the .mov', () => {
142142
renameFile(`${randomFileName}.mov`, `${randomFileName}_moved.mov`)
143-
clickOnBreadcumbs('All files')
143+
clickOnBreadcrumbs('All files')
144144

145145
getRowForFileId(jpgFileId).invoke('attr', 'data-cy-files-list-row-name').should('equal', `${randomFileName}_moved.jpg`)
146146
getRowForFileId(movFileId).invoke('attr', 'data-cy-files-list-row-name').should('equal', `${randomFileName}_moved.mov`)
147147
})
148148

149149
it('Deletes files when deleting the .jpg', () => {
150150
triggerActionForFile(`${randomFileName}.jpg`, 'delete')
151-
clickOnBreadcumbs('All files')
151+
clickOnBreadcrumbs('All files')
152152

153153
getRowForFile(`${randomFileName}.jpg`).should('have.length', 0)
154154
getRowForFile(`${randomFileName}.mov`).should('have.length', 0)
@@ -161,7 +161,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
161161

162162
it('Block deletion when deleting the .mov', () => {
163163
triggerActionForFile(`${randomFileName}.mov`, 'delete')
164-
clickOnBreadcumbs('All files')
164+
clickOnBreadcrumbs('All files')
165165

166166
getRowForFile(`${randomFileName}.jpg`).should('have.length', 1)
167167
getRowForFile(`${randomFileName}.mov`).should('have.length', 1)
@@ -176,7 +176,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
176176
triggerActionForFile(`${randomFileName}.jpg`, 'delete')
177177
cy.visit('/apps/files/trashbin')
178178
triggerInlineActionForFileId(jpgFileId, 'restore')
179-
clickOnBreadcumbs('Deleted files')
179+
clickOnBreadcrumbs('Deleted files')
180180

181181
getRowForFile(`${randomFileName}.jpg`).should('have.length', 0)
182182
getRowForFile(`${randomFileName}.mov`).should('have.length', 0)
@@ -191,7 +191,7 @@ describe('Files: Live photos', { testIsolation: true }, () => {
191191
triggerActionForFile(`${randomFileName}.jpg`, 'delete')
192192
cy.visit('/apps/files/trashbin')
193193
triggerInlineActionForFileId(movFileId, 'restore')
194-
clickOnBreadcumbs('Deleted files')
194+
clickOnBreadcrumbs('Deleted files')
195195

196196
getRowForFileId(jpgFileId).should('have.length', 1)
197197
getRowForFileId(movFileId).should('have.length', 1)

‎cypress/e2e/files_versions/version_cross_share_move_and_copy.cy.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
*/
2222

2323
import { assertVersionContent, openVersionsPanel, setupTestSharedFileFromUser, uploadThreeVersions, nameVersion } from './filesVersionsUtils'
24-
import { clickOnBreadcumbs, closeSidebar, copyFile, moveFile, navigateToFolder } from '../files/FilesUtils'
24+
import { clickOnBreadcrumbs, closeSidebar, copyFile, moveFile, navigateToFolder } from '../files/FilesUtils'
2525
import type { User } from '@nextcloud/cypress'
2626

2727
/**
@@ -31,7 +31,7 @@ import type { User } from '@nextcloud/cypress'
3131
function assertVersionsContent(filePath: string) {
3232
const path = filePath.split('/').slice(0, -1).join('/')
3333

34-
clickOnBreadcumbs('All files')
34+
clickOnBreadcrumbs('All files')
3535

3636
if (path !== '') {
3737
navigateToFolder(path)
@@ -96,7 +96,7 @@ describe('Versions cross share move and copy', () => {
9696
beforeEach(() => {
9797
randomSubFolderName = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(0, 10)
9898
randomSubSubFolderName = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(0, 10)
99-
clickOnBreadcumbs('All files')
99+
clickOnBreadcrumbs('All files')
100100
cy.mkdir(bob, `/${randomSharedFolderName}/${randomSubFolderName}`)
101101
cy.mkdir(bob, `/${randomSharedFolderName}/${randomSubFolderName}/${randomSubSubFolderName}`)
102102
cy.login(bob)

‎dist/files-main.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/files-main.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)