Add info about number of selected items and their size

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']),

apps/files/src/components/FilesAppBar.vue

@@ -9,32 +9,34 @@
       @error="onFileError"
       @progress="onFileProgress"
     />
-    <oc-grid flex gutter="small">
+    <div>
       <div>
-        <div class="uk-flex">
+        <div class="uk-flex uk-margin-small-bottom">
           <oc-breadcrumb
             v-if="showBreadcrumb"
             id="files-breadcrumb"
             :items="breadcrumbs"
             home
           ></oc-breadcrumb>
         </div>
-        <span v-if="!showBreadcrumb" class="uk-flex uk-flex-middle">
+        <span v-if="!showBreadcrumb" class="uk-flex uk-flex-middle uk-margin-small-bottom">
           <oc-icon v-if="pageIcon" :name="pageIcon" class="uk-margin-small-right" />
           <h1 class="oc-page-title" v-text="pageTitle" />
         </span>
         <span v-else-if="showBreadcrumb">
           <h1 class="oc-visually-hidden" v-text="pageTitle" />
         </span>
       </div>
-      <div>
+      <div class="uk-flex uk-flex-middle">
         <template v-if="$_ocFilesAppBar_showActions">
-          <template v-if="canUpload && hasFreeSpace">
+          <template v-if="areDefaultActionsVisible">
             <oc-button
               id="new-file-menu-btn"
               key="new-file-menu-btn-enabled"
               variation="primary"
               icon="add"
+              :uk-tooltip="_cannotCreateDialogText"
+              :disabled="isNewBtnDisabled"
               ><translate>New</translate></oc-button
             >
             <oc-drop
@@ -78,24 +80,43 @@
               </oc-nav>
             </oc-drop>
           </template>
-          <!-- FIXME: Unite new file menu btn -->
-          <oc-button
+        </template>
+        <div
+          v-if="selectedResourcesAmount > 0"
+          class="uk-margin-small-right uk-visible@l uk-flex uk-flex-middle"
+        >
+          <translate
+            v-if="selectedResourcesSize !== '?'"
+            key="multiple-select-info"
+            :translate-n="selectedResourcesAmount"
+            :translate-params="{ amount: selectedResourcesAmount, size: selectedResourcesSize }"
+            translate-plural="%{ amount } selected items - %{ size }"
+            translate-comment="Number of selected resources and their size displayed above the files list"
+            >%{ amount } selected item - %{ size }</translate
+          >
+          <translate
             v-else
-            id="new-file-menu-btn"
-            key="new-file-menu-btn-disabled"
-            disabled
-            :uk-tooltip="_cannotCreateDialogText"
-            ><translate>+ New</translate></oc-button
+            key="multiple-select-info-with-size"
+            :translate-n="selectedResourcesAmount"
+            :translate-params="{ amount: selectedResourcesAmount }"
+            translate-plural="%{ amount } selected items"
+            translate-comment="Number of selected resources displayed above the files list"
+            >%{ amount } selected item</translate
           >
-        </template>
+          <span class="uk-margin-small-left uk-margin-small-right">|</span>
+          <oc-button variation="raw" @click="resetFileSelection"
+            ><translate>Clear selection</translate></oc-button
+          >
+        </div>
         <template v-if="$route.name === 'files-trashbin'">
           <oc-button
             v-if="selectedFiles.length > 0"
             key="restore-btn"
             icon="restore"
+            class="uk-margin-small-right"
             @click="$_ocTrashbin_restoreFiles()"
           >
-            <translate>Restore selected</translate>
+            <translate>Restore</translate>
           </oc-button>
           <oc-button
             id="delete-selected-btn"
@@ -109,42 +130,42 @@
             {{ $_ocAppBar_clearTrashbinButtonText }}
           </oc-button>
         </template>
+        <oc-grid v-if="displayBulkActions" gutter="small">
+          <div>
+            <oc-button
+              id="delete-selected-btn"
+              key="delete-selected-btn"
+              icon="delete"
+              @click="$_deleteResources_displayDialog()"
+            >
+              <translate>Delete</translate>
+            </oc-button>
+          </div>
+          <div>
+            <oc-button
+              id="move-selected-btn"
+              key="move-selected-btn"
+              icon="folder-move"
+              :disabled="!canMove"
+              @click.native="triggerLocationPicker('move')"
+            >
+              <translate>Move</translate>
+            </oc-button>
+          </div>
+          <div>
+            <oc-button
+              id="copy-selected-btn"
+              key="copy-selected-btn"
+              icon="file_copy"
+              :disabled="!canCopy"
+              @click.native="triggerLocationPicker('copy')"
+            >
+              <translate>Copy</translate>
+            </oc-button>
+          </div>
+        </oc-grid>
       </div>
-      <oc-grid v-if="displayBulkActions" gutter="small">
-        <div>
-          <oc-button
-            id="delete-selected-btn"
-            key="delete-selected-btn"
-            icon="delete"
-            @click="$_deleteResources_displayDialog()"
-          >
-            <translate>Delete selected</translate>
-          </oc-button>
-        </div>
-        <div>
-          <oc-button
-            id="move-selected-btn"
-            key="move-selected-btn"
-            icon="folder-move"
-            :disabled="!canMove"
-            @click.native="triggerLocationPicker('move')"
-          >
-            <translate>Move selected</translate>
-          </oc-button>
-        </div>
-        <div>
-          <oc-button
-            id="copy-selected-btn"
-            key="copy-selected-btn"
-            icon="file_copy"
-            :disabled="!canCopy"
-            @click.native="triggerLocationPicker('copy')"
-          >
-            <translate>Copy selected</translate>
-          </oc-button>
-        </div>
-      </oc-grid>
-    </oc-grid>
+    </div>
   </div>
 </template>
 
@@ -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: {

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

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

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

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'
     }
   }
 }