Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Fixes read receipt avatar offset (#11483)
Browse files Browse the repository at this point in the history
* Fixes read receipt avatar offset

Fixes element-hq/element-web#26059

* Fix avatar collapsing in thread list

Fixes element-hq/element-web#26064

* Make composer pills use new avatar design

Fixes element-hq/element-web#26067

* Update snapshots

* Update UserInfo snapshot

* Update HTMLExport snapshot

* Fixes avatar placeholder font

Fixes element-hq/element-web#26061
  • Loading branch information
Germain authored Aug 30, 2023
1 parent 6cc42b7 commit 6aa86a8
Show file tree
Hide file tree
Showing 25 changed files with 132 additions and 20 deletions.
7 changes: 7 additions & 0 deletions res/css/views/avatars/_BaseAvatar.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,10 @@ limitations under the License.
color: white !important;
}
}

button.mx_BaseAvatar {
/* The user agent stylesheet overrides the font-size in this scenario
And that breaks the alignment, emojis, and all sorts of things
*/
font-size: inherit;
}
2 changes: 1 addition & 1 deletion res/css/views/rooms/_BasicMessageComposer.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ limitations under the License.
height: $font-16px;
margin-inline-end: 0.24rem;
background: var(--avatar-background), $background;
color: $avatar-initial-color;
color: var(--avatar-color, $avatar-initial-color);
background-repeat: no-repeat;
background-size: $font-16px;
border-radius: $font-16px;
Expand Down
8 changes: 3 additions & 5 deletions res/css/views/rooms/_ReadReceiptGroup.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,11 @@ limitations under the License.
height: 100%;

.mx_BaseAvatar {
box-sizing: content-box;
position: absolute;
display: inline-block;
height: 14px;
width: 14px;
border: 1px solid $background;
border-radius: 100%;

width: 14px;
height: 14px;
will-change: left, top;
transition: left var(--transition-short) ease-out, top var(--transition-standard) ease-out;
}
Expand Down
1 change: 1 addition & 0 deletions res/css/views/rooms/_ThreadSummary.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ limitations under the License.

.mx_ThreadSummary_avatar {
margin-inline-end: $spacing-8;
flex-shrink: 0;
}

.mx_ThreadSummary_icon {
Expand Down
4 changes: 2 additions & 2 deletions res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,8 @@ limitations under the License.
background-size: $font-16px;
border-radius: $font-16px;

color: $avatar-initial-color;
font-weight: normal;
color: var(--avatar-color, $avatar-initial-color);
font-weight: bold;
font-size: $font-10-4px;
}
}
Expand Down
31 changes: 24 additions & 7 deletions src/Avatar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,21 @@ limitations under the License.
*/

import { RoomMember, User, Room, ResizeMethod } from "matrix-js-sdk/src/matrix";
import { useIdColorHash } from "@vector-im/compound-web";

import DMRoomMap from "./utils/DMRoomMap";
import { mediaFromMxc } from "./customisations/Media";
import { isLocalRoom } from "./utils/localRoom/isLocalRoom";
import { getFirstGrapheme } from "./utils/strings";

/**
* Hardcoded from the Compound colors.
* Shade for background as defined in the compound web implementation
* https://github.com/vector-im/compound-web/blob/main/src/components/Avatar
*/
const AVATAR_BG_COLORS = ["#e9f2ff", "#faeefb", "#e3f7ed", "#ffecf0", "#ffefe4", "#e3f5f8", "#f1efff", "#e0f8d9"];
const AVATAR_TEXT_COLORS = ["#043894", "#671481", "#004933", "#7e0642", "#850000", "#004077", "#4c05b5", "#004b00"];

// Not to be used for BaseAvatar urls as that has similar default avatar fallback already
export function avatarUrlForMember(
member: RoomMember | undefined,
Expand All @@ -41,6 +50,18 @@ export function avatarUrlForMember(
return url;
}

/**
* Determines the HEX color to use in the avatar pills
* @param id the user or room ID
* @returns the text color to use on the avatar
*/
export function getAvatarTextColor(id: string): string {
// eslint-disable-next-line react-hooks/rules-of-hooks
const index = useIdColorHash(id);

return AVATAR_TEXT_COLORS[index - 1];
}

export function avatarUrlForUser(
user: Pick<User, "avatarUrl">,
width: number,
Expand Down Expand Up @@ -85,16 +106,12 @@ const colorToDataURLCache = new Map<string, string>();

export function defaultAvatarUrlForString(s: string): string {
if (!s) return ""; // XXX: should never happen but empirically does by evidence of a rageshake
const defaultColors = ["#0DBD8B", "#368bd6", "#ac3ba8"];
let total = 0;
for (let i = 0; i < s.length; ++i) {
total += s.charCodeAt(i);
}
const colorIndex = total % defaultColors.length;
// eslint-disable-next-line react-hooks/rules-of-hooks
const colorIndex = useIdColorHash(s);
// overwritten color value in custom themes
const cssVariable = `--avatar-background-colors_${colorIndex}`;
const cssValue = getComputedStyle(document.body).getPropertyValue(cssVariable);
const color = cssValue || defaultColors[colorIndex];
const color = cssValue || AVATAR_BG_COLORS[colorIndex - 1];
let dataUrl = colorToDataURLCache.get(color);
if (!dataUrl) {
// validate color as this can come from account_data
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/avatars/BaseAvatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
const {
name,
idName,
title,
title = "",
url,
urls,
size = "40px",
Expand Down
46 changes: 43 additions & 3 deletions src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down Expand Up @@ -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);
Expand All @@ -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
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
title=""
>
u
</span>
Expand Down Expand Up @@ -106,6 +107,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
title=""
>
u
</span>
Expand Down Expand Up @@ -185,6 +187,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
data-type="round"
role="button"
style="--cpd-avatar-size: 52px;"
title=""
>
u
</button>
Expand Down Expand Up @@ -273,6 +276,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
title=""
>
u
</span>
Expand Down Expand Up @@ -352,6 +356,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
data-type="round"
role="button"
style="--cpd-avatar-size: 52px;"
title=""
>
u
</button>
Expand Down Expand Up @@ -515,6 +520,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
title=""
>
u
</span>
Expand Down Expand Up @@ -593,6 +599,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
data-type="round"
role="button"
style="--cpd-avatar-size: 52px;"
title=""
>
u
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
>
U
</span>
Expand Down Expand Up @@ -147,6 +148,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
>
U
</span>
Expand Down Expand Up @@ -218,6 +220,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
>
N
</span>
Expand Down Expand Up @@ -295,6 +298,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
>
N
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title=""
>
u
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
>
D
</span>
Expand All @@ -24,6 +25,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
>
l
</span>
Expand All @@ -39,6 +41,7 @@ exports[`RoomAvatar should render as expected for a Room 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
>
t
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title=""
>
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
>
O
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
data-testid="avatar-img"
data-type="round"
style="--cpd-avatar-size: 20px;"
title=""
>
<img
alt=""
Expand Down Expand Up @@ -197,6 +198,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
data-testid="avatar-img"
data-type="round"
style="--cpd-avatar-size: 20px;"
title=""
>
<img
alt=""
Expand Down Expand Up @@ -277,6 +279,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 38px;"
title=""
>
u
</span>
Expand Down Expand Up @@ -352,6 +355,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
data-testid="avatar-img"
data-type="round"
style="--cpd-avatar-size: 20px;"
title=""
>
<img
alt=""
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
>
4
</span>
Expand Down
Loading

0 comments on commit 6aa86a8

Please sign in to comment.