Page MenuHomePhabricator
Files F3738370

D3355.diff
No OneTemporary
Actions

D3355.diff
View Options

diff --git a/web/chat/message-action-buttons.js b/web/chat/message-action-buttons.js
--- a/web/chat/message-action-buttons.js
+++ b/web/chat/message-action-buttons.js
@@ -34,6 +34,8 @@
const openSidebarText = 'Go to sidebar';
const createSidebarText = 'Create sidebar';
+type TooltipType = 'sidebar' | 'reply';
+
type MessageActionButtonsProps = {
+threadInfo: ThreadInfo,
+item: ChatMessageInfoItem,
@@ -58,29 +60,42 @@
const { containerPosition } = mouseOverMessagePosition;
- const [tooltipVisible, setTooltipVisible] = React.useState(false);
+ const [activeTooltip, setActiveTooltip] = React.useState<?TooltipType>();
const [pointingTo, setPointingTo] = React.useState();
- const toggleTooltip = React.useCallback(
- (event: SyntheticEvent<HTMLDivElement>) => {
- setTooltipVisible(!tooltipVisible);
- if (tooltipVisible) {
+ const showTooltip = React.useCallback(
+ (tooltipType: TooltipType, iconPosition: ItemAndContainerPositionInfo) => {
+ if (activeTooltip) {
return;
}
- const rect = event.currentTarget.getBoundingClientRect();
- const iconPosition: ItemAndContainerPositionInfo = getIconPosition(
- rect,
- containerPosition,
- );
+ setActiveTooltip(tooltipType);
setPointingTo(iconPosition);
},
- [containerPosition, tooltipVisible],
+ [activeTooltip],
);
const hideTooltip = React.useCallback(() => {
- setTooltipVisible(false);
+ setActiveTooltip(null);
}, []);
+ const showSidebarTooltip = React.useCallback(
+ (event: SyntheticEvent<HTMLDivElement>) => {
+ const rect = event.currentTarget.getBoundingClientRect();
+ const iconPosition = getIconPosition(rect, containerPosition);
+ showTooltip('sidebar', iconPosition);
+ },
+ [containerPosition, showTooltip],
+ );
+
+ const showReplyTooltip = React.useCallback(
+ (event: SyntheticEvent<HTMLDivElement>) => {
+ const rect = event.currentTarget.getBoundingClientRect();
+ const iconPosition = getIconPosition(rect, containerPosition);
+ showTooltip('reply', iconPosition);
+ },
+ [containerPosition, showTooltip],
+ );
+
const { threadCreatedFromMessage, messageInfo } = item;
const onThreadOpen = useOnClickThread(threadCreatedFromMessage);
@@ -107,12 +122,17 @@
setMouseOverMessagePosition({ type: 'off', item: item });
}, [item, setMouseOverMessagePosition]);
- const sidebarTooltipButtonText = threadCreatedFromMessage
- ? openSidebarText
- : createSidebarText;
+ let tooltipText = '';
+ if (activeTooltip === 'reply') {
+ tooltipText = 'Reply';
+ } else if (activeTooltip === 'sidebar') {
+ tooltipText = threadCreatedFromMessage
+ ? openSidebarText
+ : createSidebarText;
+ }
let tooltipMenu = null;
- if (pointingTo && tooltipVisible) {
+ if (pointingTo && activeTooltip) {
tooltipMenu = (
<TooltipMenu
availableTooltipPositions={availableTooltipPositions}
@@ -120,7 +140,7 @@
layoutPosition="relative"
getStyle={getMessageActionTooltipStyle}
>
- <TooltipTextItem text={sidebarTooltipButtonText} />
+ <TooltipTextItem text={tooltipText} />
</TooltipMenu>
);
}
@@ -133,11 +153,18 @@
'mouseOverMessagePosition must be set if replyButton exists',
);
replyButton = (
- <MessageReplyButton
- messagePositionInfo={mouseOverMessagePosition}
- onReplyClick={onReplyButtonClick}
- inputState={inputState}
- />
+ <div
+ className={css.messageActionLinkIcon}
+ onMouseEnter={showReplyTooltip}
+ onMouseLeave={hideTooltip}
+ >
+ <MessageReplyButton
+ messagePositionInfo={mouseOverMessagePosition}
+ onReplyClick={onReplyButtonClick}
+ inputState={inputState}
+ />
+ {activeTooltip === 'reply' ? tooltipMenu : null}
+ </div>
);
}
@@ -151,12 +178,12 @@
sidebarButton = (
<div
className={css.messageActionLinkIcon}
+ onMouseEnter={showSidebarTooltip}
onMouseLeave={hideTooltip}
onClick={onSidebarButtonClick}
- onMouseEnter={toggleTooltip}
>
<SWMansionIcon icon="message-circle-lines" size={18} />
- {tooltipMenu}
+ {activeTooltip === 'sidebar' ? tooltipMenu : null}
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 10, 8:56 AM (14 h, 17 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2847232
Default Alt Text
D3355.diff (4 KB)

Event Timeline