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,21 @@ 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 emojiKeyboardRef = React.useRef(); + const messageActionButtonsContainerClassName = classNames( css.messageActionContainer, css.messageActionButtons, @@ -113,6 +126,23 @@ ); }, [messageTimestamp, messageTooltipLabelStyle]); + const emojiKeyboardPosition = React.useMemo(() => { + return getEmojiKeyboardPosition( + emojiKeyboardRef.current, + tooltipPositionStyle, + tooltipSize, + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [tooltipPositionStyle, tooltipSize, emojiKeyboardRef.current]); + + const emojiKeyboardPositionStyle = React.useMemo( + () => ({ + bottom: emojiKeyboardPosition.bottom, + left: emojiKeyboardPosition.left, + }), + [emojiKeyboardPosition.bottom, emojiKeyboardPosition.left], + ); + const nextLocalID = useSelector(state => state.nextLocalID); const localID = `${localIDPrefix}${nextLocalID}`; @@ -133,18 +163,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 +185,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 = (