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

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
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 { .mx_GroupView_changeDelayWarning {
padding: 40px 20px; 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 avatarUrl = this.props.groupMember.avatarUrl;
const avatar = ( let avatarElement;
<BaseAvatar name={this.props.groupMember.userId} width={36} height={36} if (avatarUrl) {
url={avatarUrl} const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
/> avatarElement = <div className="mx_MemberInfo_avatar">
); <img src={httpUrl} />
</div>
}
const groupMemberName = ( const groupMemberName = (
this.props.groupMember.displayname || this.props.groupMember.userId this.props.groupMember.displayname || this.props.groupMember.userId
@ -190,10 +188,7 @@ module.exports = React.createClass({
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}> <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
<img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" /> <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
</AccessibleButton> </AccessibleButton>
<div className="mx_MemberInfo_avatar"> { avatarElement }
{ avatar }
</div>
<EmojiText element="h2">{ groupMemberName }</EmojiText> <EmojiText element="h2">{ groupMemberName }</EmojiText>
<div className="mx_MemberInfo_profile"> <div className="mx_MemberInfo_profile">

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

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