Merge pull request #848 from matrix-org/luke/room-directory-improve

Improve RoomDirectory Look & Feel

src/components/structures/LoggedInView.js

@@ -221,10 +221,8 @@ export default React.createClass({
             case PageTypes.RoomDirectory:
                 page_element = <RoomDirectory
                     ref="roomDirectory"
-                    collapsedRhs={this.props.collapse_rhs}
                     config={this.props.config.roomDirectory}
                 />;
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>;
                 break;
 
             case PageTypes.HomePage:

src/components/views/rooms/SimpleRoomHeader.js

@@ -19,6 +19,7 @@ limitations under the License.
 import React from 'react';
 import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
+import sdk from '../../../index';
 
 // cancel button which is shared between room header and simple room header
 export function CancelButton(props) {
@@ -45,6 +46,9 @@ export default React.createClass({
 
         // is the RightPanel collapsed?
         collapsedRhs: React.PropTypes.bool,
+
+        // `src` to a TintableSvg. Optional.
+        icon: React.PropTypes.string,
     },
 
     onShowRhsClick: function(ev) {
@@ -53,9 +57,17 @@ export default React.createClass({
 
     render: function() {
         let cancelButton;
+        let icon;
         if (this.props.onCancelClick) {
             cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
         }
+        if (this.props.icon) {
+            const TintableSvg = sdk.getComponent('elements.TintableSvg');
+            icon = <TintableSvg
+                className="mx_RoomHeader_icon" src={this.props.icon}
+                width="25" height="25"
+            />;
+        }
 
         let showRhsButton;
         /* // don't bother cluttering things up with this for now.
@@ -73,6 +85,7 @@ export default React.createClass({
             <div className="mx_RoomHeader" >
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_simpleHeader">
+                        { icon }
                         { this.props.title }
                         { showRhsButton }
                         { cancelButton }