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<MessageTooltipAction>, +messageTimestamp: string, - +alignment?: 'left' | 'center' | 'right', + +tooltipPositionStyle: TooltipPositionStyle, + +tooltipSize: TooltipSize, +item: ChatMessageInfoItem, +threadInfo: ThreadInfo, }; @@ -31,16 +39,26 @@ const { actions, messageTimestamp, - alignment = 'left', + tooltipPositionStyle, + tooltipSize, item, threadInfo, } = props; const { messageInfo, reactions } = item; + const { alignment = 'left' } = tooltipPositionStyle; + const [activeTooltipLabel, setActiveTooltipLabel] = React.useState<?string>(); const { renderEmojiKeyboard } = useTooltipContext(); + const [emojiKeyboardNode, setEmojiKeyboardNode] = React.useState(null); + const emojiKeyboardRef = React.useCallback(node => { + if (node !== null) { + setEmojiKeyboardNode(node); + } + }, []); + const messageActionButtonsContainerClassName = classNames( css.messageActionContainer, css.messageActionButtons, @@ -113,6 +131,22 @@ ); }, [messageTimestamp, messageTooltipLabelStyle]); + const emojiKeyboardPosition = React.useMemo(() => { + return getEmojiKeyboardPosition( + emojiKeyboardNode, + tooltipPositionStyle, + tooltipSize, + ); + }, [emojiKeyboardNode, tooltipPositionStyle, tooltipSize]); + + 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 +167,26 @@ if (!renderEmojiKeyboard) { return null; } - return <Picker data={data} onEmojiSelect={onEmojiSelect} />; - }, [onEmojiSelect, renderEmojiKeyboard]); + + return ( + <div + ref={emojiKeyboardRef} + style={emojiKeyboardPositionStyle} + className={css.emojiKeyboard} + > + <Picker data={data} onEmojiSelect={onEmojiSelect} /> + </div> + ); + }, [ + emojiKeyboardPositionStyle, + emojiKeyboardRef, + 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 +194,14 @@ }); return ( - <div className={containerClassName}> + <> {emojiKeyboard} - <div - className={messageTooltipContainerClassNames} - style={messageTooltipContainerStyle} - > + <div className={containerClassName} style={messageTooltipContainerStyle}> <div style={messageTooltipTopLabelStyle}>{tooltipLabel}</div> {tooltipButtons} {tooltipTimestamp} </div> - </div> + </> ); } 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 = ( <MessageTooltip actions={tooltipActions} messageTimestamp={messageTimestamp} - alignment={alignment} + tooltipPositionStyle={tooltipPositionStyle} + tooltipSize={tooltipSize} item={item} threadInfo={threadInfo} />