From 32aa1001086db8351470ddd6718b8251b2b3c0ad Mon Sep 17 00:00:00 2001 From: Lukas Hirt Date: Tue, 28 Jul 2020 23:30:05 +0200 Subject: [PATCH] Add info about number of selected items and their size We've added information about the number of selected items and their size above the files list next to batch actions --- apps/files/src/components/FilesApp.vue | 3 +- apps/files/src/components/FilesAppBar.vue | 145 ++++++++++++------ changelog/unreleased/multi-select-info | 6 + .../webUIFavorites/favoritesFile.feature | 4 +- .../webUIFavorites/unfavoriteFile.feature | 2 +- .../pageObjects/FilesPageElement/filesList.js | 14 +- 6 files changed, 116 insertions(+), 58 deletions(-) create mode 100644 changelog/unreleased/multi-select-info diff --git a/apps/files/src/components/FilesApp.vue b/apps/files/src/components/FilesApp.vue index f1b4f7f57fe..0305804c56a 100644 --- a/apps/files/src/components/FilesApp.vue +++ b/apps/files/src/components/FilesApp.vue @@ -101,6 +101,7 @@ export default { watch: { $route() { this.setHighlightedFile(null) + this.resetFileSelection() } }, created() { @@ -114,7 +115,7 @@ export default { }, methods: { - ...mapActions('Files', ['dragOver', 'setHighlightedFile']), + ...mapActions('Files', ['dragOver', 'setHighlightedFile', 'resetFileSelection']), ...mapActions(['openFile', 'showMessage']), ...mapMutations('Files', ['SET_CURRENT_SIDEBAR_TAB']), ...mapMutations(['SET_SIDEBAR_FOOTER_CONTENT_COMPONENT']), diff --git a/apps/files/src/components/FilesAppBar.vue b/apps/files/src/components/FilesAppBar.vue index eaee2d23a7a..31112125bee 100644 --- a/apps/files/src/components/FilesAppBar.vue +++ b/apps/files/src/components/FilesAppBar.vue @@ -9,9 +9,9 @@ @error="onFileError" @progress="onFileProgress" /> - +
-
+
- +

@@ -27,14 +27,16 @@

-
+
@@ -159,6 +180,7 @@ import MixinDeleteResources from '../mixins/deleteResources' import pathUtil from 'path' import { canBeMoved } from '../helpers/permissions' import { cloneStateObject } from '../helpers/store' +import { getResourceSize } from '../helpers/resources' export default { components: { @@ -231,7 +253,7 @@ export default { $_ocAppBar_clearTrashbinButtonText() { return this.selectedFiles.length < 1 ? this.$gettext('Empty trash bin') - : this.$gettext('Delete selected') + : this.$gettext('Delete') }, showBreadcrumb() { @@ -332,6 +354,29 @@ export default { } return true + }, + + areDefaultActionsVisible() { + return this.selectedFiles.length < 1 + }, + + isNewBtnDisabled() { + return !this.canUpload || !this.hasFreeSpace + }, + + selectedResourcesAmount() { + return this.selectedFiles.length + }, + + selectedResourcesSize() { + const resources = cloneStateObject(this.selectedFiles) + let size = 0 + + for (const resource of resources) { + size += parseInt(resource.size, 10) + } + + return getResourceSize(size) } }, methods: { diff --git a/changelog/unreleased/multi-select-info b/changelog/unreleased/multi-select-info new file mode 100644 index 00000000000..d15f307ea4b --- /dev/null +++ b/changelog/unreleased/multi-select-info @@ -0,0 +1,6 @@ +Enhancement: Add info about number of selected items and their size + +We've added information about the number of selected items and their size above the files list next to batch actions. + +https://github.com/owncloud/product/issues/122 +https://github.com/owncloud/phoenix/pull/3850 \ No newline at end of file diff --git a/tests/acceptance/features/webUIFavorites/favoritesFile.feature b/tests/acceptance/features/webUIFavorites/favoritesFile.feature index c41c66d6d1c..d00e21104cb 100644 --- a/tests/acceptance/features/webUIFavorites/favoritesFile.feature +++ b/tests/acceptance/features/webUIFavorites/favoritesFile.feature @@ -1,4 +1,4 @@ -@skipOnOCIS @ocis-reva-issue-39 +@skipOnOCIS @ocis-reva-issue-39 @skipOnIphoneResolution @ocis-web=issue-3968 Feature: Mark file as favorite As a user @@ -10,7 +10,7 @@ Feature: Mark file as favorite And user "user1" has logged in using the webUI And the user has browsed to the files page - @smokeTest + @smokeTes Scenario: mark files as favorites When the user marks file "data.tar.gz" as favorite using the webUI And the user marks file "data.zip" as favorite using the webUI diff --git a/tests/acceptance/features/webUIFavorites/unfavoriteFile.feature b/tests/acceptance/features/webUIFavorites/unfavoriteFile.feature index 17da2fc8f02..16447934050 100644 --- a/tests/acceptance/features/webUIFavorites/unfavoriteFile.feature +++ b/tests/acceptance/features/webUIFavorites/unfavoriteFile.feature @@ -1,4 +1,4 @@ -@skipOnOCIS @ocis-reva-issue-39 +@skipOnOCIS @ocis-reva-issue-39 @skipOnIphoneResolution @ocis-web=issue-3968 Feature: Unmark file/folder as favorite As a user diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js index a5082ce5d81..a7b7c26025b 100644 --- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js +++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js @@ -457,7 +457,7 @@ module.exports = { await this.initAjaxCounters() await this.waitForElementVisible('@virtualScrollWrapper') await this.api.executeAsync( - function({ itemName, scrollWrapperSelector, listHeaderSelector }, done) { + function({ itemName, scrollWrapperSelector, listHeaderSelector, listItemSelector }, done) { const virtualScrollWrapper = document.querySelector(scrollWrapperSelector) const tableHeaderPosition = document .querySelector(listHeaderSelector) @@ -484,7 +484,9 @@ module.exports = { return } - scrollDistance += virtualScrollWrapper.clientHeight + const listItemHeight = document.querySelector(listItemSelector).clientHeight + + scrollDistance += listItemHeight * 5 virtualScrollWrapper.scrollTop = scrollDistance setTimeout(function() { scrollUntilElementVisible() @@ -497,7 +499,8 @@ module.exports = { { itemName: itemName, scrollWrapperSelector: this.elements.virtualScrollWrapper.selector, - listHeaderSelector: this.elements.filesTableHeader.selector + listHeaderSelector: this.elements.filesTableHeader.selector, + listItemSelector: this.elements.filesListItem.selector } ] ) @@ -797,7 +800,7 @@ module.exports = { locateStrategy: 'xpath' }, restoreSelectedButton: { - selector: '//span[contains(text(),"Restore selected")]', + selector: '//span[contains(text(),"Restore")]', locateStrategy: 'xpath' }, linkToPublicLinksTag: { @@ -834,6 +837,9 @@ module.exports = { selector: '//span[contains(@class, "oc-file-name") and text()="%s" and not(../span[contains(@class, "oc-file-extension")])]/ancestor::div[@class="files-list-row-disabled" and @data-is-visible="true"]', locateStrategy: 'xpath' + }, + filesListItem: { + selector: '.vue-recycle-scroller__item-view' } } }