09c5e06d12
* 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
56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
/*
|
||
Copyright 2022 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 { RoomMember } from "matrix-js-sdk/src/matrix";
|
||
|
||
import emailPillAvatar from "../../../../res/img/icon-email-pill-avatar.svg";
|
||
import { mediaFromMxc } from "../../../customisations/Media";
|
||
import { Member, ThreepidMember } from "../../../utils/direct-messages";
|
||
import BaseAvatar from "./BaseAvatar";
|
||
|
||
interface SearchResultAvatarProps {
|
||
user: Member | RoomMember;
|
||
size: string;
|
||
}
|
||
|
||
export function SearchResultAvatar({ user, size }: SearchResultAvatarProps): JSX.Element {
|
||
if ((user as ThreepidMember).isEmail) {
|
||
// we can’t show a real avatar here, but we try to create the exact same markup that a real avatar would have
|
||
// BaseAvatar makes the avatar, if it's not clickable but just for decoration, invisible to screenreaders by
|
||
// specifically setting an empty alt text, so we do the same.
|
||
return (
|
||
<img
|
||
className="mx_SearchResultAvatar mx_SearchResultAvatar_threepidAvatar"
|
||
alt=""
|
||
src={emailPillAvatar}
|
||
width={size}
|
||
height={size}
|
||
/>
|
||
);
|
||
} else {
|
||
const avatarUrl = user.getMxcAvatarUrl();
|
||
return (
|
||
<BaseAvatar
|
||
className="mx_SearchResultAvatar"
|
||
url={avatarUrl ? mediaFromMxc(avatarUrl).getSquareThumbnailHttp(parseInt(size, 10)) : null}
|
||
name={user.name}
|
||
idName={user.userId}
|
||
size={size}
|
||
/>
|
||
);
|
||
}
|
||
}
|