PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Restyle Avatar

Browse source 
Make it a circle with the profile picture centered,
with a max height/width of 30vh
This commit is contained in:
Bruno Windels 2019-11-11 16:54:12 +01:00
parent 854b5a7af5
commit af4ad488bd
2 changed files with 36 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -38,6 +38,7 @@ limitations under the License.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: 16px center; mask-position: 16px center;
background-color: $rightpanel-button-color; background-color: $rightpanel-button-color;
position: absolute;
} }
.mx_UserInfo_profile h2 { .mx_UserInfo_profile h2 {
@ -47,7 +48,7 @@ limitations under the License.
} }
.mx_UserInfo h2 { .mx_UserInfo h2 {
font-size: 16px; font-size: 18px;
font-weight: 600; font-weight: 600;
margin: 16px 0 8px 0; margin: 16px 0 8px 0;
} }
@ -74,15 +75,27 @@ limitations under the License.
} }
.mx_UserInfo_avatar { .mx_UserInfo_avatar {
background: $tagpanel-bg-color; margin: 24px 32px 0 32px;
} }
.mx_UserInfo_avatar > img { .mx_UserInfo_avatar > div {
height: auto; max-width: 30vh;
width: 100%; margin: 0 auto;
}
.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. */
padding-top: 100%;
height: 0;
border-radius: 100%;
max-height: 30vh; max-height: 30vh;
object-fit: contain; box-sizing: content-box;
display: block; background-repeat: no-repeat;
background-size: cover;
background-position: center;
} }
.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image { .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {

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

@ -40,6 +40,7 @@ import MatrixClientPeg from "../../../MatrixClientPeg";
import E2EIcon from "../rooms/E2EIcon"; import E2EIcon from "../rooms/E2EIcon";
import withLegacyMatrixClient from "../../../utils/withLegacyMatrixClient"; import withLegacyMatrixClient from "../../../utils/withLegacyMatrixClient";
import {useEventEmitter} from "../../../hooks/useEventEmitter"; import {useEventEmitter} from "../../../hooks/useEventEmitter";
import {ContentRepo} from 'matrix-js-sdk';
const _disambiguateDevices = (devices) => { const _disambiguateDevices = (devices) => {
const names = Object.create(null); const names = Object.create(null);
@ -917,6 +918,12 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
_applyPowerChange(roomId, target, powerLevel, powerLevelEvent); _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
}, [user.roomId, user.userId, room && room.currentState, cli]); // eslint-disable-line }, [user.roomId, user.userId, room && room.currentState, cli]); // eslint-disable-line
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();
@ -1045,8 +1052,15 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
let avatarElement; let avatarElement;
if (avatarUrl) { if (avatarUrl) {
const httpUrl = cli.mxcUrlToHttp(avatarUrl, 800, 800); const httpUrl = cli.mxcUrlToHttp(avatarUrl, 800, 800);
avatarElement = <div className="mx_UserInfo_avatar" onClick={onMemberAvatarClick}> avatarElement = <div
<img src={httpUrl} alt={_t("Profile picture")} /> className="mx_UserInfo_avatar"
onClick={onMemberAvatarClick}
onKeyDown={onMemberAvatarKey}
tabIndex="0"
role="img"
aria-label={_t("Profile picture")}
>
<div><div style={{backgroundImage: `url(${httpUrl})`}} /></div>
</div>; </div>;
} }