diff options
Diffstat (limited to 'src/client/app/common/views/components')
| -rw-r--r-- | src/client/app/common/views/components/reaction-picker.vue | 61 |
1 files changed, 59 insertions, 2 deletions
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index c329241d8a..4e27fb36e3 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -3,7 +3,7 @@ <div class="backdrop" ref="backdrop" @click="close"></div> <div class="popover" :class="{ compact, big }" ref="popover"> <p v-if="!compact">{{ title }}</p> - <div> + <div ref="buttons" :class="{ showFocus }"> <button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button> <button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button> <button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button> @@ -50,12 +50,19 @@ export default Vue.extend({ type: Boolean, required: false, default: false + }, + + showFocus: { + type: Boolean, + required: false, + default: false } }, data() { return { - title: placeholder + title: placeholder, + focus: null }; }, @@ -63,6 +70,9 @@ export default Vue.extend({ keymap(): any { return { 'esc': this.close, + 'enter': this.choose, + 'space': this.choose, + 'numpad plus': this.choose, '1': () => this.react('like'), 'numpad 1': () => this.react('like'), '2': () => this.react('love'), @@ -83,12 +93,24 @@ export default Vue.extend({ 'numpad 9': () => this.react('rip'), '0': () => this.react('pudding'), 'numpad 0': () => this.react('pudding'), + 'up': this.focusUp, + 'right': this.focusRight, + 'down': this.focusDown, + 'left': this.focusLeft, }; } }, + watch: { + focus(i) { + this.$refs.buttons.childNodes[i].focus(); + } + }, + mounted() { this.$nextTick(() => { + this.focus = 0; + const popover = this.$refs.popover as any; const rect = this.source.getBoundingClientRect(); @@ -164,6 +186,26 @@ export default Vue.extend({ this.destroyDom(); } }); + }, + + focusUp() { + this.focus = this.focus == 0 ? 9 : this.focus < 5 ? (this.focus + 4) : (this.focus - 5); + }, + + focusDown() { + this.focus = this.focus == 9 ? 0 : this.focus >= 5 ? (this.focus - 4) : (this.focus + 5); + }, + + focusRight() { + this.focus = this.focus == 9 ? 0 : (this.focus + 1); + }, + + focusLeft() { + this.focus = this.focus == 0 ? 9 : (this.focus - 1); + }, + + choose() { + this.$refs.buttons.childNodes[this.focus].click(); } } }); @@ -249,6 +291,21 @@ root(isDark) width 240px text-align center + &.showFocus + > button:focus + z-index 1 + + &:after + content "" + pointer-events none + position absolute + top 0 + right 0 + bottom 0 + left 0 + border 2px solid rgba($theme-color, 0.3) + border-radius 4px + > button padding 0 width 40px |