From 4d2b27a96d19e9c206912213f43379ff77c08f48 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 18 Jan 2023 15:56:43 +0100 Subject: [PATCH] Fix broken threads list timestamp layout (#9922) * Add option to show full identifier as tooltip on sender profiles * Show full user id as tooltip on threads list entries * Fix broken threads list timestamp layout Previously, thread list timestamps would overflow into the unread messages bubble on the right. This is fixed by resetting the width of the timestamp and ensuring both the timestamp and the display name can shrink if necessary. Both now also use ellipses if necessary. --- res/css/views/rooms/_EventTile.pcss | 11 +++++- .../views/messages/DisambiguatedProfile.tsx | 34 ++++++++++++------- .../views/messages/SenderProfile.tsx | 5 ++- src/components/views/rooms/EventTile.tsx | 4 ++- src/i18n/strings/en_EN.json | 1 + 5 files changed, 40 insertions(+), 15 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 3beaeacf72..da77396469 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 942eaa0eee..2fd47e107b 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 6280b04008..4027c1ded4 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 351f4df215..5620ab9356 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 c3f7e3613c..f3768067cd 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",