Refactor & Usability improvements
This commit is contained in:
parent
6ed3f9e414
commit
71a93b2b43
3 changed files with 20 additions and 17 deletions
|
@ -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(' ');
|
||||||
|
|
||||||
|
|
|
@ -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');
|
||||||
|
|
|
@ -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);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue