Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo 2020-02-21 09:17:33 +09:00
parent b338e8a83f
commit 3a5201747b
1 changed files with 4 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/client/components/reaction-picker.vue
View File

@ -1,20 +1,9 @@
<template> <template>
<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap"> <x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
<div class="rdfaahpb"> <div class="rdfaahpb">
<transition-group <div class="buttons" ref="buttons" :class="{ showFocus }">
name="reaction-fade"
tag="div"
class="buttons"
ref="buttons"
:class="{ showFocus }"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
mode="out-in"
appear
>
<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction"><x-reaction-icon :reaction="reaction"/></button> <button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction"><x-reaction-icon :reaction="reaction"/></button>
</transition-group> </div>
<input class="text" v-model="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }"> <input class="text" v-model="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
</div> </div>
</x-popup> </x-popup>
@ -84,7 +73,7 @@ export default Vue.extend({
watch: { watch: {
focus(i) { focus(i) {
this.$refs.buttons.children[i].elm.focus(); this.$refs.buttons.children[i].focus();
} }
}, },
@ -129,21 +118,7 @@ export default Vue.extend({
}, },
choose() { choose() {
this.$refs.buttons.children[this.focus].elm.click(); this.$refs.buttons.children[this.focus].click();
},
beforeEnter(el) {
el.style.opacity = 0;
el.style.transform = 'scale(0.7)';
},
enter(el, done) {
el.style.transition = [getComputedStyle(el).transition, 'transform 1s cubic-bezier(0.23, 1, 0.32, 1)', 'opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1)'].filter(x => x != '').join(',');
setTimeout(() => {
el.style.opacity = 1;
el.style.transform = 'scale(1)';
setTimeout(done, 1000);
}, 0 * el.dataset.index)
}, },
} }
}); });