From 2b3606d44d84d633f4254287621c997d910c7944 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 May 2016 19:52:56 +0100
Subject: [PATCH] switch to lozenges, and improve overlap behaviour

---
 .../matrix-react-sdk/views/rooms/RoomTile.css | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index 17bc316e09..b4419590af 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -40,7 +40,7 @@ limitations under the License.
     vertical-align: middle;
     overflow: hidden;
     word-break: break-word;
-    padding-right: 19px;
+    padding-right: 15px;
     color: rgba(69, 69, 69, 0.8);
 }
 
@@ -70,12 +70,12 @@ limitations under the License.
     right: 16px;
     top: 50%;
     margin-top: -8px;
-    border-radius: 3px;
+    border-radius: 16px;
     color: #fff;
     font-weight: bold;
     font-size: 11px;
     text-align: center;
-    padding: 0px 2px 0px 2px;
+    padding: 0px 4px 0px 4px;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@@ -91,26 +91,22 @@ limitations under the License.
     font-weight: bold;
 }
 
+/* the inner highlight span has 4px of padding on it, so we shrink the _avatar by 4pm and grow the _name by 4pm to fit it in */
+.mx_RoomTile_selected .mx_RoomTile_name {
+    padding-right: 19px;
+}
+.mx_RoomTile_selected .mx_RoomTile_avatar {
+    padding-right: 7px;
+}
+
+/* leave room for the badge, if present.
+   N.B. this has to come after the above _selected width tweaks */
 .mx_RoomTile_unreadNotify .mx_RoomTile_name,
 .mx_RoomTile_highlight .mx_RoomTile_name {
     padding-right: 36px;
 }
 
-.mx_RoomTile_selected .mx_RoomTile_name {
-    padding-right: 23px;
-}
-
-/*
-.mx_RoomTile_highlight .mx_RoomTile_name {
-    color: #ff0064 ! important;
-}
-*/
-
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar {
-    padding-right: 7px;
-}
-
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name span {
+.mx_RoomTile_selected .mx_RoomTile_name span {
     display: inline-block;
     position: relative;
     width: 100%;
@@ -121,13 +117,11 @@ limitations under the License.
     background-color: rgba(118,207,166,0.2);
 }
 
-/*
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
-    background: url('img/selected.png');
-    background-repeat: no-repeat;
-    background-position: right center;
+/* stop the span from overlapping with the badge */
+.mx_RoomTile_unreadNotify.mx_RoomTile_selected .mx_RoomTile_name span,
+.mx_RoomTile_highlight.mx_RoomTile_selected .mx_RoomTile_name span {
+    padding-right: 22px;
 }
-*/
 
 .mx_RoomTile_arrow {
     position: absolute;