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

Fixes read receipt avatar offset (#11483)

Browse source 
* Fixes read receipt avatar offset

Fixes https://github.com/vector-im/element-web/issues/26059

* Fix avatar collapsing in thread list

Fixes https://github.com/vector-im/element-web/issues/26064

* Make composer pills use new avatar design

Fixes https://github.com/vector-im/element-web/issues/26067

* Update snapshots

* Update UserInfo snapshot

* Update HTMLExport snapshot

* Fixes avatar placeholder font

Fixes https://github.com/vector-im/element-web/issues/26061
This commit is contained in:
Germain 2023-08-30 12:47:35 +01:00 • committed by GitHub
parent 6cc42b7e2e
commit 6aa86a858f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 132 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/avatars/BaseAvatar.tsx
View file

@ -99,7 +99,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
const {
name,
idName,
title,
title = "",
url,
urls,
size = "40px",

46
src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
View file

@ -84,6 +84,25 @@ export function getMentionDisplayText(completion: ICompletion, client: MatrixCli
return "";
}
function getCSSProperties({
url,
initialLetter,
id = "",
}: {
url: string;
initialLetter?: string;
id: string;
}): string {
const cssProperties = [`--avatar-background: url(${url})`, `--avatar-letter: '${initialLetter}'`];
const textColor = Avatar.getAvatarTextColor(id);
if (textColor) {
cssProperties.push(textColor);
}
return cssProperties.join("; ");
}
/**
* For a given completion, the attributes will change depending on the completion type
*
@ -118,7 +137,14 @@ export function getMentionAttributes(
}
attributes.set("data-mention-type", completion.type);
attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`);
attributes.set(
"style",
getCSSProperties({
url: avatarUrl,
initialLetter,
id: mentionedMember.userId,
}),
);
} else if (completion.type === "room") {
// logic as used in RoomPillPart.setAvatar in parts.ts
const mentionedRoom = getRoomFromCompletion(completion, client);
@ -132,7 +158,14 @@ export function getMentionAttributes(
}
attributes.set("data-mention-type", completion.type);
attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`);
attributes.set(
"style",
getCSSProperties({
url: avatarUrl,
initialLetter,
id: mentionedRoom?.roomId ?? aliasFromCompletion,
}),
);
} else if (completion.type === "at-room") {
// logic as used in RoomPillPart.setAvatar in parts.ts, but now we know the current room
// from the arguments passed
@ -145,7 +178,14 @@ export function getMentionAttributes(
}
attributes.set("data-mention-type", completion.type);
attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`);
attributes.set(
"style",
getCSSProperties({
url: avatarUrl,
initialLetter,
id: room.roomId,
}),
);
}
return attributes;