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

basic makeover of member panel with big avatar

Browse source
This commit is contained in:
Bruno Windels 2018-10-24 18:23:34 +02:00
parent 873ff7fc29
commit e4dfb90b85
2 changed files with 65 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
res/css/views/rooms/_MemberInfo.scss
View file

@ -15,14 +15,35 @@ limitations under the License.
*/
.mx_MemberInfo {
margin-top: 20px;
padding-right: 20px;
height: 100%;
background-color: $secondary-accent-color;
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
}
.mx_MemberInfo_name {
align-items: center;
display: flex;
}
.mx_MemberInfo_cancel {
height: 16px;
padding: 10px 15px;
cursor: pointer;
}
.mx_MemberInfo_name h2 {
flex: 1;
}
.mx_MemberInfo h2 {
margin-top: 6px;
font-size: 18px;
font-weight: 600;
}
.mx_MemberInfo_container {
padding: 8px;
}
.mx_MemberInfo .mx_RoomTile_nameContainer {
@ -37,14 +58,17 @@ limitations under the License.
width: 160px;
}
.mx_MemberInfo_cancel {
float: right;
margin-right: 10px;
cursor: pointer;
.mx_MemberInfo_avatar {
display: grid;
grid-template-columns: 1fr auto 1fr;
background: $tagpanel-bg-color;
}
.mx_MemberInfo_avatar {
clear: both;
.mx_MemberInfo_avatar > img {
height: auto;
width: 100%;
grid-column: 2;
max-height: 400px;
}
.mx_MemberInfo_avatar .mx_BaseAvatar {
@ -70,7 +94,6 @@ limitations under the License.
.mx_MemberInfo_profileField {
font-size: 13px;
position: relative;
background-color: $primary-bg-color;
}
.mx_MemberInfo_buttons {

51
src/components/views/rooms/MemberInfo.js
View file

@ -928,38 +928,49 @@ module.exports = withMatrixClient(React.createClass({
</div>;
}
const avatarUrl = this.props.member.getMxcAvatarUrl();
let avatarElement;
if (avatarUrl) {
const httpUrl = this.props.matrixClient.mxcUrlToHttp(avatarUrl);
avatarElement = <div className="mx_MemberInfo_avatar">
<img src={httpUrl} />
</div>
}
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
const EmojiText = sdk.getComponent('elements.EmojiText');
return (
<div className="mx_MemberInfo">
<GeminiScrollbarWrapper autoshow={true}>
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
<img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" alt={_t('Close')} />
</AccessibleButton>
<div className="mx_MemberInfo_avatar">
<MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
<div className="mx_MemberInfo_name">
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
<img src="img/minimise.svg" width="10" height="16" className="mx_filterFlipColor" alt={_t('Close')} />
</AccessibleButton>
<EmojiText element="h2">{ memberName }</EmojiText>
</div>
{ avatarElement }
<div className="mx_MemberInfo_container">
<EmojiText element="h2">{ memberName }</EmojiText>
<div className="mx_MemberInfo_profile">
<div className="mx_MemberInfo_profileField">
{ this.props.member.userId }
<div className="mx_MemberInfo_profile">
<div className="mx_MemberInfo_profileField">
{ this.props.member.userId }
</div>
{ roomMemberDetails }
</div>
{ roomMemberDetails }
</div>
<GeminiScrollbarWrapper autoshow={true}>
<div className="mx_MemberInfo_container">
{ this._renderUserOptions() }
{ this._renderUserOptions() }
{ adminTools }
{ adminTools }
{ startChat }
{ startChat }
{ this._renderDevices() }
{ this._renderDevices() }
{ spinner }
</GeminiScrollbarWrapper>
{ spinner }
</div>
</GeminiScrollbarWrapper>
</div>
);
},