add plus button for rooms and people

res/css/structures/_RoomSubList.scss

@@ -32,17 +32,17 @@ limitations under the License.
 }
 
 .mx_RoomSubList_labelContainer {
-    height: 31px; /* mx_RoomSubList_label height including border */
+    display: flex;
-    position: relative;
+    flex-direction: row;
 }
 
 .mx_RoomSubList_label {
+    flex: 1;
     position: relative;
     text-transform: uppercase;
     color: $roomsublist-label-fg-color;
     font-weight: 700;
-    font-size: 12px;
+    font-size: 14px;
-    height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
     margin-left: 16px;
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
@@ -90,6 +90,20 @@ limitations under the License.
     filter: brightness($focus-brightness);
 }
 
+.mx_RoomSubList_addRoom {
+    background-color: $roomheader-addroom-color;
+    color: $roomsublist-background;
+    margin: 5px 10px;
+    border-radius: 9px;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 18px;
+    font-weight: bold;
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+
 .mx_RoomSubList_badgeHighlight {
     background-color: $warning-color;
 }

res/themes/dharma/css/_dharma.scss

@@ -109,6 +109,7 @@ $rte-group-pill-color: #aaa;
 
 $topleftmenu-color: #212121;
 $roomheader-color: #45474a;
+$roomheader-addroom-color: #929eb4;
 $roomtopic-color: #9fa9ba;
 
 // ********************

res/themes/light/css/_base.scss

@@ -108,6 +108,7 @@ $rte-group-pill-color: #aaa;
 
 $topleftmenu-color: $primary-fg-color;
 $roomheader-color: $primary-fg-color;
+$roomheader-addroom-color: $primary-bg-color;
 $roomtopic-color: $settings-grey-fg-color;
 
 // ********************

src/components/structures/RoomSubList.js

@@ -266,6 +266,7 @@ const RoomSubList = React.createClass({
     },
 
     _getHeaderJsx: function() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const subListNotifications = this.roomNotificationCount();
         const subListNotifCount = subListNotifications[0];
         const subListNotifHighlight = subListNotifications[1];
@@ -319,9 +320,13 @@ const RoomSubList = React.createClass({
             }
         }
 
+        let addRoomButton;
+        if (this.props.onAddRoom) {
+            addRoomButton = (<AccessibleButton onClick={ this.props.onAddRoom } className="mx_RoomSubList_addRoom">+</AccessibleButton>);
+        }
+
         const tabindex = this.props.searchFilter === "" ? "0" : "-1";
 
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
                 <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
@@ -330,6 +335,7 @@ const RoomSubList = React.createClass({
                     { badge }
                     { incomingCall }
                 </AccessibleButton>
+                { addRoomButton }
             </div>
         );
         // <div className="mx_RoomSubList_roomCount">{ roomCount }</div>

src/components/views/rooms/RoomList.js

@@ -573,6 +573,7 @@ module.exports = React.createClass({
                 headerItems: this._getHeaderItems('im.vector.fake.direct'),
                 order: "recent",
                 alwaysShowHeader: true,
+                onAddRoom: () => {dis.dispatch({action: 'view_create_chat'})},
             },
             {
                 list: self.state.lists['im.vector.fake.recent'],
@@ -580,6 +581,7 @@ module.exports = React.createClass({
                 emptyContent: this._getEmptyContent('im.vector.fake.recent'),
                 headerItems: this._getHeaderItems('im.vector.fake.recent'),
                 order: "recent",
+                onAddRoom: () => {dis.dispatch({action: 'view_create_room'})},
             },
         ];
         const tagSubLists = Object.keys(self.state.lists)