Merge pull request #2228 from matrix-org/bwindels/addroomfromsublistheader

Redesign: Add (+) button in room section header to add rooms

res/css/structures/_RoomSubList.scss

@@ -32,17 +32,17 @@ limitations under the License.
 }
 
 .mx_RoomSubList_labelContainer {
-    height: 31px; /* mx_RoomSubList_label height including border */
-    position: relative;
+    display: flex;
+    flex-direction: row;
 }
 
 .mx_RoomSubList_label {
+    flex: 1;
     position: relative;
     text-transform: uppercase;
     color: $roomsublist-label-fg-color;
     font-weight: 700;
-    font-size: 12px;
-    height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
+    font-size: 14px;
     margin-left: 16px;
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
@@ -59,15 +59,6 @@ limitations under the License.
     /* pointer-events: none; */
 }
 
-.mx_RoomSubList_roomCount {
-    display: inline-block;
-    font-size: 12px;
-    font-weight: normal;
-    color: $accent-color;
-    padding-left: 5px;
-    text-transform: none;
-}
-
 .mx_RoomSubList_badge {
     display: inline-block;
     min-width: 15px;
@@ -90,6 +81,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;
 }
@@ -146,10 +151,6 @@ limitations under the License.
         width: 28px; /* collapsed LHS Panel width */
     }
 
-    .mx_RoomSubList_roomCount {
-        display: none;
-    }
-
     /* Hide the bottom of speech bubble */
     .mx_RoomSubList_badgeHighlight:after {
         display: none;

res/css/views/elements/_AccessibleButton.scss

@@ -16,7 +16,6 @@ limitations under the License.
 
 .mx_AccessibleButton:focus {
     outline: 0;
-    filter: brightness($focus-brightness);
 }
 
 .mx_AccessibleButton {

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,13 +266,11 @@ const RoomSubList = React.createClass({
     },
 
     _getHeaderJsx: function() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const subListNotifications = this.roomNotificationCount();
         const subListNotifCount = subListNotifications[0];
         const subListNotifHighlight = subListNotifications[1];
 
-        const totalTiles = this.props.list.length + (this.props.extraTiles || []).length;
-        const roomCount = totalTiles > 0 ? totalTiles : '';
-
         const chevronClasses = classNames({
             'mx_RoomSubList_chevron': true,
             'mx_RoomSubList_chevronRight': this.state.hidden,
@@ -299,9 +297,6 @@ const RoomSubList = React.createClass({
         let title;
         if (this.props.collapsed) {
             title = this.props.label;
-            if (roomCount !== '') {
-                title += " [" + roomCount + "]";
-            }
         }
 
         let incomingCall;
@@ -319,9 +314,17 @@ 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,9 +333,9 @@ const RoomSubList = React.createClass({
                     { badge }
                     { incomingCall }
                 </AccessibleButton>
+                { addRoomButton }
             </div>
         );
-        // <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
     },
 
     render: function() {

src/components/views/rooms/RoomList.js

@@ -526,8 +526,9 @@ module.exports = React.createClass({
                 props = Object.assign({}, defaultProps, props);
                 const isLast = i === subListsProps.length - 1;
                 const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
-                if (!len) {
-                    return components;  //dont render
+                // empty and no add button? dont render
+                if (!len && !props.onAddRoom) {
+                    return components;
                 }
                 const {key, label, ... otherProps} = props;
                 const chosenKey = key || label;
@@ -573,6 +574,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 +582,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)