fix(breadcrumbs): Improved breadcrumb progress bar mobile rendering

Signed-off-by: Eduardo Morales <emoral435@gmail.com>

diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue
index 89312d8dff30ef414f0a7a0cc568cfc2aceb968b..5907354c12f687d17f0de6333fcfb0abf5683436 100644 (file)
--- a/apps/files/src/components/BreadCrumbs.vue
+++ b/apps/files/src/components/BreadCrumbs.vue
@@ -23,10 +23,10 @@
 <template>
        <NcBreadcrumbs 
                data-cy-files-content-breadcrumbs
-               :aria-label="t('files', 'Current directory path')">
+               :aria-label="t('files', 'Current directory path')"
+               :class="{ breadcrumb__progress: wrapUploadProgressBar }">
                <!-- Current path sections -->
                <NcBreadcrumb v-for="(section, index) in sections"
-                       v-show="shouldShowBreadcrumbs"
                        :key="section.dir"
                        v-bind="section"
                        dir="auto"
@@ -51,11 +51,11 @@
 </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 { 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 +140,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
@@ -284,10 +280,18 @@ export default defineComponent({
        // Take as much space as possible
        flex: 1 1 100% !important;
        width: 100%;
+       height: 100%;
        margin-inline: 0px 10px 0px 10px;
 
-       ::v-deep a {
-               cursor: pointer !important;
+       & :deep() {
+               a {
+                       cursor: pointer !important;
+               }
+       }
+
+       &__progress {
+               flex-direction: column !important;
+               align-items: flex-start !important;
        }
 }
 

diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 53620cf2f6d96496807a2caa17e15449494b8b2e..382be3153a0fa8aa594821fd954f08e639ef824b 100644 (file)
--- a/apps/files/src/views/FilesList.vue
+++ b/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)