[full-ci] Web-648: Details sidebar for multiple selection

changelog/unreleased/enhancement-add-multiple-selection-sidebar

@@ -0,0 +1,7 @@
+Enhancement: Add multiple selection Sidebar
+
+We've changed the sidebar so if a user selects multiple files or folders
+he sees a detailed view of his selection in the sidebar.
+
+https://github.com/owncloud/web/issues/5164
+https://github.com/owncloud/web/pull/5630

packages/web-app-files/src/App.vue

@@ -4,20 +4,18 @@
       ref="filesListWrapper"
       tabindex="-1"
       class="files-list-wrapper uk-width-expand"
-      :class="{ 'uk-visible@m': _sidebarOpen }"
       @dragover="$_ocApp_dragOver"
     >
       <app-bar id="files-app-bar" />
       <progress-bar v-show="$_uploadProgressVisible" id="files-upload-progress" class="oc-p-s" />
       <router-view id="files-view" />
     </div>
     <side-bar
-      v-if="_sidebarOpen"
+      v-if="showSidebar"
       id="files-sidebar"
       ref="filesSidebar"
       tabindex="-1"
       class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl"
-      @reset="$_destroySideBar_hideDetails"
       @beforeDestroy="focusSideBar"
       @mounted="focusSideBar"
       @fileChanged="focusSideBar"
@@ -27,19 +25,19 @@
 <script>
 import Mixins from './mixins'
 import MixinRoutes from './mixins/routes'
-import MixinDestroySideBar from './mixins/sidebar/destroySideBar'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import AppBar from './components/AppBar/AppBar.vue'
 import ProgressBar from './components/Upload/ProgressBar.vue'
 import SideBar from './components/SideBar/SideBar.vue'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   components: {
     AppBar,
     ProgressBar,
     SideBar
   },
