feat: add open with context menu item

packages/design-system/src/components/OcDrop/OcDrop.vue

@@ -8,11 +8,11 @@
 </template>
 
 <script setup lang="ts">
-import tippy, { ReferenceElement, hideAll, Props as TippyProps } from 'tippy.js'
-import { Modifier, detectOverflow } from '@popperjs/core'
+import tippy, { hideAll, Props as TippyProps, ReferenceElement } from 'tippy.js'
+import { detectOverflow, Modifier } from '@popperjs/core'
 import { destroy, hideOnEsc } from '../../directives/OcTooltip'
 import { getSizeClass, SizeType, uniqueId } from '../../helpers'
-import { ref, onBeforeUnmount, onMounted, computed, watch, unref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, unref, watch } from 'vue'
 
 export interface Props {
   /**
@@ -77,6 +77,7 @@ export interface Emits {
    * @docs Emitted when the drop has been hidden.
    */
   (e: 'hideDrop'): void
+
   /**
    * @docs Emitted when the drop has been displayed.
    */
@@ -122,8 +123,10 @@ const hide = (duration?: number) => {
 
 defineExpose({ show, hide, tippy: tippyInstance })
 
-const onClick = () => {
-  if (closeOnClick) {
+const onClick = (event) => {
+  const isNestedToggle = event.target.closest('.oc-drop-nested-toggle')
+
+  if (closeOnClick && !isNestedToggle) {
     hide()
   }
 }
@@ -144,12 +147,15 @@ onBeforeUnmount(() => {
   drop.value?.removeEventListener('focusout', onFocusOut)
 })
 
+const isTouchDevice = () => {
+  return window.matchMedia('(hover: none) and (pointer: coarse)').matches
+}
+
 const triggerMapping = computed(() => {
-  return (
-    {
-      hover: 'mouseenter focus'
-    }[mode] || mode
-  )
+  if (mode === 'hover') {
+    return isTouchDevice() ? 'click' : 'mouseenter focus'
+  }
+  return mode
 })
 
 const paddingClass = computed(() => {

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -80,7 +80,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
             </button> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button oc-ml-xs oc-p-xs spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><!----></span>
-              <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded oc-overflow-hidden">
+              <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded">
                 <div class="oc-card oc-card-body oc-p-s"></div>
               </div>
             </button></div>
@@ -106,7 +106,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
             </button> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button oc-ml-xs oc-p-xs spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><!----></span>
-              <div id="context-menu-drop-2" class="oc-drop oc-box-shadow-medium oc-rounded oc-overflow-hidden">
+              <div id="context-menu-drop-2" class="oc-drop oc-box-shadow-medium oc-rounded">
                 <div class="oc-card oc-card-body oc-p-s"></div>
               </div>
             </button></div>

packages/web-app-external/src/index.ts

@@ -58,7 +58,7 @@ export default defineWebApplication({
         const provider = mimeType.app_providers.find((provider) => provider.name === appName)
         return {
           extension: mimeType.ext,
-          label: () => $gettext('Open in %{app}', { app: provider.name }),
+          label: () => provider.name,
           icon: provider.icon,
           name: provider.name,
           mimeType: mimeType.mime_type,

packages/web-pkg/src/components/ContextActions/ActionMenuDropItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
+    <oc-button
+      :id="`oc-files-context-actions-${menuSection.name}-toggle`"
+      appearance="raw"
+      gap-size="medium"
+      class="oc-drop-nested-toggle oc-py-s oc-px-m oc-width-1-1 oc-flex-justify-between oc-width-1-1"
+    >
+      <oc-icon :name="menuSection.drop.icon" size="medium" fill-type="line" />
+      <span class="oc-flex oc-files-context-action-label">
+        <span v-text="menuSection.drop.label" />
+      </span>
+      <oc-icon name="arrow-right-s" size="small" fill-type="line" />
+    </oc-button>
+    <oc-drop
+      :toggle="`#oc-files-context-actions-${menuSection.name}-toggle`"
+      :is-nested="true"
+      mode="hover"
+      class="oc-width-auto"
+      padding-size="small"
+      position="auto-start"
+      close-on-click
+    >
+      <template v-if="menuSection.drop.items.length">
+        <action-menu-item
+          v-for="(action, actionIndex) in menuSection.drop.items"
+          :key="`section-${menuSection.name}-action-${actionIndex}`"
+          :action="action"
+          :appearance="appearance"
+          :action-options="actionOptions"
+          class="oc-files-context-action oc-rounded oc-menu-item-hover"
+        />
+      </template>
+      <span
+        v-else
+        class="oc-py-s oc-px-m oc-text-muted"
+        v-text="menuSection.drop.emptyMessage || $gettext('No items available')"
+      />
+    </oc-drop>
+  </li>
+</template>
+
+<script setup lang="ts">
+import ActionMenuItem from './ActionMenuItem.vue'
+import type { AppearanceType } from '@opencloud-eu/design-system/helpers'
+import type { ActionOptions } from '../../composables'
+import type { MenuSection } from './ContextActionMenu.vue'
+
+const { menuSection, appearance, actionOptions } = defineProps<{
+  menuSection: MenuSection
+  appearance: AppearanceType
+  actionOptions: ActionOptions
+}>()
+</script>

packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue

@@ -45,11 +45,6 @@
         data-testid="action-label"
       >
         <span v-text="action.label(actionOptions)" />
-        <span
-          v-if="action.showOpenInNewTabHint"
-          class="oc-text-muted oc-text-xsmall"
-          v-text="openInNewTabHint"
-        />
       </span>
       <span
         v-if="action.shortcut && shortcutHint"
@@ -66,7 +61,6 @@ import { Action, ActionOptions, useConfigStore } from '../../composables'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 import { AppearanceType } from '@opencloud-eu/design-system/helpers'
-import { isMacOs } from '../../helpers'
 
 export default defineComponent({
   name: 'ActionMenuItem',
@@ -148,18 +142,9 @@ export default defineComponent({
       }
     })
 
-    const openInNewTabHint = computed(() => {
-      return $gettext(
-        'Hold %{key} and click to open in new tab',
-        { key: isMacOs() ? '⌘' : $gettext('ctrl') },
-        true
-      )
-    })
-
     return {
       componentType,
-      componentProps,
-      openInNewTabHint
+      componentProps
     }
   },
   computed: {

packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue

@@ -7,13 +7,21 @@
       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"
+      <template v-if="section.items">
+        <action-menu-item
+          v-for="(action, actionIndex) in section.items"
+          :key="`section-${section.name}-action-${actionIndex}`"
+          :action="action"
+          :appearance="appearance"
+          :action-options="actionOptions"
+          class="context-menu oc-files-context-action oc-rounded oc-menu-item-hover"
+        />
+      </template>
+      <action-menu-drop-item
+        v-if="section.drop && (section.drop.items?.length || section.drop.renderOnEmpty)"
+        :menu-section="section"
         :appearance="appearance"
         :action-options="actionOptions"
-        class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"
       />
     </oc-list>
   </div>
@@ -24,15 +32,25 @@ import { defineComponent, PropType } from 'vue'
 import ActionMenuItem from './ActionMenuItem.vue'
 import { Action, ActionOptions } from '../../composables'
 import { AppearanceType } from '@opencloud-eu/design-system/helpers'
+import ActionMenuDropItem from './ActionMenuDropItem.vue'
+
+export type MenuSectionDrop = {
+  label: string
+  icon: string
+  items?: Action[]
+  renderOnEmpty?: boolean
+  emptyMessage?: string
+}
 
 export type MenuSection = {
   name: string
-  items: Action[]
+  items?: Action[]
+  drop?: MenuSectionDrop
 }
 
 export default defineComponent({
   name: 'ContextActionMenu',
-  components: { ActionMenuItem },
+  components: { ActionMenuDropItem, ActionMenuItem },
   props: {
     menuSections: {
       type: Array as PropType<MenuSection[]>,
@@ -76,6 +94,7 @@ export default defineComponent({
   > li {
     padding-left: 0 !important;
     padding-right: 0 !important;
+
     a,
     button,
     span {

packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue

@@ -17,11 +17,10 @@
       :ref="`context-menu-drop-ref-${resourceDomSelector(item)}`"
       :drop-id="`context-menu-drop-${resourceDomSelector(item)}`"
       :toggle="`#context-menu-trigger-${resourceDomSelector(item)}`"
-      class="oc-overflow-hidden"
       position="bottom-end"
-      mode="click"
-      close-on-click
+      mode="hover"
       padding-size="small"
+      close-on-click
     >
       <slot name="contextMenu" :item="item" />
     </oc-drop>
@@ -30,7 +29,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { Resource, extractDomSelector } from '@opencloud-eu/web-client'
+import { extractDomSelector, Resource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
@@ -50,7 +49,10 @@ export default defineComponent({
   setup() {
     const { $gettext } = useGettext()
     const contextMenuLabel = computed(() => $gettext('Show context menu'))
-    return { contextMenuLabel }
+
+    return {
+      contextMenuLabel
+    }
   }
 })
 </script>

packages/web-pkg/src/components/ContextActions/index.ts

@@ -1,3 +1,4 @@
 export { default as ActionMenuItem } from './ActionMenuItem.vue'
 export { default as ContextActionMenu } from './ContextActionMenu.vue'
 export { default as ContextMenuQuickAction } from './ContextMenuQuickAction.vue'
+export { default as ActionMenuDropItem } from './ActionMenuDropItem.vue'

packages/web-pkg/src/components/FilesList/ContextActions.vue

@@ -9,28 +9,29 @@ import {
   ActionExtension,
   FileActionOptions,
   useExtensionRegistry,
-  useFileActionsToggleHideShare,
-  useFileActionsCopyPermanentLink,
-  useFileActionsPaste,
-  useFileActionsShowDetails,
-  useFileActionsShowShares,
-  useFileActionsEnableSync,
+  useFileActions,
   useFileActionsCopy,
-  useFileActionsDisableSync,
+  useFileActionsCopyPermanentLink,
+  useFileActionsCreateSpaceFromResource,
   useFileActionsDelete,
+  useFileActionsDisableSync,
   useFileActionsDownloadArchive,
+  useFileActionsDownloadFile,
   useFileActionsEmptyTrashBin,
+  useFileActionsEnableSync,
+  useFileActionsFavorite,
   useFileActionsMove,
-  useFileActionsRestore,
-  useFileActionsDownloadFile,
+  useFileActionsNavigate,
+  useFileActionsPaste,
   useFileActionsRename,
+  useFileActionsRestore,
   useFileActionsSetImage,
-  useFileActionsNavigate,
-  useFileActionsFavorite,
-  useFileActionsCreateSpaceFromResource,
-  useFileActions
+  useFileActionsShowDetails,
+  useFileActionsShowShares,
+  useFileActionsToggleHideShare
 } from '../../composables'
 import { isNil } from 'lodash-es'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'ContextActions',
@@ -42,7 +43,8 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { editorActions } = useFileActions()
+    const { editorActions, defaultEditorActions } = useFileActions()
+    const { $gettext } = useGettext()
 
     const { actions: enableSyncActions } = useFileActionsEnableSync()
     const { actions: hideShareActions } = useFileActionsToggleHideShare()
@@ -109,6 +111,12 @@ export default defineComponent({
     )
 
     const menuItemsContext = computed(() => {
+      return [...unref(navigateActions), ...unref(defaultEditorActions)]
+        .filter((item) => item.isVisible(unref(actionOptions)))
+        .sort((x, y) => Number(y.hasPriority) - Number(x.hasPriority))
+    })
+
+    const menuItemsContextDrop = computed(() => {
       return [
         ...unref(editorActions),
         ...unref(extensionsContextActions).filter((a) => a.category === 'context')
@@ -152,7 +160,6 @@ export default defineComponent({
           action.keepOpen = true
           return action
         }),
-        ...unref(navigateActions),
         ...unref(showDetailsActions),
         ...unref(extensionsContextActions).filter((a) => a.category === 'sidebar')
       ].filter((item) => item.isVisible(unref(actionOptions)))
@@ -174,12 +181,20 @@ export default defineComponent({
         return sections
       }
 
-      if (unref(menuItemsContext).length) {
-        sections.push({
-          name: 'context',
-          items: unref(menuItemsContext)
-        })
-      }
+      sections.push({
+        name: 'context',
+        items: [...unref(menuItemsContext)],
+        drop: {
+          label: $gettext('Open with...'),
+          icon: 'apps',
+          renderOnEmpty: !unref(actionOptions).resources[0]?.isFolder,
+          emptyMessage: $gettext('No applications available'),
+          items: [...unref(menuItemsContextDrop)]
+            .filter((item) => item.isVisible(unref(actionOptions)))
+            .sort((x, y) => Number(y.hasPriority) - Number(x.hasPriority))
+        }
+      })
+
       if (unref(menuItemsShare).length) {
         sections.push({
           name: 'share',