diff --git a/changelog/unreleased/enhancement-move-breadcrumbs-out-of-location-picker-heading b/changelog/unreleased/enhancement-move-breadcrumbs-out-of-location-picker-heading new file mode 100644 index 00000000000..12da9d9f181 --- /dev/null +++ b/changelog/unreleased/enhancement-move-breadcrumbs-out-of-location-picker-heading @@ -0,0 +1,7 @@ +Enhancement: Move breadcrumbs out of location picker heading + +We've moved the breadcrumbs element out of the location picker heading and moved it under it. +The heading is now also reflecting the page title. +We've also decreased the size of both breadcrumbs and action buttons so that they fit better together. + +https://github.com/owncloud/web/pull/5020 \ No newline at end of file diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue index e7e52f6f214..310159d11d9 100644 --- a/packages/web-app-files/src/views/LocationPicker.vue +++ b/packages/web-app-files/src/views/LocationPicker.vue @@ -2,32 +2,29 @@
-

- - -

+


-
- -
- - Cancel - -
-
- - - -
-
-
+ + +
+ + Cancel + +
+
+ + + +
+

@@ -93,6 +90,12 @@ import NoContentMessage from '../components/NoContentMessage.vue' import ListLoader from '../components/ListLoader.vue' export default { + metaInfo() { + const title = `${this.title} - ${this.configuration.theme.general.name}` + + return { title } + }, + components: { NoContentMessage, ListLoader @@ -100,20 +103,6 @@ export default { mixins: [MixinsGeneral, MixinResources, MixinRoutes], - metaInfo() { - const translated = - this.currentAction === 'move' - ? this.$gettext('Move into %{ target } - %{ name }') - : this.$gettext('Copy into %{ target } - %{ name }') - const target = basename(this.target) || this.$gettext('All files') - const title = this.$gettextInterpolate(translated, { - target, - name: this.configuration.theme.general.name - }) - - return { title } - }, - data: () => ({ headerPosition: 0, originalLocation: '', @@ -137,6 +126,17 @@ export default { ]), ...mapGetters('configuration'), + title() { + const translated = + this.currentAction === 'move' + ? this.$gettext('Move into %{ target }') + : this.$gettext('Copy into %{ target }') + const target = basename(this.target) || this.$gettext('All files') + const title = this.$gettextInterpolate(translated, { target }) + + return title + }, + currentAction() { return this.$route.params.action }, @@ -196,31 +196,6 @@ export default { return this.currentFolder && this.currentFolder.canCreate() }, - title() { - const count = this.resourcesCount - let title = '' - - switch (this.currentAction) { - case batchActions.move: { - title = this.$ngettext( - 'Selected %{ count } resource to move into:', - 'Selected %{ count } resources to move into:', - count - ) - break - } - case batchActions.copy: { - title = this.$ngettext( - 'Selected %{ count } resource to copy into:', - 'Selected %{ count } resources to copy into:', - count - ) - } - } - - return this.$gettextInterpolate(title, { count: count }, false) - }, - confirmBtnText() { switch (this.currentAction) { case batchActions.move: @@ -474,7 +449,7 @@ export default { .files-list-wrapper { display: grid; grid-template-columns: 1fr; - grid-template-rows: max-content max-content 1fr; + grid-template-rows: max-content 1fr; gap: 0 0; grid-template-areas: 'header' @@ -498,4 +473,10 @@ export default { #files-view { grid-area: main; } + +#files-location-picker-table ::deep tr { + td:first-of-type { + padding-left: 30px; + } +}