From 4ff307b562d9b631e7eb1fa053816e1ca0400d1c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 17 Oct 2023 13:31:41 +0100
Subject: [PATCH] Iterate `io.element.late_event` decoration (#11760)
* Update copy
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Add icon to late event timestamp
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update snapshot
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
res/css/views/messages/_MessageTimestamp.pcss | 8 ++++++++
res/img/sensor.svg | 3 +++
src/components/views/messages/MessageTimestamp.tsx | 6 +++++-
src/i18n/strings/en_EN.json | 2 +-
test/components/views/messages/MessageTimestamp-test.tsx | 2 +-
5 files changed, 18 insertions(+), 3 deletions(-)
create mode 100644 res/img/sensor.svg
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"`,
);
});
});