Show displayname in non-narrow thread summeries (#8036)

* Show displayname in non-narrow thread summeries

* Iterate PR

* Iterate PR to use line-height based approach

* Fix hover/focus chevron on thread summary relying on font character
This commit is contained in:
Michael Telatynski 2022-03-11 19:24:18 +00:00 committed by GitHub
parent c0fec42387
commit 14807de552
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 28 deletions

View file

@ -61,12 +61,18 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
<span className="mx_ThreadInfo_threads-amount">
{ countSection }
</span>
<ThreadMessagePreview thread={thread} />
<ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
<div className="mx_ThreadInfo_chevron" />
</AccessibleButton>
);
};
export const ThreadMessagePreview = ({ thread }: Pick<IProps, "thread">) => {
interface IPreviewProps {
thread: Thread;
showDisplayname?: boolean;
}
export const ThreadMessagePreview = ({ thread, showDisplayname = false }: IPreviewProps) => {
const cli = useContext(MatrixClientContext);
const lastReply = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.replyToEvent);
const preview = useAsyncMemo(async () => {
@ -85,6 +91,9 @@ export const ThreadMessagePreview = ({ thread }: Pick<IProps, "thread">) => {
height={24}
className="mx_ThreadInfo_avatar"
/>
{ showDisplayname && <div className="mx_ThreadInfo_sender">
{ sender?.name ?? lastReply.getSender() }
</div> }
<div className="mx_ThreadInfo_content">
<span className="mx_ThreadInfo_message-preview">
{ preview }