scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-01 03:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Adds keyboard shortcuts for conversation actions (#2672)

Browse Source 
* 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 <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Sivin Varghese
2021-08-09 13:08:52 +05:30
committed by GitHub
parent c7482696d4
commit c523a953f7
15 changed files with 311 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
View File

@@ -1,5 +1,6 @@
<template>
<ul
ref="dropdownMenu"
class="dropdown menu vertical"
:class="[placement && `dropdown--${placement}`]"
>
@@ -7,15 +8,67 @@
</ul>
</template>
<script>
import eventListenerMixins from 'shared/mixins/eventListenerMixins';
import {
hasPressedArrowUpKey,
hasPressedArrowDownKey,
} from 'shared/helpers/KeyboardHelpers';
export default {
name: 'WootDropdownMenu',
componentName: 'WootDropdownMenu',
mixins: [eventListenerMixins],
props: {
placement: {
type: String,
default: 'top',
},
},
mounted() {
this.focusItem();
},
methods: {
focusItem() {
this.$refs.dropdownMenu
.querySelector('ul.dropdown li.dropdown-menu__item .button')
.focus();
},
handleKeyEvents(e) {
if (hasPressedArrowUpKey(e)) {
const items = this.$refs.dropdownMenu.querySelectorAll(
'ul.dropdown li.dropdown-menu__item .button'
);
const focusItems = this.$refs.dropdownMenu.querySelector(
'ul.dropdown li.dropdown-menu__item .button:focus'
);
const activeElementIndex = [...items].indexOf(focusItems);
const lastElementIndex = items.length - 1;
if (activeElementIndex >= 1) {
items[activeElementIndex - 1].focus();
} else {
items[lastElementIndex].focus();
}
}
if (hasPressedArrowDownKey(e)) {
const items = this.$refs.dropdownMenu.querySelectorAll(
'li.dropdown-menu__item .button'
);
const focusItems = this.$refs.dropdownMenu.querySelector(
'li.dropdown-menu__item .button:focus'
);
const activeElementIndex = [...items].indexOf(focusItems);
const lastElementIndex = items.length - 1;
if (activeElementIndex === lastElementIndex) {
items[0].focus();
} else {
items[activeElementIndex + 1].focus();
}
}
},
},
};
</script>