diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css --- a/web/chat/chat-message-list.css +++ b/web/chat/chat-message-list.css @@ -51,36 +51,6 @@ div.conversationHeader:last-child { padding-top: 6px; } -div.messageLeftTooltip:after { - top: 7px; - right: -14px; - border-color: transparent transparent transparent var(--tool-tip-bg); -} -div.messageRightTooltip:after { - top: 7px; - left: -14px; - border-color: transparent var(--tool-tip-bg) transparent transparent; -} -div.messageTopLeftTooltip:after { - bottom: -14px; - left: 4px; - border-color: var(--tool-tip-bg) transparent transparent transparent; -} -div.messageTopRightTooltip:after { - bottom: -14px; - right: 4px; - border-color: var(--tool-tip-bg) transparent transparent transparent; -} -div.messageBottomLeftTooltip:after { - top: -14px; - left: 4px; - border-color: transparent transparent var(--tool-tip-bg) transparent; -} -div.messageBottomRightTooltip:after { - top: -14px; - right: 4px; - border-color: transparent transparent var(--tool-tip-bg) transparent; -} div.messageActionActiveArea { position: absolute; diff --git a/web/chat/message-timestamp-tooltip.react.js b/web/chat/message-timestamp-tooltip.react.js deleted file mode 100644 --- a/web/chat/message-timestamp-tooltip.react.js +++ /dev/null @@ -1,146 +0,0 @@ -// @flow - -import invariant from 'invariant'; -import * as React from 'react'; - -import { isComposableMessageType } from 'lib/types/message-types'; -import { longAbsoluteDate } from 'lib/utils/date-utils'; - -import css from './chat-message-list.css'; -import type { OnMessagePositionWithContainerInfo } from './position-types'; -import { - type TooltipPosition, - tooltipPositions, - sizeOfTooltipArrow, -} from './tooltip-utils'; -import { - TooltipMenu, - type TooltipStyle, - TooltipTextItem, -} from './tooltip.react'; - -const availablePositionsForComposedViewerMessage = [ - tooltipPositions.BOTTOM_RIGHT, -]; -const availablePositionsForNonComposedOrNonViewerMessage = [ - tooltipPositions.LEFT, -]; - -type Props = { - +messagePositionInfo: OnMessagePositionWithContainerInfo, - +timeZone: ?string, -}; -function MessageTimestampTooltip(props: Props): React.Node { - const { messagePositionInfo, timeZone } = props; - const { time, creator, type } = messagePositionInfo.item.messageInfo; - - const text = React.useMemo(() => longAbsoluteDate(time, timeZone), [ - time, - timeZone, - ]); - const availableTooltipPositions = React.useMemo(() => { - const { isViewer } = creator; - const isComposed = isComposableMessageType(type); - return isComposed && isViewer - ? availablePositionsForComposedViewerMessage - : availablePositionsForNonComposedOrNonViewerMessage; - }, [creator, type]); - - const { messagePosition, containerPosition } = messagePositionInfo; - const pointingToInfo = React.useMemo(() => { - return { - containerPosition, - itemPosition: messagePosition, - }; - }, [messagePosition, containerPosition]); - - const getTooltipStyle = React.useCallback( - (tooltipPosition: TooltipPosition) => - getTimestampTooltipStyle(messagePositionInfo, tooltipPosition), - [messagePositionInfo], - ); - return ( - - - - ); -} - -function getTimestampTooltipStyle( - messagePositionInfo: OnMessagePositionWithContainerInfo, - tooltipPosition: TooltipPosition, -): TooltipStyle { - const { messagePosition, containerPosition } = messagePositionInfo; - const { height: containerHeight, width: containerWidth } = containerPosition; - - let style, className; - if (tooltipPosition === tooltipPositions.LEFT) { - const centerOfMessage = messagePosition.top + messagePosition.height / 2; - const tooltipPointing = Math.max( - Math.min(centerOfMessage, containerHeight), - 0, - ); - style = { - right: containerWidth - messagePosition.left + sizeOfTooltipArrow, - top: tooltipPointing, - }; - className = css.messageLeftTooltip; - } else if (tooltipPosition === tooltipPositions.RIGHT) { - const centerOfMessage = messagePosition.top + messagePosition.height / 2; - const tooltipPointing = Math.max( - Math.min(centerOfMessage, containerHeight), - 0, - ); - style = { - left: messagePosition.right + sizeOfTooltipArrow, - top: tooltipPointing, - }; - className = css.messageRightTooltip; - } else if (tooltipPosition === tooltipPositions.TOP_LEFT) { - const tooltipPointing = Math.min( - containerHeight - messagePosition.top, - containerHeight, - ); - style = { - left: messagePosition.left, - bottom: tooltipPointing + sizeOfTooltipArrow, - }; - className = css.messageTopLeftTooltip; - } else if (tooltipPosition === tooltipPositions.TOP_RIGHT) { - const tooltipPointing = Math.min( - containerHeight - messagePosition.top, - containerHeight, - ); - style = { - right: containerWidth - messagePosition.right, - bottom: tooltipPointing + sizeOfTooltipArrow, - }; - className = css.messageTopRightTooltip; - } else if (tooltipPosition === tooltipPositions.BOTTOM_LEFT) { - const tooltipPointing = Math.min(messagePosition.bottom, containerHeight); - style = { - left: messagePosition.left, - top: tooltipPointing + sizeOfTooltipArrow, - }; - className = css.messageBottomLeftTooltip; - } else if (tooltipPosition === tooltipPositions.BOTTOM_RIGHT) { - const tooltipPointing = Math.min(messagePosition.bottom, containerHeight); - style = { - right: containerWidth - messagePosition.right, - top: tooltipPointing + sizeOfTooltipArrow, - }; - className = css.messageBottomRightTooltip; - } - invariant( - className && style, - `${tooltipPosition} is not valid for timestamp tooltip`, - ); - return { className, style }; -} - -export default MessageTimestampTooltip;