colored inviter name and layout

This commit is contained in:
Bruno Windels 2019-04-17 10:22:35 +02:00
parent eeaa7143ac
commit 8a371080d7
2 changed files with 19 additions and 11 deletions

View file

@ -100,15 +100,22 @@ limitations under the License.
flex-direction: column;
&>* {
margin: 10px;
margin: 5px 0 20px 0;
}
}
.mx_RoomPreviewBar_actions {
flex-direction: column-reverse;
.mx_AccessibleButton {
padding: 7px 50px;//extra wide
}
&>* {
margin-top: 12px;
}
}
}
.mx_RoomPreviewBar_inviter {
font-weight: 600;
}

View file

@ -24,6 +24,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
import dis from '../../../dispatcher';
import classNames from 'classnames';
import { _t } from '../../../languageHandler';
import {getUserNameColorClass} from '../../../utils/FormattingUtils';
const MessageCase = Object.freeze({
NotLoggedIn: "NotLoggedIn",
@ -316,21 +317,21 @@ module.exports = React.createClass({
case MessageCase.Invite: {
const inviteMember = this._getInviteMember();
let avatar;
let memberName;
let inviterElement;
if (inviteMember) {
const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
avatar = (<MemberAvatar member={inviteMember} />);
memberName = inviteMember.name;
avatar = (<MemberAvatar member={inviteMember} viewUserOnClick={true} />);
const colorClass = getUserNameColorClass(inviteMember.userId);
inviterElement = (<span className={`mx_RoomPreviewBar_inviter ${colorClass}`}>{inviteMember.name}</span>);
} else {
memberName = this.props.inviterName;
inviterElement = this.props.inviterName;
}
if (this.props.canPreview) {
title = <span>{avatar}{_t("<userName/> invited you to this room", {}, {userName: name => <strong>{memberName}</strong>})}</span>;
} else {
title = _t("Do you want to join this room?");
subTitle = <span>{avatar}{_t("<userName/> invited you", {}, {userName: name => <strong>{memberName}</strong>})}</span>;
}
title = _t("Do you want to join this room?");
subTitle = [
avatar,
_t("<userName/> invited you", {}, {userName: () => inviterElement}),
];
primaryActionLabel = _t("Accept");
primaryActionHandler = this.props.onJoinClick;