one big commit, sorry

changing looks of input & buttons
changing background color of right panels
moving invite button around
change margins and paddings in memberlist
This commit is contained in:
Bruno Windels 2018-10-24 13:50:58 +02:00
parent 8a5c46ead0
commit 8c62dddb32
14 changed files with 141 additions and 178 deletions

View file

@ -53,6 +53,10 @@ class HeaderButton extends React.Component {
mx_RightPanel_headerButton: true,
mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
})
// will probably use this later on for notifications, etc ...
/* <div className="mx_RightPanel_headerButton_badge">
{ this.props.badge ? this.props.badge : <span>&nbsp;</span> }
</div> */
return <AccessibleButton
aria-label={this.props.title}
@ -60,10 +64,7 @@ class HeaderButton extends React.Component {
title={this.props.title}
className={classes}
onClick={this.onClick} >
<div className="mx_RightPanel_headerButton_badge">
{ this.props.badge ? this.props.badge : <span>&nbsp;</span> }
</div>
<TintableSvg src={this.props.iconSrc} width="25" height="25" />
<TintableSvg src={this.props.iconSrc} width="20" height="20" />
</AccessibleButton>;
}
}
@ -161,19 +162,6 @@ module.exports = React.createClass({
});
},
onInviteButtonClick: function() {
if (this.context.matrixClient.isGuest()) {
dis.dispatch({action: 'require_registration'});
return;
}
// call AddressPickerDialog
dis.dispatch({
action: 'view_invite',
roomId: this.props.roomId,
});
},
onInviteToGroupButtonClick: function() {
showGroupInviteDialog(this.props.groupId).then(() => {
this.setState({
@ -279,29 +267,6 @@ module.exports = React.createClass({
let membersBadge;
let membersTitle = _t('Members');
if ((this.state.phase === this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
&& this.props.roomId
) {
const cli = this.context.matrixClient;
const room = cli.getRoom(this.props.roomId);
let isUserInRoom;
if (room) {
const numMembers = room.getJoinedMemberCount();
membersTitle = _t('%(count)s Members', { count: numMembers });
membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
}
if (isUserInRoom) {
inviteGroup =
<AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
<div className="mx_RightPanel_icon" >
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
</div>
<div className="mx_RightPanel_message">{ _t('Invite to this room') }</div>
</AccessibleButton>;
}
}
const isPhaseGroup = [
this.Phase.GroupMemberInfo,
@ -418,9 +383,6 @@ module.exports = React.createClass({
</div>
</div>
{ panel }
<div className="mx_RightPanel_footer">
{ inviteGroup }
</div>
</aside>
);
},