fix up the room directory a lot - with loading spinner, better layout, etc

skins/base/css/organisms/RoomDirectory.css

@@ -18,7 +18,30 @@ limitations under the License.
     width: 720px;
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 12px;
     color: #4a4a4a;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;    
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+}
+
+.mx_RoomDirectory_list {
+    flex: 1;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;    
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
 }
 
 .mx_RoomDirectory_input {
@@ -34,12 +57,13 @@ limitations under the License.
 
 .mx_RoomDirectory_tableWrapper {
     overflow-y: scroll;
-    height: 400px;
+    flex: 1 1 0;
 }
 
 .mx_RoomDirectory_table {
     width: 100%;
     text-align: left;
+    table-layout: fixed;
 }
 
 .mx_RoomDirectory_table th {
@@ -47,9 +71,15 @@ limitations under the License.
     font-size: 12px;
 }
 
+.mx_RoomDirectory_table tbody {
+    cursor: pointer;
+}
+
 .mx_RoomDirectory_table td {
     font-weight: 300;
     font-size: 16px;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
 }
 
 .mx_RoomDirectory_table .mx_RoomDirectory_name {

skins/base/views/organisms/RoomDirectory.js

@@ -25,6 +25,7 @@ var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
 var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
 var dis = require("../../../../src/dispatcher");
 
+var Loader = require("react-loader");
 
 module.exports = React.createClass({
     displayName: 'RoomDirectory',
@@ -33,6 +34,7 @@ module.exports = React.createClass({
         return {
             publicRooms: [],
             roomAlias: '',
+            loading: true,
         }
     },
 
@@ -40,6 +42,7 @@ module.exports = React.createClass({
         var self = this;
         MatrixClientPeg.get().publicRooms(function (err, data) {
             if (err) {
+                self.setState({ loading: false });                
                 console.error("Failed to get publicRooms: %s", JSON.stringify(err));
                 Modal.createDialog(ErrorDialog, {
                     title: "Failed to get public room list",
@@ -48,7 +51,8 @@ module.exports = React.createClass({
             }
             else {
                 self.setState({
-                    publicRooms: data.chunk
+                    publicRooms: data.chunk,
+                    loading: false,
                 });
                 self.forceUpdate();
             }
@@ -56,6 +60,8 @@ module.exports = React.createClass({
     },
 
     joinRoom: function(roomId) {        
+        var self = this;
+        self.setState({ loading: true });
         // XXX: check that JS SDK suppresses duplicate attempts to join the same room
         MatrixClientPeg.get().joinRoom(roomId).done(function() {
             dis.dispatch({
@@ -76,6 +82,7 @@ module.exports = React.createClass({
 
         var rooms = this.state.publicRooms.filter(function(a) {
             // FIXME: if incrementally typing, keep narrowing down the search set
+            // incrementally rather than starting over each time.
             return (a.aliases[0].search(filter) >= 0 && a.num_joined_members > 0);
         }).sort(function(a,b) {
             return a.num_joined_members - b.num_joined_members;
@@ -83,7 +90,7 @@ module.exports = React.createClass({
         var rows = [];
         var self = this;
         for (var i = 0; i < rooms.length; i++) {
-            var name = rooms[i].name;
+            var name = rooms[i].name || rooms[i].aliases[0];
             // <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/>
             rows.unshift(
                 <tbody key={ rooms[i].room_id }>
@@ -113,6 +120,14 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        if (this.state.loading) {
+            return (
+                <div className="mx_RoomDirectory">
+                    <Loader />
+                </div>
+            );
+        }
+
         return (
             <div className="mx_RoomDirectory">
                 <RoomHeader simpleHeader="Public Rooms" />
@@ -120,7 +135,7 @@ module.exports = React.createClass({
                     <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
                     <div className="mx_RoomDirectory_tableWrapper">
                         <table className="mx_RoomDirectory_table">
-                            <tr><th>Room</th><th>Alias</th><th>Members</th></tr>
+                            <tr><th width="45%">Room</th><th width="45%">Alias</th><th width="10%">Members</th></tr>
                             { this.getRows(this.state.roomAlias) }
                         </table>
                     </div>