Merge branch 'develop' into andybalaam/improve-comments-in-receipt-tests

cypress/e2e/read-receipts/high-level.spec.ts

@@ -31,40 +31,55 @@ describe("Read receipts", () => {
     let alphaRoomId: string;
     let bot: MatrixClient | undefined;
 
-    beforeEach(() => {
-        // Create 2 rooms: Alpha & Beta. We join the bot to both of them
+    before(() => {
+        // Note: unusually for the Cypress tests in this repo, we share a single
+        // Synapse between all the tests in this file.
+        //
+        // Stopping and starting Synapse costs about 0.25 seconds per test, so
+        // for most suites this is worth the cost for the extra assurance that
+        // each test is independent.
+        //
+        // Because there are so many tests in this file, and because sharing a
+        // Synapse should have no effect (because we create new rooms and users
+        // for each test), we share it here, saving ~30 seconds per run at time
+        // of writing.
+
         cy.startHomeserver("default").then((data) => {
             homeserver = data;
-            cy.initTestUser(homeserver, userName)
-                .then(() => {
-                    cy.createRoom({ name: roomAlpha }).then((createdRoomId) => {
-                        alphaRoomId = createdRoomId;
-                    });
-                })
-                .then(() => {
-                    cy.createRoom({ name: roomBeta }).then((createdRoomId) => {
-                        betaRoomId = createdRoomId;
-                    });
-                })
-                .then(() => {
-                    cy.getBot(homeserver, { displayName: botName }).then((botClient) => {
-                        bot = botClient;
-                    });
-                })
-                .then(() => {
-                    // Invite the bot to both rooms
-                    cy.inviteUser(alphaRoomId, bot.getUserId());
-                    cy.viewRoomById(alphaRoomId);
-                    cy.findByText(botName + " joined the room").should("exist");
-
-                    cy.inviteUser(betaRoomId, bot.getUserId());
-                    cy.viewRoomById(betaRoomId);
-                    cy.findByText(botName + " joined the room").should("exist");
-                });
         });
     });
 
-    afterEach(() => {
+    beforeEach(() => {
+        // Create 2 rooms: Alpha & Beta. We join the bot to both of them
+        cy.initTestUser(homeserver, userName)
+            .then(() => {
+                cy.createRoom({ name: roomAlpha }).then((createdRoomId) => {
+                    alphaRoomId = createdRoomId;
+                });
+            })
+            .then(() => {
+                cy.createRoom({ name: roomBeta }).then((createdRoomId) => {
+                    betaRoomId = createdRoomId;
+                });
+            })
+            .then(() => {
+                cy.getBot(homeserver, { displayName: botName }).then((botClient) => {
+                    bot = botClient;
+                });
+            })
+            .then(() => {
+                // Invite the bot to both rooms
+                cy.inviteUser(alphaRoomId, bot.getUserId());
+                cy.viewRoomById(alphaRoomId);
+                cy.findByText(botName + " joined the room").should("exist");
+
+                cy.inviteUser(betaRoomId, bot.getUserId());
+                cy.viewRoomById(betaRoomId);
+                cy.findByText(botName + " joined the room").should("exist");
+            });
+    });
+
+    after(() => {
         cy.stopHomeserver(homeserver);
     });
 

res/css/structures/_SpaceRoomView.pcss

@@ -189,10 +189,6 @@ limitations under the License.
 
                 .mx_FacePile {
                     display: inline-block;
-
-                    .mx_FacePile_faces {
-                        cursor: pointer;
-                    }
                 }
 
                 .mx_SpaceRoomView_landing_inviteButton,

res/css/views/avatars/_BaseAvatar.pcss

@@ -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;
+}

res/css/views/elements/_FacePile.pcss

@@ -14,53 +14,32 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_FacePile {
-    display: flex;
-    align-items: center;
-
-    .mx_FacePile_faces {
-        display: inline-flex;
-        flex-direction: row-reverse;
-        vertical-align: middle;
-        margin: 0 -1px; /* to cancel out the border on the edges */
-
-        /* Overlap the children */
-        > * + * {
-            margin-right: -8px;
-        }
-
-        .mx_BaseAvatar {
-            border: 1px solid var(--facepile-background, $background);
-        }
-
-        .mx_FacePile_more {
-            position: relative;
-            border-radius: 100%;
-            width: 30px;
-            height: 30px;
-            background-color: $spacePanel-bg-color;
-
-            &::before {
-                content: "";
-                z-index: 1;
-                position: absolute;
-                top: 0;
-                left: 0;
-                height: inherit;
-                width: inherit;
-                background: $tertiary-content;
-                mask-position: center;
-                mask-size: 20px;
-                mask-repeat: no-repeat;
-                mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
-            }
-        }
+.mx_FacePile_more {
+    position: relative;
+    border-radius: 100%;
+    width: 30px;
+    height: 30px;
+    background-color: $spacePanel-bg-color;
+
+    &::before {
+        content: "";
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: inherit;
+        width: inherit;
+        background: $tertiary-content;
+        mask-position: center;
+        mask-size: 20px;
+        mask-repeat: no-repeat;
+        mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
     }
+}
 
-    .mx_FacePile_summary {
-        margin-left: 12px;
-        font: var(--cpd-font-body-md-regular);
-        line-height: $font-24px;
-        color: $tertiary-content;
-    }
+.mx_FacePile_summary {
+    margin-left: 12px;
+    font: var(--cpd-font-body-md-regular);
+    line-height: $font-24px;
+    color: $tertiary-content;
 }

res/css/views/rooms/_BasicMessageComposer.pcss

@@ -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;

res/css/views/rooms/_ReadReceiptGroup.pcss

@@ -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;
         }

res/css/views/rooms/_RoomHeader.pcss

@@ -23,6 +23,7 @@ limitations under the License.
 
 .mx_RoomHeader_info {
     cursor: pointer;
+    flex: 1;
 }
 
 .mx_RoomHeader_topic {
@@ -45,3 +46,19 @@ limitations under the License.
     height: calc($font-13px * 1.5);
     opacity: 1;
 }
+
+.mx_RoomHeader .mx_FacePile {
+    color: $secondary-content;
+    display: flex;
+    align-items: center;
+    gap: var(--cpd-space-2x);
+    border-radius: 9999px;
+    padding: var(--cpd-space-1-5x);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+        color: $primary-content;
+        background: var(--cpd-color-bg-subtle-primary);
+    }
+}

res/css/views/rooms/_ThreadSummary.pcss

@@ -123,6 +123,7 @@ limitations under the License.
 
 .mx_ThreadSummary_avatar {
     margin-inline-end: $spacing-8;
+    flex-shrink: 0;
 }
 
 .mx_ThreadSummary_icon {

res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

@@ -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;
             }
         }

src/Avatar.ts

@@ -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,
@@ -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,
@@ -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

src/DateUtils.ts

@@ -212,21 +212,21 @@ export function formatTimeLeft(inSeconds: number): string {
     const seconds = Math.floor((inSeconds % (60 * 60)) % 60).toFixed(0);
 
     if (hours !== "0") {
-        return _t("%(hours)sh %(minutes)sm %(seconds)ss left", {
+        return _t("time|hours_minutes_seconds_left", {
             hours,
             minutes,
             seconds,
         });
     }
 
     if (minutes !== "0") {
-        return _t("%(minutes)sm %(seconds)ss left", {
+        return _t("time|minutes_seconds_left", {
             minutes,
             seconds,
         });
     }
 
-    return _t("%(seconds)ss left", {
+    return _t("time|seconds_left", {
         seconds,
     });
 }
@@ -258,7 +258,7 @@ export function wantsDateSeparator(prevEventDate: Optional<Date>, nextEventDate:
 
 export function formatFullDateNoDay(date: Date): string {
     const locale = getUserLanguage();
-    return _t("%(date)s at %(time)s", {
+    return _t("time|date_at_time", {
         date: date.toLocaleDateString(locale).replace(/\//g, "-"),
         time: date.toLocaleTimeString(locale).replace(/:/g, "-"),
     });
@@ -311,15 +311,15 @@ export function formatRelativeTime(date: Date, showTwelveHour = false): string {
  */
 export function formatDuration(durationMs: number): string {
     if (durationMs >= DAY_MS) {
-        return _t("%(value)sd", { value: Math.round(durationMs / DAY_MS) });
+        return _t("time|short_days", { value: Math.round(durationMs / DAY_MS) });
     }
     if (durationMs >= HOUR_MS) {
-        return _t("%(value)sh", { value: Math.round(durationMs / HOUR_MS) });
+        return _t("time|short_hours", { value: Math.round(durationMs / HOUR_MS) });
     }
     if (durationMs >= MINUTE_MS) {
-        return _t("%(value)sm", { value: Math.round(durationMs / MINUTE_MS) });
+        return _t("time|short_minutes", { value: Math.round(durationMs / MINUTE_MS) });
     }
-    return _t("%(value)ss", { value: Math.round(durationMs / 1000) });
+    return _t("time|short_seconds", { value: Math.round(durationMs / 1000) });
 }
 
 /**
@@ -334,15 +334,15 @@ export function formatPreciseDuration(durationMs: number): string {
     const seconds = Math.floor((durationMs % MINUTE_MS) / 1000);
 
     if (days > 0) {
-        return _t("%(days)sd %(hours)sh %(minutes)sm %(seconds)ss", { days, hours, minutes, seconds });
+        return _t("time|short_days_hours_minutes_seconds", { days, hours, minutes, seconds });
     }
     if (hours > 0) {
-        return _t("%(hours)sh %(minutes)sm %(seconds)ss", { hours, minutes, seconds });
+        return _t("time|short_hours_minutes_seconds", { hours, minutes, seconds });
     }
     if (minutes > 0) {
-        return _t("%(minutes)sm %(seconds)ss", { minutes, seconds });
+        return _t("time|short_minutes_seconds", { minutes, seconds });
     }
-    return _t("%(value)ss", { value: seconds });
+    return _t("time|short_seconds", { value: seconds });
 }
 
 /**