mirror of
https://github.com/element-hq/element-web
synced 2024-11-21 16:55:34 +03:00
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>
This commit is contained in:
Michael Telatynski
GitHub
parent
fd08e74275
commit
4ff307b562
5 changed files with 18 additions and 3 deletions
|
|
@ -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
3
res/img/sensor.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue