Add member list (that doesn't really update much yet)

This commit is contained in:
David Baker 2015-06-22 11:42:09 +01:00
parent e77e9b7704
commit 0424ef07b3
7 changed files with 120 additions and 5 deletions

View file

@ -9,14 +9,14 @@
height: 30px;
}
.mx_RoomView ul {
.mx_RoomView .mx_RoomView_MessageList {
padding: 0px;
margin: 0px;
position: absolute;
top: 35px;
bottom: 40px;
left: 0px;
right: 0px;
right: 150px;
overflow-y: scroll;
}
@ -24,6 +24,21 @@
list-style-type: none;
}
.mx_RoomView .mx_MemberList {
position: absolute;
top: 35px;
bottom: 40px;
right: 0px;
width: 150px;
margin: 0px;
padding: 0px;
}
.mx_RoomView .mx_MemberList ul {
margin: 0px;
padding: 0px;
}
.mx_RoomView .mx_MessageComposer {
position: absolute;
bottom: 5px;

View file

@ -37,6 +37,8 @@ require('./views/molecules/RoomHeader');
require('./views/molecules/MessageComposer');
require('./views/molecules/ProgressBar');
require('./views/molecules/ServerConfig');
require('./views/organisms/MemberList');
require('./views/molecules/MemberTile');
require('./views/organisms/RoomList');
require('./views/organisms/RoomView');
require('./views/templates/Login');

View file

@ -0,0 +1,10 @@
var dis = require("../../dispatcher");
module.exports = {
onClick: function() {
dis.dispatch({
action: 'view_user',
room_id: this.props.member.userId
});
},
};

View file

@ -0,0 +1,30 @@
var React = require("react");
var MatrixClientPeg = require("../../MatrixClientPeg");
module.exports = {
componentWillMount: function() {
var cli = MatrixClientPeg.get();
cli.on("RoomState.members", this.onRoomStateMember);
this.setState({
memberDict: cli.getRoom(this.props.roomId).currentState.members
});
},
componentWillUnmount: function() {
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
}
},
// Remember to set 'key' on a MemberList to the ID of the room it's for
/*componentWillReceiveProps: function(newProps) {
},*/
onRoomStateMember: function(ev, state, member) {
this.setState({
memberDict: cli.getRoom(this.props.roomId).currentState.members
});
}
};

View file

@ -0,0 +1,15 @@
var React = require('react');
var MemberTileController = require("../../controllers/molecules/MemberTile");
module.exports = React.createClass({
displayName: 'MemberTile',
mixins: [MemberTileController],
render: function() {
return (
<div className="mx_MemberTile">
<div className="mx_MemberTile_name">{this.props.member.name}</div>
</div>
);
}
});

View file

@ -0,0 +1,39 @@
var React = require('react');
var MemberListController = require("../../controllers/organisms/MemberList");
var ComponentBroker = require('../../ComponentBroker');
var MemberTile = ComponentBroker.get("molecules/MemberTile");
module.exports = React.createClass({
displayName: 'MemberList',
mixins: [MemberListController],
makeMemberTiles: function() {
var that = this;
return Object.keys(that.state.memberDict).map(function(userId) {
var m = that.state.memberDict[userId];
return (
<li>
<MemberTile
member={m}
key={userId}
/>
</li>
);
});
},
render: function() {
return (
<div className="mx_MemberList">
<ul>
{this.makeMemberTiles()}
</ul>
</div>
);
}
});

View file

@ -4,6 +4,7 @@ var ComponentBroker = require('../../ComponentBroker');
var MessageTile = ComponentBroker.get('molecules/MessageTile');
var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
var MemberList = ComponentBroker.get('organisms/MemberList');
var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
var RoomViewController = require("../../controllers/organisms/RoomView");
@ -25,9 +26,12 @@ module.exports = React.createClass({
return (
<div className="mx_RoomView">
<RoomHeader room={this.state.room} />
<ul ref="messageList">
{this.getMessageTiles()}
</ul>
<div className="mx_RoomView_HSplit">
<ul className="mx_RoomView_MessageList" ref="messageList">
{this.getMessageTiles()}
</ul>
<MemberList roomId={this.props.roomId} key={this.props.roomId} />
</div>
<MessageComposer roomId={this.props.roomId} />
</div>
);