From c523a953f7555c99beae5e2fab490706ac888e18 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Mon, 9 Aug 2021 13:08:52 +0530 Subject: [PATCH] feat: Adds keyboard shortcuts for conversation actions (#2672) * feat: Adds keyboard shortcuts for conversation actions * Minor fixes * Minor fixes * Minor fixes and add new shortcut * MInor fixes * Review fixes * Minor fixes * Code cleanup * Minor fixes * Uses Alt or Option key instead of shift-key * Review fixes * Review fixes Co-authored-by: Pranav Raj S Co-authored-by: Muhsin Keloth --- .../dashboard/components/ChatList.vue | 37 +++++++++- .../components/buttons/ResolveAction.vue | 36 +++++++++- .../components/layout/SidebarItem.vue | 23 +++++- .../components/widgets/ChatTypeTabs.vue | 12 ++++ .../widgets/WootWriter/ReplyBottomPanel.vue | 14 ++++ .../widgets/WootWriter/ReplyTopPanel.vue | 14 ++++ .../widgets/conversation/ChatFilter.vue | 17 +++++ .../conversation/ConversationHeader.vue | 9 ++- .../widgets/conversation/ReplyBox.vue | 18 +++-- .../conversation/labels/LabelBox.vue | 6 +- .../ui/MultiselectDropdownItems.vue | 39 +--------- .../components/ui/dropdown/DropdownItem.vue | 4 ++ .../components/ui/dropdown/DropdownMenu.vue | 53 ++++++++++++++ .../shared/helpers/KeyboardHelpers.js | 72 +++++++++++++++++++ .../shared/mixins/eventListenerMixins.js | 8 +++ 15 files changed, 311 insertions(+), 51 deletions(-) create mode 100644 app/javascript/shared/mixins/eventListenerMixins.js diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue index 0aba2739f..6d65ba2dd 100644 --- a/app/javascript/dashboard/components/ChatList.vue +++ b/app/javascript/dashboard/components/ChatList.vue @@ -19,7 +19,7 @@ {{ $t('CHAT_LIST.LIST.404') }}

-
+
= 1) { + allConversations[activeConversationIndex - 1].click(); + } + } + if (hasPressedAltAndKKey(e)) { + if (activeConversationIndex === -1) { + allConversations[lastConversationIndex].click(); + } else if (activeConversationIndex < lastConversationIndex) { + allConversations[activeConversationIndex + 1].click(); + } + } + }, resetAndFetchData() { this.$store.dispatch('conversationPage/reset'); this.$store.dispatch('emptyAllConversations'); diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue index cf984c531..e7219cdf0 100644 --- a/app/javascript/dashboard/components/buttons/ResolveAction.vue +++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue @@ -35,6 +35,7 @@ 1) { + allConversations[0].click(); + document.querySelector('.conversations-list').scrollTop = 0; + } + } + } + }, showOpenButton() { return this.isResolved || this.isSnoozed; }, diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/SidebarItem.vue index bd4a00487..1799a829a 100644 --- a/app/javascript/dashboard/components/layout/SidebarItem.vue +++ b/app/javascript/dashboard/components/layout/SidebarItem.vue @@ -59,10 +59,17 @@ import { mapGetters } from 'vuex'; import router from '../../routes'; +import { + hasPressedAltAndCKey, + hasPressedAltAndVKey, + hasPressedAltAndRKey, + hasPressedAltAndSKey, +} from 'shared/helpers/KeyboardHelpers'; import adminMixin from '../../mixins/isAdmin'; +import eventListenerMixins from 'shared/mixins/eventListenerMixins'; import { getInboxClassByType } from 'dashboard/helper/inbox'; export default { - mixins: [adminMixin], + mixins: [adminMixin, eventListenerMixins], props: { menuItem: { type: Object, @@ -117,6 +124,20 @@ export default { } } }, + handleKeyEvents(e) { + if (hasPressedAltAndCKey(e)) { + router.push({ name: 'home' }); + } + if (hasPressedAltAndVKey(e)) { + router.push({ name: 'contacts_dashboard' }); + } + if (hasPressedAltAndRKey(e)) { + router.push({ name: 'settings_account_reports' }); + } + if (hasPressedAltAndSKey(e)) { + router.push({ name: 'settings_home' }); + } + }, showItem(item) { return this.isAdmin && item.newLink !== undefined; }, diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue index e57f63fbf..0a15ee8b0 100644 --- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue +++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue @@ -10,8 +10,11 @@ diff --git a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue index ac7367f48..44e1fdfe8 100644 --- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue +++ b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue @@ -42,6 +42,10 @@ export default { &:hover { background: var(--color-background); } + + &:focus { + background: var(--color-background); + } } } } diff --git a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue index 12a485151..89684184f 100644 --- a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue +++ b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue @@ -1,5 +1,6 @@ diff --git a/app/javascript/shared/helpers/KeyboardHelpers.js b/app/javascript/shared/helpers/KeyboardHelpers.js index 38bf62321..6671eaff6 100644 --- a/app/javascript/shared/helpers/KeyboardHelpers.js +++ b/app/javascript/shared/helpers/KeyboardHelpers.js @@ -9,3 +9,75 @@ export const isEscape = e => { export const hasPressedShift = e => { return e.shiftKey; }; + +export const hasPressedAltAndCKey = e => { + return e.altKey && e.keyCode === 67; +}; + +export const hasPressedAltAndVKey = e => { + return e.altKey && e.keyCode === 86; +}; + +export const hasPressedAltAndRKey = e => { + return e.altKey && e.keyCode === 82; +}; + +export const hasPressedAltAndSKey = e => { + return e.altKey && e.keyCode === 83; +}; + +export const hasPressedAltAndBKey = e => { + return e.altKey && e.keyCode === 66; +}; + +export const hasPressedAltAndNKey = e => { + return e.altKey && e.keyCode === 78; +}; + +export const hasPressedAltAndWKey = e => { + return e.altKey && e.keyCode === 87; +}; + +export const hasPressedAltAndAKey = e => { + return e.altKey && e.keyCode === 65; +}; + +export const hasPressedAltAndPKey = e => { + return e.altKey && e.keyCode === 80; +}; + +export const hasPressedAltAndLKey = e => { + return e.altKey && e.keyCode === 76; +}; + +export const hasPressedAltAndEKey = e => { + return e.altKey && e.keyCode === 69; +}; + +export const hasPressedCommandPlusAltAndEKey = e => { + return e.metaKey && e.altKey && e.keyCode === 69; +}; + +export const hasPressedAltAndOKey = e => { + return e.altKey && e.keyCode === 79; +}; + +export const hasPressedAltAndJKey = e => { + return e.altKey && e.keyCode === 74; +}; + +export const hasPressedAltAndKKey = e => { + return e.altKey && e.keyCode === 75; +}; + +export const hasPressedAltAndMKey = e => { + return e.altKey && e.keyCode === 77; +}; + +export const hasPressedArrowUpKey = e => { + return e.keyCode === 38; +}; + +export const hasPressedArrowDownKey = e => { + return e.keyCode === 40; +}; diff --git a/app/javascript/shared/mixins/eventListenerMixins.js b/app/javascript/shared/mixins/eventListenerMixins.js new file mode 100644 index 000000000..aad6952b3 --- /dev/null +++ b/app/javascript/shared/mixins/eventListenerMixins.js @@ -0,0 +1,8 @@ +export default { + mounted() { + document.addEventListener('keydown', this.handleKeyEvents); + }, + destroyed() { + document.removeEventListener('keydown', this.handleKeyEvents); + }, +};