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 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(' ');

View File

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

View File

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