Have pills use solid backgrounds rather than colored images

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
matrix-org · Jan 26, 2023 · 4a39d0e · 4a39d0e
1 parent 527da5a
commit 4a39d0e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/res/css/views/rooms/_BasicMessageComposer.pcss b/res/css/views/rooms/_BasicMessageComposer.pcss
@@ -78,7 +78,7 @@ limitations under the License.
                     min-width: $font-16px; /* ensure the avatar is not compressed */
                     height: $font-16px;
                     margin-inline-end: 0.24rem;
-                    background: var(--avatar-background), $background;
+                    background: var(--avatar-background);
                     color: $avatar-initial-color;
                     background-repeat: no-repeat;
                     background-size: $font-16px;

diff --git a/src/Avatar.ts b/src/Avatar.ts
@@ -47,6 +47,17 @@ export function avatarUrlForMember(
     return url;
 }
 
+export function getMemberAvatar(
+    member: RoomMember | null | undefined,
+    width: number,
+    height: number,
+    resizeMethod: ResizeMethod,
+): string | undefined {
+    const mxcUrl = member?.getMxcAvatarUrl();
+    if (!mxcUrl) return undefined;
+    return mediaFromMxc(mxcUrl).getThumbnailOfSourceHttp(width, height, resizeMethod);
+}
+
 export function avatarUrlForUser(
     user: Pick<User, "avatarUrl">,
     width: number,

diff --git a/src/editor/parts.ts b/src/editor/parts.ts
@@ -295,8 +295,8 @@ export abstract class PillPart extends BasePart implements IPillPart {
     }
 
     // helper method for subclasses
-    protected setAvatarVars(node: HTMLElement, avatarUrl: string, initialLetter: string | undefined): void {
-        const avatarBackground = `url('${avatarUrl}')`;
+    protected setAvatarVars(node: HTMLElement, avatarBackground: string, initialLetter: string | undefined): void {
+        // const avatarBackground = `url('${avatarUrl}')`;
         const avatarLetter = `'${initialLetter || ""}'`;
         // check if the value is changing,
         // otherwise the avatars flicker on every keystroke while updating.
@@ -413,13 +413,15 @@ class RoomPillPart extends PillPart {
     }
 
     protected setAvatar(node: HTMLElement): void {
-        let initialLetter: string | undefined = "";
-        let avatarUrl = Avatar.avatarUrlForRoom(this.room, 16, 16, "crop");
-        if (!avatarUrl) {
-            initialLetter = Avatar.getInitialLetter(this.room?.name || this.resourceId);
-            avatarUrl = Avatar.defaultAvatarUrlForString(this.room?.roomId ?? this.resourceId);
+        const avatarUrl = Avatar.avatarUrlForRoom(this.room, 16, 16, "crop");
+        if (avatarUrl) {
+            this.setAvatarVars(node, `url('${avatarUrl}')`, "");
+            return;
         }
-        this.setAvatarVars(node, avatarUrl, initialLetter);
+
+        const initialLetter = Avatar.getInitialLetter(this.room?.name || this.resourceId);
+        const color = Avatar.getColorForString(this.room?.roomId ?? this.resourceId);
+        this.setAvatarVars(node, color, initialLetter);
     }
 
     public get type(): IPillPart["type"] {
@@ -465,14 +467,17 @@ class UserPillPart extends PillPart {
         if (!this.member) {
             return;
         }
-        const name = this.member.name || this.member.userId;
-        const defaultAvatarUrl = Avatar.defaultAvatarUrlForString(this.member.userId);
-        const avatarUrl = Avatar.avatarUrlForMember(this.member, 16, 16, "crop");
-        let initialLetter: string | undefined = "";
-        if (avatarUrl === defaultAvatarUrl) {
-            initialLetter = Avatar.getInitialLetter(name);
+
+        const avatar = Avatar.getMemberAvatar(this.member, 16, 16, "crop");
+        if (avatar) {
+            this.setAvatarVars(node, `url('${avatar}')`, "");
+            return;
         }
-        this.setAvatarVars(node, avatarUrl, initialLetter);
+
+        const name = this.member.name || this.member.userId;
+        const initialLetter = Avatar.getInitialLetter(name);
+        const color = Avatar.getColorForString(this.member.userId);
+        this.setAvatarVars(node, color, initialLetter);
     }
 
     protected onClick = (): void => {