mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix scaling of the avatar in UserInfo

Browse source
This commit is contained in:
Michael Telatynski 2019-12-19 12:27:25 +00:00
parent 3196655524
commit 66783dff9e
3 changed files with 31 additions and 18 deletions
Show stats 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 {
object-fit: cover;
border-radius: 40px;
vertical-align: top;
background-color: $avatar-bg-color;

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

@ -70,23 +70,33 @@ limitations under the License.
margin: 0 auto;
}
.mx_UserInfo_avatar > div * {
.mx_UserInfo_avatar > div > div {
/* use padding-top instead of height to make this element square,
as the % in padding is a % of the width (including margin,
that's why we had to put the margin to center on a parent div),
and not a % of the parent height. */
width: 30vh;
height: 30vh;
object-fit: cover;
border-radius: 100%;
box-sizing: content-box;
padding-top: 100%;
position: relative;
}
// override the calculated sizes so that the letter isn't HUGE
.mx_UserInfo_avatar > div .mx_BaseAvatar_initial {
.mx_UserInfo_avatar > div > div * {
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
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: 30vh !important;
line-height: 30vh !important;
width: 100% !important;
}
.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {

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

@ -1156,14 +1156,16 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
const avatarElement = (
<div className="mx_UserInfo_avatar">
<div>
<MemberAvatar
member={user}
width={0.3 * window.outerHeight} // ~30vh
height={0.3 * window.outerHeight} // ~30vh
resizeMethod="scale"
fallbackUserId={user.userId}
onClick={onMemberAvatarClick}
urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
<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}
urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
</div>
</div>
</div>
);