feat: update SentReceipt to match new read receipts as well

matrix-org · Apr 22, 2022 · b5d9aa1 · b5d9aa1
1 parent 880e3f6
commit b5d9aa1
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 66 deletions.
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -22,20 +22,18 @@ $left-gutter: 64px;
 
     .mx_EventTile_receiptSent,
     .mx_EventTile_receiptSending {
-        // Give it some dimensions so the tooltip can position properly
+        position: relative;
         display: inline-block;
-        width: 14px;
-        height: 14px;
-        // We don't use `position: relative` on the element because then it won't line
-        // up with the other read receipts
+        width: 16px;
+        height: 16px;
 
         &::before {
             background-color: $tertiary-content;
             mask-repeat: no-repeat;
             mask-position: center;
-            mask-size: 14px;
-            width: 14px;
-            height: 14px;
+            mask-size: 16px;
+            width: 16px;
+            height: 16px;
             content: '';
             position: absolute;
             top: 0;

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
@@ -40,7 +40,7 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
 import { aboveRightOf } from '../../structures/ContextMenu';
 import { objectHasDiff } from "../../../utils/objects";
-import Tooltip from "../elements/Tooltip";
+import Tooltip, { Alignment } from "../elements/Tooltip";
 import EditorStateTransfer from "../../../utils/EditorStateTransfer";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
@@ -79,6 +79,7 @@ import TileErrorBoundary from '../messages/TileErrorBoundary';
 import { haveRendererForEvent, isMessageEvent, renderTile } from "../../../events/EventTileFactory";
 import ThreadSummary, { ThreadMessagePreview } from "./ThreadSummary";
 import { ReadReceiptGroup } from './ReadReceiptGroup';
+import { useTooltip } from "../../../utils/useTooltip";
 
 export type GetRelationsForEvent = (eventId: string, relationType: string, eventType: string) => Relations;
 
@@ -1575,66 +1576,51 @@ interface ISentReceiptProps {
     messageState: string; // TODO: Types for message sending state
 }
 
-interface ISentReceiptState {
-    hover: boolean;
-}
-
-class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptState> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            hover: false,
-        };
+function SentReceipt({ messageState }: ISentReceiptProps) {
+    const isSent = !messageState || messageState === 'sent';
+    const isFailed = messageState === 'not_sent';
+    const receiptClasses = classNames({
+        'mx_EventTile_receiptSent': isSent,
+        'mx_EventTile_receiptSending': !isSent && !isFailed,
+    });
+
+    let nonCssBadge = null;
+    if (isFailed) {
+        nonCssBadge = (
+            <NotificationBadge notification={StaticNotificationState.RED_EXCLAMATION} />
+        );
     }
 
-    onHoverStart = () => {
-        this.setState({ hover: true });
-    };
-
-    onHoverEnd = () => {
-        this.setState({ hover: false });
-    };
-
-    render() {
-        const isSent = !this.props.messageState || this.props.messageState === 'sent';
-        const isFailed = this.props.messageState === 'not_sent';
-        const receiptClasses = classNames({
-            'mx_EventTile_receiptSent': isSent,
-            'mx_EventTile_receiptSending': !isSent && !isFailed,
-        });
-
-        let nonCssBadge = null;
-        if (isFailed) {
-            nonCssBadge = <NotificationBadge
-                notification={StaticNotificationState.RED_EXCLAMATION}
-            />;
-        }
-
-        let tooltip = null;
-        if (this.state.hover) {
-            let label = _t("Sending your message...");
-            if (this.props.messageState === 'encrypting') {
-                label = _t("Encrypting your message...");
-            } else if (isSent) {
-                label = _t("Your message was sent");
-            } else if (isFailed) {
-                label = _t("Failed to send");
-            }
-            // The yOffset is somewhat arbitrary - it just brings the tooltip down to be more associated
-            // with the read receipt.
-            tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={3} />;
-        }
+    let label = _t("Sending your message...");
+    if (messageState === 'encrypting') {
+        label = _t("Encrypting your message...");
+    } else if (isSent) {
+        label = _t("Your message was sent");
+    } else if (isFailed) {
+        label = _t("Failed to send");
+    }
+    const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
+        label: label,
+        alignment: Alignment.TopRight,
+    });
 
-        return (
-            <div className="mx_EventTile_msgOption">
-                <span className="mx_EventTile_readAvatars">
-                    <span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
-                        { nonCssBadge }
-                        { tooltip }
+    return (
+        <div className="mx_EventTile_msgOption">
+            <div className="mx_ReadReceiptGroup">
+                <div
+                    className="mx_ReadReceiptGroup_button"
+                    onMouseOver={showTooltip}
+                    onMouseLeave={hideTooltip}
+                    onFocus={showTooltip}
+                    onBlur={hideTooltip}>
+                    <span className="mx_ReadReceiptGroup_container">
+                        <span className={receiptClasses}>
+                            { nonCssBadge }
+                        </span>
                     </span>
-                </span>
+                </div>
+                { tooltip }
             </div>
-        );
-    }
+        </div>
+    );
 }