Add keyboard navigation to spaces (#9625)

* Add keyboard navigation to spaces * Update changelog item * Lint * Add changelog item
owncloud · Aug 31, 2023 · e4fe75a · e4fe75a
1 parent 5ab08f9
commit e4fe75a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/changelog/unreleased/enhancement-add-keyboard-navigation-to-spaces-overview b/changelog/unreleased/enhancement-add-keyboard-navigation-to-spaces-overview
@@ -0,0 +1,7 @@
+Enhancement: Add keyboard navigation to spaces overview
+
+In the spaces overview it is now possible to navigate through the individual spaces
+and perform actions using the keyboard
+
+https://github.com/owncloud/web/pull/9625
+https://github.com/owncloud/web/issues/9624
diff --git a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts b/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts
@@ -1,12 +1,12 @@
 import { onBeforeUnmount, onMounted, unref, computed, Ref, watchEffect } from 'vue'
-import { eventBus, useStore, ViewModeConstants } from 'web-pkg'
+import { eventBus, QueryValue, useStore, ViewModeConstants } from 'web-pkg'
 import { KeyboardActions } from 'web-pkg/src/composables/keyboardActions'
 import { Resource } from 'web-client'
 import { findIndex } from 'lodash-es'
 
 export const useKeyboardTableMouseActions = (
   keyActions: KeyboardActions,
-  viewMode: Ref<string>
+  viewMode: Ref<string | QueryValue>
 ) => {
   const store = useStore()
   const latestSelectedId = computed(() => store.state.Files.latestSelectedId)

diff --git a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts b/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts
@@ -1,4 +1,4 @@
-import { useStore, ViewModeConstants } from 'web-pkg'
+import { QueryValue, useStore, ViewModeConstants } from 'web-pkg'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 import { computed, Ref, ref, unref, nextTick, watchEffect } from 'vue'
 import { Key, KeyboardActions, ModifierKey } from 'web-pkg/src/composables/keyboardActions'
@@ -12,7 +12,7 @@ const enum Direction {
 export const useKeyboardTableNavigation = (
   keyActions: KeyboardActions,
   paginatedResources: Ref<Resource[]>,
-  viewMode: Ref<string>
+  viewMode: Ref<string | QueryValue>
 ) => {
   const store = useStore()
   const { scrollToResource } = useScrollTo()

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -161,6 +161,12 @@ import { sortFields as availableSortFields } from '../../helpers/ui/resourceTile
 import { formatFileSize } from 'web-pkg/src'
 import { useGettext } from 'vue3-gettext'
 import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/src/helpers/share'
+import { useKeyboardActions } from 'web-pkg/src/composables/keyboardActions'
+import {
+  useKeyboardTableNavigation,
+  useKeyboardTableMouseActions,
+  useKeyboardTableActions
+} from 'web-app-files/src/composables/keyboardActions'
 
 export default defineComponent({
   components: {
@@ -233,6 +239,11 @@ export default defineComponent({
       defaultValue: ViewModeConstants.tilesView.name
     })
 
+    const keyActions = useKeyboardActions()
+    useKeyboardTableNavigation(keyActions, runtimeSpaces, viewMode)
+    useKeyboardTableMouseActions(keyActions, viewMode)
+    useKeyboardTableActions(keyActions)
+
     const getManagerNames = (space: SpaceResource) => {
       const allManagers = space.spaceRoles[spaceRoleManager.name]
       const managers = allManagers.length > 2 ? allManagers.slice(0, 2) : allManagers