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