OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Display a padlock icon beside encrypted rooms in the room list 

https://github.com/vector-im/riot-web/issues/11226
pull/21833/head
Zoe 2020-01-09 15:17:33 +00:00
parent 1d9d706b9c
commit 5d22561815
3 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
res/css/views/rooms/_RoomTile.scss
View File

@ -200,3 +200,31 @@ limitations under the License.
.mx_GroupInviteTile .mx_RoomTile_name { .mx_GroupInviteTile .mx_RoomTile_name {
flex: 1; flex: 1;
} }
.mx_RoomTile.mx_RoomTile.mx_RoomTile_isEncrypted .mx_RoomTile_name {
// Scoot the padding in a bit from 6px to make it look better
padding-left: 3px;
}
.mx_RoomTile.mx_RoomTile_isEncrypted .mx_RoomTile_E2EIcon {
width: 12px;
height: 12px;
position: relative;
display: block !important;
// Align the padlock with unencrypted room names
margin-left: 6px;
&::before {
background-color: $roomtile-name-color;
mask-image: url('$(res)/img/lock.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}

4
res/img/lock.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 13C3 11.8954 3.89543 11 5 11H19C20.1046 11 21 11.8954 21 13V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V13Z" fill="#2E2F32" stroke="#2E2F32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 11V7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7V11" stroke="#2E2F32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 532 B

2
src/components/views/rooms/RoomTile.js
View File

@ -303,6 +303,7 @@ module.exports = createReactClass({
'mx_RoomTile_noBadges': !badges, 'mx_RoomTile_noBadges': !badges,
'mx_RoomTile_transparent': this.props.transparent, 'mx_RoomTile_transparent': this.props.transparent,
'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed, 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
'mx_RoomTile_isEncrypted': MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId),
}); });
const avatarClasses = classNames({ const avatarClasses = classNames({
@ -428,6 +429,7 @@ module.exports = createReactClass({
{ dmIndicator } { dmIndicator }
</div> </div>
</div> </div>
<div className="mx_RoomTile_E2EIcon" />
<div className="mx_RoomTile_nameContainer"> <div className="mx_RoomTile_nameContainer">
<div className="mx_RoomTile_labelContainer"> <div className="mx_RoomTile_labelContainer">
{ label } { label }