diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index a705e92d9c..ecc7eb7131 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -39,6 +39,7 @@ import {WidgetType} from "../../../widgets/WidgetType"; import RoomAvatar from "../avatars/RoomAvatar"; import {WIDGET_LAYOUT_EVENT_TYPE} from "../../../stores/widgets/WidgetLayoutStore"; import {objectHasDiff} from "../../../utils/objects"; +import Tooltip from "../elements/Tooltip"; const eventTileTypes = { 'm.room.message': 'messages.MessageEvent', @@ -567,11 +568,8 @@ export default class EventTile extends React.Component { }; getReadAvatars() { - if (this._shouldShowSentReceipt) { - return ; - } - if (this._shouldShowSendingReceipt) { - return ; + if (this._shouldShowSentReceipt || this._shouldShowSendingReceipt) { + return ; } // return early if there are no read receipts @@ -1180,7 +1178,6 @@ class E2ePadlock extends React.Component { render() { let tooltip = null; if (this.state.hover) { - const Tooltip = sdk.getComponent("elements.Tooltip"); tooltip = ; } @@ -1195,3 +1192,56 @@ class E2ePadlock extends React.Component { ); } } + +interface ISentReceiptProps { + messageState: string; // TODO: Types for message sending state +} + +interface ISentReceiptState { + hover: boolean; +} + +class SentReceipt extends React.PureComponent { + constructor() { + super(); + + this.state = { + hover: false, + }; + } + + onHoverStart = () => { + this.setState({hover: true}); + }; + + onHoverEnd = () => { + this.setState({hover: false}); + }; + + render() { + const isSent = !this.props.messageState || this.props.messageState === 'sent'; + const receiptClasses = classNames({ + 'mx_EventTile_receiptSent': isSent, + 'mx_EventTile_receiptSending': !isSent, + }); + + 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"); + } + // The yOffset is somewhat arbitrary - it just brings the tooltip down to be more associated + // with the read receipt. + tooltip = ; + } + + return + + {tooltip} + + ; + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 833a8c7838..9ed75bde37 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1440,6 +1440,9 @@ "Unencrypted": "Unencrypted", "Encrypted by a deleted session": "Encrypted by a deleted session", "The authenticity of this encrypted message can't be guaranteed on this device.": "The authenticity of this encrypted message can't be guaranteed on this device.", + "Sending your message...": "Sending your message...", + "Encrypting your message...": "Encrypting your message...", + "Your message was sent": "Your message was sent", "Please select the destination room for this message": "Please select the destination room for this message", "Scroll to most recent messages": "Scroll to most recent messages", "Close preview": "Close preview",