imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix broken threads list timestamp layout (#9922)

Browse source 
* 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.
This commit is contained in:
Janne Mareike Koschinski 2023-01-18 15:56:43 +01:00 • committed by GitHub
parent 6d354e3e10
commit 4d2b27a96d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/views/messages/DisambiguatedProfile.tsx
View file

@ -1,6 +1,6 @@
/*
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
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<IProps> {
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 = (
<span className="mx_DisambiguatedProfile_mxid">
{UserIdentifier.getDisplayUserIdentifier(mxid, { withDisplayName: true, roomId: member.roomId })}
</span>
);
let title: string | undefined;
if (mxid) {
const identifier =
UserIdentifier.getDisplayUserIdentifier?.(mxid, {
withDisplayName: true,
roomId: member.roomId,
}) ?? mxid;
if (member?.disambiguate) {
mxidElement = <span className="mx_DisambiguatedProfile_mxid">{identifier}</span>;
}
title = _t("%(displayName)s (%(matrixId)s)", {
displayName: rawDisplayName,
matrixId: identifier,
});
}
const displayNameClasses = classNames({
const displayNameClasses = classNames(colorClass, {
mx_DisambiguatedProfile_displayName: emphasizeDisplayName,
[colorClass]: true,
});
return (
<div className="mx_DisambiguatedProfile" onClick={onClick}>
<div className="mx_DisambiguatedProfile" title={withTooltip ? title : undefined} onClick={onClick}>
<span className={displayNameClasses} dir="auto">
{rawDisplayName}
</span>