diff --git a/web/chat/message-action-buttons.js b/web/chat/message-action-buttons.js index 0f4fd36c8..67b7ac1eb 100644 --- a/web/chat/message-action-buttons.js +++ b/web/chat/message-action-buttons.js @@ -1,164 +1,166 @@ // @flow import classNames from 'classnames'; import invariant from 'invariant'; import * as React from 'react'; import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors'; import type { ThreadInfo } from 'lib/types/thread-types'; import { useOnClickThread, useOnClickPendingSidebar, } from '../selectors/nav-selectors'; import SWMansionIcon from '../SWMansionIcon.react'; import css from './message-action-buttons.css'; import type { ItemAndContainerPositionInfo, PositionInfo, } from './position-types'; import { tooltipPositions, type TooltipPosition } from './tooltip-utils'; import { TooltipMenu, type TooltipStyle, TooltipButton } from './tooltip.react'; -const ellipsisIconExcessVerticalWhitespace = 10; +const messageActionIconExcessVerticalWhitespace = 10; const openSidebarText = 'Go to sidebar'; const createSidebarText = 'Create sidebar'; type MessageActionButtonsProps = { +threadInfo: ThreadInfo, +item: ChatMessageInfoItem, +containerPosition: PositionInfo, +availableTooltipPositions: $ReadOnlyArray, }; function MessageActionButtons(props: MessageActionButtonsProps): React.Node { const { threadInfo, item, containerPosition, availableTooltipPositions, } = props; const [tooltipVisible, setTooltipVisible] = React.useState(false); const [pointingTo, setPointingTo] = React.useState(); const toggleTooltip = React.useCallback( (event: SyntheticEvent) => { setTooltipVisible(!tooltipVisible); if (tooltipVisible) { return; } const rect = event.currentTarget.getBoundingClientRect(); const { top, bottom, left, right, width, height } = rect; - const dotsPosition: ItemAndContainerPositionInfo = { + const iconPosition: ItemAndContainerPositionInfo = { containerPosition, itemPosition: { top: - top - containerPosition.top + ellipsisIconExcessVerticalWhitespace, + top - + containerPosition.top + + messageActionIconExcessVerticalWhitespace, bottom: bottom - containerPosition.top - - ellipsisIconExcessVerticalWhitespace, + messageActionIconExcessVerticalWhitespace, left: left - containerPosition.left, right: right - containerPosition.left, width, - height: height - ellipsisIconExcessVerticalWhitespace * 2, + height: height - messageActionIconExcessVerticalWhitespace * 2, }, }; - setPointingTo(dotsPosition); + setPointingTo(iconPosition); }, [containerPosition, tooltipVisible], ); const hideTooltip = React.useCallback(() => { setTooltipVisible(false); }, []); const { threadCreatedFromMessage, messageInfo } = item; const onThreadOpen = useOnClickThread(threadCreatedFromMessage); const onPendingSidebarOpen = useOnClickPendingSidebar( messageInfo, threadInfo, ); const onSidebarButtonClick = React.useCallback( (event: SyntheticEvent) => { if (threadCreatedFromMessage) { onThreadOpen(event); } else { onPendingSidebarOpen(event); } }, [onPendingSidebarOpen, onThreadOpen, threadCreatedFromMessage], ); const sidebarTooltipButtonText = threadCreatedFromMessage ? openSidebarText : createSidebarText; let tooltipMenu = null; if (pointingTo && tooltipVisible) { tooltipMenu = ( ); } return (
{tooltipMenu}
); } function getMessageActionTooltipStyle( tooltipPosition: TooltipPosition, ): TooltipStyle { let className; if (tooltipPosition === tooltipPositions.TOP_RIGHT) { className = classNames( css.messageActionTopRightTooltip, css.messageActionExtraAreaTop, css.messageActionExtraAreaTopRight, ); } else if (tooltipPosition === tooltipPositions.TOP_LEFT) { className = classNames( css.messageActionTopLeftTooltip, css.messageActionExtraAreaTop, css.messageActionExtraAreaTopLeft, ); } else if (tooltipPosition === tooltipPositions.RIGHT) { className = classNames( css.messageActionRightTooltip, css.messageActionExtraArea, css.messageActionExtraAreaRight, ); } else if (tooltipPosition === tooltipPositions.LEFT) { className = classNames( css.messageActionLeftTooltip, css.messageActionExtraArea, css.messageActionExtraAreaLeft, ); } invariant(className, `${tooltipPosition} is not valid for message tooltip`); return { className }; } export default MessageActionButtons;