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
This commit is contained in:
Germain 2023-08-24 04:48:35 +01:00 committed by GitHub
parent e34920133e
commit 09c5e06d12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
125 changed files with 936 additions and 1413 deletions

View file

@ -186,7 +186,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
forceHide={!(isPinned || isMaximised)}
disabled={isPinned || isMaximised}
>
<WidgetAvatar app={app} />
<WidgetAvatar app={app} size="20px" />
<span>{name}</span>
{subtitle}
</AccessibleTooltipButton>
@ -307,7 +307,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
const header = (
<React.Fragment>
<div className="mx_RoomSummaryCard_avatar" role="presentation">
<RoomAvatar room={room} height={54} width={54} viewAvatarOnClick />
<RoomAvatar room={room} size="54px" viewAvatarOnClick />
<TextWithTooltip
tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
class={classNames("mx_RoomSummaryCard_e2ee", {

View file

@ -68,7 +68,6 @@ import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog";
import RoomAvatar from "../avatars/RoomAvatar";
import RoomName from "../elements/RoomName";
import { mediaFromMxc } from "../../../customisations/Media";
import UIStore from "../../../stores/UIStore";
import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
import ConfirmSpaceUserActionDialog from "../dialogs/ConfirmSpaceUserActionDialog";
import { bulkSpaceBehaviour } from "../../../utils/space";
@ -1579,8 +1578,7 @@ export const UserInfoHeader: React.FC<{
<MemberAvatar
key={member.userId} // to instantly blank the avatar when UserInfo changes members
member={member as RoomMember}
width={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
height={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
size="30vh" // 2x@30vh
resizeMethod="scale"
fallbackUserId={member.userId}
onClick={onMemberAvatarClick}
@ -1724,7 +1722,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
if (room?.isSpaceRoom()) {
scopeHeader = (
<div data-testid="space-header" className="mx_RightPanel_scopeHeader">
<RoomAvatar room={room} height={32} width={32} />
<RoomAvatar room={room} size="32px" />
<RoomName room={room} />
</div>
);