-  mixins: [Mixins, MixinRoutes, MixinDestroySideBar],
+  mixins: [Mixins, MixinRoutes],
   data() {
     return {
       createFolder: false,
@@ -48,36 +46,39 @@ export default {
       upload: false,
       fileName: '',
       selected: [],
-      breadcrumbs: []
+      breadcrumbs: [],
+      sidebarClosed: true
     }
   },
   computed: {
-    ...mapGetters('Files', ['dropzone', 'highlightedFile', 'inProgress']),
-
-    _sidebarOpen() {
-      return this.highlightedFile !== null
-    },
+    ...mapGetters('Files', ['dropzone', 'inProgress', 'selectedFiles']),
 
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
+    },
+    showSidebar() {
+      return this.selectedFiles && this.selectedFiles.length > 0 && !this.sidebarClosed
     }
   },
   watch: {
     $route() {
-      this.$_destroySideBar_hideDetails()
       this.resetFileSelection()
     },
-    highlightedFile(file) {
-      if (file !== null) {
-        return
-      }
-      this.$_destroySideBar_hideDetails()
+    showSidebar(visible) {
+      if (visible) return
+      this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     }
   },
   created() {
     this.$root.$on('upload-end', () => {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
+    bus.on('app.files.sidebar.close', () => {
+      this.sidebarClosed = true
+    })
+    bus.on('app.files.sidebar.show', () => {
+      this.sidebarClosed = false
+    })
   },
 
   beforeDestroy() {
@@ -87,7 +88,10 @@ export default {
   methods: {
     ...mapActions('Files', ['dragOver', 'resetFileSelection']),
     ...mapActions(['showMessage']),
-    ...mapMutations(['SET_SIDEBAR_FOOTER_CONTENT_COMPONENT']),
+    ...mapMutations('Files', [
+      'SET_SIDEBAR_FOOTER_CONTENT_COMPONENT',
+      'SET_APP_SIDEBAR_ACTIVE_PANEL'
+    ]),
 
     trace() {
       console.info('trace', arguments)

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -288,7 +288,12 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['updateFileProgress', 'removeFilesFromTrashbin', 'loadIndicators']),
+    ...mapActions('Files', [
+      'updateFileProgress',
+      'removeFilesFromTrashbin',
+      'loadIndicators',
+      'setFileSelection'
+    ]),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', ['UPSERT_RESOURCE', 'SET_HIDDEN_FILES_VISIBILITY']),
     ...mapMutations(['SET_QUOTA']),
@@ -362,7 +367,7 @@ export default {
         }
 
         setTimeout(() => {
-          this.setHighlightedFile(resource)
+          this.setFileSelection([resource])
           this.scrollToResource(resource)
         })
       } catch (error) {
@@ -451,7 +456,7 @@ export default {
         }
 
         setTimeout(() => {
-          this.setHighlightedFile(resource)
+          this.setFileSelection([resource])
           this.scrollToResource(resource)
         })
       } catch (error) {

packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue

@@ -181,7 +181,7 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['removeFilesFromTrashbin', 'resetFileSelection', 'setHighlightedFile']),
+    ...mapActions('Files', ['removeFilesFromTrashbin', 'resetFileSelection']),
     ...mapActions(['showMessage']),
     ...mapMutations('Files', ['UPDATE_RESOURCE']),
 
@@ -206,7 +206,6 @@ export default {
           })
       }
       this.resetFileSelection()
-      this.setHighlightedFile(null)
     },
 
     emptyTrashbin() {

packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue

@@ -19,6 +19,7 @@
       >%{ amount } selected item
     </translate>
     <oc-button
+      id="files-clear-selection"
       v-oc-tooltip="clearSelectionLabel"
       :aria-label="clearSelectionLabel"
       class="oc-ml oc-mr-xs"

packages/web-app-files/src/components/FilesList/QuickActions.vue

@@ -8,7 +8,7 @@
       appearance="raw"
       class="oc-mr-xs"
       :class="`files-quick-action-${action.id}`"
-      @click.stop="action.handler({ item, client: $client, store: $store })"
+      @click="action.handler({ item, client: $client, store: $store })"
     >
       <oc-icon :name="action.icon" class="uk-flex" />
     </oc-button>

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -6,7 +6,7 @@
         :style="{
           'background-image': $asyncComputed.preview.updating ? 'none' : `url(${preview})`
         }"
-        class="details-preview uk-flex uk-flex-middle uk-flex-center oc-mb-m"
+        class="details-preview uk-flex uk-flex-middle uk-flex-center oc-mb"
         data-testid="preview"
       >
         <oc-spinner v-if="$asyncComputed.preview.updating" />
@@ -34,7 +34,7 @@
         </oc-button>
         <p class="oc-my-rm oc-mx-s" v-text="detailSharingInformation" />
       </div>
-      <table class="details-table" aria-label="detailsTableLabel">
+      <table class="details-table" :aria-label="detailsTableLabel">
         <tr v-if="hasTimestamp" data-testid="timestamp">
           <th scope="col" class="oc-pr-s" v-text="timestampTitle" />
           <td>
@@ -233,7 +233,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Files', ['setHighlightedFile', 'loadPreview', 'loadVersions']),
+    ...mapActions('Files', ['loadPreview', 'loadVersions']),
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
     expandPeoplesAccordion() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL('sharing-item')

packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue

@@ -0,0 +1,120 @@
+<template>
+  <div id="oc-file-details-multiple-sidebar">
+    <div class="files-preview oc-mb">
+      <div class="files-preview-body">
+        <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
+        <span class="preview-text" data-testid="selectedFilesText" v-text="selectedFilesString" />
+      </div>
+    </div>
+    <div>
+      <table class="details-table" :aria-label="detailsTableLabel">
+        <tr data-testid="filesCount">
+          <th scope="col" class="oc-pr-s" v-text="filesText" />
+          <td v-text="filesCount" />
+        </tr>
+        <tr data-testid="foldersCount">
+          <th scope="col" class="oc-pr-s" v-text="foldersText" />
+          <td v-text="foldersCount" />
+        </tr>
+        <tr v-if="showSize" data-testid="size">
+          <th scope="col" class="oc-pr-s" v-text="sizeText" />
+          <td v-text="sizeValue" />
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import Mixins from '../../../mixins'
+import MixinResources from '../../../mixins/resources'
+import MixinRoutes from '../../../mixins/routes'
+import { mapGetters } from 'vuex'
+
+export default {
+  mixins: [Mixins, MixinResources, MixinRoutes],
+  title: $gettext => {
+    return $gettext('Details')
+  },
+  computed: {
+    ...mapGetters('Files', ['selectedFiles']),
+    selectedFilesCount() {
+      return this.selectedFiles.length
+    },
+    selectedFilesString() {
+      return this.$gettextInterpolate(
+        this.$ngettext(
+          '%{ itemCount } item selected',
+          '%{ itemCount } items selected',
+          this.selectedFilesCount
+        ),
+        {
+          itemCount: this.selectedFilesCount
+        }
+      )
+    },
+    sizeValue() {
+      let size = 0
+      this.selectedFiles.forEach(i => (size += parseInt(i.size)))
+      return this.getResourceSize(size)
+    },
+    showSize() {
+      return this.getResourceSize(this.selectedFiles[0].size) !== '?'
+    },
+    sizeText() {
+      return this.$gettext('Size')
+    },
+    filesCount() {
+      return this.selectedFiles.filter(i => i.type === 'file').length
+    },
+    filesText() {
+      return this.$gettext('Files')
+    },
+    foldersCount() {
+      return this.selectedFiles.filter(i => i.type === 'folder').length
+    },
+    foldersText() {
+      return this.$gettext('Folders')
+    },
+    detailsTableLabel() {
+      return this.$gettext('Overview of the information about the selected files')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.files-preview {
+  position: relative;
+  background-color: var(--oc-color-background-muted);
+  border: 10px solid var(--oc-color-background-muted);
+  height: 230px;
+  text-align: center;
+  color: var(--oc-color-swatch-passive-muted);
+
+  &-body {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    .preview-icon {
+      display: inline-block;
+    }
+    .preview-text {
+      display: block;
+    }
+  }
+}
+.details-table {
+  text-align: left;
+
+  tr {
+    height: 1.5rem;
+  }
+
+  th {
+    font-weight: 600;
+  }
+}
+</style>