imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change avatar to use Compound implementation (#11448)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

4
src/components/views/voip/CallView.tsx
View file

@ -246,7 +246,7 @@ export const Lobby: FC<LobbyProps> = ({ room, joinCallButtonDisabledTooltip, con
<div className="mx_CallView_lobby">
{children}
<div className="mx_CallView_preview">
<MemberAvatar key={me.userId} member={me} width={200} height={200} resizeMethod="scale" />
<MemberAvatar key={me.userId} member={me} size="200px" resizeMethod="scale" />
<video
ref={videoRef}
style={{ visibility: videoMuted ? "hidden" : undefined }}
@ -398,7 +398,7 @@ const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call }) => {
facePile = (
<div className="mx_CallView_participants">
{_t("%(count)s people joined", { count: members.length })}
<FacePile members={shownMembers} faceSize={24} overflow={overflow} />
<FacePile members={shownMembers} size="24px" overflow={overflow} />
</div>
);
}

4
src/components/views/voip/LegacyCallView.tsx
View file

@ -420,7 +420,7 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);
const callRoom = (callRoomId ? MatrixClientPeg.safeGet().getRoom(callRoomId) : undefined) ?? undefined;
const avatarSize = pipMode ? 76 : 160;
const avatarSize = pipMode ? "76px" : "160px";
const transfereeCall = LegacyCallHandler.instance.getTransfereeForCallId(call.callId);
const isOnHold = isLocalOnHold || isRemoteOnHold;
@ -507,7 +507,7 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
className="mx_LegacyCallView_avatarContainer"
style={{ width: avatarSize, height: avatarSize }}
>
<RoomAvatar room={callRoom} height={avatarSize} width={avatarSize} />
<RoomAvatar room={callRoom} size={avatarSize} />
</div>
</div>
<div className="mx_LegacyCallView_status">{_t("Connecting")}</div>

4
src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
View file

@ -62,7 +62,7 @@ interface ISecondaryCallInfoProps {
const SecondaryCallInfo: React.FC<ISecondaryCallInfoProps> = ({ callRoom }) => {
return (
<span className="mx_LegacyCallViewHeader_secondaryCallInfo">
<RoomAvatar room={callRoom} height={16} width={16} />
<RoomAvatar room={callRoom} size="16px" />
<span className="mx_LegacyCallView_secondaryCall_roomName">
{_t("%(name)s on hold", { name: callRoom.name })}
</span>
@ -101,7 +101,7 @@ const LegacyCallViewHeader: React.FC<LegacyCallViewHeaderProps> = ({
}
return (
<div className="mx_LegacyCallViewHeader mx_LegacyCallViewHeader_pip" onMouseDown={onPipMouseDown}>
<RoomAvatar room={callRoom} height={32} width={32} />
<RoomAvatar room={callRoom} size="32px" />
<div className="mx_LegacyCallViewHeader_callInfo">
<div className="mx_LegacyCallViewHeader_roomName">{callRoomName}</div>
{onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} />}

8
src/components/views/voip/VideoFeed.tsx
View file

@ -203,12 +203,12 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
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 = <RoomAvatar room={callRoom} height={avatarSize} width={avatarSize} />;
content = <RoomAvatar room={callRoom} size={avatarSize} />;
} else {
const videoClasses = classnames("mx_VideoFeed_video", {
mx_VideoFeed_video_mirror: