diff --git a/src/app/organisms/channel/ChannelViewContent.jsx b/src/app/organisms/channel/ChannelViewContent.jsx index 9f75e08..ab8b971 100644 --- a/src/app/organisms/channel/ChannelViewContent.jsx +++ b/src/app/organisms/channel/ChannelViewContent.jsx @@ -176,9 +176,10 @@ function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) { } function pickEmoji(e, roomId, eventId, roomTimeline) { + const boxInfo = e.target.getBoundingClientRect(); openEmojiBoard({ - x: e.detail ? e.clientX : '50%', - y: e.detail ? e.clientY : '50%', + x: boxInfo.x, + y: boxInfo.y, detail: e.detail, }, (emoji) => { toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline); @@ -439,7 +440,7 @@ function ChannelViewContent({ iconSrc={EmojiAddIC} onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)} > - Add reaciton + Add reaction { + const boxInfo = e.target.getBoundingClientRect(); openEmojiBoard({ - x: '10%', - y: 300, - isReverse: true, + x: boxInfo.x + (document.dir === 'rtl' ? -80 : 80), + y: boxInfo.y - 250, detail: e.detail, }, addEmoji); }} diff --git a/src/app/organisms/emoji-board/EmojiBoardOpener.jsx b/src/app/organisms/emoji-board/EmojiBoardOpener.jsx index b2ecc0c..b16a9e3 100644 --- a/src/app/organisms/emoji-board/EmojiBoardOpener.jsx +++ b/src/app/organisms/emoji-board/EmojiBoardOpener.jsx @@ -18,13 +18,7 @@ function EmojiBoardOpener() { return; } - const x = typeof cords.x === 'string' ? cords.x : `${cords.x}px`; - const y = typeof cords.y === 'string' ? cords.y : `${cords.y}px`; - - openerRef.current.style.left = cords.isReverse ? 'unset' : x; - openerRef.current.style.top = cords.isReverse ? 'unset' : y; - openerRef.current.style.right = cords.isReverse ? x : 'unset'; - openerRef.current.style.bottom = cords.isReverse ? y : 'unset'; + openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`; requestCallback = requestEmojiCallback; openerRef.current.click(); }