From f023bcfd63e4f00a493397729950d3014f121b7b Mon Sep 17 00:00:00 2001
From: rtestard <rtestard@opensense.fr>
Date: Tue, 4 Feb 2020 15:05:26 +0100
Subject: [PATCH] I have modified padlocks styling when the left panel is
 collapsed

---
 res/css/views/rooms/_InviteOnlyIcon.scss     | 44 ++++++++++++++------
 src/components/views/rooms/InviteOnlyIcon.js |  4 +-
 src/components/views/rooms/RoomTile.js       |  2 +-
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/res/css/views/rooms/_InviteOnlyIcon.scss b/res/css/views/rooms/_InviteOnlyIcon.scss
index 6943d1797b..21ab431973 100644
--- a/res/css/views/rooms/_InviteOnlyIcon.scss
+++ b/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;
-        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;
+        @mixin mx_InviteOnlyIcon_padlock;
         width: 12px;
         height: 12px;
     }
 }
+
+.mx_InviteOnlyIcon_small {
+    @mixin mx_InviteOnlyIcon;
+    left: -2px;
+
+    &::before {
+        @mixin mx_InviteOnlyIcon_padlock;
+        width: 10px;
+        height: 10px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/views/rooms/InviteOnlyIcon.js b/src/components/views/rooms/InviteOnlyIcon.js
index 07156b2973..7ca63c8898 100644
--- a/src/components/views/rooms/InviteOnlyIcon.js
+++ b/src/components/views/rooms/InviteOnlyIcon.js
@@ -37,6 +37,8 @@ export default class InviteOnlyIcon extends React.Component {
     };
 
     render() {
+        const style = 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={style}
           onMouseEnter={this.onHoverStart}
           onMouseLeave={this.onHoverEnd}
         >
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 41d43476ea..bc781788c0 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -526,7 +526,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} />;
             }
         }