imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show io.element.late_event in MessageTimestamp when known (#11733)

Browse source 
* Use Compound tooltips on MessageTimestamp to improve UX of date time discovery

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Show io.element.late_event in MessageTimestamp when known

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Avoid needing new Compound changes

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update compound-web

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update identifiers

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix types

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2023-10-14 13:25:36 +01:00 • committed by GitHub
parent a267b86fef
commit fe3ad78a02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 108 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/views/messages/MessageTimestamp.tsx
View file

@ -19,9 +19,14 @@ import React from "react";
import { Tooltip } from "@vector-im/compound-web";
import { formatFullDate, formatTime, formatFullTime, formatRelativeTime } from "../../../DateUtils";
import { _t } from "../../../languageHandler";
interface IProps {
ts: number;
/**
* If specified will render both the sent-at and received-at timestamps in the tooltip
*/
receivedTs?: number;
showTwelveHour?: boolean;
showFullDate?: boolean;
showSeconds?: boolean;
@ -42,8 +47,18 @@ export default class MessageTimestamp extends React.Component<IProps> {
timestamp = formatTime(date, this.props.showTwelveHour);
}
let label = formatFullDate(date, this.props.showTwelveHour);
let caption: string | undefined;
if (this.props.receivedTs !== undefined) {
label = _t("timeline|message_timestamp_sent_at", { dateTime: label });
const receivedDate = new Date(this.props.receivedTs);
caption = _t("timeline|message_timestamp_received_at", {
dateTime: formatFullDate(receivedDate, this.props.showTwelveHour),
});
}
return (
<Tooltip label={formatFullDate(date, this.props.showTwelveHour)}>
<Tooltip label={label} caption={caption}>
<span className="mx_MessageTimestamp" aria-hidden={true} aria-live="off">
{timestamp}
</span>

1
src/components/views/rooms/EventTile.tsx
View file

@ -1126,6 +1126,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
showRelative={this.context.timelineRenderingType === TimelineRenderingType.ThreadsList}
showTwelveHour={this.props.isTwelveHour}
ts={ts}
receivedTs={this.props.mxEvent.getUnsigned()["io.element.late_event"]?.received_at}
/>
);