Have pills use solid backgrounds rather than colored images

Similar to room and member avatars, pills now use colored pseudo-elements
rather than background images.

Signed-off-by: Clark Fischer <[email protected]>

Author: clarkf

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;

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,

src/editor/parts.ts

@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 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.
@@ -295,8 +294,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 +412,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 +466,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 => {

test/editor/__snapshots__/parts-test.ts.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomPillPart matches snapshot (avatar) 1`] = `
+<span
+  class="mx_Pill mx_RoomPill"
+  contenteditable="false"
+  spellcheck="false"
+  style="--avatar-background: url('http://this.is.a.url/www.example.com/avatars/room1.jpeg'); --avatar-letter: '';"
+>
+  !room:example.com
+</span>
+`;
+
+exports[`RoomPillPart matches snapshot (no avatar) 1`] = `
+<span
+  class="mx_Pill mx_RoomPill"
+  contenteditable="false"
+  spellcheck="false"
+  style="--avatar-background: #ac3ba8; --avatar-letter: '!';"
+>
+  !room:example.com
+</span>
+`;
+
+exports[`UserPillPart matches snapshot (avatar) 1`] = `
+<span
+  class="mx_UserPill mx_Pill"
+  contenteditable="false"
+  spellcheck="false"
+  style="--avatar-background: url('http://this.is.a.url/www.example.com/avatar.png'); --avatar-letter: '';"
+>
+  DisplayName
+</span>
+`;
+
+exports[`UserPillPart matches snapshot (no avatar) 1`] = `
+<span
+  class="mx_UserPill mx_Pill"
+  contenteditable="false"
+  spellcheck="false"
+  style="--avatar-background: #ac3ba8; --avatar-letter: 'U';"
+>
+  DisplayName
+</span>
+`;

test/editor/parts-test.ts

@@ -1,5 +1,5 @@
 /*
-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.
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { EmojiPart, PlainPart } from "../../src/editor/parts";
+import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
+
+import { EmojiPart, PartCreator, PlainPart } from "../../src/editor/parts";
+import DMRoomMap from "../../src/utils/DMRoomMap";
+import { stubClient } from "../test-utils";
 import { createPartCreator } from "./mock";
 
 describe("editor/parts", () => {
@@ -40,3 +44,67 @@ describe("editor/parts", () => {
         expect(() => part.toDOMNode()).not.toThrow();
     });
 });
+
+describe("UserPillPart", () => {
+    const roomId = "!room:example.com";
+    let client: MatrixClient;
+    let room: Room;
+    let creator: PartCreator;
+
+    beforeEach(() => {
+        client = stubClient();
+        room = new Room(roomId, client, "@me:example.com");
+        creator = new PartCreator(room, client);
+    });
+
+    it("matches snapshot (no avatar)", () => {
+        jest.spyOn(room, "getMember").mockReturnValue(new RoomMember(room.roomId, "@user:example.com"));
+        const pill = creator.userPill("DisplayName", "@user:example.com");
+        const el = pill.toDOMNode();
+
+        expect(el).toMatchSnapshot();
+    });
+
+    it("matches snapshot (avatar)", () => {
+        const member = new RoomMember(room.roomId, "@user:example.com");
+        jest.spyOn(room, "getMember").mockReturnValue(member);
+        jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue("mxc://www.example.com/avatar.png");
+
+        const pill = creator.userPill("DisplayName", "@user:example.com");
+        const el = pill.toDOMNode();
+
+        expect(el).toMatchSnapshot();
+    });
+});
+
+describe("RoomPillPart", () => {
+    const roomId = "!room:example.com";
+    let client: jest.Mocked<MatrixClient>;
+    let room: Room;
+    let creator: PartCreator;
+
+    beforeEach(() => {
+        client = stubClient() as jest.Mocked<MatrixClient>;
+        DMRoomMap.makeShared();
+
+        room = new Room(roomId, client, "@me:example.com");
+        client.getRoom.mockReturnValue(room);
+        creator = new PartCreator(room, client);
+    });
+
+    it("matches snapshot (no avatar)", () => {
+        jest.spyOn(room, "getMxcAvatarUrl").mockReturnValue(null);
+        const pill = creator.roomPill("super-secret clubhouse");
+        const el = pill.toDOMNode();
+
+        expect(el).toMatchSnapshot();
+    });
+
+    it("matches snapshot (avatar)", () => {
+        jest.spyOn(room, "getMxcAvatarUrl").mockReturnValue("mxc://www.example.com/avatars/room1.jpeg");
+        const pill = creator.roomPill("cool chat club");
+        const el = pill.toDOMNode();
+
+        expect(el).toMatchSnapshot();
+    });
+});