diff --git a/res/css/views/messages/_MessageTimestamp.pcss b/res/css/views/messages/_MessageTimestamp.pcss index 80f64df09e..62da406654 100644 --- a/res/css/views/messages/_MessageTimestamp.pcss +++ b/res/css/views/messages/_MessageTimestamp.pcss @@ -29,3 +29,11 @@ limitations under the License. white-space: nowrap; user-select: none; } + +.mx_MessageTimestamp_lateIcon { + position: absolute; + right: 100%; + top: 50%; + transform: translateY(-50%); + color: inherit; +} diff --git a/res/img/sensor.svg b/res/img/sensor.svg new file mode 100644 index 0000000000..0bc41eac0b --- /dev/null +++ b/res/img/sensor.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/messages/MessageTimestamp.tsx b/src/components/views/messages/MessageTimestamp.tsx index fba6db726b..6e0984808f 100644 --- a/src/components/views/messages/MessageTimestamp.tsx +++ b/src/components/views/messages/MessageTimestamp.tsx @@ -15,11 +15,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { ReactNode } from "react"; import { Tooltip } from "@vector-im/compound-web"; import { formatFullDate, formatTime, formatFullTime, formatRelativeTime } from "../../../DateUtils"; import { _t } from "../../../languageHandler"; +import { Icon as LateIcon } from "../../../../res/img/sensor.svg"; interface IProps { ts: number; @@ -49,17 +50,20 @@ export default class MessageTimestamp extends React.Component { let label = formatFullDate(date, this.props.showTwelveHour); let caption: string | undefined; + let icon: ReactNode | 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), }); + icon = ; } return ( + {icon} {timestamp} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index be3e9cd76f..e80adab5cb 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3418,7 +3418,7 @@ "label": "Message Actions", "view_in_room": "View in room" }, - "message_timestamp_received_at": "Recovered at: %(dateTime)s", + "message_timestamp_received_at": "Received at: %(dateTime)s", "message_timestamp_sent_at": "Sent at: %(dateTime)s", "mjolnir": { "changed_rule_glob": "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s", diff --git a/test/components/views/messages/MessageTimestamp-test.tsx b/test/components/views/messages/MessageTimestamp-test.tsx index a636e6f3e6..05a1ca12c1 100644 --- a/test/components/views/messages/MessageTimestamp-test.tsx +++ b/test/components/views/messages/MessageTimestamp-test.tsx @@ -57,7 +57,7 @@ describe("MessageTimestamp", () => { ); await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!); expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot( - `"Sent at: Fri, Dec 17, 2021, 08:09:00Recovered at: Sat, Dec 18, 2021, 08:09:00"`, + `"Sent at: Fri, Dec 17, 2021, 08:09:00Received at: Sat, Dec 18, 2021, 08:09:00"`, ); }); });