Page MenuHomePhabricator
Files F3498690

D6634.id22752.diff
No OneTemporary
Actions

D6634.id22752.diff
View Options

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,21 @@
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 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 <Picker data={data} onEmojiSelect={onEmojiSelect} />;
- }, [onEmojiSelect, renderEmojiKeyboard]);
+
+ return (
+ <div
+ ref={emojiKeyboardRef}
+ style={emojiKeyboardPositionStyle}
+ className={css.emojiKeyboard}
+ >
+ <Picker data={data} onEmojiSelect={onEmojiSelect} />
+ </div>
+ );
+ }, [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 (
- <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}
/>

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 20, 9:38 PM (12 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2683307
Default Alt Text
D6634.id22752.diff (4 KB)

Event Timeline