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

This commit is contained in:
Matthew Hodgson 2015-07-27 22:31:24 +01:00
parent f5b9f470b2
commit 2391c21eeb
2 changed files with 49 additions and 4 deletions

View File

@ -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 {

View File

@ -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>