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

Change out caption for email invite suggestions and stack vertically

Browse source
This commit is contained in:
Michael Telatynski 2020-11-03 14:56:06 +00:00
parent 2064cf80f5
commit 3b7b66c856
2 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
res/css/views/dialogs/_InviteDialog.scss
View file

@ -37,7 +37,7 @@ limitations under the License.
} }
// Mostly copied from AddressPickerDialog; overrides bunch of our default text input styles // Mostly copied from AddressPickerDialog; overrides bunch of our default text input styles
input, input:focus { > input[type="text"] {
margin: 6px 0 !important; margin: 6px 0 !important;
height: 24px; height: 24px;
line-height: $font-24px; line-height: $font-24px;
@ -140,6 +140,10 @@ limitations under the License.
} }
} }
.mx_InviteDialog_roomTile_nameStack {
display: inline-block;
}
.mx_InviteDialog_roomTile_name { .mx_InviteDialog_roomTile_name {
font-weight: 600; font-weight: 600;
font-size: $font-14px; font-size: $font-14px;

10
src/components/views/dialogs/InviteDialog.js
View file

@ -280,11 +280,17 @@ class DMRoomTile extends React.PureComponent {
</span> </span>
); );
const caption = this.props.member.isEmail
? _t("Invite by email")
: this._highlightName(this.props.member.userId);
return ( return (
<div className='mx_InviteDialog_roomTile' onClick={this._onClick}> <div className='mx_InviteDialog_roomTile' onClick={this._onClick}>
{stackedAvatar} {stackedAvatar}
<span className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</span> <span className="mx_InviteDialog_roomTile_nameStack">
<span className='mx_InviteDialog_roomTile_userId'>{this._highlightName(this.props.member.userId)}</span> <div className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</div>
<div className='mx_InviteDialog_roomTile_userId'>{caption}</div>
</span>
{timestamp} {timestamp}
</div> </div>
); );