From d7b35475295126888ad0a1b3fc917de451c999d4 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Tue, 17 Jan 2023 14:27:19 +0100 Subject: [PATCH 1/7] 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 | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 3beaeacf72f..5db0399e35d 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -927,8 +927,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 +985,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 */ } From ce8ec6de34b382d9294ba4aab7bfc7f93949a5b4 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Tue, 17 Jan 2023 16:01:19 +0100 Subject: [PATCH 2/7] Add option to show full identifier as tooltip on sender profiles --- .../views/messages/DisambiguatedProfile.tsx | 19 ++++++++++++++++--- .../views/messages/SenderProfile.tsx | 5 ++++- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx index 942eaa0eee3..74c6dbab513 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. @@ -18,6 +18,7 @@ limitations under the License. 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,11 +29,12 @@ 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; @@ -50,13 +52,24 @@ export default class DisambiguatedProfile extends React.Component { ); } + let title: string; + if (mxid) { + title = _t('%(displayName)s (%(identifier)s)', { + displayName: rawDisplayName, + matrixId: UserIdentifier.getDisplayUserIdentifier(mxid, { + withDisplayName: true, + roomId: member.roomId + }), + }); + } + const displayNameClasses = classNames({ 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; } From 6a250a3f1c12072498559b3f05f68334843828fa Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Tue, 17 Jan 2023 16:01:38 +0100 Subject: [PATCH 3/7] Show full user id as tooltip on threads list entries --- src/components/views/rooms/EventTile.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 351f4df215e..fd4af59bae3 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,10 @@ export class UnwrappedEventTile extends React.Component this.context.timelineRenderingType === TimelineRenderingType.Thread ) { sender = ; + } else if ( + this.context.timelineRenderingType === TimelineRenderingType.ThreadsList + ) { + sender = ; } else { sender = ; } From 706567f400305c702f69bc2f2bb87c4b7505ee5a Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Tue, 17 Jan 2023 16:02:03 +0100 Subject: [PATCH 4/7] Fix issue where the tooltip for a user's profile wouldn't always correctly show --- res/css/views/rooms/_EventTile.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 5db0399e35d..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 */ From fd1118c2e3e367aae7f2e9989738da5b99886b86 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Tue, 17 Jan 2023 16:10:54 +0100 Subject: [PATCH 5/7] Make the linters happy again :) --- src/components/views/messages/DisambiguatedProfile.tsx | 4 ++-- src/components/views/rooms/EventTile.tsx | 2 +- src/i18n/strings/en_EN.json | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx index 74c6dbab513..4989641ee3a 100644 --- a/src/components/views/messages/DisambiguatedProfile.tsx +++ b/src/components/views/messages/DisambiguatedProfile.tsx @@ -18,8 +18,8 @@ limitations under the License. import React from "react"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import classNames from "classnames"; -import { _t } from "../../../languageHandler"; +import { _t } from "../../../languageHandler"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; import UserIdentifier from "../../../customisations/UserIdentifier"; @@ -54,7 +54,7 @@ export default class DisambiguatedProfile extends React.Component { let title: string; if (mxid) { - title = _t('%(displayName)s (%(identifier)s)', { + title = _t('%(displayName)s (%(matrixId)s)', { displayName: rawDisplayName, matrixId: UserIdentifier.getDisplayUserIdentifier(mxid, { withDisplayName: true, diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index fd4af59bae3..459ce4e7f0c 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1094,7 +1094,7 @@ export class UnwrappedEventTile extends React.Component } else if ( this.context.timelineRenderingType === TimelineRenderingType.ThreadsList ) { - sender = ; + 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", From c46b10bd82f891a1bc9cb7d79bb734dcf668c098 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Tue, 17 Jan 2023 16:22:58 +0100 Subject: [PATCH 6/7] Fix ts-strict issues --- .../views/messages/DisambiguatedProfile.tsx | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx index 4989641ee3a..d9a8106912c 100644 --- a/src/components/views/messages/DisambiguatedProfile.tsx +++ b/src/components/views/messages/DisambiguatedProfile.tsx @@ -38,34 +38,32 @@ export default class DisambiguatedProfile extends React.Component { 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; - let title: string; 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: UserIdentifier.getDisplayUserIdentifier(mxid, { - withDisplayName: true, - roomId: member.roomId - }), + matrixId: identifier, }); } - const displayNameClasses = classNames({ + const displayNameClasses = classNames(colorClass, { mx_DisambiguatedProfile_displayName: emphasizeDisplayName, - [colorClass]: true, }); return ( From d0b2b4f7688241172e24528f3217b13ee5f452cd Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Tue, 17 Jan 2023 16:51:17 +0100 Subject: [PATCH 7/7] Fix eslint/prettier issues --- .../views/messages/DisambiguatedProfile.tsx | 15 +++++++-------- src/components/views/rooms/EventTile.tsx | 4 +--- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx index d9a8106912c..2fd47e107bd 100644 --- a/src/components/views/messages/DisambiguatedProfile.tsx +++ b/src/components/views/messages/DisambiguatedProfile.tsx @@ -47,16 +47,15 @@ export default class DisambiguatedProfile extends React.Component { let title: string | undefined; if (mxid) { - const identifier = UserIdentifier.getDisplayUserIdentifier?.(mxid, { - withDisplayName: true, - roomId: member.roomId - }) ?? mxid; + const identifier = + UserIdentifier.getDisplayUserIdentifier?.(mxid, { + withDisplayName: true, + roomId: member.roomId, + }) ?? mxid; if (member?.disambiguate) { - mxidElement = ( - { identifier } - ); + mxidElement = {identifier}; } - title = _t('%(displayName)s (%(matrixId)s)', { + title = _t("%(displayName)s (%(matrixId)s)", { displayName: rawDisplayName, matrixId: identifier, }); diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 459ce4e7f0c..5620ab93566 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1091,9 +1091,7 @@ export class UnwrappedEventTile extends React.Component this.context.timelineRenderingType === TimelineRenderingType.Thread ) { sender = ; - } else if ( - this.context.timelineRenderingType === TimelineRenderingType.ThreadsList - ) { + } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) { sender = ; } else { sender = ;