mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-10 02:23:09 +02:00
🎨
This commit is contained in:
parent
b338e8a83f
commit
3a5201747b
1 changed files with 4 additions and 29 deletions
|
@ -1,20 +1,9 @@
|
|||
<template>
|
||||
<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
|
||||
<div class="rdfaahpb">
|
||||
<transition-group
|
||||
name="reaction-fade"
|
||||
tag="div"
|
||||
class="buttons"
|
||||
ref="buttons"
|
||||
:class="{ showFocus }"
|
||||
:css="false"
|
||||
@before-enter="beforeEnter"
|
||||
@enter="enter"
|
||||
mode="out-in"
|
||||
appear
|
||||
>
|
||||
<div class="buttons" ref="buttons" :class="{ showFocus }">
|
||||
<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' }">
|
||||
</div>
|
||||
</x-popup>
|
||||
|
@ -84,7 +73,7 @@ export default Vue.extend({
|
|||
|
||||
watch: {
|
||||
focus(i) {
|
||||
this.$refs.buttons.children[i].elm.focus();
|
||||
this.$refs.buttons.children[i].focus();
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -129,21 +118,7 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
choose() {
|
||||
this.$refs.buttons.children[this.focus].elm.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)
|
||||
this.$refs.buttons.children[this.focus].click();
|
||||
},
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue