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

Merge pull request #2248 from matrix-org/bwindels/memberpanel

Browse source 
Redesign: basic makeover of member info panel
This commit is contained in:
David Baker 2018-10-25 14:52:54 +01:00 • committed by GitHub
commit adee0fdcef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 79 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/views/rooms/EntityTile.js
View file

@ -131,7 +131,6 @@ const EntityTile = React.createClass({
}
nameEl = (
<div className="mx_EntityTile_details">
<img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12" />
<EmojiText element="div" className={nameClasses} dir="auto">
{ name }
</EmojiText>

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, 800, 800);
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} className="mx_MemberInfo_scrollContainer">
<div className="mx_MemberInfo_container">
{ this._renderUserOptions() }
{ this._renderUserOptions() }
{ adminTools }
{ adminTools }
{ startChat }
{ startChat }
{ this._renderDevices() }
{ this._renderDevices() }
{ spinner }
</GeminiScrollbarWrapper>
{ spinner }
</div>
</GeminiScrollbarWrapper>
</div>
);
},