From c0becc7664ad75ccb94cbe0a589d49448c7dfe11 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 5 Nov 2018 14:23:28 +0100
Subject: [PATCH] fix roomtile badge

only put it in the dom if it has
anything to show as it has a border now in collapsed mode
---
 res/css/views/rooms/_RoomTile.scss     | 14 +++++++-------
 src/components/views/rooms/RoomTile.js |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 4bedc4cf4f..d7726d818d 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -71,6 +71,8 @@ limitations under the License.
     .mx_RoomTile {
         margin: 2px;
         padding: 2px 0 2px 12px;
+        display: block; // not flex
+        position: relative;
     }
 
     .mx_RoomTile_name {
@@ -80,23 +82,21 @@ limitations under the License.
     .mx_RoomTile_badge {
         display: block;
         position: absolute;
-        height: 15px;
-        right: 8px;
-        top: 2px;
-        min-width: 12px;
+        right: 6px;
+        top: 0px;
         border-radius: 16px;
-        padding: 0px 4px 0px 4px;
         z-index: 3;
+        border: 0.18em solid $secondary-accent-color;
     }
 }
 
 .mx_RoomTile_badge {
     flex: 0 1 content;
-    border-radius: 8px;
+    border-radius: 0.8em;
+    padding: 0 0.4em;
     color: $accent-fg-color;
     font-weight: 600;
     font-size: 12px;
-    padding: 0 5px;
 }
 
 
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 1afff783a1..56b34c4385 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -283,11 +283,11 @@ module.exports = React.createClass({
         } else if (badges) {
             const limitedCount = FormattingUtils.formatCount(notificationCount);
             badgeContent = notificationCount ? limitedCount : '!';
-        } else {
-            badgeContent = '\u200B';
         }
 
-        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
+        const badge = badgeContent ?
+            (<div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>) :
+            undefined;
 
         const EmojiText = sdk.getComponent('elements.EmojiText');
         let label;