Merge pull request #4033 from TestardR/feature/padLockInviteOnly

Collapsed room list has unaligned room tiles #4030 version 2

res/css/views/rooms/_InviteOnlyIcon.scss

@@ -14,27 +14,45 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_InviteOnlyIcon {
+@define-mixin mx_InviteOnlyIcon {
     width: 12px;
     height: 12px;
     position: relative;
     display: block !important;
-    // Align the padlock with unencrypted room names
+}
+
+@define-mixin mx_InviteOnlyIcon_padlock {
+    background-color: $roomtile-name-color;
+    mask-image: url("$(res)/img/feather-customised/lock-solid.svg");
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.mx_InviteOnlyIcon_large {
+    @mixin mx_InviteOnlyIcon;
     margin: 0 4px;
 
     &::before {
-        background-color: $roomtile-name-color;
+        @mixin mx_InviteOnlyIcon_padlock;
-        mask-image: url('$(res)/img/feather-customised/lock-solid.svg');
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
         width: 12px;
         height: 12px;
     }
 }
+
+.mx_InviteOnlyIcon_small {
+    @mixin mx_InviteOnlyIcon;
+    left: -2px;
+
+    &::before {
+        @mixin mx_InviteOnlyIcon_padlock;
+        width: 10px;
+        height: 10px;
+    }
+}

src/components/views/rooms/InviteOnlyIcon.js

@@ -37,6 +37,8 @@ export default class InviteOnlyIcon extends React.Component {
     };
 
     render() {
+        const classes = this.props.collapsedPanel ? "mx_InviteOnlyIcon_small": "mx_InviteOnlyIcon_large";
+
         if (!SettingsStore.isFeatureEnabled("feature_invite_only_padlocks")) {
             return null;
         }
@@ -46,7 +48,7 @@ export default class InviteOnlyIcon extends React.Component {
         if (this.state.hover) {
             tooltip = <Tooltip className="mx_InviteOnlyIcon_tooltip" label={_t("Invite only")} dir="auto" />;
         }
-        return (<div className="mx_InviteOnlyIcon"
+        return (<div className={classes}
           onMouseEnter={this.onHoverStart}
           onMouseLeave={this.onHoverEnd}
         >

src/components/views/rooms/RoomTile.js

@@ -528,7 +528,7 @@ export default createReactClass({
         let privateIcon = null;
         if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
             if (this.state.joinRule == "invite" && !dmUserId) {
-                privateIcon = <InviteOnlyIcon />;
+                privateIcon = <InviteOnlyIcon collapsedPanel={this.props.collapsed} />;
             }
         }