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 ( +
+
{this.props.member.name}
+
+ ); + } +}); diff --git a/src/views/organisms/MemberList.js b/src/views/organisms/MemberList.js new file mode 100644 index 0000000000..499cf12836 --- /dev/null +++ b/src/views/organisms/MemberList.js @@ -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 ( +
  • + +
  • + ); + }); + }, + + render: function() { + return ( +
    + +
    + ); + } +}); + diff --git a/src/views/organisms/RoomView.js b/src/views/organisms/RoomView.js index 1610f8bc11..1b8bf9dae2 100644 --- a/src/views/organisms/RoomView.js +++ b/src/views/organisms/RoomView.js @@ -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 (
    - +
    +
      + {this.getMessageTiles()} +
    + +
    );