From 4d5e3bc22be8b9ce4a0a13c2d508ff77ce67066a Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 22 Aug 2016 17:25:43 +0100
Subject: [PATCH] Initial tag section header badge

---
 src/components/structures/RoomSubList.js      |  1 +
 .../css/vector-web/structures/RoomSubList.css | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index a96e8d2857..e4ca6edbfc 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -339,6 +339,7 @@ var RoomSubList = React.createClass({
                 { this.props.collapsed ? '' : this.props.label }
                 <div className="mx_RoomSubList_roomCount">{this.props.list.length > 0 ? this.props.list.length : ''}</div>
                 <div className={chevronClasses}></div>
+                <div className="mx_RoomSubList_badge">0</div>
             </div>
         );
     },
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index b1e89cb887..974cf3e716 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -46,6 +46,32 @@ limitations under the License.
     padding-left: 5px;
 }
 
+.collapsed .mx_RoomSubList_roomCount {
+    display: none;
+}
+
+.mx_RoomSubList_badge {
+    display: inline-block;
+    min-width: 15px;
+    height: 15px;
+    position: absolute;
+    right: 8px; /*gutter */
+    top: 7px;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+    background-color: #76cfa6; /* Temporary */
+}
+
+.collapsed .mx_RoomSubList_badge {
+    display: none;
+}
+
 .mx_RoomSubList_chevron {
     pointer-events: none;
     position: absolute;