diff --git a/res/css/views/dialogs/_DMInviteDialog.scss b/res/css/views/dialogs/_DMInviteDialog.scss index e581f9dc7a..e4ca0b5953 100644 --- a/res/css/views/dialogs/_DMInviteDialog.scss +++ b/res/css/views/dialogs/_DMInviteDialog.scss @@ -93,6 +93,43 @@ limitations under the License. vertical-align: middle; } + .mx_DMInviteDialog_roomTile_avatarStack { + display: inline-block; + position: relative; + width: 36px; + height: 36px; + + &>* { + position: absolute; + top: 0; + left: 0; + } + } + + .mx_DMInviteDialog_roomTile_selected { + width: 36px; + height: 36px; + border-radius: 36px; + background-color: $username-variant1-color; + display: inline-block; + position: relative; + + &::before { + content: ""; + width: 24px; + height: 24px; + grid-column: 1; + grid-row: 1; + mask-image: url('$(res)/img/feather-customised/check.svg'); + mask-size: 100%; + mask-repeat: no-repeat; + position: absolute; + top: 6px; // 50% + left: 6px; // 50% + background-color: #ffffff; // this is fine without a var because it's for both themes + } + } + .mx_DMInviteDialog_roomTile_name { font-weight: 600; font-size: 14px; diff --git a/src/components/views/dialogs/DMInviteDialog.js b/src/components/views/dialogs/DMInviteDialog.js index 6eb6d0c78b..3703082504 100644 --- a/src/components/views/dialogs/DMInviteDialog.js +++ b/src/components/views/dialogs/DMInviteDialog.js @@ -170,6 +170,7 @@ class DMRoomTile extends React.PureComponent { lastActiveTs: PropTypes.number, onToggle: PropTypes.func.isRequired, // takes 1 argument, the member being toggled highlightWord: PropTypes.string, + isSelected: PropTypes.bool, }; _onClick = (e) => { @@ -228,7 +229,7 @@ class DMRoomTile extends React.PureComponent { } const avatarSize = 36; - const avatar = this.props.member.isEmail + let avatar = this.props.member.isEmail ? @@ -241,9 +242,24 @@ class DMRoomTile extends React.PureComponent { width={avatarSize} height={avatarSize} />; + let checkmark = null; + if (this.props.isSelected) { + // To reduce flickering we put the 'selected' room tile above the real avatar + checkmark =
; + } + + // To reduce flickering we put the checkmark on top of the actual avatar (prevents + // the browser from reloading the image source when the avatar remounts). + let stackedAvatar = ( + + {avatar} + {checkmark} + + ); + return (