Quality of life improvements

CHANGELOG.md

@@ -512,6 +512,7 @@ Details
    https://github.com/owncloud/web/issues/9362
    https://github.com/owncloud/web/issues/9416
    https://github.com/owncloud/web/pull/9525
+   https://github.com/owncloud/web/pull/9563
 
 * Enhancement - Don't display confirmation dialog on file deletion: [#9527](https://github.com/owncloud/web/pull/9527)
 

changelog/unreleased/enhancement-tags-form

@@ -3,8 +3,10 @@ Enhancement: Tags form improved
 We've improved the tags form in various ways, including visual appearance as well as usability. Auto save, remove tags on backspace, and contextual helper (and more, see issues)
 
 https://github.com/owncloud/web/pull/9525
+https://github.com/owncloud/web/pull/9563
 https://github.com/owncloud/web/issues/9363
 https://github.com/owncloud/web/issues/9356
 https://github.com/owncloud/web/issues/9360
 https://github.com/owncloud/web/issues/9362
 https://github.com/owncloud/web/issues/9416
+

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

@@ -115,7 +115,7 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-filter-chip {
-  &-button {
+  &-button.oc-pill {
     align-items: center;
     background-color: var(--oc-color-background-default) !important;
     color: var(--oc-color-text-muted) !important;
@@ -129,17 +129,16 @@ export default defineComponent({
     max-width: 150px;
     height: 24px;
     padding: var(--oc-space-xsmall) var(--oc-space-small) !important;
-
-    &-selected,
-    &-selected:hover {
-      background-color: var(--oc-color-swatch-primary-default) !important;
-      color: var(--oc-color-text-inverse) !important;
-      border-top-left-radius: 99px !important;
-      border-bottom-left-radius: 99px !important;
-      border-top-right-radius: 0px !important;
-      border-bottom-right-radius: 0px !important;
-      border: 0;
-    }
+  }
+  &-button-selected.oc-pill,
+  &-button-selected.oc-pill:hover {
+    background-color: var(--oc-color-swatch-primary-default) !important;
+    color: var(--oc-color-text-inverse) !important;
+    border-top-left-radius: 99px !important;
+    border-bottom-left-radius: 99px !important;
+    border-top-right-radius: 0px !important;
+    border-bottom-right-radius: 0px !important;
+    border: 0;
   }
   &-clear,
   &-clear:hover {

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

@@ -97,7 +97,7 @@ import {
 } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import 'vue-select/dist/vue-select.css'
-import { ContextualHelper } from 'design-system/src/helpers'
+import { ContextualHelper } from '../../helpers'
 
 /**
  * Select component with a trigger and dropdown based on [Vue Select](https://vue-select.org/)

packages/web-app-admin-settings/src/components/Groups/GroupsList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="group-list">
     <oc-text-input
       id="groups-filter"
       v-model="filterTerm"
@@ -41,8 +41,8 @@
           :option="rowData.item"
           :label="getSelectGroupLabel(rowData.item)"
           hide-label
-          @update:model-value="$emit('toggleSelectGroup', rowData.item)"
-          @click.stop
+          @update:model-value="toggleGroup(rowData.item)"
+          @click.stop="rowClicked([rowData.item, $event])"
         />
       </template>
       <template #avatar="rowData">
@@ -126,6 +126,12 @@ import { defaultFuseOptions } from 'web-pkg/src/helpers'
 import { useFileListHeaderPosition, usePagination } from 'web-pkg/src/composables'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
 import { perPageDefault, perPageStoragePrefix } from 'web-app-admin-settings/src/defaults'
+import { useKeyboardActions } from 'web-pkg/src/composables/keyboardActions'
+import {
+  useKeyboardTableMouseActions,
+  useKeyboardTableNavigation
+} from 'web-app-admin-settings/src/composables/keyboardActions'
+import { findIndex } from 'lodash-es'
 
 export default defineComponent({
   name: 'GroupsList',
@@ -149,6 +155,9 @@ export default defineComponent({
     const sortDir = ref<string>(SortDir.Asc)
     const filterTerm = ref<string>('')
 
+    const lastSelectedGroupIndex = ref(0)
+    const lastSelectedGroupId = ref(null)
+
     const isGroupSelected = (group) => {
       return props.selectedGroups.some((s) => s.id === group.id)
     }
@@ -164,10 +173,28 @@ export default defineComponent({
       eventBus.publish(SideBarEventTopics.open)
     }
     const rowClicked = (data) => {
-      const group = data[0]
-      if (!isGroupSelected(group)) {
-        selectGroup(group)
+      const resource = data[0]
+      const eventData = data[1]
+      const isCheckboxClicked = eventData?.target.getAttribute('type') === 'checkbox'
+
+      const contextActionClicked = eventData?.target?.closest('div')?.id === 'oc-files-context-menu'
+      if (contextActionClicked) {
+        return
+      }
+
+      if (eventData?.metaKey) {
+        return eventBus.publish('app.resources.list.clicked.meta', resource)
       }
+      if (eventData?.shiftKey) {
+        return eventBus.publish('app.resources.list.clicked.shift', {
+          resource,
+          skipTargetSelection: isCheckboxClicked
+        })
+      }
+      if (isCheckboxClicked) {
+        return
+      }
+      toggleGroup(resource, true)
     }
     const showContextMenuOnBtnClick = (data, group) => {
       const { dropdown, event } = data
@@ -230,6 +257,29 @@ export default defineComponent({
       total: totalPages
     } = usePagination({ items, perPageDefault, perPageStoragePrefix })
 
+    const keyActions = useKeyboardActions('group-list')
+    useKeyboardTableNavigation(
+      keyActions,
+      paginatedItems,
+      props.selectedGroups,
+      lastSelectedGroupIndex,
+      lastSelectedGroupId
+    )
+    useKeyboardTableMouseActions(
+      keyActions,
+      paginatedItems,
+      props.selectedGroups,
+      lastSelectedGroupIndex,
+      lastSelectedGroupId
+    )
+
+    const toggleGroup = (group, deselect = false) => {
+      lastSelectedGroupIndex.value = findIndex(props.groups, (u) => u.id === group.id)
+      lastSelectedGroupId.value = group.id
+      keyActions.resetSelectionCursor()
+      emit('toggleSelectGroup', group, deselect)
+    }
+
     watch(currentPage, () => {
       emit('unSelectAllGroups')
     })
@@ -240,6 +290,7 @@ export default defineComponent({
       isGroupSelected,
       showContextMenuOnBtnClick,
       showContextMenuOnRightClick,
+      toggleGroup,
       fileListHeaderY,
       contextMenuButtonRef,
       showEditPanel,

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="space-list">
     <oc-text-input
       id="spaces-filter"
       v-model="filterTerm"
@@ -42,8 +42,8 @@
           :option="item"
           :label="getSelectSpaceLabel(item)"
           hide-label
-          @update:model-value="$emit('toggleSelectSpace', item)"
-          @click.stop
+          @update:model-value="toggleSpace(item)"
+          @click.stop="fileClicked([item, $event])"
         />
       </template>
       <template #icon>
@@ -142,6 +142,12 @@ import {
 } from 'web-pkg/src/composables'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
 import { perPageDefault, perPageStoragePrefix } from 'web-app-admin-settings/src/defaults'
+import { useKeyboardActions } from 'web-pkg/src/composables/keyboardActions'
+import {
+  useKeyboardTableMouseActions,
+  useKeyboardTableNavigation
+} from 'web-app-admin-settings/src/composables/keyboardActions'
+import { findIndex } from 'lodash-es'
 
 export default defineComponent({
   name: 'SpacesList',
@@ -170,6 +176,9 @@ export default defineComponent({
     const markInstance = ref(undefined)
     const tableRef = ref(undefined)
 
+    const lastSelectedSpaceIndex = ref(0)
+    const lastSelectedSpaceId = ref(null)
+
     const highlighted = computed(() => props.selectedSpaces.map((s) => s.id))
     const footerTextTotal = computed(() => {
       return $gettext('%{spaceCount} spaces in total', {
@@ -392,10 +401,28 @@ export default defineComponent({
     })
 
     const fileClicked = (data) => {
-      const space = data[0]
-      if (!isSpaceSelected(space)) {
-        selectSpace(space)
+      const resource = data[0]
+      const eventData = data[1]
+      const isCheckboxClicked = eventData?.target.getAttribute('type') === 'checkbox'
+
+      const contextActionClicked = eventData?.target?.closest('div')?.id === 'oc-files-context-menu'
+      if (contextActionClicked) {
+        return
+      }
+
+      if (eventData?.metaKey) {
+        return eventBus.publish('app.resources.list.clicked.meta', resource)
+      }
+      if (eventData?.shiftKey) {
+        return eventBus.publish('app.resources.list.clicked.shift', {
+          resource,
+          skipTargetSelection: isCheckboxClicked
+        })
       }
+      if (isCheckboxClicked) {
+        return
+      }
+      toggleSpace(resource, true)
     }
 
     const showContextMenuOnBtnClick = (data, space) => {
@@ -428,6 +455,29 @@ export default defineComponent({
       eventBus.publish(SideBarEventTopics.open)
     }
 
+    const keyActions = useKeyboardActions('space-list')
+    useKeyboardTableNavigation(
+      keyActions,
+      paginatedItems,
+      props.selectedSpaces,
+      lastSelectedSpaceIndex,
+      lastSelectedSpaceId
+    )
+    useKeyboardTableMouseActions(
+      keyActions,
+      paginatedItems,
+      props.selectedSpaces,
+      lastSelectedSpaceIndex,
+      lastSelectedSpaceId
+    )
+
+    const toggleSpace = (space, deselect = false) => {
+      lastSelectedSpaceIndex.value = findIndex(props.spaces, (u) => u.id === space.id)
+      lastSelectedSpaceId.value = space.id
+      keyActions.resetSelectionCursor()
+      emit('toggleSelectSpace', space, deselect)
+    }
+
     return {
       allSpacesSelected,
       sortBy,
@@ -448,6 +498,7 @@ export default defineComponent({
       getMemberCount,
       getSelectSpaceLabel,
       handleSort,
+      toggleSpace,
       fileClicked,
       isSpaceSelected,
       contextMenuButtonRef,