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
GitHub
parent
e34920133e
commit
09c5e06d12
125 changed files with 936 additions and 1413 deletions
|
|
@ -62,9 +62,9 @@ export const Entry: React.FC<{
|
|||
return (
|
||||
<label className="mx_AddExistingToSpace_entry">
|
||||
{room?.isSpaceRoom() ? (
|
||||
<RoomAvatar room={room} height={32} width={32} />
|
||||
<RoomAvatar room={room} size="32px" />
|
||||
) : (
|
||||
<DecoratedRoomAvatar room={room} avatarSize={32} />
|
||||
<DecoratedRoomAvatar room={room} size="32px" />
|
||||
)}
|
||||
<span className="mx_AddExistingToSpace_entry_name">{room.name}</span>
|
||||
<StyledCheckbox
|
||||
|
|
@ -427,7 +427,7 @@ export const SubspaceSelector: React.FC<ISubspaceSelectorProps> = ({ title, spac
|
|||
});
|
||||
return (
|
||||
<div key={space.roomId} className={classes}>
|
||||
<RoomAvatar room={space} width={24} height={24} />
|
||||
<RoomAvatar room={space} size="24px" />
|
||||
{space.name || getDisplayAliasForRoom(space) || space.roomId}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -445,7 +445,7 @@ export const SubspaceSelector: React.FC<ISubspaceSelectorProps> = ({ title, spac
|
|||
|
||||
return (
|
||||
<div className="mx_SubspaceSelector">
|
||||
<RoomAvatar room={value} height={40} width={40} />
|
||||
<RoomAvatar room={value} size="40px" />
|
||||
<div>
|
||||
<h1>{title}</h1>
|
||||
{body}
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export default class ConfirmUserActionDialog extends React.Component<IProps, ISt
|
|||
);
|
||||
}
|
||||
|
||||
const avatar = <MemberAvatar member={this.props.member} width={48} height={48} />;
|
||||
const avatar = <MemberAvatar member={this.props.member} size="48px" />;
|
||||
const name = this.props.member.name;
|
||||
const userId = this.props.member.userId;
|
||||
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
|
|||
title={_t("Open room")}
|
||||
alignment={Alignment.Top}
|
||||
>
|
||||
<DecoratedRoomAvatar room={room} avatarSize={32} />
|
||||
<DecoratedRoomAvatar room={room} size="32px" />
|
||||
<span className="mx_ForwardList_entry_name">{room.name}</span>
|
||||
<RoomContextDetails component="span" className="mx_ForwardList_entry_detail" room={room} />
|
||||
</AccessibleTooltipButton>
|
||||
|
|
@ -261,12 +261,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
|
|||
<EntityTile
|
||||
className="mx_EntityTile_ellipsis"
|
||||
avatarJsx={
|
||||
<BaseAvatar
|
||||
url={require("../../../../res/img/ellipsis.svg").default}
|
||||
name="..."
|
||||
width={36}
|
||||
height={36}
|
||||
/>
|
||||
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." size="36px" />
|
||||
}
|
||||
name={text}
|
||||
presenceState="online"
|
||||
|
|
|
|||
|
|
@ -155,9 +155,7 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
|
|||
name={oppProfile.displayname}
|
||||
idName={this.props.verifier.userId}
|
||||
url={url}
|
||||
width={48}
|
||||
height={48}
|
||||
resizeMethod="crop"
|
||||
size="48px"
|
||||
/>
|
||||
<h2>{oppProfile.displayname}</h2>
|
||||
</div>
|
||||
|
|
@ -168,8 +166,7 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
|
|||
<BaseAvatar
|
||||
name={this.props.verifier.userId.slice(1)}
|
||||
idName={this.props.verifier.userId}
|
||||
width={48}
|
||||
height={48}
|
||||
size="48px"
|
||||
/>
|
||||
<h2>{this.props.verifier.userId}</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
|
|||
};
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const avatarSize = 20;
|
||||
const avatarSize = "20px";
|
||||
const avatar = <SearchResultAvatar user={this.props.member} size={avatarSize} />;
|
||||
|
||||
let closeButton;
|
||||
|
|
@ -233,20 +233,21 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
|
|||
timestamp = <span className="mx_InviteDialog_tile--room_time">{humanTs}</span>;
|
||||
}
|
||||
|
||||
const avatarSize = 36;
|
||||
const avatarSize = "36px";
|
||||
const avatar = (this.props.member as ThreepidMember).isEmail ? (
|
||||
<EmailPillAvatarIcon width={avatarSize} height={avatarSize} />
|
||||
) : (
|
||||
<BaseAvatar
|
||||
url={
|
||||
this.props.member.getMxcAvatarUrl()
|
||||
? mediaFromMxc(this.props.member.getMxcAvatarUrl()!).getSquareThumbnailHttp(avatarSize)
|
||||
? mediaFromMxc(this.props.member.getMxcAvatarUrl()!).getSquareThumbnailHttp(
|
||||
parseInt(avatarSize, 10),
|
||||
)
|
||||
: null
|
||||
}
|
||||
name={this.props.member.name}
|
||||
idName={this.props.member.userId}
|
||||
width={avatarSize}
|
||||
height={avatarSize}
|
||||
size={avatarSize}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -54,11 +54,7 @@ const Entry: React.FC<{
|
|||
<label className="mx_ManageRestrictedJoinRuleDialog_entry">
|
||||
<div>
|
||||
<div>
|
||||
{localRoom ? (
|
||||
<RoomAvatar room={room} height={20} width={20} />
|
||||
) : (
|
||||
<RoomAvatar oobData={room} height={20} width={20} />
|
||||
)}
|
||||
{localRoom ? <RoomAvatar room={room} size="20px" /> : <RoomAvatar oobData={room} size="20px" />}
|
||||
<span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{room.name}</span>
|
||||
</div>
|
||||
{description && (
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
|
|||
throw new Error("Cannot render unknown context: " + c.constructor.name);
|
||||
const header = (
|
||||
<div className="mx_ServerOfflineDialog_content_context_timeline_header">
|
||||
<RoomAvatar width={24} height={24} room={c.room} />
|
||||
<RoomAvatar size="24px" room={c.room} />
|
||||
<span>{c.room.name}</span>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ import { Filter } from "./Filter";
|
|||
|
||||
const MAX_RECENT_SEARCHES = 10;
|
||||
const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
|
||||
const AVATAR_SIZE = 24;
|
||||
const AVATAR_SIZE = "24px";
|
||||
|
||||
interface IProps {
|
||||
initialText?: string;
|
||||
|
|
@ -609,11 +609,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
|||
endAdornment={<RoomResultContextMenus room={result.room} />}
|
||||
{...ariaProperties}
|
||||
>
|
||||
<DecoratedRoomAvatar
|
||||
room={result.room}
|
||||
avatarSize={AVATAR_SIZE}
|
||||
tooltipProps={{ tabIndex: -1 }}
|
||||
/>
|
||||
<DecoratedRoomAvatar room={result.room} size={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
|
||||
{result.room.name}
|
||||
<NotificationBadge notification={notification} />
|
||||
<RoomContextDetails
|
||||
|
|
@ -702,8 +698,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
|||
avatarUrl: result.publicRoom.avatar_url,
|
||||
roomType: result.publicRoom.room_type,
|
||||
}}
|
||||
width={AVATAR_SIZE}
|
||||
height={AVATAR_SIZE}
|
||||
size={AVATAR_SIZE}
|
||||
/>
|
||||
<PublicRoomResultDetails
|
||||
room={result.publicRoom}
|
||||
|
|
@ -843,11 +838,12 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
|||
idName={room.room_id}
|
||||
url={
|
||||
room.avatar_url
|
||||
? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(AVATAR_SIZE)
|
||||
? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(
|
||||
parseInt(AVATAR_SIZE, 10),
|
||||
)
|
||||
: null
|
||||
}
|
||||
width={AVATAR_SIZE}
|
||||
height={AVATAR_SIZE}
|
||||
size={AVATAR_SIZE}
|
||||
/>
|
||||
{room.name || room.canonical_alias}
|
||||
{room.name && room.canonical_alias && (
|
||||
|
|
@ -1037,7 +1033,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
|||
>
|
||||
<DecoratedRoomAvatar
|
||||
room={room}
|
||||
avatarSize={AVATAR_SIZE}
|
||||
size={AVATAR_SIZE}
|
||||
tooltipProps={{ tabIndex: -1 }}
|
||||
/>
|
||||
{room.name}
|
||||
|
|
@ -1075,7 +1071,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
|||
viewRoom({ roomId: room.roomId }, false, ev.type !== "click");
|
||||
}}
|
||||
>
|
||||
<DecoratedRoomAvatar room={room} avatarSize={32} tooltipProps={{ tabIndex: -1 }} />
|
||||
<DecoratedRoomAvatar room={room} size="32px" tooltipProps={{ tabIndex: -1 }} />
|
||||
{room.name}
|
||||
</TooltipOption>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue