chore: improve reaction picker behaviour

This commit is contained in:
syuilo 2021-02-28 02:22:53 +09:00
parent 764a158cd7
commit 7674a62d40
2 changed files with 63 additions and 61 deletions

View File

@ -69,15 +69,24 @@ export default defineComponent({
mounted() { mounted() {
this.$watch('src', () => { this.$watch('src', () => {
this.fixed = getFixedContainer(this.src) != null; this.fixed = getFixedContainer(this.src) != null;
this.$nextTick(() => {
this.align();
});
}, { immediate: true }); }, { immediate: true });
this.$nextTick(() => { this.$nextTick(() => {
const popover = this.$refs.content as any; const popover = this.$refs.content as any;
// TODO: ResizeObserver
new ResizeObserver((entries, observer) => { new ResizeObserver((entries, observer) => {
this.align();
}).observe(popover);
});
},
methods: {
align() {
if (!this.popup) return; if (!this.popup) return;
const popover = this.$refs.content as any;
const rect = this.src.getBoundingClientRect(); const rect = this.src.getBoundingClientRect();
const width = popover.offsetWidth; const width = popover.offsetWidth;
@ -130,10 +139,8 @@ export default defineComponent({
popover.style.left = left + 'px'; popover.style.left = left + 'px';
popover.style.top = top + 'px'; popover.style.top = top + 'px';
}).observe(popover);
});
}, },
methods: {
childRendered() { childRendered() {
// //
const content = this.$refs.content.children[0]; const content = this.$refs.content.children[0];

View File

@ -360,16 +360,12 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
let reactionPicker = null; let reactionPicker = null;
export async function pickReaction(src: HTMLElement, chosen, closed) { export async function pickReaction(src: HTMLElement, chosen, closed) {
if (reactionPicker) { if (reactionPicker) {
if (reactionPicker.opening) return;
reactionPicker.opening = true;
reactionPicker.src.value = src; reactionPicker.src.value = src;
reactionPicker.manualShowing.value = true; reactionPicker.manualShowing.value = true;
reactionPicker.chosen = chosen; reactionPicker.chosen = chosen;
reactionPicker.closed = closed; reactionPicker.closed = closed;
} else { } else {
reactionPicker = { reactionPicker = {
opening: true,
src: ref(src), src: ref(src),
manualShowing: ref(true), manualShowing: ref(true),
chosen, closed chosen, closed
@ -388,7 +384,6 @@ export async function pickReaction(src: HTMLElement, chosen, closed) {
closed: () => { closed: () => {
reactionPicker.src.value = null; reactionPicker.src.value = null;
reactionPicker.closed(); reactionPicker.closed();
reactionPicker.opening = false;
} }
}); });
} }