From 125fa78bc6186cec8fdd621dba43979293b68ec2 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 12 Jun 2015 17:34:17 +0100 Subject: [PATCH] Something starting to resemble a Matrix Client --- css/molecules/RoomHeader.css | 6 ++++ css/molecules/RoomTile.css | 11 +++++++ css/organisms/RoomList.css | 5 ++++ css/organisms/RoomView.css | 9 ++++++ css/pages/MatrixChat.css | 3 ++ package.json | 5 ++-- src/atoms/LogoutButton.js | 19 ++++++++++++ src/molecules/MatrixToolbar.js | 14 +++++++++ src/molecules/MessageTile.js | 13 ++++++++ src/molecules/{Message.js => RoomHeader.js} | 4 +-- src/molecules/RoomTile.js | 16 +++++++++- src/organisms/RoomList.js | 4 ++- src/organisms/RoomView.js | 25 ++++++++++------ src/pages/MatrixChat.js | 33 ++++++++++++++++++--- src/templates/Login.js | 2 -- 15 files changed, 148 insertions(+), 21 deletions(-) create mode 100644 css/molecules/RoomHeader.css create mode 100644 css/organisms/RoomView.css create mode 100644 css/pages/MatrixChat.css create mode 100644 src/atoms/LogoutButton.js create mode 100644 src/molecules/MatrixToolbar.js create mode 100644 src/molecules/MessageTile.js rename src/molecules/{Message.js => RoomHeader.js} (64%) diff --git a/css/molecules/RoomHeader.css b/css/molecules/RoomHeader.css new file mode 100644 index 00000000..a395337d --- /dev/null +++ b/css/molecules/RoomHeader.css @@ -0,0 +1,6 @@ +.mx_RoomHeader { + background-color: #eee; + font-weight: bold; + height: 1em; + padding: 5px; +} diff --git a/css/molecules/RoomTile.css b/css/molecules/RoomTile.css index e50ab7b0..7b0aa8f8 100644 --- a/css/molecules/RoomTile.css +++ b/css/molecules/RoomTile.css @@ -5,6 +5,17 @@ margin-top: 1px; margin-bottom: 1px; padding: 5px; + cursor: pointer; + border: 2px solid white; + transition: background-color 0.1s ease; +} + +.mx_RoomTile.selected { + border: 2px inset #eee; +} + +.mx_RoomTile:hover { + background-color: #aad; } .mx_RoomTile_name { diff --git a/css/organisms/RoomList.css b/css/organisms/RoomList.css index 40d37526..b3a739be 100644 --- a/css/organisms/RoomList.css +++ b/css/organisms/RoomList.css @@ -1,3 +1,8 @@ +.mx_RoomList { + display: table-row; +} + .mx_RoomList ul { padding: 0px; + margin: 0px; } diff --git a/css/organisms/RoomView.css b/css/organisms/RoomView.css new file mode 100644 index 00000000..35f935b0 --- /dev/null +++ b/css/organisms/RoomView.css @@ -0,0 +1,9 @@ +.mx_RoomView { + display: table-cell; + padding-left: 5px; + width: 100%; +} + +.mx_RoomView ul { + padding: 0px; +} diff --git a/css/pages/MatrixChat.css b/css/pages/MatrixChat.css new file mode 100644 index 00000000..da89f9d3 --- /dev/null +++ b/css/pages/MatrixChat.css @@ -0,0 +1,3 @@ +.mx_MatrixChat_leftPanel { + display: table-cell; +} diff --git a/package.json b/package.json index fdb88aca..1443c914 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,11 @@ "start": "parallelshell 'npm run start:js' 'npm run start:css'" }, "dependencies": { - "react-loader": "^1.4.0", + "classnames": "^2.1.2", "flux": "^2.0.3", "matrix-js-sdk": "0.0.4", - "react": "^0.13.0" + "react": "^0.13.0", + "react-loader": "^1.4.0" }, "devDependencies": { "catw": "^1.0.1", diff --git a/src/atoms/LogoutButton.js b/src/atoms/LogoutButton.js new file mode 100644 index 00000000..33abaf2c --- /dev/null +++ b/src/atoms/LogoutButton.js @@ -0,0 +1,19 @@ +var React = require('react'); + +var mxCliPeg = require("../MatrixClientPeg"); + +var dis = require("../dispatcher"); + +module.exports = React.createClass({ + onClick: function() { + dis.dispatch({ + action: 'logout' + }); + }, + + render: function() { + return ( + + ); + } +}); diff --git a/src/molecules/MatrixToolbar.js b/src/molecules/MatrixToolbar.js new file mode 100644 index 00000000..e6b336aa --- /dev/null +++ b/src/molecules/MatrixToolbar.js @@ -0,0 +1,14 @@ +var React = require('react'); + +var LogoutButton = require("../atoms/LogoutButton"); + +module.exports = React.createClass({ + render: function() { + return ( +
+ +
+ ); + } +}); + diff --git a/src/molecules/MessageTile.js b/src/molecules/MessageTile.js new file mode 100644 index 00000000..0ae6c02a --- /dev/null +++ b/src/molecules/MessageTile.js @@ -0,0 +1,13 @@ +var React = require('react'); + +module.exports = React.createClass({ + render: function() { + //{this.props.mxEvent.getContent().body} + return ( +
+ {JSON.stringify(this.props.mxEvent.getContent())} +
+ ); + }, +}); + diff --git a/src/molecules/Message.js b/src/molecules/RoomHeader.js similarity index 64% rename from src/molecules/Message.js rename to src/molecules/RoomHeader.js index ffe3113f..4d7850b2 100644 --- a/src/molecules/Message.js +++ b/src/molecules/RoomHeader.js @@ -3,8 +3,8 @@ var React = require('react'); module.exports = React.createClass({ render: function() { return ( -
- {this.props.event.content.body} +
+ {this.props.room.name}
); }, diff --git a/src/molecules/RoomTile.js b/src/molecules/RoomTile.js index 09a781ab..9d757263 100644 --- a/src/molecules/RoomTile.js +++ b/src/molecules/RoomTile.js @@ -1,9 +1,23 @@ var React = require('react'); +var classNames = require('classnames'); + +var dis = require("../dispatcher"); module.exports = React.createClass({ + onClick: function() { + dis.dispatch({ + action: 'view_room', + room_id: this.props.room.roomId + }); + }, + render: function() { + var classes = classNames({ + 'mx_RoomTile': true, + 'selected': this.props.selected + }); return ( -
+
{this.props.room.name}
); diff --git a/src/organisms/RoomList.js b/src/organisms/RoomList.js index a2d18ac2..56b07508 100644 --- a/src/organisms/RoomList.js +++ b/src/organisms/RoomList.js @@ -12,9 +12,11 @@ module.exports = React.createClass({ }, makeRoomTiles: function() { + var that = this; return this.state.roomList.map(function(room) { + var selected = room.roomId == that.props.selectedRoom; return ( - + ); }); }, diff --git a/src/organisms/RoomView.js b/src/organisms/RoomView.js index ee29a3de..5f35ccfb 100644 --- a/src/organisms/RoomView.js +++ b/src/organisms/RoomView.js @@ -1,23 +1,30 @@ var React = require('react'); -var Message = require('../molecules/Message'); +var MessageTile = require('../molecules/MessageTile'); +var RoomHeader = require('../molecules/RoomHeader'); + +var MatrixClientPeg = require("../MatrixClientPeg"); module.exports = React.createClass({ getInitialState: function() { return { - messages: [ { foo: "bar"} ] + room: MatrixClientPeg.get().getRoom(this.props.room_id) } }, - render: function() { - /*var messageItems = this.state.messages.map(function(ev) { + getMessageTiles: function() { + return this.state.room.timeline.map(function(mxEv) { return ( - + ); - });*/ + }); + }, + + render: function() { return ( - //{messageItems} -
-
    +
    + +
      + {this.getMessageTiles()}
    ); diff --git a/src/pages/MatrixChat.js b/src/pages/MatrixChat.js index 0e437a5d..9eb8f14f 100644 --- a/src/pages/MatrixChat.js +++ b/src/pages/MatrixChat.js @@ -2,13 +2,14 @@ var React = require('react'); var RoomList = require('../organisms/RoomList'); var RoomView = require('../organisms/RoomView'); +var MatrixToolbar = require('../molecules/MatrixToolbar'); var Loader = require("react-loader"); var Login = require('../templates/Login'); var mxCliPeg = require("../MatrixClientPeg"); -//var dis = require("../dispatcher"); +var dis = require("../dispatcher"); module.exports = React.createClass({ getInitialState: function() { @@ -19,11 +20,28 @@ module.exports = React.createClass({ }, componentDidMount: function() { + this.dispatcherRef = dis.register(this.onAction); if (this.state.logged_in) { this.startMatrixClient(); } }, + componentWillUnmount: function() { + dis.unregister(this.dispatcherRef); + }, + + onAction: function(payload) { + switch (payload.action) { + case 'logout': + mxCliPeg.replace(null); + this.setState({ + logged_in: false, + ready: false + }); + break; + } + }, + onLoggedIn: function() { this.setState({logged_in: true}); this.startMatrixClient(); @@ -33,7 +51,11 @@ module.exports = React.createClass({ var cli = mxCliPeg.get(); var that = this; cli.on('syncComplete', function() { - that.setState({ready: true}); + var firstRoom = null; + if (cli.getRooms() && cli.getRooms().length) { + firstRoom = cli.getRooms()[0].roomId; + } + that.setState({ready: true, currentRoom: firstRoom}); }); cli.startClient(); }, @@ -42,8 +64,11 @@ module.exports = React.createClass({ if (this.state.logged_in && this.state.ready) { return (
    - - +
    + + +
    +
    ); } else if (this.state.logged_in) { diff --git a/src/templates/Login.js b/src/templates/Login.js index 0700a3d0..62c09ace 100644 --- a/src/templates/Login.js +++ b/src/templates/Login.js @@ -6,8 +6,6 @@ var ServerConfig = require("../molecules/ServerConfig"); var ProgressBar = require("../molecules/ProgressBar"); var Loader = require("react-loader"); -//var dis = require("../dispatcher"); - module.exports = React.createClass({ getInitialState: function() { return {