Refactor spaces context menus

changelog/unreleased/enhancement-spaces-context-menus

@@ -0,0 +1,7 @@
+Enhancement: Spaces context menus
+
+Spaces context menus have been adjusted visibly to match the other available context menus.
+Also, the corresponding component has been abstracted in the course of this. This cleans up a lot of (duplicated) code across the spaces views and makes future adjustments easier.
+
+https://github.com/owncloud/web/pull/6659
+https://github.com/owncloud/web/issues/6634

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

@@ -26,7 +26,7 @@
         v-else-if="action.icon"
         data-testid="action-icon"
         :name="action.icon"
-        fill-type="line"
+        :fill-type="action.iconFillType || 'line'"
         size="medium"
       />
       <span class="oc-files-context-action-label" data-testid="action-label">{{

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

@@ -0,0 +1,93 @@
+<template>
+  <div id="oc-files-context-menu">
+    <template v-for="(section, sectionIndex) in menuSections">
+      <oc-list
+        :id="`oc-files-context-actions-${section.name}`"
+        :key="`section-${section.name}-list`"
+        class="oc-files-context-actions"
+        :class="getSectionClasses(sectionIndex)"
+      >
+        <action-menu-item
+          v-for="(action, actionIndex) in section.items"
+          :key="`section-${section.name}-action-${actionIndex}`"
+          :action="action"
+          :items="items"
+          class="oc-files-context-action oc-px-s oc-rounded"
+        />
+      </oc-list>
+    </template>
+  </div>
+</template>
+
+<script>
+import ActionMenuItem from './ActionMenuItem.vue'
+
+export default {
+  name: 'ContextActionMenu',
+  components: { ActionMenuItem },
+  props: {
+    menuSections: {
+      type: Array,
+      required: true
+    },
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    getSectionClasses(index) {
+      const classes = []
+      if (!this.menuSections.length) {
+        return classes
+      }
+      if (index < this.menuSections.length - 1) {
+        classes.push('oc-pb-s')
+      }
+      if (index > 0) {
+        classes.push('oc-pt-s')
+      }
+      if (index < this.menuSections.length - 1) {
+        classes.push('oc-files-context-actions-border')
+      }
+      return classes
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.oc-files-context-actions {
+  text-align: left;
+  white-space: normal;
+
+  > li {
+    padding: 6px;
+    &:hover {
+      background-color: var(--oc-color-background-hover);
+    }
+
+    a,
+    button,
+    span {
+      color: var(--oc-color-swatch-passive-default) !important;
+      display: inline-flex;
+      font-weight: normal !important;
+      gap: 10px;
+      justify-content: flex-start;
+      vertical-align: top;
+      width: 100%;
+      text-align: left;
+
+      &:hover {
+        color: var(--oc-color-swatch-passive-default);
+        text-decoration: none !important;
+      }
+    }
+  }
+
+  &-border {
+    border-bottom: 1px solid var(--oc-color-border);
+  }
+}
+</style>

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

@@ -1,26 +1,9 @@
 <template>
-  <div id="oc-files-context-menu">
-    <template v-for="(section, sectionIndex) in menuSections">
-      <oc-list
-        :id="`oc-files-context-actions-${section.name}`"
-        :key="`section-${section.name}-list`"
-        class="oc-files-context-actions"
-        :class="getSectionClasses(sectionIndex)"
-      >
-        <action-menu-item
-          v-for="(action, actionIndex) in section.items"
-          :key="`section-${section.name}-action-${actionIndex}`"
-          :action="action"
-          :items="items"
-          class="oc-files-context-action oc-px-s oc-rounded"
-        />
-      </oc-list>
-    </template>
-  </div>
+  <context-action-menu :menu-sections="menuSections" :items="items" />
 </template>
 
 <script>
-import ActionMenuItem from '../ActionMenuItem.vue'
+import ContextActionMenu from '../ContextActionMenu.vue'
 
 import FileActions from '../../mixins/fileActions'
 import AcceptShare from '../../mixins/actions/acceptShare'
@@ -45,7 +28,7 @@ import SpaceNavigate from '../../mixins/spaces/actions/navigate'
 
 export default {
   name: 'ContextActions',
-  components: { ActionMenuItem },
+  components: { ContextActionMenu },
   mixins: [
     FileActions,
     AcceptShare,
@@ -183,60 +166,6 @@ export default {
         ...this.$_showDetails_items
       ].filter((item) => item.isEnabled(this.filterParams))
     }
-  },
-  methods: {
-    getSectionClasses(index) {
-      const classes = []
-      if (!this.menuSections.length) {
-        return classes
-      }
-      if (index < this.menuSections.length - 1) {
-        classes.push('oc-pb-s')
-      }
-      if (index > 0) {
-        classes.push('oc-pt-s')
-      }
-      if (index < this.menuSections.length - 1) {
-        classes.push('oc-files-context-actions-border')
-      }
-      return classes
-    }
   }
 }
 </script>
-
-<style lang="scss">
-.oc-files-context-actions {
-  text-align: left;
-  white-space: normal;
-
-  > li {
-    padding: 6px;
-    &:hover {
-      background-color: var(--oc-color-background-hover);
-    }
-
-    a,
-    button,
-    span {
-      color: var(--oc-color-swatch-passive-default) !important;
-      display: inline-flex;
-      font-weight: normal !important;
-      gap: 10px;
-      justify-content: flex-start;
-      vertical-align: top;
-      width: 100%;
-      text-align: left;
-
-      &:hover {
-        color: var(--oc-color-swatch-passive-default);
-        text-decoration: none !important;
-      }
-    }
-  }
-
-  &-border {
-    border-bottom: 1px solid var(--oc-color-border);
-  }
-}
-</style>

packages/web-app-files/src/components/Spaces/SpaceContextActions.vue

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <context-action-menu :menu-sections="menuSections" :items="items" />
+    <quota-modal
+      v-if="quotaModalIsOpen"
+      :cancel="closeQuotaModal"
+      :space="quotaModalSelectedSpace"
+    />
+    <readme-content-modal
+      v-if="readmeContentModalIsOpen"
+      :cancel="closeReadmeContentModal"
+      :space="items[0]"
+    ></readme-content-modal>
+    <input
+      id="space-image-upload-input"
+      ref="spaceImageInput"
+      type="file"
+      name="file"
+      multiple
+      tabindex="-1"
+      accept="image/*"
+      @change="$_uploadImage_uploadImageSpace"
+    />
+  </div>
+</template>
+
+<script>
+import ContextActionMenu from '../ContextActionMenu.vue'
+import QuotaModal from './QuotaModal.vue'
+import ReadmeContentModal from './ReadmeContentModal.vue'
+
+import Delete from '../../mixins/spaces/actions/delete'
+import Rename from '../../mixins/spaces/actions/rename'
+import Restore from '../../mixins/spaces/actions/restore'
+import ShowDetails from '../../mixins/spaces/actions/showDetails'
+import EditDescription from '../../mixins/spaces/actions/editDescription'
+import EditQuota from '../../mixins/spaces/actions/editQuota'
+import DeletedFiles from '../../mixins/spaces/actions/deletedFiles'
+import Disable from '../../mixins/spaces/actions/disable'
+import ShowMembers from '../../mixins/spaces/actions/showMembers'
+import UploadImage from '../../mixins/spaces/actions/uploadImage'
+import EditReadmeContent from '../../mixins/spaces/actions/editReadmeContent'
+import { isLocationSpacesActive } from '../../router'
+
+export default {
+  name: 'SpaceContextActions',
+  components: { ContextActionMenu, QuotaModal, ReadmeContentModal },
+  mixins: [
+    Rename,
+    Delete,
+    EditDescription,
+    EditQuota,
+    DeletedFiles,
+    Disable,
+    ShowDetails,
+    ShowMembers,
+    Restore,
+    UploadImage,
+    EditReadmeContent
+  ],
+
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+
+  computed: {
+    quotaModalSelectedSpace() {
+      return this.$data.$_editQuota_selectedSpace
+    },
+    quotaModalIsOpen() {
+      return this.$data.$_editQuota_modalOpen
+    },
+    readmeContentModalIsOpen() {
+      return this.$data.$_editReadmeContent_modalOpen
+    },
+    menuSections() {
+      const sections = []
+
+      if (this.menuItemsMembers.length) {
+        sections.push({
+          name: 'members',
+          items: this.menuItemsMembers
+        })
+      }
+      if (this.menuItemsPrimaryActions.length) {
+        sections.push({
+          name: 'primaryActions',
+          items: this.menuItemsPrimaryActions
+        })
+      }
+      if (this.menuItemsSecondaryActions.length) {
+        sections.push({
+          name: 'secondaryActions',
+          items: this.menuItemsSecondaryActions
+        })
+      }
+      if (this.menuItemsTrashBin.length) {
+        sections.push({
+          name: 'trashBin',
+          items: this.menuItemsTrashBin
+        })
+      }
+      if (this.menuItemsSidebar.length) {
+        sections.push({
+          name: 'sidebar',
+          items: this.menuItemsSidebar
+        })
+      }
+
+      return sections
+    },
+
+    filterParams() {
+      return {
+        resources: this.items
+      }
+    },
+
+    menuItemsMembers() {
+      const fileHandlers = [...this.$_showMembers_items]
+      return [...fileHandlers].filter((item) => item.isEnabled(this.filterParams))
+    },
+    menuItemsPrimaryActions() {
+      const fileHandlers = [
+        ...this.$_rename_items,
+        ...this.$_editDescription_items,
+        ...this.$_uploadImage_items
+      ]
+
+      if (
+        isLocationSpacesActive(this.$router, 'files-spaces-project') &&
+        this.$route.params.storageId
+      ) {
+        fileHandlers.splice(2, 0, ...this.$_editReadmeContent_items)
+      }
+      return [...fileHandlers].filter((item) => item.isEnabled(this.filterParams))
+    },
+    menuItemsSecondaryActions() {
+      const fileHandlers = [
+        ...this.$_editQuota_items,
+        ...this.$_disable_items,
+        ...this.$_restore_items,
+        ...this.$_delete_items
+      ]
+
+      return [...fileHandlers].filter((item) => item.isEnabled(this.filterParams))
+    },
+    menuItemsTrashBin() {
+      const fileHandlers = [...this.$_deletedFiles_items]
+      return [...fileHandlers].filter((item) => item.isEnabled(this.filterParams))
+    },
+    menuItemsSidebar() {
+      const fileHandlers = [...this.$_showDetails_items]
+      return [...fileHandlers].filter((item) => item.isEnabled(this.filterParams))
+    }
+  },
+  methods: {
+    closeQuotaModal() {
+      this.$_editQuota_closeModal()
+    },
+    closeReadmeContentModal() {
+      this.$_editReadmeContent_closeModal()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#space-image-upload-input {
+  position: absolute;
+  left: -99999px;
+}
+</style>

packages/web-app-files/src/mixins/spaces/actions/delete.js

@@ -10,7 +10,7 @@ export default {
       return [
         {
           name: 'delete',
-          icon: 'delete-bin-5',
+          icon: 'close-circle',
           label: () => {
             return this.$gettext('Delete')
           },