Merge branch 'develop' into matthew/notif-panel

src/components/structures/BottomLeftMenu.js

@@ -30,6 +30,7 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return({
+            directoryHover : false,
             roomsHover : false,
             peopleHover : false,
             settingsHover : false,
@@ -37,8 +38,20 @@ module.exports = React.createClass({
     },
 
     // Room events
+    onDirectoryClick: function() {
+        dis.dispatch({ action: 'view_room_directory' });
+    },
+
+    onDirectoryMouseEnter: function() {
+        this.setState({ directoryHover: true });
+    },
+
+    onDirectoryMouseLeave: function() {
+        this.setState({ directoryHover: false });
+    },
+
     onRoomsClick: function() {
-        dis.dispatch({action: 'view_create_room'});
+        dis.dispatch({ action: 'view_create_room' });
     },
 
     onRoomsMouseEnter: function() {
@@ -51,7 +64,7 @@ module.exports = React.createClass({
 
     // People events
     onPeopleClick: function() {
-        dis.dispatch({action: 'view_create_chat'});
+        dis.dispatch({ action: 'view_create_chat' });
     },
 
     onPeopleMouseEnter: function() {
@@ -64,7 +77,7 @@ module.exports = React.createClass({
 
     // Settings events
     onSettingsClick: function() {
-        dis.dispatch({action: 'view_user_settings'});
+        dis.dispatch({ action: 'view_user_settings' });
     },
 
     onSettingsMouseEnter: function() {
@@ -88,9 +101,13 @@ module.exports = React.createClass({
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
+                    <div className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
+                        <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
+                        { this.getLabel("Room directory", this.state.directoryHover) }
+                    </div>
                     <div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
                         <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
-                        { this.getLabel("Rooms", this.state.roomsHover) }
+                        { this.getLabel("Create new room", this.state.roomsHover) }
                     </div>
                     <div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
                         <TintableSvg src="img/icons-people.svg" width="25" height="25" />

src/components/structures/RoomSubList.js

@@ -368,12 +368,12 @@ var RoomSubList = React.createClass({
 
     makeRoomTiles: function() {
         var self = this;
-        var RoomTile = sdk.getComponent("rooms.RoomTile");
+        var DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
         return this.state.sortedList.map(function(room) {
             var selected = room.roomId == self.props.selectedRoom;
             // XXX: is it evil to pass in self as a prop to RoomTile?
             return (
-                <RoomTile
+                <DNDRoomTile
                     room={ room }
                     roomSubList={ self }
                     key={ room.roomId }

src/components/views/rooms/BottomLeftMenuTile.js

@@ -1,57 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket 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.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var sdk = require('matrix-react-sdk')
-
-module.exports = React.createClass({
-    displayName: 'BottomLeftMenuTile',
-
-    getInitialState: function() {
-        return( { hover : false });
-    },
-
-    onMouseEnter: function() {
-        this.setState( { hover : true });
-    },
-
-    onMouseLeave: function() {
-        this.setState( { hover : false });
-    },
-
-    render: function() {
-        var label;
-        if (!this.props.collapsed) {
-            label = <div className="mx_RoomTile_name">{ this.props.label }</div>;
-        }
-        else if (this.state.hover) {
-            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            label = <RoomTooltip bottom={ true } label={ this.props.label }/>;
-        }
-
-        return (
-            <div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
-                <div className="mx_RoomTile_avatar">
-                    <img src={ this.props.img } width="26" height="26"/>
-                </div>
-                { label }
-            </div>
-        );
-    }
-});

src/components/views/rooms/DNDRoomTile.js

@@ -25,6 +25,13 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var sdk = require('matrix-react-sdk');
 var RoomTile = require('matrix-react-sdk/lib/components/views/rooms/RoomTile');
 
+/**
+ * Defines a new Component, DNDRoomTile that wraps RoomTile, making it draggable.
+ * Requires extra props:
+ *   roomSubList: React.PropTypes.object.isRequired,
+ *   refreshSubList: React.PropTypes.func.isRequired,
+ */
+
 /**
  * Specifies the drag source contract.
  * Only `beginDrag` function is required.
@@ -202,4 +209,3 @@ DragSource('RoomTile', roomTileSource, function(connect, monitor) {
     };
 })(RoomTile));
 
-module.exports.replaces = 'RoomTile';