mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 01:05:42 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add tooltips to sent/sending receipts

Browse source 
Fixes https://github.com/vector-im/element-web/issues/16649
This commit is contained in:
Travis Ralston 2021-03-09 21:13:23 -07:00
parent eb45731d2e
commit f25db38b2b
2 changed files with 59 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/views/rooms/EventTile.js
View file

@ -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 <span className="mx_EventTile_readAvatars"><span className='mx_EventTile_receiptSent' /></span>;
}
if (this._shouldShowSendingReceipt) {
return <span className="mx_EventTile_readAvatars"><span className='mx_EventTile_receiptSending' /></span>;
if (this._shouldShowSentReceipt || this._shouldShowSendingReceipt) {
return <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
}
// 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 = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} dir="auto" />;
}
@ -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<ISentReceiptProps, ISentReceiptState> {
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 = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={20} />;
}
return <span className="mx_EventTile_readAvatars">
<span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
{tooltip}
</span>
</span>;
}
}

3
src/i18n/strings/en_EN.json
View file

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