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

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

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

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