From 5d45b7dc1758714cb9daf7e04c4248086896e1a6 Mon Sep 17 00:00:00 2001 From: Pascal Wengerter Date: Wed, 15 Jun 2022 18:05:29 +0200 Subject: [PATCH] Only display batch actions on >2 selected resources (except for trashbin) and make them appear in raw --- .../enhancement-redesign-batchactions | 6 +++ .../src/components/ActionMenuItem.vue | 2 +- .../src/components/AppBar/AppBar.vue | 40 ++++++++++++++----- .../src/components/AppBar/CreateAndUpload.vue | 3 +- .../AppBar/SelectedResources/BatchActions.vue | 8 +--- .../AppBar/SelectedResources/SizeInfo.vue | 22 +++++----- .../web-app-files/src/components/TrashBin.vue | 7 +++- .../src/mixins/actions/emptyTrashBin.js | 1 + .../unit/components/AppBar/AppBar.spec.js | 2 + .../AppBar/__snapshots__/AppBar.spec.js.snap | 12 +++++- .../Search/__snapshots__/List.spec.js.snap | 4 +- .../__snapshots__/SharedViaLink.spec.js.snap | 2 +- .../spaces/__snapshots__/Project.spec.js.snap | 4 +- .../__snapshots__/Projects.spec.js.snap | 2 +- .../Groups/CreateGroupModal.spec.js | 2 +- .../Groups/DeleteGroupModal.spec.js | 2 +- .../components/Users/CreateUserModal.spec.js | 2 +- .../components/Users/DeleteUserModal.spec.js | 2 +- .../tests/unit/views/Groups.spec.js | 2 +- .../tests/unit/views/Users.spec.js | 2 +- 20 files changed, 83 insertions(+), 44 deletions(-) create mode 100644 changelog/unreleased/enhancement-redesign-batchactions diff --git a/changelog/unreleased/enhancement-redesign-batchactions b/changelog/unreleased/enhancement-redesign-batchactions new file mode 100644 index 00000000000..ab147e972cf --- /dev/null +++ b/changelog/unreleased/enhancement-redesign-batchactions @@ -0,0 +1,6 @@ +Enhancement: Redesign batchactions + +We have updated the batchactions to only be displayed for at least two selected resources on personal, shares and spaces views. +This and using `raw` instead of `outline` buttons makes for a less distracting experience for the user. + +https://github.com/owncloud/web/pull/6351 diff --git a/packages/web-app-files/src/components/ActionMenuItem.vue b/packages/web-app-files/src/components/ActionMenuItem.vue index c968de70a89..97c37db2a23 100644 --- a/packages/web-app-files/src/components/ActionMenuItem.vue +++ b/packages/web-app-files/src/components/ActionMenuItem.vue @@ -75,7 +75,7 @@ export default { } return { - appearance: this.appearance, + appearance: action.appearance ? action.appearance : this.appearance, ...(action.isDisabled && { disabled: action.isDisabled() }), ...(action.variation && { variation: action.variation }) } diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue index a5aa892b7ea..6e1ce23ef28 100644 --- a/packages/web-app-files/src/components/AppBar/AppBar.vue +++ b/packages/web-app-files/src/components/AppBar/AppBar.vue @@ -33,7 +33,7 @@
- +
@@ -70,6 +70,8 @@ export default { props: { breadcrumbs: { type: Array, default: () => [] }, breadcrumbsContextActionsItems: { type: Array, default: () => [] }, + fileCountForSizeInfo: { type: Number, default: 2 }, + fileCountForBulkActions: { type: Number, default: 2 }, hasBulkActions: { type: Boolean, default: false }, hasSharesNavigation: { type: Boolean, default: false }, hasSidebarToggle: { type: Boolean, default: true }, @@ -85,27 +87,45 @@ export default { return this.$gettext(title) }, areDefaultActionsVisible() { - return this.selectedFiles.length < 1 + return this.selectedFiles.length < this.fileCountForBulkActions }, showContextActions() { return last(this.breadcrumbs).allowContextActions }, showSelectionInfo() { - return this.hasBulkActions && this.selectedFiles.length > 0 + return this.hasBulkActions && this.selectedFiles.length >= this.fileCountForSizeInfo }, showBatchActions() { - return this.hasBulkActions + return this.hasBulkActions && this.selectedFiles.length >= this.fileCountForBulkActions }, selectedResourcesAnnouncement() { - if (this.selectedFiles.length === 0) { + if (this.selectedFiles.length >= this.fileCountForBulkActions) { + if (!this.selectedFiles.length) { + return this.$gettext('No items selected. Actions are available above the table.') + } + + return this.$gettextInterpolate( + this.$ngettext( + '%{ amount } item selected. Actions are available above the table.', + '%{ amount } items selected. Actions are available above the table.', + this.selectedFiles.length + ), + { amount: this.selectedFiles.length } + ) + } + + if (!this.selectedFiles.length) { return this.$gettext('No items selected.') } - const translated = this.$ngettext( - '%{ amount } item selected. Actions are available above the table.', - '%{ amount } items selected. Actions are available above the table.', - this.selectedFiles.length + + return this.$gettextInterpolate( + this.$ngettext( + '%{ amount } item selected.', + '%{ amount } items selected.', + this.selectedFiles.length + ), + { amount: this.selectedFiles.length } ) - return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length }) } }, diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue index d0f32e0bf80..ec4b2c61825 100644 --- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue +++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue @@ -198,7 +198,8 @@ export default defineComponent({ showActions() { return ( - !this.selectedFiles.length && !(this.uploadOrFileCreationBlocked && this.isPublicLocation) + this.selectedFiles.length < 2 && + !(this.uploadOrFileCreationBlocked && this.isPublicLocation) ) }, diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue index 72fd9adcf27..b7ba1f6b555 100644 --- a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue +++ b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue @@ -5,7 +5,7 @@ :key="`batch-action-${i}`" :action="action" :items="selectedFiles" - appearance="outline" + appearance="raw" class="oc-mr-s" /> @@ -41,12 +41,6 @@ export default { computed: { ...mapGetters('Files', ['selectedFiles']), - filterParams() { - return { - resources: this.selectedFiles - } - }, - menuItemsBatchActions() { return [ ...this.$_acceptShare_items, diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue index 763b5054332..cb705924da3 100644 --- a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue +++ b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue @@ -1,5 +1,15 @@ diff --git a/packages/web-app-files/src/components/TrashBin.vue b/packages/web-app-files/src/components/TrashBin.vue index c70a225e020..c6073480c1d 100644 --- a/packages/web-app-files/src/components/TrashBin.vue +++ b/packages/web-app-files/src/components/TrashBin.vue @@ -1,6 +1,11 @@