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

Merge pull request #3748 from matrix-org/t3chguy/avatar_userinfo

Browse source 
Replace UserInfo avatar with <MemberAvatar/> for fallback logic
This commit is contained in:
Michael Telatynski 2019-12-19 14:39:11 +00:00 • committed by GitHub
commit 29523000dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/views/avatars/_BaseAvatar.scss
View file

@ -40,6 +40,7 @@ limitations under the License.
} }
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
object-fit: cover;
border-radius: 40px; border-radius: 40px;
vertical-align: top; vertical-align: top;
background-color: $avatar-bg-color; background-color: $avatar-bg-color;

26
res/css/views/right_panel/_UserInfo.scss
View file

@ -63,7 +63,6 @@ limitations under the License.
.mx_UserInfo_avatar { .mx_UserInfo_avatar {
margin: 24px 32px 0 32px; margin: 24px 32px 0 32px;
cursor: pointer;
} }
.mx_UserInfo_avatar > div { .mx_UserInfo_avatar > div {
@ -77,12 +76,27 @@ limitations under the License.
that's why we had to put the margin to center on a parent div), that's why we had to put the margin to center on a parent div),
and not a % of the parent height. */ and not a % of the parent height. */
padding-top: 100%; padding-top: 100%;
height: 0; position: relative;
}
.mx_UserInfo_avatar > div > div * {
border-radius: 100%; border-radius: 100%;
box-sizing: content-box; position: absolute;
background-repeat: no-repeat; top: 0;
background-size: cover; left: 0;
background-position: center; width: 100%;
height: 100%;
}
.mx_UserInfo_avatar .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: 26px !important;
width: 100% !important;
} }
.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image { .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {

40
src/components/views/right_panel/UserInfo.js
View file

@ -1051,16 +1051,9 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
} }
}, [cli, user.userId]); }, [cli, user.userId]);
const onMemberAvatarKey = e => {
if (e.key === "Enter") {
onMemberAvatarClick();
}
};
const onMemberAvatarClick = useCallback(() => { const onMemberAvatarClick = useCallback(() => {
const member = user; const member = user;
const avatarUrl = member.getMxcAvatarUrl(); const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
if (!avatarUrl) return; if (!avatarUrl) return;
const httpUrl = cli.mxcUrlToHttp(avatarUrl); const httpUrl = cli.mxcUrlToHttp(avatarUrl);
@ -1158,21 +1151,24 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>; statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
} }
const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl; // const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
let avatarElement; const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
if (avatarUrl) { const avatarElement = (
const httpUrl = cli.mxcUrlToHttp(avatarUrl, 800, 800); <div className="mx_UserInfo_avatar">
avatarElement = <div <div>
className="mx_UserInfo_avatar" <div>
<MemberAvatar
member={user}
width={2 * 0.3 * window.innerHeight} // 2x@30vh
height={2 * 0.3 * window.innerHeight} // 2x@30vh
resizeMethod="scale"
fallbackUserId={user.userId}
onClick={onMemberAvatarClick} onClick={onMemberAvatarClick}
onKeyDown={onMemberAvatarKey} urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
tabIndex="0" </div>
role="img" </div>
aria-label={_t("Profile picture")} </div>
> );
<div><div style={{backgroundImage: `url(${httpUrl})`}} /></div>
</div>;
}
let closeButton; let closeButton;
if (onClose) { if (onClose) {