Change avatar to use Compound implementation (#11448)

* Move avatar to new compound implementation * Make space avatars square * Remove reference to the avatar initial CSS class * remove references to mx_BaseAvatar_image * Fixe test suites * Fix accessbility violations * Add ConfirmUserActionDialog test * Fix tests * Add FacePile test * Fix items clipping in members list * Fix user info avatar sizing * Fix tests
matrix-org · Aug 24, 2023 · 09c5e06 · 09c5e06
1 parent e349201
commit 09c5e06
Show file tree

Hide file tree

Showing 125 changed files with 936 additions and 1,413 deletions.
diff --git a/cypress/e2e/settings/general-user-settings-tab.spec.ts b/cypress/e2e/settings/general-user-settings-tab.spec.ts
@@ -232,7 +232,7 @@ describe("General user settings tab", () => {
         cy.closeDialog();
 
         // Assert the avatar's initial characters are set
-        cy.get(".mx_UserMenu .mx_BaseAvatar_initial").findByText("A").should("exist"); // Alice
-        cy.get(".mx_RoomView_wrapper .mx_BaseAvatar_initial").findByText("A").should("exist"); // Alice
+        cy.get(".mx_UserMenu .mx_BaseAvatar").findByText("A").should("exist"); // Alice
+        cy.get(".mx_RoomView_wrapper .mx_BaseAvatar").findByText("A").should("exist"); // Alice
     });
 });
diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts
@@ -98,7 +98,7 @@ describe("Threads", () => {
         // Wait until the both messages are read
         cy.get(".mx_ThreadView .mx_EventTile_last[data-layout=group]").within(() => {
             cy.get(".mx_EventTile_line .mx_MTextBody").findByText(MessageLong).should("exist");
-            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
+            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("be.visible");
 
             // Make sure the CSS style for spacing is applied to mx_EventTile_line on group/modern layout
             cy.get(".mx_EventTile_line").should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart);
@@ -118,7 +118,7 @@ describe("Threads", () => {
             cy.get(".mx_EventTile_line .mx_MTextBody").findByText(MessageLong).should("exist");
 
             // Make sure the avatar inside ReadReceiptGroup is visible on the group layout
-            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
+            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("be.visible");
         });
 
         // Enable the bubble layout
@@ -127,12 +127,12 @@ describe("Threads", () => {
         cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble'].mx_EventTile_last").within(() => {
             // TODO: remove this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
             // See: https://github.com/vector-im/element-web/issues/23569
-            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("exist");
+            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("exist");
 
             // Make sure the avatar inside ReadReceiptGroup is visible on bubble layout
             // TODO: enable this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
             // See: https://github.com/vector-im/element-web/issues/23569
-            // cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
+            // cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("be.visible");
         });
 
         // Re-enable the group layout

diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts
@@ -45,7 +45,7 @@ const expectDisplayName = (e: JQuery<HTMLElement>, displayName: string): void =>
 const expectAvatar = (e: JQuery<HTMLElement>, avatarUrl: string): void => {
     cy.all([cy.window({ log: false }), cy.getClient()]).then(([win, cli]) => {
         const size = AVATAR_SIZE * win.devicePixelRatio;
-        expect(e.find(".mx_BaseAvatar_image").attr("src")).to.equal(
+        expect(e.find(".mx_BaseAvatar img").attr("src")).to.equal(
             // eslint-disable-next-line no-restricted-properties
             cli.mxcUrlToHttp(avatarUrl, size, size, AVATAR_RESIZE_METHOD),
         );

diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss
@@ -111,8 +111,4 @@ limitations under the License.
         margin-right: 8px;
         vertical-align: middle;
     }
-
-    .mx_BaseAvatar_image {
-        border-radius: 8px;
-    }
 }
diff --git a/res/css/structures/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss
@@ -25,16 +25,6 @@ limitations under the License.
     text-align: left;
 }
 
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
-    margin-right: -12px;
-    border: 1px solid $background;
-}
-
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
-    padding-left: 1px;
-    padding-top: 1px;
-}
-
 .mx_RoomStatusBar_typingIndicatorRemaining {
     display: inline-block;
     color: #acacac;

diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss
@@ -108,12 +108,6 @@ limitations under the License.
         }
     }
 
-    .mx_SpaceHierarchy_subspace {
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-    }
-
     .mx_SpaceHierarchy_subspace_toggle {
         position: absolute;
         left: -1px;

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
@@ -232,10 +232,6 @@ limitations under the License.
             transform: rotate(45deg);
         }
 
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-
         .mx_SpaceButton_menuButton {
             width: 20px;
             min-width: 20px; /* yay flex */
@@ -269,19 +265,6 @@ limitations under the License.
         min-width: 0;
         flex-grow: 1;
 
-        .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
-            color: $secondary-content;
-            border-radius: 8px;
-            background-color: $panel-actions;
-            font-size: $font-15px !important; /* override inline style */
-            font-weight: var(--cpd-font-weight-semibold);
-            line-height: $font-18px;
-
-            & + .mx_BaseAvatar_image {
-                visibility: hidden;
-            }
-        }
-
         .mx_SpaceTreeLevel {
             // Indent subspaces
             padding-left: 16px;
@@ -290,6 +273,7 @@ limitations under the License.
 
     .mx_SpaceButton_avatarWrapper {
         position: relative;
+        line-height: 0;
     }
 
     .mx_SpacePanel_badgeContainer {

diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
@@ -143,10 +143,6 @@ limitations under the License.
 
             .mx_BaseAvatar {
                 width: 80px;
-
-                .mx_BaseAvatar_image {
-                    border-radius: 12px;
-                }
             }
         }
 

diff --git a/res/css/views/avatars/_BaseAvatar.pcss b/res/css/views/avatars/_BaseAvatar.pcss
@@ -14,57 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_BaseAvatar {
-    position: relative;
-    /* In at least Firefox, the case of relative positioned inline elements */
-    /* (such as mx_BaseAvatar) with absolute positioned children (such as */
-    /* mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give */
-    /* different results during full reflow of the page vs. incremental reflow */
-    /* of small portions. While that's surely a browser bug, we can avoid it by */
-    /* using `inline-block` instead of the default `inline`. */
-    /* https://github.com/vector-im/element-web/issues/5594 */
-    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1535053 */
-    /* https://bugzilla.mozilla.org/show_bug.cgi?id=255139 */
-    display: inline-block;
-    user-select: none;
-
-    &.mx_RoomAvatar_isSpaceRoom {
-        &.mx_BaseAvatar_image,
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-    }
-}
-
-.mx_BaseAvatar_initial {
-    position: absolute;
-    left: 0;
-    color: $avatar-initial-color;
-    text-align: center;
-    speak: none;
-    pointer-events: none;
-    font-weight: normal;
-}
-
-.mx_BaseAvatar_image {
-    object-fit: cover;
-    aspect-ratio: 1;
-    border-radius: 125px;
-    vertical-align: top;
-    background-color: $background;
-}
-
 /* Percy screenshot test specific CSS */
 @media only percy {
     /* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
-    .mx_BaseAvatar_initial {
+    .mx_BaseAvatar {
         background-color: var(--percy-color-avatar) !important;
-        border-radius: 125px;
-    }
-    .mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_initial {
-        border-radius: 8px;
-    }
-    .mx_BaseAvatar_initial + .mx_BaseAvatar_image {
-        visibility: hidden;
     }
 }
diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.pcss b/res/css/views/avatars/_DecoratedRoomAvatar.pcss
@@ -18,6 +18,7 @@ limitations under the License.
 .mx_ExtraTile {
     position: relative;
     contain: content;
+    line-height: 1;
 
     &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
         mask-image: url("$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg");
@@ -29,9 +30,9 @@ limitations under the License.
     .mx_DecoratedRoomAvatar_icon {
         position: absolute;
         /* the following percentage based sizings are to match the scalable svg mask for the cutout */
-        bottom: -6.25%;
-        right: -6.25%;
-        margin: 12.5%;
+        bottom: 0;
+        right: 0;
+        transform: translate(-25%, -70%);
         width: 25%;
         height: 25%;
         border-radius: 50%;

diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
@@ -157,12 +157,6 @@ limitations under the License.
 .mx_SubspaceSelector {
     display: flex;
 
-    .mx_BaseAvatar_image {
-        border-radius: 8px;
-        margin: 0;
-        vertical-align: unset;
-    }
-
     .mx_BaseAvatar {
         display: inline-flex;
         margin: auto 16px auto 5px;
@@ -228,16 +222,10 @@ limitations under the License.
     display: flex;
     margin-top: 12px;
 
-    .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
-    .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
+    .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
         margin-right: 12px;
     }
 
-    img.mx_RoomAvatar_isSpaceRoom,
-    .mx_RoomAvatar_isSpaceRoom img {
-        border-radius: 8px;
-    }
-
     .mx_AddExistingToSpace_entry_name {
         font-size: $font-15px;
         line-height: 30px;

diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
@@ -66,11 +66,6 @@ limitations under the License.
                 flex-grow: 1;
             }
 
-            img.mx_RoomAvatar_isSpaceRoom,
-            .mx_RoomAvatar_isSpaceRoom img {
-                border-radius: 4px;
-            }
-
             .mx_ManageRestrictedJoinRuleDialog_entry_name {
                 margin: 0 8px;
                 font-size: $font-15px;
@@ -98,10 +93,6 @@ limitations under the License.
         .mx_BaseAvatar {
             margin-right: 12px;
         }
-
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
     }
 
     .mx_ManageRestrictedJoinRuleDialog_section_info {

diff --git a/res/css/views/elements/_FacePile.pcss b/res/css/views/elements/_FacePile.pcss
@@ -29,14 +29,10 @@ limitations under the License.
             margin-right: -8px;
         }
 
-        .mx_BaseAvatar_image {
+        .mx_BaseAvatar {
             border: 1px solid var(--facepile-background, $background);
         }
 
-        .mx_BaseAvatar_initial {
-            margin: 1px; /* to offset the border on the image */
-        }
-
         .mx_FacePile_more {
             position: relative;
             border-radius: 100%;

diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss
@@ -123,11 +123,6 @@ limitations under the License.
                 text-overflow: ellipsis;
                 overflow: hidden;
 
-                .mx_BaseAvatar_image {
-                    vertical-align: top;
-                    margin-right: 12px;
-                }
-
                 span {
                     color: $primary-content;
                 }

diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss
@@ -95,49 +95,14 @@ limitations under the License.
 
         .mx_UserInfo_avatar_transition {
             max-width: 30vh;
+            aspect-ratio: 1 / 1;
             margin: 0 auto;
             transition: 0.5s;
 
-            .mx_UserInfo_avatar_transition_child {
-                /* use padding-top instead of height to make this element square,
-                as the % in padding is a % of the width (including margin,
-                that's why we had to put the margin to center on a parent div),
-                and not a % of the parent height. */
-                padding-top: 100%;
-                position: relative;
-
-                .mx_BaseAvatar,
-                .mx_BaseAvatar_initial,
-                .mx_BaseAvatar_image {
-                    border-radius: 100%;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100% !important;
-                    height: 100% !important;
-                }
-
-                .mx_BaseAvatar {
-                    &.mx_BaseAvatar_image {
-                        cursor: zoom-in;
-                    }
-
-                    .mx_BaseAvatar_initial {
-                        z-index: 1;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-
-                        /* override the calculated sizes so that the letter isn't HUGE */
-                        font-size: 6rem !important;
-                        width: 100% !important;
-                        transition: font-size 0.5s;
-
-                        & + .mx_BaseAvatar_image {
-                            cursor: default;
-                        }
-                    }
-                }
+            .mx_BaseAvatar,
+            .mx_BaseAvatar img {
+                width: 100%;
+                height: 100%;
             }
         }
     }
@@ -285,14 +250,6 @@ limitations under the License.
                 max-width: 72px;
                 margin: 0 auto;
             }
-
-            .mx_UserInfo_avatar_transition_child {
-                .mx_BaseAvatar {
-                    .mx_BaseAvatar_initial {
-                        font-size: 40px !important; /* override the other override because here the avatar is smaller */
-                    }
-                }
-            }
         }
     }
 }
diff --git a/res/css/views/rooms/_EntityTile.pcss b/res/css/views/rooms/_EntityTile.pcss
@@ -67,6 +67,7 @@ limitations under the License.
     padding-top: 4px;
     padding-bottom: 4px;
     position: relative;
+    line-height: 0;
 }
 
 .mx_EntityTile_name {

diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
@@ -571,6 +571,7 @@ $left-gutter: 64px;
 
             .mx_EventTile_avatar,
             .mx_EventTile_e2eIcon {
+                line-height: 1;
                 margin: $spacing-block-start 0 $spacing-block-end;
             }
 

diff --git a/res/css/views/rooms/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss
@@ -163,10 +163,6 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_LegacyRoomHeader_avatar .mx_BaseAvatar_image {
-    object-fit: cover;
-}
-
 .mx_LegacyRoomHeader_button {
     cursor: pointer;
     flex: 0 0 auto;