From 09c5e06d12ac15511e8310a572a3295064394dee Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 24 Aug 2023 04:48:35 +0100 Subject: [PATCH] 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 --- .../general-user-settings-tab.spec.ts | 4 +- cypress/e2e/threads/threads.spec.ts | 8 +- cypress/e2e/timeline/timeline.spec.ts | 2 +- res/css/structures/_RightPanel.pcss | 4 - res/css/structures/_RoomStatusBar.pcss | 10 - res/css/structures/_SpaceHierarchy.pcss | 6 - res/css/structures/_SpacePanel.pcss | 18 +- res/css/structures/_SpaceRoomView.pcss | 4 - res/css/views/avatars/_BaseAvatar.pcss | 49 +---- .../views/avatars/_DecoratedRoomAvatar.pcss | 7 +- .../dialogs/_AddExistingToSpaceDialog.pcss | 14 +- .../_ManageRestrictedJoinRuleDialog.pcss | 9 - res/css/views/elements/_FacePile.pcss | 6 +- .../views/right_panel/_RoomSummaryCard.pcss | 5 - res/css/views/right_panel/_UserInfo.pcss | 53 +---- res/css/views/rooms/_EntityTile.pcss | 1 + res/css/views/rooms/_EventTile.pcss | 1 + res/css/views/rooms/_LegacyRoomHeader.pcss | 4 - res/css/views/rooms/_MemberInfo.pcss | 2 +- res/css/views/rooms/_RoomPreviewCard.pcss | 7 - res/css/views/rooms/_WhoIsTypingTile.pcss | 4 - res/css/views/settings/_JoinRuleSettings.pcss | 5 - src/RoomInvite.tsx | 3 +- src/autocomplete/NotifProvider.tsx | 2 +- src/autocomplete/RoomProvider.tsx | 2 +- src/autocomplete/UserProvider.tsx | 2 +- src/components/structures/HomePage.tsx | 8 +- src/components/structures/SpaceHierarchy.tsx | 5 +- src/components/structures/SpaceRoomView.tsx | 2 +- src/components/structures/UserMenu.tsx | 4 +- src/components/views/avatars/BaseAvatar.tsx | 150 ++++---------- .../views/avatars/DecoratedRoomAvatar.tsx | 5 +- src/components/views/avatars/MemberAvatar.tsx | 15 +- src/components/views/avatars/RoomAvatar.tsx | 17 +- .../views/avatars/SearchResultAvatar.tsx | 7 +- src/components/views/avatars/WidgetAvatar.tsx | 10 +- .../views/beacon/BeaconListItem.tsx | 2 +- .../views/beacon/DialogOwnBeaconStatus.tsx | 7 +- .../dialogs/AddExistingToSpaceDialog.tsx | 8 +- .../views/dialogs/ConfirmUserActionDialog.tsx | 2 +- .../views/dialogs/ForwardDialog.tsx | 9 +- .../views/dialogs/IncomingSasDialog.tsx | 7 +- src/components/views/dialogs/InviteDialog.tsx | 11 +- .../ManageRestrictedJoinRuleDialog.tsx | 6 +- .../views/dialogs/ServerOfflineDialog.tsx | 2 +- .../dialogs/spotlight/SpotlightDialog.tsx | 22 +-- .../views/elements/AppPermission.tsx | 4 +- src/components/views/elements/AppTile.tsx | 2 +- src/components/views/elements/FacePile.tsx | 14 +- .../elements/GenericEventListSummary.tsx | 2 +- src/components/views/elements/ImageView.tsx | 3 +- .../views/elements/MiniAvatarUploader.tsx | 2 +- src/components/views/elements/Pill.tsx | 8 +- .../views/elements/RoomFacePile.tsx | 8 +- src/components/views/location/Marker.tsx | 3 +- src/components/views/location/ShareType.tsx | 8 +- src/components/views/messages/CallEvent.tsx | 5 +- .../views/messages/LegacyCallEvent.tsx | 2 +- .../views/messages/RoomAvatarEvent.tsx | 2 +- .../views/right_panel/RoomSummaryCard.tsx | 4 +- src/components/views/right_panel/UserInfo.tsx | 6 +- src/components/views/rooms/EntityTile.tsx | 4 +- src/components/views/rooms/EventTile.tsx | 21 +- .../views/rooms/LegacyRoomHeader.tsx | 2 +- src/components/views/rooms/MemberList.tsx | 9 +- src/components/views/rooms/MemberTile.tsx | 2 +- src/components/views/rooms/NewRoomIntro.tsx | 7 +- .../views/rooms/PinnedEventTile.tsx | 5 +- .../views/rooms/ReadReceiptGroup.tsx | 3 +- .../views/rooms/ReadReceiptMarker.tsx | 4 +- src/components/views/rooms/ReplyTile.tsx | 2 +- .../views/rooms/RoomBreadcrumbs.tsx | 2 +- src/components/views/rooms/RoomHeader.tsx | 23 ++- src/components/views/rooms/RoomList.tsx | 4 +- .../views/rooms/RoomPreviewCard.tsx | 8 +- src/components/views/rooms/RoomTile.tsx | 2 +- .../views/rooms/ThirdPartyMemberInfo.tsx | 2 +- src/components/views/rooms/ThreadSummary.tsx | 3 +- .../views/rooms/WhoIsTypingTile.tsx | 3 +- src/components/views/settings/BridgeTile.tsx | 4 +- .../views/settings/JoinRuleSettings.tsx | 2 +- .../tabs/room/PeopleRoomSettingsTab.tsx | 2 +- src/components/views/spaces/SpacePanel.tsx | 9 +- .../views/spaces/SpaceTreeLevel.tsx | 10 +- src/components/views/voip/CallView.tsx | 4 +- src/components/views/voip/LegacyCallView.tsx | 4 +- .../LegacyCallView/LegacyCallViewHeader.tsx | 4 +- src/components/views/voip/VideoFeed.tsx | 8 +- src/toasts/IncomingCallToast.tsx | 2 +- src/toasts/IncomingLegacyCallToast.tsx | 2 +- src/utils/exportUtils/HtmlExport.tsx | 9 +- .../components/atoms/VoiceBroadcastHeader.tsx | 2 +- .../__snapshots__/MessagePanel-test.tsx.snap | 25 +-- .../__snapshots__/RoomView-test.tsx.snap | 176 +++++------------ .../SpaceHierarchy-test.tsx.snap | 92 +++------ .../__snapshots__/UserMenu-test.tsx.snap | 23 +-- .../views/avatars/MemberAvatar-test.tsx | 2 +- .../views/avatars/RoomAvatar-test.tsx | 3 - .../__snapshots__/RoomAvatar-test.tsx.snap | 69 ++----- .../__snapshots__/BeaconMarker-test.tsx.snap | 25 +-- .../BeaconViewDialog-test.tsx.snap | 25 +-- .../__snapshots__/DialogSidebar-test.tsx.snap | 15 +- .../dialogs/ConfirmUserActionDialog-test.tsx | 35 ++++ .../views/dialogs/ForwardDialog-test.tsx | 2 +- .../ConfirmUserActionDialog-test.tsx.snap | 95 +++++++++ ...nageRestrictedJoinRuleDialog-test.tsx.snap | 23 +-- .../views/elements/FacePile-test.tsx | 31 +++ .../__snapshots__/AppTile-test.tsx.snap | 104 ++++++---- .../__snapshots__/FacePile-test.tsx.snap | 26 +++ .../elements/__snapshots__/Pill-test.tsx.snap | 186 +++++------------- .../location/LocationViewDialog-test.tsx | 2 +- .../views/messages/TextualBody-test.tsx | 4 +- .../__snapshots__/MLocationBody-test.tsx.snap | 25 +-- .../__snapshots__/TextualBody-test.tsx.snap | 164 ++++++++++----- .../RoomSummaryCard-test.tsx.snap | 23 +-- .../__snapshots__/UserInfo-test.tsx.snap | 28 +-- .../views/rooms/LegacyRoomHeader-test.tsx | 35 +--- .../PinnedEventTile-test.tsx.snap | 23 +-- .../RoomPreviewBar-test.tsx.snap | 115 +++-------- .../__snapshots__/RoomTile-test.tsx.snap | 92 +++------ .../PeopleRoomSettingsTab-test.tsx.snap | 52 ++--- .../views/spaces/SpaceTreeLevel-test.tsx | 19 +- .../AddExistingToSpaceDialog-test.tsx.snap | 27 ++- test/components/views/voip/CallView-test.tsx | 5 +- .../__snapshots__/HTMLExport-test.ts.snap | 6 +- 125 files changed, 936 insertions(+), 1413 deletions(-) create mode 100644 test/components/views/dialogs/ConfirmUserActionDialog-test.tsx create mode 100644 test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap create mode 100644 test/components/views/elements/FacePile-test.tsx create mode 100644 test/components/views/elements/__snapshots__/FacePile-test.tsx.snap diff --git a/cypress/e2e/settings/general-user-settings-tab.spec.ts b/cypress/e2e/settings/general-user-settings-tab.spec.ts index 7c78ee7196a..725caf2038e 100644 --- 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 index 35b6410d5b8..78fc6c63272 100644 --- 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 index 2b5cda64835..3d83a61b5ac 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -45,7 +45,7 @@ const expectDisplayName = (e: JQuery, displayName: string): void => const expectAvatar = (e: JQuery, 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 index 7d39968c11a..7649ce25721 100644 --- 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 index e046e5f7fd7..d0bfa9f7f5d 100644 --- 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 index 81498af176a..ca129fdbac9 100644 --- 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 index 76c328fa568..02f6f50363d 100644 --- 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 index f1bf0cf2141..dff60c3fb5d 100644 --- 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 index 70c41d0b251..5d0ece53bee 100644 --- 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 index a0770c3ca0b..7c39da8414c 100644 --- 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 index 7866bac1c11..25e75911670 100644 --- 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 index 1082e500055..501d7a2aaf6 100644 --- 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 index 03b736a73e8..2976873b1aa 100644 --- 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 index 4bd5f2ee0ff..0c11cab73b4 100644 --- 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 index 12d74915a2d..c0b8f16c6b6 100644 --- 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 index a2ce91037d9..9632946bd59 100644 --- 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 index 7d68dc98d9e..8b8d370ac75 100644 --- 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 index 17f1dfec912..1e36e0887b7 100644 --- 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; diff --git a/res/css/views/rooms/_MemberInfo.pcss b/res/css/views/rooms/_MemberInfo.pcss index c963c7ed28d..f309d37e6d9 100644 --- a/res/css/views/rooms/_MemberInfo.pcss +++ b/res/css/views/rooms/_MemberInfo.pcss @@ -96,7 +96,7 @@ limitations under the License. display: block; } - .mx_BaseAvatar.mx_BaseAvatar_image { + .mx_BaseAvatar img { cursor: zoom-in; } } diff --git a/res/css/views/rooms/_RoomPreviewCard.pcss b/res/css/views/rooms/_RoomPreviewCard.pcss index 087e71bdd73..241b6f37ff1 100644 --- a/res/css/views/rooms/_RoomPreviewCard.pcss +++ b/res/css/views/rooms/_RoomPreviewCard.pcss @@ -70,13 +70,6 @@ limitations under the License. display: flex; align-items: center; - .mx_RoomAvatar_isSpaceRoom { - &.mx_BaseAvatar_image, - .mx_BaseAvatar_image { - border-radius: 12px; - } - } - .mx_RoomPreviewCard_video { width: 50px; height: 50px; diff --git a/res/css/views/rooms/_WhoIsTypingTile.pcss b/res/css/views/rooms/_WhoIsTypingTile.pcss index be07862f75c..b981526e58f 100644 --- a/res/css/views/rooms/_WhoIsTypingTile.pcss +++ b/res/css/views/rooms/_WhoIsTypingTile.pcss @@ -31,10 +31,6 @@ limitations under the License. margin-left: -12px; } -.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial { - padding-top: 1px; -} - .mx_WhoIsTypingTile_avatars .mx_BaseAvatar { border: 1px solid $background; border-radius: 40px; diff --git a/res/css/views/settings/_JoinRuleSettings.pcss b/res/css/views/settings/_JoinRuleSettings.pcss index de06580ea7e..62debe28a13 100644 --- a/res/css/views/settings/_JoinRuleSettings.pcss +++ b/res/css/views/settings/_JoinRuleSettings.pcss @@ -39,11 +39,6 @@ limitations under the License. color: $secondary-content; display: inline-block; - img.mx_RoomAvatar_isSpaceRoom, - .mx_RoomAvatar_isSpaceRoom img { - border-radius: 8px; - } - .mx_BaseAvatar { margin-right: 8px; } diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index 63c4b08e78c..41ca61b73ec 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -177,8 +177,7 @@ export function showAnyInviteErrors( } name={name!} idName={user?.userId} - width={36} - height={36} + size="36px" />
diff --git a/src/autocomplete/NotifProvider.tsx b/src/autocomplete/NotifProvider.tsx index 6d23c3694dd..8bad2c87187 100644 --- a/src/autocomplete/NotifProvider.tsx +++ b/src/autocomplete/NotifProvider.tsx @@ -56,7 +56,7 @@ export default class NotifProvider extends AutocompleteProvider { suffix: " ", component: ( - + ), range: range!, diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx index c60c901f7c1..3d7a8ba1c1b 100644 --- a/src/autocomplete/RoomProvider.tsx +++ b/src/autocomplete/RoomProvider.tsx @@ -122,7 +122,7 @@ export default class RoomProvider extends AutocompleteProvider { href: makeRoomPermalink(this.room.client, room.displayedAlias), component: ( - + ), range: range!, diff --git a/src/autocomplete/UserProvider.tsx b/src/autocomplete/UserProvider.tsx index a934e9309a7..519c65344e3 100644 --- a/src/autocomplete/UserProvider.tsx +++ b/src/autocomplete/UserProvider.tsx @@ -135,7 +135,7 @@ export default class UserProvider extends AutocompleteProvider { href: makeUserPermalink(user.userId), component: ( - + ), range: range!, diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx index 115da051188..f16f4113361 100644 --- a/src/components/structures/HomePage.tsx +++ b/src/components/structures/HomePage.tsx @@ -59,7 +59,7 @@ const getOwnProfile = ( avatarUrl?: string; } => ({ displayName: OwnProfileStore.instance.displayName || userId, - avatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_SIZE) ?? undefined, + avatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(parseInt(AVATAR_SIZE, 10)) ?? undefined, }); const UserWelcomeTop: React.FC = () => { @@ -84,9 +84,7 @@ const UserWelcomeTop: React.FC = () => { idName={userId} name={ownProfile.displayName} url={ownProfile.avatarUrl} - width={AVATAR_SIZE} - height={AVATAR_SIZE} - resizeMethod="crop" + size={AVATAR_SIZE + "px"} /> @@ -106,7 +104,7 @@ const HomePage: React.FC = ({ justRegistered = false }) => { } let introSection: JSX.Element; - if (justRegistered || !OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_SIZE)) { + if (justRegistered || !OwnProfileStore.instance.getHttpAvatarUrl(parseInt(AVATAR_SIZE, 10))) { introSection = ; } else { const brandingConfig = SdkConfig.getObject("branding"); diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx index 565a48ea7f8..b2524063d1e 100644 --- a/src/components/structures/SpaceHierarchy.tsx +++ b/src/components/structures/SpaceHierarchy.tsx @@ -194,15 +194,14 @@ const Tile: React.FC = ({ let avatar: ReactElement; if (joinedRoom) { - avatar = ; + avatar = ; } else { avatar = ( ); } diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 4a5694255f6..230175da695 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -265,7 +265,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => { return (
- +
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index c85861afbb8..21ab71d34d1 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -458,9 +458,7 @@ export default class UserMenu extends React.Component { idName={userId} name={displayName} url={avatarUrl} - width={avatarSize} - height={avatarSize} - resizeMethod="crop" + size={avatarSize + "px"} className="mx_UserMenu_userAvatar_BaseAvatar" /> {liveAvatarAddon} diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx index e96bf1333a4..d01a5affe05 100644 --- a/src/components/views/avatars/BaseAvatar.tsx +++ b/src/components/views/avatars/BaseAvatar.tsx @@ -19,34 +19,29 @@ limitations under the License. import React, { useCallback, useContext, useEffect, useState } from "react"; import classNames from "classnames"; -import { ResizeMethod, ClientEvent } from "matrix-js-sdk/src/matrix"; +import { ClientEvent } from "matrix-js-sdk/src/matrix"; +import { Avatar } from "@vector-im/compound-web"; -import * as AvatarLogic from "../../../Avatar"; import SettingsStore from "../../../settings/SettingsStore"; -import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; +import { ButtonEvent } from "../elements/AccessibleButton"; import RoomContext from "../../../contexts/RoomContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { useTypedEventEmitter } from "../../../hooks/useEventEmitter"; -import { toPx } from "../../../utils/units"; import { _t } from "../../../languageHandler"; interface IProps { - name?: string; // The name (first initial used as default) - idName?: string; // ID for generating hash colours + name?: React.ComponentProps["name"]; // The name (first initial used as default) + idName?: React.ComponentProps["id"]; // ID for generating hash colours title?: string; // onHover title text url?: string | null; // highest priority of them all, shortcut to set in urls[0] urls?: string[]; // [highest_priority, ... , lowest_priority] - width: number; - height: number; - // XXX: resizeMethod not actually used. - resizeMethod?: ResizeMethod; - defaultToInitialLetter?: boolean; // true to add default url + type?: React.ComponentProps["type"]; + size: string; onClick?: (ev: ButtonEvent) => void; - inputRef?: React.RefObject; + inputRef?: React.RefObject; className?: string; tabIndex?: number; altText?: string; - ariaLabel?: string; } const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => { @@ -107,120 +102,47 @@ const BaseAvatar: React.FC = (props) => { title, url, urls, - width = 40, - height = 40, - resizeMethod = "crop", // eslint-disable-line @typescript-eslint/no-unused-vars - defaultToInitialLetter = true, + size = "40px", onClick, inputRef, className, + type = "round", altText = _t("Avatar"), - ariaLabel = _t("Avatar"), ...otherProps } = props; const [imageUrl, onError] = useImageUrl({ url, urls }); - if (!imageUrl && defaultToInitialLetter && name) { - const initialLetter = AvatarLogic.getInitialLetter(name); - const textNode = ( - - ); - const imgNode = ( - - ); - - if (onClick) { - return ( - - {textNode} - {imgNode} - - ); - } else { - return ( - - {textNode} - {imgNode} - - ); - } - } + const extraProps: Partial> = {}; if (onClick) { - return ( - - ); + extraProps["aria-live"] = "off"; + extraProps["role"] = "button"; + } else if (!imageUrl) { + extraProps["role"] = "presentation"; + extraProps["aria-label"] = undefined; } else { - return ( - - ); + extraProps["role"] = undefined; } + + return ( + + ); }; export default BaseAvatar; diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 61f71e2e3db..e0cde564bb0 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -33,7 +33,7 @@ import TooltipTarget from "../elements/TooltipTarget"; interface IProps { room: Room; - avatarSize: number; + size: string; displayBadge?: boolean; forceCount?: boolean; oobData?: IOOBData; @@ -207,8 +207,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 6546a0ff4ef..e146fa00595 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -30,8 +30,7 @@ import { _t } from "../../../languageHandler"; interface IProps extends Omit, "name" | "idName" | "url"> { member: RoomMember | null; fallbackUserId?: string; - width: number; - height: number; + size: string; resizeMethod?: ResizeMethod; // Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser` viewUserOnClick?: boolean; @@ -44,8 +43,7 @@ interface IProps extends Omit, "name" | } export default function MemberAvatar({ - width, - height, + size, resizeMethod = "crop", viewUserOnClick, forceHistorical, @@ -68,8 +66,8 @@ export default function MemberAvatar({ if (member?.name) { if (member.getMxcAvatarUrl()) { imageUrl = mediaFromMxc(member.getMxcAvatarUrl() ?? "").getThumbnailOfSourceHttp( - width, - height, + parseInt(size, 10), + parseInt(size, 10), resizeMethod, ); } @@ -85,9 +83,7 @@ export default function MemberAvatar({ return ( ); } diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx index 85a2d4929cc..22dbb4dcf6d 100644 --- a/src/components/views/avatars/RoomAvatar.tsx +++ b/src/components/views/avatars/RoomAvatar.tsx @@ -16,7 +16,6 @@ limitations under the License. import React, { ComponentProps } from "react"; import { Room, RoomStateEvent, MatrixEvent, EventType, RoomType } from "matrix-js-sdk/src/matrix"; -import classNames from "classnames"; import BaseAvatar from "./BaseAvatar"; import ImageView from "../elements/ImageView"; @@ -47,9 +46,7 @@ interface IState { export default class RoomAvatar extends React.Component { public static defaultProps = { - width: 36, - height: 36, - resizeMethod: "crop", + size: "36px", oobData: {}, }; @@ -87,9 +84,9 @@ export default class RoomAvatar extends React.Component { let oobAvatar: string | null = null; if (props.oobData.avatarUrl) { oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp( - props.width, - props.height, - props.resizeMethod, + parseInt(props.size, 10), + parseInt(props.size, 10), + "crop", ); } @@ -102,7 +99,7 @@ export default class RoomAvatar extends React.Component { private static getRoomAvatarUrl(props: IProps): string | null { if (!props.room) return null; - return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod); + return Avatar.avatarUrlForRoom(props.room, parseInt(props.size, 10), parseInt(props.size, 10), "crop"); } private onRoomAvatarClick = (): void => { @@ -140,9 +137,7 @@ export default class RoomAvatar extends React.Component { return ( ); } diff --git a/src/components/views/avatars/WidgetAvatar.tsx b/src/components/views/avatars/WidgetAvatar.tsx index 31d3a988c59..1fd2b7f6aa1 100644 --- a/src/components/views/avatars/WidgetAvatar.tsx +++ b/src/components/views/avatars/WidgetAvatar.tsx @@ -22,13 +22,12 @@ import { IApp, isAppWidget } from "../../../stores/WidgetStore"; import BaseAvatar, { BaseAvatarType } from "./BaseAvatar"; import { mediaFromMxc } from "../../../customisations/Media"; -interface IProps extends Omit, "name" | "url" | "urls" | "height" | "width"> { +interface IProps extends Omit, "name" | "url" | "urls"> { app: IApp | IWidget; - height?: number; - width?: number; + size: string; } -const WidgetAvatar: React.FC = ({ app, className, width = 20, height = 20, ...props }) => { +const WidgetAvatar: React.FC = ({ app, className, size = "20px", ...props }) => { let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg").default]; // heuristics for some better icons until Widgets support their own icons if (app.type.includes("jitsi")) { @@ -49,8 +48,7 @@ const WidgetAvatar: React.FC = ({ app, className, width = 20, height = 2 // MSC2765 url={isAppWidget(app) && app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : null} urls={iconUrls} - width={width} - height={height} + size={size} /> ); }; diff --git a/src/components/views/beacon/BeaconListItem.tsx b/src/components/views/beacon/BeaconListItem.tsx index 4c523d9a7f4..b2c95fa5d8c 100644 --- a/src/components/views/beacon/BeaconListItem.tsx +++ b/src/components/views/beacon/BeaconListItem.tsx @@ -53,7 +53,7 @@ const BeaconListItem: React.FC> = ({ beacon, .. return (
  • {isSelfLocation ? ( - + ) : ( )} diff --git a/src/components/views/beacon/DialogOwnBeaconStatus.tsx b/src/components/views/beacon/DialogOwnBeaconStatus.tsx index eae79499890..791edc665ed 100644 --- a/src/components/views/beacon/DialogOwnBeaconStatus.tsx +++ b/src/components/views/beacon/DialogOwnBeaconStatus.tsx @@ -54,12 +54,7 @@ const DialogOwnBeaconStatus: React.FC = ({ roomId }) => { return (
    {isSelfLocation ? ( - + ) : ( )} diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx index 839c5fa206f..7d6c10839db 100644 --- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx +++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx @@ -62,9 +62,9 @@ export const Entry: React.FC<{ return (
  • = ({ selected, isPanelCol role="treeitem" aria-selected={selected} > - +
    • ); }; @@ -160,6 +160,7 @@ const HomeButton: React.FC = ({ selected, isPanelCollapsed notificationState={notificationState} ContextMenuComponent={HomeButtonContextMenu} contextMenuTooltip={_t("common|options")} + size="32px" /> ); }; @@ -173,6 +174,7 @@ const FavouritesButton: React.FC = ({ selected, isPanelCol isPanelCollapsed={isPanelCollapsed} label={getMetaSpaceName(MetaSpace.Favourites)} notificationState={SpaceStore.instance.getNotificationState(MetaSpace.Favourites)} + size="32px" /> ); }; @@ -186,6 +188,7 @@ const PeopleButton: React.FC = ({ selected, isPanelCollaps isPanelCollapsed={isPanelCollapsed} label={getMetaSpaceName(MetaSpace.People)} notificationState={SpaceStore.instance.getNotificationState(MetaSpace.People)} + size="32px" /> ); }; @@ -199,6 +202,7 @@ const OrphansButton: React.FC = ({ selected, isPanelCollap isPanelCollapsed={isPanelCollapsed} label={getMetaSpaceName(MetaSpace.Orphans)} notificationState={SpaceStore.instance.getNotificationState(MetaSpace.Orphans)} + size="32px" /> ); }; @@ -244,6 +248,7 @@ const CreateSpaceButton: React.FC {contextMenu} diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index 58bbb656c77..ed847288b90 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -48,7 +48,7 @@ import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; -interface IButtonProps extends Omit, "title" | "onClick"> { +interface IButtonProps extends Omit, "title" | "onClick" | "size"> { space?: Room; spaceKey?: SpaceKey; className?: string; @@ -57,7 +57,7 @@ interface IButtonProps extends Omit; ContextMenuComponent?: ComponentType>; onClick?(ev?: ButtonEvent): void; @@ -71,7 +71,7 @@ export const SpaceButton: React.FC = ({ label, contextMenuTooltip, notificationState, - avatarSize, + size, isNarrow, children, innerRef, @@ -90,7 +90,7 @@ export const SpaceButton: React.FC = ({
    ); if (space) { - avatar = ; + avatar = ; } let notifBadge; @@ -374,7 +374,7 @@ export class SpaceItem extends React.PureComponent { contextMenuTooltip={_t("Space options")} notificationState={notificationState} isNarrow={isPanelCollapsed} - avatarSize={isNested ? 24 : 32} + size={isNested ? "24px" : "32px"} onKeyDown={this.onKeyDown} ContextMenuComponent={this.props.space.getMyMembership() === "join" ? SpaceContextMenu : undefined} > diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 167d8cbd169..6ae8c0d8842 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -246,7 +246,7 @@ export const Lobby: FC = ({ room, joinCallButtonDisabledTooltip, con
    {children}
    - +
    {_t("Connecting")}
    diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx index 058633ccfb0..775b176ace0 100644 --- a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx +++ b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx @@ -62,7 +62,7 @@ interface ISecondaryCallInfoProps { const SecondaryCallInfo: React.FC = ({ callRoom }) => { return ( - + {_t("%(name)s on hold", { name: callRoom.name })} @@ -101,7 +101,7 @@ const LegacyCallViewHeader: React.FC = ({ } return (
    - +
    {callRoomName}
    {onHoldCallRoom && } diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index 9c4d25190e6..dc7e9e24643 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -203,12 +203,12 @@ export default class VideoFeed extends React.PureComponent { const callRoom = (callRoomId ? MatrixClientPeg.safeGet().getRoom(callRoomId) : undefined) ?? undefined; let avatarSize; - if (pipMode && primary) avatarSize = 76; - else if (pipMode && !primary) avatarSize = 16; - else if (!pipMode && primary) avatarSize = 160; + if (pipMode && primary) avatarSize = "76px"; + else if (pipMode && !primary) avatarSize = "16px"; + else if (!pipMode && primary) avatarSize = "160px"; else; // TBD - content = ; + content = ; } else { const videoClasses = classnames("mx_VideoFeed_video", { mx_VideoFeed_video_mirror: diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx index 5e74cdf31d7..796d95f6437 100644 --- a/src/toasts/IncomingCallToast.tsx +++ b/src/toasts/IncomingCallToast.tsx @@ -130,7 +130,7 @@ export function IncomingCallToast({ callEvent }: Props): JSX.Element { return ( - +
    {room ? room.name : _t("Unknown room")} diff --git a/src/toasts/IncomingLegacyCallToast.tsx b/src/toasts/IncomingLegacyCallToast.tsx index c6ef1daf3ee..1721619a431 100644 --- a/src/toasts/IncomingLegacyCallToast.tsx +++ b/src/toasts/IncomingLegacyCallToast.tsx @@ -112,7 +112,7 @@ export default class IncomingLegacyCallToast extends React.Component - +
    {room ? room.name : _t("Unknown caller")}
    diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx index 8f1c701b56a..24f4f9ebabb 100644 --- a/src/utils/exportUtils/HtmlExport.tsx +++ b/src/utils/exportUtils/HtmlExport.tsx @@ -76,14 +76,7 @@ export default class HTMLExporter extends Exporter { } } const avatar = ( - + ); return renderToStaticMarkup(avatar); } diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx index 876af42cc47..4deda5f1b75 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx @@ -113,7 +113,7 @@ export const VoiceBroadcastHeader: React.FC = ({ }); }; - let roomAvatar = ; + let roomAvatar = ; let roomName = (
    {room.name}
    diff --git a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap index 9a1898c2980..b720bc3f6ea 100644 --- a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap @@ -95,26 +95,15 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = ` class="mx_GenericEventListSummary_avatars" > - - + u - - + u
    @@ -111,25 +100,14 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`] class="mx_DecoratedRoomAvatar" > - - + u
    @@ -198,30 +176,18 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
    - - - - + u +

    @user:example.com

    @@ -301,25 +267,14 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] = class="mx_DecoratedRoomAvatar" > - - + u
    @@ -388,30 +343,18 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
    - - - - + u +

    @user:example.com

    @@ -566,25 +509,14 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t class="mx_DecoratedRoomAvatar" > - - + u @@ -652,30 +584,18 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
  • - - - - + u +

    @user:example.com

    diff --git a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap index 12caa516cf9..286769614a9 100644 --- a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap +++ b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap @@ -71,25 +71,14 @@ exports[`SpaceHierarchy renders 1`] = ` class="mx_SpaceHierarchy_roomTile_avatar" > - - + U
    renders 1`] = ` class="mx_SpaceHierarchy_roomTile_avatar" > - - + U
    renders 1`] = ` class="mx_SpaceHierarchy_roomTile_avatar" > - - + N
    renders 1`] = ` class="mx_SpaceHierarchy_roomTile_avatar" > - - + N
    when rendered should render as expected 1`] = ` class="mx_UserMenu_userAvatar" > - - + u
    diff --git a/test/components/views/avatars/MemberAvatar-test.tsx b/test/components/views/avatars/MemberAvatar-test.tsx index a7a5c7b169a..48c88ee296a 100644 --- a/test/components/views/avatars/MemberAvatar-test.tsx +++ b/test/components/views/avatars/MemberAvatar-test.tsx @@ -36,7 +36,7 @@ describe("MemberAvatar", () => { function getComponent(props: Partial>) { return ( - + ); } diff --git a/test/components/views/avatars/RoomAvatar-test.tsx b/test/components/views/avatars/RoomAvatar-test.tsx index e23cd96f02d..b5a09c29369 100644 --- a/test/components/views/avatars/RoomAvatar-test.tsx +++ b/test/components/views/avatars/RoomAvatar-test.tsx @@ -55,7 +55,6 @@ describe("RoomAvatar", () => { const room = new Room("!room:example.com", client, client.getSafeUserId()); room.name = "test room"; expect(render().container).toMatchSnapshot(); - expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(room.roomId); }); it("should render as expected for a DM room", () => { @@ -64,7 +63,6 @@ describe("RoomAvatar", () => { room.name = "DM room"; mocked(DMRoomMap.shared().getUserIdForRoomId).mockReturnValue(userId); expect(render().container).toMatchSnapshot(); - expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(userId); }); it("should render as expected for a LocalRoom", () => { @@ -73,6 +71,5 @@ describe("RoomAvatar", () => { localRoom.name = "local test room"; localRoom.targets.push(new DirectoryMember({ user_id: userId })); expect(render().container).toMatchSnapshot(); - expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(userId); }); }); diff --git a/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap b/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap index 030d2112057..c73a88b10ad 100644 --- a/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap +++ b/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap @@ -3,25 +3,14 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
    - - + D
    `; @@ -29,25 +18,14 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = ` exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
    - - + l
    `; @@ -55,25 +33,14 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = ` exports[`RoomAvatar should render as expected for a Room 1`] = `
    - - + t
    `; diff --git a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap index b2803304146..7f8bda3b207 100644 --- a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap @@ -11,26 +11,15 @@ exports[` renders marker when beacon has location 1`] = ` class="mx_Marker_border" > - - + a diff --git a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap index e1ff6bf7970..0b4ecd09869 100644 --- a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap @@ -32,26 +32,15 @@ exports[` renders own beacon status when user is live sharin class="mx_DialogOwnBeaconStatus" > - - + a
    renders sidebar correctly with beacons 1`] = `
  • - + data-type="round" + role="presentation" + style="--cpd-avatar-size: 32px;" + > + +
    diff --git a/test/components/views/dialogs/ConfirmUserActionDialog-test.tsx b/test/components/views/dialogs/ConfirmUserActionDialog-test.tsx new file mode 100644 index 00000000000..1629a7a225f --- /dev/null +++ b/test/components/views/dialogs/ConfirmUserActionDialog-test.tsx @@ -0,0 +1,35 @@ +/* +Copyright 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. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { render } from "@testing-library/react"; + +import ConfirmUserActionDialog from "../../../../src/components/views/dialogs/ConfirmUserActionDialog"; +import { mkRoomMember } from "../../../test-utils"; + +describe("ConfirmUserActionDialog", () => { + it("renders", () => { + const { asFragment } = render( + , + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/test/components/views/dialogs/ForwardDialog-test.tsx b/test/components/views/dialogs/ForwardDialog-test.tsx index b4c131e99f7..1147a8ac93d 100644 --- a/test/components/views/dialogs/ForwardDialog-test.tsx +++ b/test/components/views/dialogs/ForwardDialog-test.tsx @@ -113,7 +113,7 @@ describe("ForwardDialog", () => { expect(screen.queryByText("Hello world!")).toBeInTheDocument(); // We would just test SenderProfile for the user ID, but it's stubbed - const previewAvatar = container.querySelector(".mx_EventTile_avatar .mx_BaseAvatar_image"); + const previewAvatar = container.querySelector(".mx_EventTile_avatar .mx_BaseAvatar"); expect(previewAvatar?.getAttribute("title")).toBe("@bob:example.org"); }); diff --git a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap new file mode 100644 index 00000000000..b8c98ea203f --- /dev/null +++ b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap @@ -0,0 +1,95 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConfirmUserActionDialog renders 1`] = ` + +
    +