upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-08 08:16:43 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

fix(breadcrumbs): Improved breadcrumb progress bar mobile rendering

Browse source 
Signed-off-by: Eduardo Morales <emoral435@gmail.com>
This commit is contained in:
Eduardo Morales 2024-03-25 06:31:28 -05:00
parent b392041b42
commit 941cb02f73
2 changed files with 21 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
apps/files/src/components/BreadCrumbs.vue
View file

@ -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;
}
}

8
apps/files/src/views/FilesList.vue
View file

@ -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)