diff --git a/skins/base/css/organisms/RoomDirectory.css b/skins/base/css/organisms/RoomDirectory.css
index c8dcd077..1cd80d71 100644
--- a/skins/base/css/organisms/RoomDirectory.css
+++ b/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 {
diff --git a/skins/base/views/organisms/RoomDirectory.js b/skins/base/views/organisms/RoomDirectory.js
index ebbcc31d..0ae1f467 100644
--- a/skins/base/views/organisms/RoomDirectory.js
+++ b/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];
//
rows.unshift(
Room | Alias | Members |
---|---|---|
Room | Alias | Members |