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

show avatars for members & rooms in group like we do in room right panel

Browse source 
also apply padding with hacky :not selector to exclude full-width avatar
This commit is contained in:
Bruno Windels 2019-01-30 16:59:28 +01:00
parent c9900deebe
commit 405cc5cc24
3 changed files with 23 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
res/css/structures/_GroupView.scss
View file

@ -349,3 +349,8 @@ limitations under the License.
.mx_GroupView_changeDelayWarning {
padding: 40px 20px;
}
.mx_GroupView .mx_MemberInfo .gm-scroll-view > :not(.mx_MemberInfo_avatar) {
padding-left: 16px;
padding-right: 16px;
}

23
src/components/views/groups/GroupMemberInfo.js
View file

@ -166,17 +166,15 @@ module.exports = React.createClass({
}
}
const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
this.props.groupMember.avatarUrl,
36, 36, 'crop',
);
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const avatar = (
<BaseAvatar name={this.props.groupMember.userId} width={36} height={36}
url={avatarUrl}
/>
);
const avatarUrl = this.props.groupMember.avatarUrl;
let avatarElement;
if (avatarUrl) {
const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
avatarElement = <div className="mx_MemberInfo_avatar">
<img src={httpUrl} />
</div>
}
const groupMemberName = (
this.props.groupMember.displayname || this.props.groupMember.userId
@ -190,10 +188,7 @@ module.exports = React.createClass({
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
<img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
</AccessibleButton>
<div className="mx_MemberInfo_avatar">
{ avatar }
</div>
{ avatarElement }
<EmojiText element="h2">{ groupMemberName }</EmojiText>
<div className="mx_MemberInfo_profile">

17
src/components/views/groups/GroupRoomInfo.js
View file

@ -204,22 +204,23 @@ module.exports = React.createClass({
</div>;
}
const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
this.state.groupRoom.avatarUrl,
36, 36, 'crop',
);
const avatarUrl = this.state.groupRoom.avatarUrl;
let avatarElement;
if (avatarUrl) {
const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
avatarElement = <div className="mx_MemberInfo_avatar">
<img src={httpUrl} />
</div>
}
const groupRoomName = this.state.groupRoom.displayname;
const avatar = <BaseAvatar name={groupRoomName} width={36} height={36} url={avatarUrl} />;
return (
<div className="mx_MemberInfo">
<GeminiScrollbarWrapper autoshow={true}>
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
<img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
</AccessibleButton>
<div className="mx_MemberInfo_avatar">
{ avatar }
</div>
{ avatarElement }
<EmojiText element="h2">{ groupRoomName }</EmojiText>