Page MenuHomePhabricator
Files F3365770

D4923.diff
No OneTemporary
Actions

D4923.diff
View Options

diff --git a/web/chat/message-reply-button.react.js b/web/chat/message-reply-button.react.js
deleted file mode 100644
--- a/web/chat/message-reply-button.react.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// @flow
-
-import invariant from 'invariant';
-import * as React from 'react';
-
-import { createMessageReply } from 'lib/shared/message-utils';
-
-import CommIcon from '../CommIcon.react.js';
-import type { InputState } from '../input/input-state';
-import css from './chat-message-list.css';
-import type { OnMessagePositionWithContainerInfo } from './position-types';
-
-type Props = {
- +messagePositionInfo: OnMessagePositionWithContainerInfo,
- +onReplyClick: () => void,
- +inputState: InputState,
-};
-function MessageReplyButton(props: Props): React.Node {
- const { inputState, onReplyClick, messagePositionInfo } = props;
- const { addReply } = inputState;
-
- const { item } = messagePositionInfo;
- const replyClicked = React.useCallback(() => {
- invariant(item.messageInfo.text, 'text should be set in message clicked');
- addReply(createMessageReply(item.messageInfo.text));
- onReplyClick();
- }, [addReply, item, onReplyClick]);
-
- return (
- <div className={css.messageActionLinkIcon} onClick={replyClicked}>
- <CommIcon icon="reply-filled" size={18} />
- </div>
- );
-}
-
-export default MessageReplyButton;
diff --git a/web/chat/message-timestamp-tooltip.css b/web/chat/message-timestamp-tooltip.css
deleted file mode 100644
--- a/web/chat/message-timestamp-tooltip.css
+++ /dev/null
@@ -1,53 +0,0 @@
-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;
- display: flex;
- top: 0;
- bottom: 0;
- align-items: center;
- padding: 0 12px;
-}
-
-div.viewerMessageActionActiveArea {
- right: 100%;
-}
-div.nonViewerMessageActiveArea {
- left: 100%;
-}
-div.messageActionActiveArea > div + div {
- margin-left: 4px;
-}
-
-div.messageActionLinkIcon:hover {
- cursor: pointer;
-}
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,148 +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 './message-timestamp-tooltip.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.LEFT];
-const availablePositionsForNonComposedOrNonViewerMessage = [
- tooltipPositions.RIGHT_BOTTOM,
-];
-
-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 (
- <TooltipMenu
- availableTooltipPositions={availableTooltipPositions}
- targetPositionInfo={pointingToInfo}
- layoutPosition="absolute"
- getStyle={getTooltipStyle}
- >
- <TooltipTextItem text={text} />
- </TooltipMenu>
- );
-}
-
-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 + 2,
- bottom: containerHeight - tooltipPointing - 5 * sizeOfTooltipArrow,
- };
- 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.LEFT_TOP) {
- const tooltipPointing = Math.min(
- containerHeight - messagePosition.top,
- containerHeight,
- );
- style = {
- left: messagePosition.left,
- bottom: tooltipPointing + sizeOfTooltipArrow,
- };
- className = css.messageTopLeftTooltip;
- } else if (tooltipPosition === tooltipPositions.RIGHT_TOP) {
- const tooltipPointing = Math.min(
- containerHeight - messagePosition.top,
- containerHeight,
- );
- style = {
- right: containerWidth - messagePosition.right,
- bottom: tooltipPointing + sizeOfTooltipArrow,
- };
- className = css.messageTopRightTooltip;
- } else if (tooltipPosition === tooltipPositions.LEFT_BOTTOM) {
- const tooltipPointing = Math.min(messagePosition.bottom, containerHeight);
- style = {
- left: messagePosition.left,
- top: tooltipPointing + sizeOfTooltipArrow,
- };
- className = css.messageBottomLeftTooltip;
- } else if (tooltipPosition === tooltipPositions.RIGHT_BOTTOM) {
- const centerOfMessage = messagePosition.top + messagePosition.height / 2;
- const tooltipPointing = Math.max(
- Math.min(centerOfMessage, containerHeight),
- 0,
- );
- style = {
- left: messagePosition.right + sizeOfTooltipArrow + 2,
- bottom: containerHeight - tooltipPointing - 5 * sizeOfTooltipArrow,
- };
- className = css.messageBottomRightTooltip;
- }
- invariant(
- className && style,
- `${tooltipPosition} is not valid for timestamp tooltip`,
- );
- return { className, style };
-}
-
-export default MessageTimestampTooltip;
diff --git a/web/chat/tooltip-utils.js b/web/chat/tooltip-utils.js
--- a/web/chat/tooltip-utils.js
+++ b/web/chat/tooltip-utils.js
@@ -63,7 +63,6 @@
+actionButtonContent: React.Node,
};
-const sizeOfTooltipArrow = 10; // 7px arrow + 3px extra
const appTopBarHeight = 65;
const font =
@@ -518,5 +517,4 @@
useMessageTooltipReplyAction,
useMessageTooltipActions,
useMessageTooltip,
- sizeOfTooltipArrow,
};
diff --git a/web/chat/tooltip.css b/web/chat/tooltip.css
--- a/web/chat/tooltip.css
+++ b/web/chat/tooltip.css
@@ -1,50 +1,13 @@
-div.messageTooltipMenu {
- position: absolute;
- background-color: var(--tool-tip-bg);
- color: var(--tool-tip-color);
- padding: 5px;
- border-radius: 5px;
- font-size: 14px;
- z-index: 1;
- white-space: nowrap;
-}
-div.messageTooltipMenu ul {
- list-style: none;
-}
-div.messageTooltipMenu li:not(:last-child) {
- padding-bottom: 5px;
-}
-div.messageTooltipMenu button {
- border: none;
- cursor: pointer;
- font-size: 14px;
- outline: none;
- background-color: black;
- color: white;
- text-decoration: underline;
-}
-div.messageTooltipMenu button:hover {
- background-color: black;
- color: #129aff;
+div.leftTooltipAlign > div {
+ align-items: flex-start;
}
-div.messageLeftTooltip {
- transform: translate(0%, -50%);
-}
-div.messageRightTooltip {
- transform: translate(0%, -50%);
+div.centerTooltipAlign > div {
+ align-items: center;
}
-div.messageTimestampTooltip {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- padding: 6px;
- background-color: var(--message-action-tooltip-bg);
- border-radius: 8px;
- overflow: auto;
- min-width: 72px;
+div.rightTooltipAlign > div {
+ align-items: flex-end;
}
div.tooltipAbsolute {
diff --git a/web/chat/tooltip.react.js b/web/chat/tooltip.react.js
deleted file mode 100644
--- a/web/chat/tooltip.react.js
+++ /dev/null
@@ -1,86 +0,0 @@
-// @flow
-
-import classNames from 'classnames';
-import * as React from 'react';
-
-import type { ItemAndContainerPositionInfo } from './position-types';
-import { type TooltipPosition, tooltipPositions } from './tooltip-utils';
-import css from './tooltip.css';
-
-type Style = {
- +left?: number,
- +right?: number,
- +top?: number,
- +bottom?: number,
-};
-export type TooltipStyle = { +className: string, +style?: Style };
-
-type TooltipMenuProps = {
- +availableTooltipPositions: $ReadOnlyArray<TooltipPosition>,
- +targetPositionInfo: ItemAndContainerPositionInfo,
- +layoutPosition: 'relative' | 'absolute',
- +getStyle: (tooltipPosition: TooltipPosition) => TooltipStyle,
- +children: React.ChildrenArray<
- React.Element<typeof TooltipButton | typeof TooltipTextItem>,
- >,
-};
-function TooltipMenu(props: TooltipMenuProps): React.Node {
- const { getStyle, children } = props;
-
- // eslint-disable-next-line no-unused-vars
- const tooltipTexts = React.useMemo(
- () => React.Children.map(children, item => item.props.text),
- [children],
- );
-
- const tooltipPosition = React.useMemo(() => tooltipPositions.LEFT, []);
-
- const tooltipStyle = React.useMemo(() => getStyle(tooltipPosition), [
- getStyle,
- tooltipPosition,
- ]);
-
- const className = React.useMemo(
- () =>
- classNames(
- css.messageTooltipMenu,
- tooltipStyle.className,
- css.messageTimestampTooltip,
- ),
- [tooltipStyle],
- );
-
- const style = tooltipStyle.style ? tooltipStyle.style : null;
-
- return (
- <div className={className} style={style}>
- <ul>{children}</ul>
- </div>
- );
-}
-
-type TooltipButtonProps = {
- +onClick: (event: SyntheticEvent<HTMLButtonElement>) => void,
- +text: string,
-};
-function TooltipButton(props: TooltipButtonProps): React.Node {
- const { onClick, text } = props;
- return (
- <li>
- <button onClick={onClick}>{text}</button>
- </li>
- );
-}
-
-type TooltipTextItemProps = {
- +text: string,
-};
-function TooltipTextItem(props: TooltipTextItemProps): React.Node {
- return (
- <li>
- <span>{props.text}</span>
- </li>
- );
-}
-
-export { TooltipMenu, TooltipButton, TooltipTextItem };

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 7:39 AM (21 h, 55 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2583906
Default Alt Text
D4923.diff (11 KB)

Event Timeline