Add buttons to room sub list headers

src/components/structures/RoomSubList.js

@@ -1,4 +1,5 @@
 /*
+Copyright 2017 Vector Creations Ltd
 Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -83,6 +84,7 @@ var RoomSubList = React.createClass({
         onShowMoreRooms: React.PropTypes.func,
         searchFilter: React.PropTypes.string,
         emptyContent: React.PropTypes.node, // content shown if the list is empty
+        headerItems: React.PropTypes.node, // content shown in the sublist header
     },
 
     getInitialState: function() {
@@ -522,6 +524,7 @@ var RoomSubList = React.createClass({
                         roomNotificationCount={ this.roomNotificationCount() }
                         onClick={ this.onClick }
                         onHeaderClick={ this.props.onHeaderClick }
+                        headerItems={this.props.headerItems}
                     />
                     { subList }
                 </div>
@@ -543,6 +546,7 @@ var RoomSubList = React.createClass({
                             roomNotificationCount={ this.roomNotificationCount() }
                             onClick={ this.onClick }
                             onHeaderClick={ this.props.onHeaderClick }
+                            headerItems={this.props.headerItems}
                         />
                      : undefined }
                     { (this.props.showSpinner && !this.state.hidden) ? <Loader /> : undefined }

src/components/structures/RoomSubListHeader.js

@@ -14,16 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
+import React from 'react';
-
+import classNames from 'classnames';
-var React = require('react');
+import sdk from 'matrix-react-sdk';
-var ReactDOM = require('react-dom');
+import FormattingUtils from 'matrix-react-sdk/lib/utils/FormattingUtils';
-var classNames = require('classnames');
+import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
-var sdk = require('matrix-react-sdk')
-var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
-var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
-var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
-var ConstantTimeDispatcher = require('matrix-react-sdk/lib/ConstantTimeDispatcher');
 
 module.exports = React.createClass({
     displayName: 'RoomSubListHeader',
@@ -42,6 +37,7 @@ module.exports = React.createClass({
         hidden: React.PropTypes.bool,
         onClick: React.PropTypes.func,
         onHeaderClick: React.PropTypes.func,
+        headerItems: React.PropTypes.node, // content shown in the sublist header
     },
 
     getDefaultProps: function() {
@@ -63,35 +59,34 @@ module.exports = React.createClass({
     // },
 
     render: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        var subListNotifications = this.props.roomNotificationCount;
+        const subListNotifications = this.props.roomNotificationCount;
-        var subListNotifCount = subListNotifications[0];
+        const subListNotifCount = subListNotifications[0];
-        var subListNotifHighlight = subListNotifications[1];
+        const subListNotifHighlight = subListNotifications[1];
 
-        var chevronClasses = classNames({
+        const chevronClasses = classNames({
             'mx_RoomSubList_chevron': true,
             'mx_RoomSubList_chevronRight': this.props.hidden,
             'mx_RoomSubList_chevronDown': !this.props.hidden,
         });
 
-        var badgeClasses = classNames({
+        const badgeClasses = classNames({
             'mx_RoomSubList_badge': true,
             'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
         });
 
-        var badge;
+        let badge;
         if (subListNotifCount > 0) {
             badge = <div className={badgeClasses}>{ FormattingUtils.formatCount(subListNotifCount) }</div>;
-        }
+        } else if (subListNotifHighlight) {
-        else if (subListNotifHighlight) {
             badge = <div className={badgeClasses}>!</div>;   
         }
 
         // When collapsed, allow a long hover on the header to show user
         // the full tag name and room count
-        var title;
+        let title;
-        var roomCount = this.props.roomCount;
+        const roomCount = this.props.roomCount;
         if (this.props.collapsed) {
             title = this.props.label;
             if (roomCount !== '') {
@@ -99,9 +94,9 @@ module.exports = React.createClass({
             }
         }
 
-        var incomingCall;
+        let incomingCall;
         if (this.props.isIncomingCallRoom) {
-            var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+            const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
             incomingCall = <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={ this.props.incomingCall }/>;
         }
 
@@ -109,6 +104,7 @@ module.exports = React.createClass({
             <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
                 <AccessibleButton onClick={ this.props.onClick } className="mx_RoomSubList_label" tabIndex="0">
                     { this.props.collapsed ? '' : this.props.label }
+                    {this.props.headerItems}
                     <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
                     <div className={chevronClasses}></div>
                     { badge }

src/skins/vector/css/_components.scss

@@ -27,6 +27,7 @@
 @import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
 @import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
 @import "./matrix-react-sdk/views/elements/_RichText.scss";
+@import "./matrix-react-sdk/views/elements/_RoleButton.scss";
 @import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss";
 @import "./matrix-react-sdk/views/login/_ServerConfig.scss";
 @import "./matrix-react-sdk/views/messages/_MEmoteBody.scss";

src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss

@@ -0,0 +1,26 @@
+/*
+Copyright 2107 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoleButton {
+    margin-left: 4px;
+    margin-right: 4px;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.mx_RoleButton object {
+    pointer-events: none;
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss

@@ -39,10 +39,6 @@ limitations under the License.
     z-index: 6;
 }
 
-.mx_RoomList_greyedSubListLabel {
-    color: #a2a2a2;
-}
-
 .mx_RoomList_emptySubListTip {
     font-size: 13px;
     margin-left: 18px;
@@ -50,12 +46,13 @@ limitations under the License.
     margin-top: 8px;
     margin-bottom: 7px;
     padding: 5px;
-    border: 1px solid $accent-color;
+    border: 1px dashed $accent-color;
     color: $primary-fg-color;
     background-color: $droptarget-bg-color;
     border-radius: 4px;
 }
 
-.mx_RoomList_butonPreview {
+.mx_RoomList_headerButtons {
-    float: right;
+    position: absolute;
+    right: 60px;
 }