fix: Added advanced Shift-Click-Handling for Files

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

@@ -14,7 +14,7 @@
         :data-testid="indicator.id"
         :data-test-indicator-type="indicator.type"
         no-hover
-        @click="indicator.handler(resource)"
+        @click="(e: MouseEvent) => indicator.handler?.(resource, e)"
       >
         <oc-icon :name="indicator.icon" size="small" :fill-type="indicator.fillType" />
       </oc-button>

packages/web-app-admin-settings/src/composables/keyboardActions/useKeyboardTableMouseActions.ts

@@ -35,7 +35,9 @@ export const useKeyboardTableMouseActions = (
     resource: Item
     skipTargetSelection: boolean
   }) => {
-    const parent = document.querySelectorAll(`[data-item-id='${resource.id}']`)[0]
+    const targetNode = document.querySelector(`[data-item-id='${resource.id}']`)
+    const parent = targetNode?.closest('tr') || targetNode?.parentElement
+
     const resourceNodes = Object.values(parent.parentNode.children)
     const latestNode = resourceNodes.find(
       (r) => r.getAttribute('data-item-id') === unref(lastSelectedRowId)

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

@@ -8,7 +8,7 @@
       appearance="raw"
       class="oc-ml-xs quick-action-button oc-p-xs"
       :class="`files-quick-action-${action.name}`"
-      @click="action.handler({ space, resources: [item] })"
+      @click="(e: MouseEvent) => action.handler({ space, resources: [item], event: e })"
     >
       <oc-icon :name="action.icon" fill-type="line" />
     </oc-button>

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

@@ -133,7 +133,8 @@ import {
   useResourcesStore,
   formatDateFromJSDate,
   useResourceContents,
-  useLoadPreview
+  useLoadPreview,
+  useInterceptModifierClick
 } from '@opencloud-eu/web-pkg'
 import upperFirst from 'lodash-es/upperFirst'
 import {
@@ -173,7 +174,7 @@ const { $gettext, current: currentLanguage } = language
 
 const resourcesStore = useResourcesStore()
 const { ancestorMetaData, currentFolder } = storeToRefs(resourcesStore)
-
+const { interceptModifierClick } = useInterceptModifierClick()
 const { user } = storeToRefs(userStore)
 
 const resource = inject<Ref<Resource>>('resource')
@@ -229,7 +230,8 @@ const shareIndicators = computed(() => {
     space: unref(space),
     resource: unref(resource),
     ancestorMetaData: unref(ancestorMetaData),
-    user: unref(user)
+    user: unref(user),
+    interceptModifierClick
   }).filter(({ category }) => category === 'sharing')
 })
 

packages/web-app-files/src/composables/keyboardActions/useKeyboardFileMouseActions.ts

@@ -31,7 +31,7 @@ export const useKeyboardFileMouseActions = (
     skipTargetSelection: boolean
   }) => {
     if (!shiftSelectionAnchorId) {
-      shiftSelectionAnchorId = unref(latestSelectedId)
+      shiftSelectionAnchorId = unref(latestSelectedId) || resource.id
     }
     resourcesStore.setSelection([])
 
@@ -69,7 +69,7 @@ export const useKeyboardFileMouseActions = (
     skipTargetSelection: boolean
   }) => {
     if (!shiftSelectionAnchorId) {
-      shiftSelectionAnchorId = unref(latestSelectedId)
+      shiftSelectionAnchorId = unref(latestSelectedId) || resource.id
     }
     resourcesStore.setSelection([])
 
@@ -84,6 +84,10 @@ export const useKeyboardFileMouseActions = (
       (r: { getAttribute: (arg0: string) => string }) =>
         r.getAttribute('data-item-id') === shiftSelectionAnchorId
     )
+
+    if (startIndex === -1 || endIndex === -1) {
+      return
+    }
     const minIndex = Math.min(endIndex, startIndex)
     const maxIndex = Math.max(endIndex, startIndex)
 

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

@@ -70,6 +70,9 @@ export default {
   },
   computed: {
     isNavigatable() {
+      if (!this.resource) {
+        return false
+      }
       return (this.resource.isFolder || this.link) && !this.resource.disabled
     },
     componentType() {
@@ -90,15 +93,17 @@ export default {
     }
   },
   methods: {
-    emitClick() {
+    emitClick(e: MouseEvent) {
+      if (!e || typeof e.stopPropagation !== 'function') {
+        return
+      }
       if (this.isNavigatable) {
         return
       }
-
       /**
        * Triggered when the resource is a file and the name is clicked
        */
-      this.$emit('click')
+      this.$emit('click', e)
     }
   }
 }

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

@@ -13,6 +13,7 @@ import { getIndicators, ResourceIndicator } from '../../helpers'
 import { computed, useAttrs } from 'vue'
 import { useResourcesStore, useUserStore } from '../../composables/piniaStores'
 import { OcStatusIndicators } from '@opencloud-eu/design-system/components'
+import { useInterceptModifierClick } from '../../composables/keyboardActions'
 
 const attrs = useAttrs() as (typeof OcStatusIndicators)['props']
 const {
@@ -27,12 +28,15 @@ const {
 
 const userStore = useUserStore()
 const resourcesStore = useResourcesStore()
+const { interceptModifierClick } = useInterceptModifierClick()
+
 const indicators = computed(() => {
   const list = getIndicators({
     space,
     resource,
     ancestorMetaData: resourcesStore.ancestorMetaData,
-    user: userStore.user
+    user: userStore.user,
+    interceptModifierClick
   })
 
   if (filter) {

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

@@ -67,7 +67,13 @@
         :disabled="isResourceDisabled(item)"
         :model-value="isResourceSelected(item)"
         :outline="isLatestSelectedItem(item)"
-        @click.stop="toggleSelection(item.id)"
+        @click.stop="
+          (e: MouseEvent) => {
+            if (!interceptModifierClick(e, item)) {
+              toggleSelection(item.id)
+            }
+          }
+        "
       />
     </template>
     <template #name="{ item }">
@@ -97,7 +103,14 @@
           v-if="hasRenameAction(item)"
           class="resource-table-edit-name raw-hover-surface oc-p-xs"
           appearance="raw"
-          @click="openRenameDialog(item)"
+          @click.stop="
+            (e: MouseEvent) => {
+              if (interceptModifierClick(e, item)) {
+                return
+              }
+              openRenameDialog(item)
+            }
+          "
         >
           <oc-icon name="edit-2" fill-type="line" size="small" />
         </oc-button>
@@ -133,7 +146,7 @@
         v-if="item.tags.length > 2"
         size="small"
         class="resource-table-tag-more"
-        @click="openTagsSidebar"
+        @click="openTagsSidebar()"
       >
         + {{ item.tags.length - 2 }}
       </oc-tag>
@@ -187,7 +200,14 @@
         appearance="raw-inverse"
         class="resource-table-shared-by"
         no-hover
-        @click="openSharingSidebar(item)"
+        @click.stop="
+          (e: MouseEvent) => {
+            if (interceptModifierClick(e, item)) {
+              return
+            }
+            openSharingSidebar(item, e)
+          }
+        "
       >
         <oc-avatars
           class="resource-table-people"
@@ -213,7 +233,14 @@
         appearance="raw-inverse"
         class="resource-table-shared-with"
         no-hover
-        @click="openSharingSidebar(item)"
+        @click.stop="
+          (e: MouseEvent) => {
+            if (interceptModifierClick(e, item)) {
+              return
+            }
+            openSharingSidebar(item, e)
+          }
+        "
       >
         <oc-avatars
           class="resource-table-people"
@@ -320,6 +347,7 @@ import {
 } from '../../helpers'
 import { SideBarEventTopics } from '../../composables/sideBar'
 import ContextMenuQuickAction from '../ContextActions/ContextMenuQuickAction.vue'
+import { useInterceptModifierClick } from '../../composables/keyboardActions'
 
 import { useResourceRouteResolver } from '../../composables/filesList/useResourceRouteResolver'
 import { ClipboardActions } from '../../helpers/clipboardActions'
@@ -569,6 +597,7 @@ export default defineComponent({
     const capabilityStore = useCapabilityStore()
     const { getMatchingSpace } = useGetMatchingSpace()
     const { canBeOpenedWithSecureView } = useCanBeOpenedWithSecureView()
+    const { interceptModifierClick } = useInterceptModifierClick()
     const folderLinkUtils = useFolderLink({
       space: ref(props.space),
       targetRouteCallback: computed(() => props.targetRouteCallback)
@@ -729,6 +758,8 @@ export default defineComponent({
       isEmbedModeEnabled,
       emitSelect,
       toggleSelection,
+      eventBus,
+      interceptModifierClick,
       areFileExtensionsShown,
       latestSelectedId,
       isResourceClickable,
@@ -1028,8 +1059,17 @@ export default defineComponent({
     openTagsSidebar() {
       eventBus.publish(SideBarEventTopics.open)
     },
-    openSharingSidebar(file: Resource) {
-      let panelToOpen
+    handleFileClick(e: MouseEvent, resource: Resource) {
+      if (this.interceptModifierClick(e, resource)) {
+        return
+      }
+      this.$emit('fileClick', { space: this.getMatchingSpace(resource), resources: [resource] })
+    },
+    openSharingSidebar(file: Resource, event?: MouseEvent) {
+      if (event instanceof MouseEvent && this.interceptModifierClick(event, file)) {
+        return
+      }
+      let panelToOpen: unknown
       if (file.type === 'space') {
         panelToOpen = 'space-share'
       } else {
@@ -1096,11 +1136,16 @@ export default defineComponent({
       this.toggleSelection(file.id)
     },
     showContextMenuOnBtnClick(data: ContextMenuBtnClickEventData, item: Resource) {
+      const { dropdown, event } = data
+
+      if (event instanceof MouseEvent && this.interceptModifierClick(event, item)) {
+        return
+      }
+
       if (this.isResourceDisabled(item)) {
         return false
       }
 
-      const { dropdown, event } = data
       if (dropdown?.tippy === undefined) {
         return
       }
@@ -1110,8 +1155,10 @@ export default defineComponent({
       displayPositionedDropdown(dropdown.tippy, event, this.contextMenuButton)
     },
     showContextMenu(row: ComponentPublicInstance<unknown>, event: MouseEvent, item: Resource) {
+      if (event instanceof MouseEvent && this.interceptModifierClick(event, item)) {
+        return
+      }
       event.preventDefault()
-
       if (this.isResourceDisabled(item)) {
         return false
       }
@@ -1208,9 +1255,11 @@ export default defineComponent({
           .map((resource) => resource.id)
       )
     },
-    emitFileClick(resource: Resource) {
+    emitFileClick(resource: Resource, event?: MouseEvent) {
+      if (this.interceptModifierClick(event, resource)) {
+        return
+      }
       const space = this.getMatchingSpace(resource)
-
       /**
        * Triggered when a default action is triggered on a file
        * @property {object} resource resource for which the event is triggered

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

@@ -39,7 +39,12 @@
           :aria-label="tooltipLabelIcon"
         >
           <slot name="imageField" :item="resource">
-            <oc-image v-if="resource.thumbnail" class="tile-preview" :src="resource.thumbnail" />
+            <oc-image
+              v-if="resource.thumbnail"
+              class="tile-preview"
+              :src="resource.thumbnail"
+              @click="toggleTile([resource, $event])"
+            />
             <resource-icon
               v-else
               :resource="resource"
@@ -53,7 +58,7 @@
           </slot>
         </div>
       </resource-link>
-      <div class="oc-card-body oc-p-s">
+      <div class="oc-card-body oc-p-s" @click.stop="toggleTile([resource, $event])">
         <div class="oc-flex oc-flex-between oc-flex-middle">
           <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
             <resource-list-item
@@ -62,7 +67,7 @@
               :is-extension-displayed="isExtensionDisplayed"
               :is-resource-clickable="isResourceClickable"
               :link="resourceRoute"
-              @click="$emit('click')"
+              @click.stop="$emit('click')"
             />
           </div>
           <div class="oc-flex oc-flex-middle">
@@ -93,6 +98,7 @@ import { isSpaceResource } from '@opencloud-eu/web-client'
 import { RouteLocationRaw } from 'vue-router'
 import { useIsVisible } from '@opencloud-eu/design-system/composables'
 import { SizeType } from '@opencloud-eu/design-system/helpers'
+import { useToggleTile } from '../../composables/selection'
 
 const {
   resource,
@@ -130,6 +136,7 @@ defineSlots<{
   selection?: (props: { item: Resource }) => unknown
 }>()
 
+const { toggleTile } = useToggleTile()
 const { $gettext } = useGettext()
 
 const observerTarget = customRef((track, trigger) => {