mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
fix up the room directory a lot - with loading spinner, better layout, etc
This commit is contained in:
parent
f5b9f470b2
commit
2391c21eeb
@ -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 {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user