Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move breadcrumbs out of location picker heading #5020

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions changelog/unreleased/bugfix-navigation-in-private-links
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Bugfix: Display navigation for resolved private link

We've fixed that the navigation in the left sidebar is visible for a resolved private link as well

https://github.com/owncloud/web/pull/5023
Original file line number Diff line number Diff line change
@@ -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
109 changes: 45 additions & 64 deletions packages/web-app-files/src/views/LocationPicker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,29 @@
<div id="files-location-picker" class="uk-flex uk-height-1-1">
<div tabindex="-1" class="files-list-wrapper uk-width-expand">
<div id="files-app-bar" class="oc-p-s">
<h1 class="location-picker-selection-info uk-flex oc-text-lead oc-mb">
<span class="uk-margin-small-right" v-text="title" />
<oc-breadcrumb :items="breadcrumbs" variation="lead" class="oc-text-lead" />
</h1>
<h1 class="location-picker-selection-info oc-mr-s oc-mb" v-text="title" />
<p class="oc-text-muted uk-text-meta uk-text-italic" v-text="currentHint" />
<hr class="oc-mt-rm" />
<div class="oc-mb">
<oc-grid gutter="small">
<div>
<oc-button @click="leaveLocationPicker(originalLocation)">
<translate>Cancel</translate>
</oc-button>
</div>
<div>
<oc-button
id="location-picker-btn-confirm"
variation="primary"
appearance="filled"
:disabled="!canConfirm"
@click="confirmAction"
>
<span v-text="confirmBtnText" />
</oc-button>
</div>
</oc-grid>
</div>
<oc-breadcrumb :items="breadcrumbs" class="oc-mb-s" />
<oc-grid gutter="small" flex class="uk-flex-middle">
<div>
<oc-button size="small" @click="leaveLocationPicker(originalLocation)">
<translate>Cancel</translate>
</oc-button>
</div>
<div>
<oc-button
id="location-picker-btn-confirm"
variation="primary"
appearance="filled"
size="small"
:disabled="!canConfirm"
@click="confirmAction"
>
<span v-text="confirmBtnText" />
</oc-button>
</div>
</oc-grid>
</div>
<div id="files-view">
<list-loader v-if="loading" />
Expand Down Expand Up @@ -93,27 +90,19 @@ 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
},

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: '',
Expand All @@ -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
},
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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'
Expand All @@ -498,4 +473,10 @@ export default {
#files-view {
grid-area: main;
}

#files-location-picker-table ::deep tr {
td:first-of-type {
padding-left: 30px;
}
}
</style>
2 changes: 1 addition & 1 deletion packages/web-app-files/src/views/PrivateLink.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default {
this.$router.push({
name: 'files-personal',
params: {
item: folder
item: folder || '/'
},
query: {
scrollTo: file
Expand Down