Something starting to resemble a Matrix Client

This commit is contained in:
David Baker 2015-06-12 17:34:17 +01:00
parent 2f6a123118
commit 125fa78bc6
15 changed files with 148 additions and 21 deletions

View File

@ -0,0 +1,6 @@
.mx_RoomHeader {
background-color: #eee;
font-weight: bold;
height: 1em;
padding: 5px;
}

View File

@ -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 {

View File

@ -1,3 +1,8 @@
.mx_RoomList {
display: table-row;
}
.mx_RoomList ul {
padding: 0px;
margin: 0px;
}

View File

@ -0,0 +1,9 @@
.mx_RoomView {
display: table-cell;
padding-left: 5px;
width: 100%;
}
.mx_RoomView ul {
padding: 0px;
}

3
css/pages/MatrixChat.css Normal file
View File

@ -0,0 +1,3 @@
.mx_MatrixChat_leftPanel {
display: table-cell;
}

View File

@ -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",

19
src/atoms/LogoutButton.js Normal file
View File

@ -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 (
<button className="mx_LogoutButton" onClick={this.onClick}>Sign out</button>
);
}
});

View File

@ -0,0 +1,14 @@
var React = require('react');
var LogoutButton = require("../atoms/LogoutButton");
module.exports = React.createClass({
render: function() {
return (
<div className="mx_MatrixToolbar">
<LogoutButton />
</div>
);
}
});

View File

@ -0,0 +1,13 @@
var React = require('react');
module.exports = React.createClass({
render: function() {
//{this.props.mxEvent.getContent().body}
return (
<div className="mx_MessageTile">
{JSON.stringify(this.props.mxEvent.getContent())}
</div>
);
},
});

View File

@ -3,8 +3,8 @@ var React = require('react');
module.exports = React.createClass({
render: function() {
return (
<div>
{this.props.event.content.body}
<div className="mx_RoomHeader">
{this.props.room.name}
</div>
);
},

View File

@ -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 (
<div className="mx_RoomTile">
<div className={classes} onClick={this.onClick}>
<div className="mx_RoomTile_name">{this.props.room.name}</div>
</div>
);

View File

@ -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 (
<RoomTile room={room} key={room.roomId} />
<RoomTile room={room} key={room.roomId} selected={selected} />
);
});
},

View File

@ -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 (
<Message ev={ev} />
<MessageTile mxEvent={mxEv} key={mxEv.getId()} />
);
});*/
});
},
render: function() {
return (
//{messageItems}
<div>
<ul className="message-list" ref="messageList">
<div className="mx_RoomView">
<RoomHeader room={this.state.room} />
<ul>
{this.getMessageTiles()}
</ul>
</div>
);

View File

@ -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 (
<div>
<RoomList />
<RoomView />
<div className="mx_MatrixChat_leftPanel">
<MatrixToolbar />
<RoomList selectedRoom={this.state.currentRoom} />
</div>
<RoomView room_id={this.state.currentRoom} />
</div>
);
} else if (this.state.logged_in) {

View File

@ -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 {