diff --git a/css/organisms/RoomView.css b/css/organisms/RoomView.css index 2499e3b9af..87d94e947c 100644 --- a/css/organisms/RoomView.css +++ b/css/organisms/RoomView.css @@ -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; diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index 7ce0b4b0e2..260461a0ac 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -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'); diff --git a/src/controllers/molecules/MemberTile.js b/src/controllers/molecules/MemberTile.js new file mode 100644 index 0000000000..e23ac2904e --- /dev/null +++ b/src/controllers/molecules/MemberTile.js @@ -0,0 +1,10 @@ +var dis = require("../../dispatcher"); + +module.exports = { + onClick: function() { + dis.dispatch({ + action: 'view_user', + room_id: this.props.member.userId + }); + }, +}; diff --git a/src/controllers/organisms/MemberList.js b/src/controllers/organisms/MemberList.js new file mode 100644 index 0000000000..191db90d31 --- /dev/null +++ b/src/controllers/organisms/MemberList.js @@ -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 + }); + } +}; + diff --git a/src/views/molecules/MemberTile.js b/src/views/molecules/MemberTile.js new file mode 100644 index 0000000000..444970b8d5 --- /dev/null +++ b/src/views/molecules/MemberTile.js @@ -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 ( +