feat: Add keyboard shortcuts

Implement keyboard shortcuts for the board view and individual cards

Signed-off-by: Adrian Missy <[email protected]>
Signed-off-by: Julius Härtl <[email protected]>

README.md

@@ -77,7 +77,7 @@ You can enable HMR (Hot module replacement) to avoid page reloads when working o
 
 ### Docker: Simple app development container
 
-- Fork the app 
+- Fork the app
 - Clone the repository: `git clone https://github.com/nextcloud/deck.git`
 - Go into deck directory: `cd deck`
 - Build the app as described in the general build instructions
@@ -93,7 +93,7 @@ docker run --rm \
 ### Full Nextcloud development environment
 
 You need to setup a [development environment](https://docs.nextcloud.com/server/latest/developer_manual//getting_started/devenv.html) of the current Nextcloud version. You can also alternatively install & run the [nextcloud docker container](https://github.com/juliushaertl/nextcloud-docker-dev).
-After the finished installation, you can clone the deck project directly in the `/[nextcloud-docker-dev-dir]/workspace/server/apps/` folder. 
+After the finished installation, you can clone the deck project directly in the `/[nextcloud-docker-dev-dir]/workspace/server/apps/` folder.
 
 ### Running tests
 You can use the provided Makefile to run all tests by using:

src/App.vue

@@ -40,12 +40,14 @@
 
 			<router-view name="sidebar" :visible="!cardDetailsInModal || !$route.params.cardId" />
 		</div>
+		<KeyboardShortcuts />
 	</NcContent>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation.vue'
+import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
 import { NcModal, NcContent, NcAppContent } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi.js'
 import { emit, subscribe } from '@nextcloud/event-bus'
@@ -60,6 +62,7 @@ export default {
 		NcModal,
 		NcContent,
 		NcAppContent,
+		KeyboardShortcuts,
 	},
 	provide() {
 		return {

src/components/Controls.vue

@@ -22,6 +22,9 @@
 
 <template>
 	<div class="controls">
+		<NcModal v-if="showAddCardModal" class="card-selector" @close="clickHideAddCardModel">
+			<CreateNewCardCustomPicker show-created-notice @cancel="clickHideAddCardModel" />
+		</NcModal>
 		<div v-if="overviewName" class="board-title">
 			<div class="board-bullet icon-calendar-dark" />
 			<h2 dir="auto">
@@ -32,9 +35,6 @@
 					{{ t('deck', 'Add card') }}
 				</NcActionButton>
 			</NcActions>
-			<NcModal v-if="showAddCardModal" class="card-selector" @close="clickHideAddCardModel">
-				<CreateNewCardCustomPicker show-created-notice @cancel="clickHideAddCardModel" />
-			</NcModal>
 		</div>
 		<div v-else-if="board" class="board-title">
 			<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
@@ -49,9 +49,14 @@
 			<SessionList v-if="isNotifyPushEnabled && presentUsers.length"
 				:sessions="presentUsers" />
 			<div v-if="searchQuery || true" class="deck-search">
-				<input type="search"
+				<input id="deck-search-input"
+					ref="search"
+					:tabindex="0"
+					type="search"
 					class="icon-search"
 					:value="searchQuery"
+					@focus="$store.dispatch('toggleShortcutLock', true)"
+					@blur="$store.dispatch('toggleShortcutLock', false)"
 					@input="$store.commit('setSearchQuery', $event.target.value)">
 			</div>
 			<div v-if="board && canManage && !showArchived && !board.archived"
@@ -70,7 +75,9 @@
 						type="text"
 						class="no-close"
 						:placeholder="t('deck', 'List name')"
-						required>
+						required
+						@focus="$store.dispatch('toggleShortcutLock', true)"
+						@blur="$store.dispatch('toggleShortcutLock', false)">
 					<input v-tooltip="t('deck', 'Add list')"
 						class="icon-confirm"
 						type="submit"
@@ -88,6 +95,7 @@
 						@hide="filterVisible=false">
 						<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
 						<NcButton slot="trigger"
+							ref="filterPopover"
 							:title="t('deck', 'Apply filter')"
 							class="filter-button"
 							:type="isFilterActive ? 'primary' : 'tertiary'">
@@ -233,6 +241,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle.js'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
@@ -244,6 +253,7 @@ import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertic
 import SessionList from './SessionList.vue'
 import { isNotifyPushEnabled } from '../sessions.js'
 import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
+import { getCurrentUser } from '@nextcloud/auth'
 
 export default {
 	name: 'Controls',
@@ -327,7 +337,18 @@ export default {
 			}
 		},
 	},
+	beforeMount() {
+		subscribe('deck:board:show-new-card', this.clickShowAddCardModel)
+		subscribe('deck:board:toggle-filter-popover', this.triggerOpenFilters)
+		subscribe('deck:board:clear-filter', this.triggerClearFilter)
+		subscribe('deck:board:toggle-filter-by-me', this.triggerFilterByMe)
+
+	},
 	beforeDestroy() {
+		unsubscribe('deck:board:show-new-card', this.clickShowAddCardModel)
+		unsubscribe('deck:board:toggle-filter-popover', this.triggerOpenFilters)
+		unsubscribe('deck:board:clear-filter', this.triggerClearFilter)
+		unsubscribe('deck:board:toggle-filter-by-me', this.triggerFilterByMe)
 		this.setPageTitle('')
 	},
 	methods: {
@@ -406,6 +427,23 @@ export default {
 			}
 			window.document.title = newTitle
 		},
+		triggerOpenFilters() {
+			this.$refs.filterPopover.$el.click()
+		},
+		triggerOpenSearch() {
+			this.$refs.search.focus()
+		},
+		triggerClearFilter() {
+			this.clearFilter()
+		},
+		triggerFilterByMe() {
+			if (this.isFilterActive) {
+				this.clearFilter()
+			} else {
+				this.filter.users = [getCurrentUser().uid]
+				this.setFilter()
+			}
+		},
 	},
 }
 </script>