diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 3beaeacf72f..da773964691 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -884,6 +884,7 @@ $left-gutter: 64px; &::before { inset: 0; + pointer-events: none; /* ensures the title for the sender name can be correctly displayed */ } /* Display notification dot */ @@ -927,8 +928,14 @@ $left-gutter: 64px; inset: $padding auto auto $padding; } + .mx_EventTile_details { + overflow: hidden; + } + .mx_DisambiguatedProfile { display: inline-flex; + align-items: center; + flex: 1; .mx_DisambiguatedProfile_displayName, .mx_DisambiguatedProfile_mxid { @@ -979,7 +986,9 @@ $left-gutter: 64px; .mx_MessageTimestamp { font-size: $font-12px; - max-width: var(--MessageTimestamp-max-width); + width: unset; /* Cancel the default width */ + overflow: hidden; /* ensure correct overflow behavior */ + text-overflow: ellipsis; position: initial; margin-left: auto; /* to ensure it's end-aligned even if it's the only element of its parent */ } diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx index 942eaa0eee3..2fd47e107bd 100644 --- a/src/components/views/messages/DisambiguatedProfile.tsx +++ b/src/components/views/messages/DisambiguatedProfile.tsx @@ -1,6 +1,6 @@ /* Copyright 2021 Šimon Brandner -Copyright 2022 The Matrix.org Foundation C.I.C. +Copyright 2022-2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -19,6 +19,7 @@ import React from "react"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import classNames from "classnames"; +import { _t } from "../../../languageHandler"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; import UserIdentifier from "../../../customisations/UserIdentifier"; @@ -28,35 +29,44 @@ interface IProps { onClick?(): void; colored?: boolean; emphasizeDisplayName?: boolean; + withTooltip?: boolean; } export default class DisambiguatedProfile extends React.Component { public render(): JSX.Element { - const { fallbackName, member, colored, emphasizeDisplayName, onClick } = this.props; + const { fallbackName, member, colored, emphasizeDisplayName, withTooltip, onClick } = this.props; const rawDisplayName = member?.rawDisplayName || fallbackName; const mxid = member?.userId; - let colorClass; + let colorClass: string | undefined; if (colored) { colorClass = getUserNameColorClass(fallbackName); } let mxidElement; - if (member?.disambiguate && mxid) { - mxidElement = ( - - {UserIdentifier.getDisplayUserIdentifier(mxid, { withDisplayName: true, roomId: member.roomId })} - - ); + let title: string | undefined; + + if (mxid) { + const identifier = + UserIdentifier.getDisplayUserIdentifier?.(mxid, { + withDisplayName: true, + roomId: member.roomId, + }) ?? mxid; + if (member?.disambiguate) { + mxidElement = {identifier}; + } + title = _t("%(displayName)s (%(matrixId)s)", { + displayName: rawDisplayName, + matrixId: identifier, + }); } - const displayNameClasses = classNames({ + const displayNameClasses = classNames(colorClass, { mx_DisambiguatedProfile_displayName: emphasizeDisplayName, - [colorClass]: true, }); return ( -
+
{rawDisplayName} diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx index 6280b040086..4027c1ded48 100644 --- a/src/components/views/messages/SenderProfile.tsx +++ b/src/components/views/messages/SenderProfile.tsx @@ -1,4 +1,5 @@ /* + Copyright 2023 The Matrix.org Foundation C.I.C. Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); @@ -24,9 +25,10 @@ import { useRoomMemberProfile } from "../../../hooks/room/useRoomMemberProfile"; interface IProps { mxEvent: MatrixEvent; onClick?(): void; + withTooltip?: boolean; } -export default function SenderProfile({ mxEvent, onClick }: IProps): JSX.Element { +export default function SenderProfile({ mxEvent, onClick, withTooltip }: IProps): JSX.Element { const member = useRoomMemberProfile({ userId: mxEvent.getSender(), member: mxEvent.sender, @@ -39,6 +41,7 @@ export default function SenderProfile({ mxEvent, onClick }: IProps): JSX.Element member={member} colored={true} emphasizeDisplayName={true} + withTooltip={withTooltip} /> ) : null; } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 351f4df215e..5620ab93566 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1,5 +1,5 @@ /* -Copyright 2015 - 2022 The Matrix.org Foundation C.I.C. +Copyright 2015 - 2023 The Matrix.org Foundation C.I.C. Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); @@ -1091,6 +1091,8 @@ export class UnwrappedEventTile extends React.Component this.context.timelineRenderingType === TimelineRenderingType.Thread ) { sender = ; + } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) { + sender = ; } else { sender = ; } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c3f7e3613c1..f3768067cd3 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2316,6 +2316,7 @@ "Last month": "Last month", "The beginning of the room": "The beginning of the room", "Jump to date": "Jump to date", + "%(displayName)s (%(matrixId)s)": "%(displayName)s (%(matrixId)s)", "Downloading": "Downloading", "Decrypting": "Decrypting", "Download": "Download",