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",