diff --git a/web/chat/message-tooltip.css b/web/chat/message-tooltip.css --- a/web/chat/message-tooltip.css +++ b/web/chat/message-tooltip.css @@ -1,18 +1,9 @@ -div.container { - display: flex; - flex-direction: row; -} - -div.containerLeftAlign, -div.containerCenterAlign { - flex-direction: row-reverse; -} - div.messageTooltipContainer { display: flex; flex-direction: column; align-items: center; font-size: var(--s-font-14); + padding: 8px 0; } div.messageActionContainer { @@ -71,3 +62,7 @@ div.rightTooltipAlign { align-items: flex-end; } + +div.emojiKeyboard { + position: absolute; +} diff --git a/web/chat/message-tooltip.react.js b/web/chat/message-tooltip.react.js --- a/web/chat/message-tooltip.react.js +++ b/web/chat/message-tooltip.react.js @@ -15,15 +15,23 @@ tooltipStyle, } from './chat-constants.js'; import css from './message-tooltip.css'; -import { useSendReaction } from './reaction-message-utils.js'; +import { + useSendReaction, + getEmojiKeyboardPosition, +} from './reaction-message-utils.js'; import { useTooltipContext } from './tooltip-provider.js'; import { useSelector } from '../redux/redux-utils.js'; -import { type MessageTooltipAction } from '../utils/tooltip-utils.js'; +import type { + MessageTooltipAction, + TooltipSize, + TooltipPositionStyle, +} from '../utils/tooltip-utils.js'; type MessageTooltipProps = { +actions: $ReadOnlyArray, +messageTimestamp: string, - +alignment?: 'left' | 'center' | 'right', + +tooltipPositionStyle: TooltipPositionStyle, + +tooltipSize: TooltipSize, +item: ChatMessageInfoItem, +threadInfo: ThreadInfo, }; @@ -31,16 +39,29 @@ const { actions, messageTimestamp, - alignment = 'left', + tooltipPositionStyle, + tooltipSize, item, threadInfo, } = props; const { messageInfo, reactions } = item; + const { alignment = 'left' } = tooltipPositionStyle; + const [activeTooltipLabel, setActiveTooltipLabel] = React.useState(); const { renderEmojiKeyboard } = useTooltipContext(); + const [emojiKeyboardNode, setEmojiKeyboardNode] = React.useState(null); + + const emojiKeyboardRef = React.useRef(); + + React.useEffect(() => { + if (emojiKeyboardRef.current) { + setEmojiKeyboardNode(emojiKeyboardRef.current); + } + }, [renderEmojiKeyboard]); + const messageActionButtonsContainerClassName = classNames( css.messageActionContainer, css.messageActionButtons, @@ -113,6 +134,27 @@ ); }, [messageTimestamp, messageTooltipLabelStyle]); + const emojiKeyboardPosition = React.useMemo( + () => + getEmojiKeyboardPosition( + emojiKeyboardNode, + tooltipPositionStyle, + tooltipSize, + ), + [emojiKeyboardNode, tooltipPositionStyle, tooltipSize], + ); + + const emojiKeyboardPositionStyle = React.useMemo(() => { + if (!emojiKeyboardPosition) { + return null; + } + + return { + bottom: emojiKeyboardPosition.bottom, + left: emojiKeyboardPosition.left, + }; + }, [emojiKeyboardPosition]); + const nextLocalID = useSelector(state => state.nextLocalID); const localID = `${localIDPrefix}${nextLocalID}`; @@ -133,18 +175,21 @@ if (!renderEmojiKeyboard) { return null; } - return ; - }, [onEmojiSelect, renderEmojiKeyboard]); + + return ( +
+ +
+ ); + }, [emojiKeyboardPositionStyle, onEmojiSelect, renderEmojiKeyboard]); const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []); const containerClassName = classNames({ - [css.container]: true, - [css.containerLeftAlign]: alignment === 'left', - [css.containerCenterAlign]: alignment === 'center', - }); - - const messageTooltipContainerClassNames = classNames({ [css.messageTooltipContainer]: true, [css.leftTooltipAlign]: alignment === 'left', [css.centerTooltipAlign]: alignment === 'center', @@ -152,17 +197,14 @@ }); return ( -
+ <> {emojiKeyboard} -
+
{tooltipLabel}
{tooltipButtons} {tooltipTimestamp}
-
+ ); } diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js --- a/web/utils/tooltip-utils.js +++ b/web/utils/tooltip-utils.js @@ -548,13 +548,12 @@ tooltipSize, }); - const { alignment } = tooltipPositionStyle; - const tooltip = (