Refactor & Usability improvements

This commit is contained in:
syuilo 2018-09-18 12:42:56 +09:00
parent 6ed3f9e414
commit 71a93b2b43
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
3 changed files with 20 additions and 17 deletions

View file

@ -51,7 +51,8 @@ export default {
const actions = getKeyMap(binding.value); const actions = getKeyMap(binding.value);
const reservedKeys = concat(actions.map(a => a.patterns.map(p => p.which))); // flatten
const reservedKeys = concat(concat(actions.map(a => a.patterns.map(p => p.which))));
el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' '); el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' ');

View file

@ -56,6 +56,12 @@ export default Vue.extend({
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false
},
animation: {
type: Boolean,
required: false,
default: true
} }
}, },
@ -70,9 +76,7 @@ export default Vue.extend({
keymap(): any { keymap(): any {
return { return {
'esc': this.close, 'esc': this.close,
'enter': this.choose, 'enter|space|plus': this.choose,
'space': this.choose,
'plus': this.choose,
'up': this.focusUp, 'up': this.focusUp,
'right': this.focusRight, 'right': this.focusRight,
'down': this.focusDown, 'down': this.focusDown,
@ -126,7 +130,7 @@ export default Vue.extend({
anime({ anime({
targets: this.$refs.backdrop, targets: this.$refs.backdrop,
opacity: 1, opacity: 1,
duration: 100, duration: this.animation ? 100 : 0,
easing: 'linear' easing: 'linear'
}); });
@ -134,7 +138,7 @@ export default Vue.extend({
targets: this.$refs.popover, targets: this.$refs.popover,
opacity: 1, opacity: 1,
scale: [0.5, 1], scale: [0.5, 1],
duration: 500 duration: this.animation ? 500 : 0
}); });
}); });
}, },
@ -164,7 +168,7 @@ export default Vue.extend({
anime({ anime({
targets: this.$refs.backdrop, targets: this.$refs.backdrop,
opacity: 0, opacity: 0,
duration: 200, duration: this.animation ? 200 : 0,
easing: 'linear' easing: 'linear'
}); });
@ -173,7 +177,7 @@ export default Vue.extend({
targets: this.$refs.popover, targets: this.$refs.popover,
opacity: 0, opacity: 0,
scale: 0.5, scale: 0.5,
duration: 200, duration: this.animation ? 200 : 0,
easing: 'easeInBack', easing: 'easeInBack',
complete: () => { complete: () => {
this.$emit('closed'); this.$emit('closed');

View file

@ -113,14 +113,11 @@ export default Vue.extend({
computed: { computed: {
keymap(): any { keymap(): any {
return { return {
'r': this.reply, 'r|left': this.reply,
'a': () => this.react(true), 'a|plus': () => this.react(true),
'plus': () => this.react(true), 'n|right': this.renote,
'n': this.renote, 'up|shift+tab': this.focusBefore,
'up': this.focusBefore, 'down|tab': this.focusAfter,
'shift+tab': this.focusBefore,
'down': this.focusAfter,
'tab': this.focusAfter,
}; };
}, },
@ -250,7 +247,8 @@ export default Vue.extend({
(this as any).os.new(MkReactionPicker, { (this as any).os.new(MkReactionPicker, {
source: this.$refs.reactButton, source: this.$refs.reactButton,
note: this.p, note: this.p,
showFocus: viaKeyboard showFocus: viaKeyboard,
animation: !viaKeyboard
}).$once('closed', this.focus); }).$once('closed', this.focus);
}, },