Change approach for batch actions inside contextmenu

owncloud · Nov 4, 2021 · e8944e8 · e8944e8
1 parent 2f8bf35
commit e8944e8
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 30 deletions.
diff --git a/changelog/unreleased/enhancement-contextmenu-multiple-files b/changelog/unreleased/enhancement-contextmenu-multiple-files
@@ -0,0 +1,6 @@
+Enhancement: Contextmenu for multiple files
+
+We have enabled batch actions in the context menu for when multiple resources are selected.
+
+https://github.com/owncloud/web/pull/5973
+https://github.com/owncloud/web/issues/5968
diff --git a/packages/web-app-files/src/components/FilesList/ContextActions.vue b/packages/web-app-files/src/components/FilesList/ContextActions.vue
@@ -5,6 +5,7 @@
         :id="`oc-files-context-actions-${section.name}`"
         :key="`section-${section.name}-list`"
         class="uk-list oc-mt-s oc-files-context-actions"
+        :class="{ 'oc-my-s': i === menuSections.length - 1 }"
       >
         <li
           v-for="(action, j) in section.items"
@@ -75,8 +76,8 @@ export default {
   ],
 
   props: {
-    item: {
-      type: Object,
+    items: {
+      type: Array,
       required: true
     }
   },
@@ -86,6 +87,15 @@ export default {
 
     menuSections() {
       const sections = []
+
+      if (this.items.length > 1) {
+        sections.push({
+          name: 'batch-actions',
+          items: this.menuItemsBatchActions
+        })
+        return sections
+      }
+
       if (this.menuItemsContext.length) {
         sections.push({
           name: 'context',
@@ -109,11 +119,25 @@ export default {
 
     filterParams() {
       return {
-        resource: this.item,
+        resource: this.items[0],
+        resources: this.items,
         parent: this.currentFolder
       }
     },
 
+    menuItemsBatchActions() {
+      return [
+        ...this.$_rename_items,
+        ...this.$_move_items,
+        ...this.$_copy_items,
+        ...this.$_restore_items,
+        ...this.$_acceptShare_items,
+        ...this.$_declineShare_items,
+        ...this.$_delete_items,
+        ...this.$_showActions_items
+      ].filter((item) => item.isEnabled(this.filterParams))
+    },
+
     menuItemsContext() {
       const fileHandlers = [
         ...this.$_fileActions_editorActions,

diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
@@ -25,7 +25,7 @@
           <quick-actions class="oc-visible@s" :item="props.resource" :actions="app.quickActions" />
         </template>
         <template #contextMenu="{ resource }">
-          <context-actions v-if="isHighlightedFile(resource)" :item="resource" />
+          <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
           <pagination />
@@ -67,7 +67,14 @@ import { DavProperties } from 'web-pkg/src/constants'
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { QuickActions, ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
+  components: {
+    QuickActions,
+    ListLoader,
+    NoContentMessage,
+    ListInfo,
+    Pagination,
+    ContextActions
+  },
 
   mixins: [
     FileActions,
@@ -176,8 +183,8 @@ export default {
       visibilityObserver.observe(component.$el, { onEnter: debounced, onExit: debounced.cancel })
     },
 
-    isHighlightedFile(resource) {
-      return resource && resource.id === this.highlightedFile?.id
+    isResourceInSelection(resource) {
+      return(this.selected?.includes(resource))
     }
   }
 }

diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
@@ -40,7 +40,7 @@
           />
         </template>
         <template #contextMenu="{ resource }">
-          <context-actions v-if="isHighlightedFile(resource)" :item="resource" />
+          <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
           <pagination />
@@ -387,8 +387,8 @@ export default {
       }
     },
 
-    isHighlightedFile(resource) {
-      return resource && resource.id === this.highlightedFile?.id
+    isResourceInSelection(resource) {
+      return(this.selected?.includes(resource))
     }
   }
 }

diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
@@ -30,7 +30,7 @@
         @rowMounted="rowMounted"
       >
         <template #contextMenu="{ resource }">
-          <context-actions v-if="isHighlightedFile(resource)" :item="resource" />
+          <context-actions v-if="isResourceInSelection(resource)" :item="resource" />
         </template>
         <template #footer>
           <pagination />
@@ -242,8 +242,8 @@ export default {
       })
     },
 
-    isHighlightedFile(resource) {
-      return resource && resource.id === this.highlightedFile?.id
+    isResourceInSelection(resource) {
+      return(this.selected?.includes(resource))
     }
   }
 }

diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -26,7 +26,7 @@
         @rowMounted="rowMounted"
       >
         <template #contextMenu="{ resource }">
-          <context-actions v-if="isHighlightedFile(resource)" :item="resource" />
+          <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
           <pagination />
@@ -190,8 +190,8 @@ export default {
       visibilityObserver.observe(component.$el, { onEnter: debounced, onExit: debounced.cancel })
     },
 
-    isHighlightedFile(resource) {
-      return resource && resource.id === this.highlightedFile?.id
+    isResourceInSelection(resource) {
+      return(this.selected?.includes(resource))
     }
   }
 }

diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -46,7 +46,7 @@
             </div>
           </template>
           <template #contextMenu="{ resource }">
-            <context-actions v-if="isHighlightedFile(resource)" :item="resource" />
+            <context-actions v-if="isResourceInSelection(resource)" :item="resource" />
           </template>
           <template v-if="pendingHasMore" #footer>
             <div class="uk-width-1-1 uk-text-center oc-mt">
@@ -132,7 +132,7 @@
           </div>
         </template>
         <template #contextMenu="{ resource }">
-          <context-actions v-if="isHighlightedFile(resource)" :item="resource" />
+          <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
           <list-info
@@ -385,8 +385,8 @@ export default {
       this.showMorePending = !this.showMorePending
     },
 
-    isHighlightedFile(resource) {
-      return resource && resource.id === this.highlightedFile?.id
+    isResourceInSelection(resource) {
+      return(this.selected?.includes(resource))
     }
   }
 }

diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -28,7 +28,7 @@
         @rowMounted="rowMounted"
       >
         <template #contextMenu="{ resource }">
-          <context-actions v-if="isHighlightedFile(resource)" :item="resource" />
+          <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
           <pagination />
@@ -195,8 +195,8 @@ export default {
       visibilityObserver.observe(component.$el, { onEnter: debounced, onExit: debounced.cancel })
     },
 
-    isHighlightedFile(resource) {
-      return resource && resource.id === this.highlightedFile?.id
+    isResourceInSelection(resource) {
+      return(this.selected?.includes(resource))
     }
   }
 }

diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
@@ -25,7 +25,7 @@
         :header-position="headerPosition"
       >
         <template #contextMenu="{ resource }">
-          <context-actions v-if="isHighlightedFile(resource)" :item="resource" />
+          <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
           <pagination />
@@ -138,8 +138,8 @@ export default {
   methods: {
     ...mapMutations('Files', ['LOAD_FILES', 'SET_FILE_SELECTION', 'CLEAR_CURRENT_FILES_LIST']),
 
-    isHighlightedFile(resource) {
-      return resource && resource.id === this.highlightedFile?.id
+    isResourceInSelection(resource) {
+      return(this.selected?.includes(resource))
     }
   }
 }

diff --git a/...s/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap b/...s/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ContextActions menu items renders a list of actions for a file 1`] = `
-<div id="oc-files-context-menu">
+<div id="oc-files-context-menu" item="[object Object]">
   <ul id="oc-files-context-actions-context" class="uk-list oc-mt-s oc-files-context-actions">
     <li class="oc-files-context-action"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-markdown-editor-trigger">
         <oc-icon-stub name="text" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
@@ -68,7 +68,7 @@ exports[`ContextActions menu items renders a list of actions for a file 1`] = `
       </button></li>
   </ul>
   <hr>
-  <ul id="oc-files-context-actions-sidebar" class="uk-list oc-mt-s oc-files-context-actions">
+  <ul id="oc-files-context-actions-sidebar" class="uk-list oc-mt-s oc-files-context-actions oc-my-s">
     <li class="oc-files-context-action"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-details-trigger">
         <oc-icon-stub name="info_outline" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
         <!----> <span class="oc-files-context-action-label">Details</span>
@@ -80,7 +80,7 @@ exports[`ContextActions menu items renders a list of actions for a file 1`] = `
 `;
 
 exports[`ContextActions menu items renders a list of actions for a folder 1`] = `
-<div id="oc-files-context-menu">
+<div id="oc-files-context-menu" item="[object Object]">
   <ul id="oc-files-context-actions-context" class="uk-list oc-mt-s oc-files-context-actions">
     <li class="oc-files-context-action"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-markdown-editor-trigger">
         <oc-icon-stub name="text" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
@@ -147,7 +147,7 @@ exports[`ContextActions menu items renders a list of actions for a folder 1`] =
       </button></li>
   </ul>
   <hr>
-  <ul id="oc-files-context-actions-sidebar" class="uk-list oc-mt-s oc-files-context-actions">
+  <ul id="oc-files-context-actions-sidebar" class="uk-list oc-mt-s oc-files-context-actions oc-my-s">
     <li class="oc-files-context-action"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-details-trigger">
         <oc-icon-stub name="info_outline" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
         <!----> <span class="oc-files-context-action-label">Details</span>