PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Iterate io.element.late_event decoration (#11760)

Browse source 
* 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>
This commit is contained in:
Michael Telatynski 2023-10-17 13:31:41 +01:00 committed by GitHub
parent fd08e74275
commit 4ff307b562
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
res/css/views/messages/_MessageTimestamp.pcss
View file

@ -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;
}

3
res/img/sensor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.63751 9.3625C2.19777 8.93261 1.85346 8.43043 1.60457 7.85596C1.3557 7.2815 1.23126 6.66562 1.23126 6.00831C1.23126 5.34309 1.35522 4.72331 1.60314 4.14899C1.85105 3.57466 2.19168 3.06667 2.62501 2.625L3.21251 3.2125C2.85835 3.575 2.57918 3.99408 2.37501 4.46975C2.17085 4.94543 2.06876 5.4539 2.06876 5.99518C2.06876 6.53589 2.17071 7.04496 2.37461 7.52239C2.57851 7.99981 2.86198 8.41735 3.22501 8.775L2.63751 9.3625ZM3.90001 8.1C3.63525 7.82844 3.42427 7.51368 3.26706 7.1557C3.10986 6.79773 3.03126 6.4143 3.03126 6.00539C3.03126 5.5883 3.10939 5.20187 3.26564 4.84613C3.42189 4.49038 3.63335 4.175 3.90001 3.9L4.48751 4.4875C4.29638 4.68505 4.14547 4.91232 4.03479 5.16931C3.9241 5.4263 3.86876 5.704 3.86876 6.0024C3.86876 6.3008 3.9241 6.57792 4.03479 6.83375C4.14547 7.08958 4.29638 7.31583 4.48751 7.5125L3.90001 8.1ZM5.99664 7.01875C5.71555 7.01875 5.47605 6.91867 5.27814 6.7185C5.08022 6.51833 4.98126 6.27771 4.98126 5.99663C4.98126 5.71554 5.08135 5.47604 5.28151 5.27813C5.48168 5.08021 5.7223 4.98125 6.00339 4.98125C6.28447 4.98125 6.52397 5.08133 6.72189 5.2815C6.9198 5.48167 7.01876 5.72229 7.01876 6.00337C7.01876 6.28446 6.91868 6.52396 6.71851 6.72188C6.51835 6.91979 6.27772 7.01875 5.99664 7.01875ZM8.08751 8.0875L7.51251 7.5125C7.70781 7.31496 7.85976 7.08674 7.96836 6.82784C8.07696 6.56895 8.13126 6.2922 8.13126 5.9976C8.13126 5.6992 8.07696 5.42208 7.96836 5.16625C7.85976 4.91042 7.70781 4.68417 7.51251 4.4875L8.10001 3.9C8.36668 4.175 8.57814 4.49068 8.73439 4.84704C8.89064 5.2034 8.96876 5.59049 8.96876 6.00829C8.96876 6.4179 8.89016 6.80103 8.73296 7.15768C8.57575 7.51433 8.3606 7.82428 8.08751 8.0875ZM9.36251 9.3625L8.77501 8.775C9.13751 8.42083 9.42085 8.00597 9.62501 7.5304C9.82918 7.05483 9.93126 6.54646 9.93126 6.0053C9.93126 5.45593 9.82814 4.94479 9.62189 4.47188C9.41564 3.99896 9.13751 3.57917 8.78751 3.2125L9.37501 2.625C9.80835 3.06667 10.149 3.57458 10.3969 4.14873C10.6448 4.72288 10.7688 5.34256 10.7688 6.00779C10.7688 6.6651 10.6443 7.28107 10.3954 7.8557C10.1466 8.43034 9.80225 8.93261 9.36251 9.3625Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@ -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<IProps> {
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 = <LateIcon className="mx_MessageTimestamp_lateIcon" width="16" height="16" />;
}
return (
<Tooltip label={label} caption={caption}>
<span className="mx_MessageTimestamp" aria-hidden={true} aria-live="off">
{icon}
{timestamp}
</span>
</Tooltip>

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

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

2
test/components/views/messages/MessageTimestamp-test.tsx
View file

@ -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"`,
);
});
});