fixed emojiboard opening

diff --git a/src/app/organisms/channel/ChannelViewContent.jsx b/src/app/organisms/channel/ChannelViewContent.jsx
index 9f75e080659412806603a083b8b09c60214dd4cd..ab8b97177621849cd34e62f02a27979016ccf8f1 100644 (file)
--- 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
               </MenuItem>
               <MenuItem
                 iconSrc={ReplyArrowIC}

diff --git a/src/app/organisms/channel/ChannelViewInput.jsx b/src/app/organisms/channel/ChannelViewInput.jsx
index d22cd464789ef0d7833def72a0ca5a1ff6849872..957c3802552218635bddf869ed106822e7989c2c 100644 (file)
--- a/src/app/organisms/channel/ChannelViewInput.jsx
+++ b/src/app/organisms/channel/ChannelViewInput.jsx
@@ -300,10 +300,10 @@ function ChannelViewInput({
         <div ref={rightOptionsRef} className="channel-input__option-container">
           <IconButton
             onClick={(e) => {
+              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 b2ecc0c43f611d620d5ee18e69d5c40c163a665f..b16a9e343f310fdd9e9e8f3383436a341bc3f956 100644 (file)
--- 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();
   }