Page MenuHomePhabricator
Files F3498524

D6634.id22152.diff
No OneTemporary
Actions

D6634.id22152.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
@@ -11,19 +11,24 @@
import { useSelector } from '../redux/redux-utils';
import { type MessageTooltipAction } from '../utils/tooltip-utils';
+import type { TooltipSize, TooltipPositionStyle } from '../utils/tooltip-utils';
import {
tooltipButtonStyle,
tooltipLabelStyle,
tooltipStyle,
} from './chat-constants';
import css from './message-tooltip.css';
-import { useSendReaction } from './reaction-message-utils';
+import {
+ useSendReaction,
+ getEmojiKeyboardPosition,
+} from './reaction-message-utils';
import { useTooltipContext } from './tooltip-provider';
type MessageTooltipProps = {
+actions: $ReadOnlyArray<MessageTooltipAction>,
+messageTimestamp: string,
- +alignment?: 'left' | 'center' | 'right',
+ tooltipPositionStyle: TooltipPositionStyle,
+ +tooltipSize: TooltipSize,
+item: ChatMessageInfoItem,
+threadInfo: ThreadInfo,
};
@@ -31,12 +36,15 @@
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();
@@ -113,6 +121,19 @@
);
}, [messageTimestamp, messageTooltipLabelStyle]);
+ const emojiKeyboardPosition = React.useMemo(
+ () => getEmojiKeyboardPosition(tooltipPositionStyle, tooltipSize),
+ [tooltipPositionStyle, tooltipSize],
+ );
+
+ const emojiKeyboardPositionStyle = React.useMemo(
+ () => ({
+ bottom: emojiKeyboardPosition.bottom,
+ left: emojiKeyboardPosition.left,
+ }),
+ [emojiKeyboardPosition],
+ );
+
const nextLocalID = useSelector(state => state.nextLocalID);
const localID = `${localIDPrefix}${nextLocalID}`;
@@ -133,16 +154,15 @@
if (!renderEmojiKeyboard) {
return null;
}
- return <Picker data={data} onEmojiSelect={onEmojiSelect} />;
- }, [onEmojiSelect, renderEmojiKeyboard]);
- const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
+ return (
+ <div style={emojiKeyboardPositionStyle} className={css.emojiKeyboard}>
+ <Picker data={data} onEmojiSelect={onEmojiSelect} />
+ </div>
+ );
+ }, [emojiKeyboardPositionStyle, onEmojiSelect, renderEmojiKeyboard]);
- const containerClassName = classNames({
- [css.container]: true,
- [css.containerLeftAlign]: alignment === 'left',
- [css.containerCenterAlign]: alignment === 'center',
- });
+ const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
const messageTooltipContainerClassNames = classNames({
[css.messageTooltipContainer]: true,
@@ -152,7 +172,7 @@
});
return (
- <div className={containerClassName}>
+ <div>
{emojiKeyboard}
<div
className={messageTooltipContainerClassNames}
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
@@ -553,13 +553,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:25 PM (12 h, 17 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2683188
Default Alt Text
D6634.id22152.diff (4 KB)

Event Timeline