OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Split out render methods into 'views' leaving UI logic in 'controllers'. Hopefully should make it easier to skin / customise.

pull/1/head
David Baker 2015-06-19 12:53:48 +01:00
parent c8f0bac128
commit 2abea931ca
36 changed files with 303 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/ComponentBroker.js
View File

@ -1,7 +1,7 @@
var components = {};
function load(name) {
var module = require("./"+name);
var module = require("./views/"+name);
components[name] = module;
return module;
};
@ -23,17 +23,19 @@ module.exports = {
// otherwise browserify has no way of knowing what module to include
// Must be in this file (because the require is file-specific) and
// must be at the end because the components include this file.
require('./atoms/LogoutButton');
require('./atoms/MessageTimestamp');
require('./molecules/MatrixToolbar');
require('./molecules/RoomTile');
require('./molecules/MessageTile');
require('./molecules/SenderProfile');
require('./molecules/UnknownMessageTile');
require('./molecules/MTextTile');
require('./molecules/MEmoteTile');
require('./molecules/RoomHeader');
require('./molecules/MessageComposer');
require('./organisms/RoomList');
require('./organisms/RoomView');
require('./templates/Login');
require('./views/atoms/LogoutButton');
require('./views/atoms/MessageTimestamp');
require('./views/molecules/MatrixToolbar');
require('./views/molecules/RoomTile');
require('./views/molecules/MessageTile');
require('./views/molecules/SenderProfile');
require('./views/molecules/UnknownMessageTile');
require('./views/molecules/MTextTile');
require('./views/molecules/MEmoteTile');
require('./views/molecules/RoomHeader');
require('./views/molecules/MessageComposer');
require('./views/molecules/ProgressBar');
require('./views/molecules/ServerConfig');
require('./views/organisms/RoomList');
require('./views/organisms/RoomView');
require('./views/templates/Login');

9
src/controllers/atoms/LogoutButton.js Normal file
View File

@ -0,0 +1,9 @@
var dis = require("../../dispatcher");
module.exports = {
onClick: function() {
dis.dispatch({
action: 'logout'
});
},
};

3
src/controllers/atoms/MessageTimestamp.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
};

3
src/controllers/molecules/MEmoteTile.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
};

3
src/controllers/molecules/MTextTile.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
};

3
src/controllers/molecules/MatrixToolbar.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
};

18
src/molecules/MessageComposer.js → src/controllers/molecules/MessageComposer.js
View File

@ -1,10 +1,8 @@
var React = require('react');
var MatrixClientPeg = require("../../MatrixClientPeg");
var MatrixClientPeg = require("../MatrixClientPeg");
var dis = require("../../dispatcher");
var dis = require("../dispatcher");
module.exports = React.createClass({
module.exports = {
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
},
@ -43,13 +41,5 @@ module.exports = React.createClass({
ev.preventDefault();
}
},
render: function() {
return (
<div className="mx_MessageComposer">
<textarea ref="textarea" onKeyDown={this.onKeyDown} />
</div>
);
},
});
};

3
src/controllers/molecules/MessageTile.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
};

6
src/controllers/molecules/ProgressBar.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
propTypes: {
value: React.PropTypes.number,
max: React.PropTypes.number
},
};

3
src/controllers/molecules/RoomHeader.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
};

10
src/controllers/molecules/RoomTile.js Normal file
View File

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

3
src/controllers/molecules/SenderProfile.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
};

23
src/molecules/ServerConfig.js → src/controllers/molecules/ServerConfig.js
View File

@ -1,6 +1,6 @@
var React = require('react');
var React = require("react");
module.exports = React.createClass({
module.exports = {
propTypes: {
onHsUrlChanged: React.PropTypes.func,
onIsUrlChanged: React.PropTypes.func,
@ -41,21 +41,4 @@ module.exports = React.createClass({
getIsUrl: function() {
return this.state.is_url;
},
render: function() {
return (
<div className="HomeServerTextBox">
<table className="serverConfig">
<tr>
<td>Home Server URL</td>
<td><input type="text" value={this.state.hs_url} onChange={this.hsChanged} /></td>
</tr>
<tr>
<td>Identity Server URL</td>
<td><input type="text" value={this.state.is_url} onChange={this.isChanged} /></td>
</tr>
</table>
</div>
);
}
});
};

2
src/controllers/molecules/UnknownMessageTile.js Normal file
View File

@ -0,0 +1,2 @@
module.exports = {
};

21
src/organisms/RoomList.js → src/controllers/organisms/RoomList.js
View File

@ -1,12 +1,11 @@
var React = require('react');
var React = require("react");
var MatrixClientPeg = require("../../MatrixClientPeg");
var MatrixClientPeg = require("../MatrixClientPeg");
var ComponentBroker = require('../ComponentBroker');
var ComponentBroker = require('../../ComponentBroker');
var RoomTile = ComponentBroker.get("molecules/RoomTile");
module.exports = React.createClass({
module.exports = {
componentWillMount: function() {
var cli = MatrixClientPeg.get();
cli.on("Room.timeline", this.onRoomTimeline);
@ -56,15 +55,5 @@ module.exports = React.createClass({
);
});
},
render: function() {
return (
<div className="mx_RoomList">
<ul>
{this.makeRoomTiles()}
</ul>
</div>
);
}
});
};

34
src/organisms/RoomView.js → src/controllers/organisms/RoomView.js
View File

@ -1,14 +1,6 @@
var React = require('react');
var MatrixClientPeg = require("../../MatrixClientPeg");
var MatrixClientPeg = require("../MatrixClientPeg");
var ComponentBroker = require('../ComponentBroker');
var MessageTile = ComponentBroker.get('molecules/MessageTile');
var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
module.exports = React.createClass({
module.exports = {
getInitialState: function() {
return {
room: MatrixClientPeg.get().getRoom(this.props.roomId)
@ -41,26 +33,6 @@ module.exports = React.createClass({
});
},
getMessageTiles: function() {
return this.state.room.timeline.map(function(mxEv) {
return (
<li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
);
});
},
render: function() {
return (
<div className="mx_RoomView">
<RoomHeader room={this.state.room} />
<ul ref="messageList">
{this.getMessageTiles()}
</ul>
<MessageComposer roomId={this.props.roomId} />
</div>
);
},
componentDidMount: function() {
var messageUl = this.refs.messageList.getDOMNode();
messageUl.scrollTop = messageUl.scrollHeight;
@ -72,5 +44,5 @@ module.exports = React.createClass({
messageUl.scrollTop = messageUl.scrollHeight;
}
}
});
};

39
src/pages/MatrixChat.js → src/controllers/pages/MatrixChat.js
View File

@ -1,20 +1,11 @@
var React = require('react');
var ComponentBroker = require('../ComponentBroker');
var RoomList = ComponentBroker.get('organisms/RoomList');
var RoomView = ComponentBroker.get('organisms/RoomView');
var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
var Login = ComponentBroker.get('templates/Login');
// should be atomised
var Loader = require("react-loader");
var mxCliPeg = require("../../MatrixClientPeg");
var mxCliPeg = require("../MatrixClientPeg");
var dis = require("../../dispatcher");
var dis = require("../dispatcher");
module.exports = React.createClass({
module.exports = {
getInitialState: function() {
return {
logged_in: !!(mxCliPeg.get() && mxCliPeg.get().credentials),
@ -78,27 +69,5 @@ module.exports = React.createClass({
});
cli.startClient();
},
render: function() {
if (this.state.logged_in && this.state.ready) {
return (
<div className="mx_MatrixChat">
<div className="mx_MatrixChat_leftPanel">
<MatrixToolbar />
<RoomList selectedRoom={this.state.currentRoom} />
</div>
<RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
</div>
);
} else if (this.state.logged_in) {
return (
<Loader />
);
} else {
return (
<Login onLoggedIn={this.onLoggedIn} />
);
}
}
});
};

38
src/templates/Login.js → src/controllers/templates/Login.js
View File

@ -1,12 +1,11 @@
var React = require('react');
var MatrixClientPeg = require("../MatrixClientPeg");
var MatrixClientPeg = require("../../MatrixClientPeg");
var Matrix = require("matrix-js-sdk");
var ServerConfig = require("../molecules/ServerConfig");
var ProgressBar = require("../molecules/ProgressBar");
var Loader = require("react-loader");
var ComponentBroker = require("../../ComponentBroker");
module.exports = React.createClass({
var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
module.exports = {
getInitialState: function() {
return {
step: 'choose_hs',
@ -99,29 +98,4 @@ module.exports = React.createClass({
);
}
},
loginContent: function() {
if (this.state.busy) {
return (
<Loader />
);
} else {
return (
<div>
<h1>Please log in:</h1>
{this.componentForStep(this.state.step)}
<div className="error">{this.state.errorText}</div>
</div>
);
}
},
render: function() {
return (
<div className="mx_Login">
<ProgressBar value={this.state.currentStep} max={this.state.totalSteps} />
{this.loginContent()}
</div>
);
}
});
};

2
src/index.js
View File

@ -1 +1 @@
module.exports.MatrixChat = require("./pages/MatrixChat");
module.exports.MatrixChat = require("./views/pages/MatrixChat");

8
src/atoms/LogoutButton.js → src/views/atoms/LogoutButton.js
View File

@ -1,13 +1,9 @@
var React = require('react');
var dis = require("../dispatcher");
var LogoutButtonController = require("../../controllers/atoms/LogoutButton");
module.exports = React.createClass({
onClick: function() {
dis.dispatch({
action: 'logout'
});
},
mixins: [LogoutButtonController],
render: function() {
return (

4
src/atoms/MessageTimestamp.js → src/views/atoms/MessageTimestamp.js
View File

@ -1,6 +1,10 @@
var React = require('react');
var MessageTimestampController = require("../../controllers/atoms/MessageTimestamp");
module.exports = React.createClass({
mixins: [MessageTimestampController],
render: function() {
var date = new Date(this.props.ts);
return (

4
src/molecules/MEmoteTile.js → src/views/molecules/MEmoteTile.js
View File

@ -1,6 +1,10 @@
var React = require('react');
var MEmoteTileController = require("../../controllers/molecules/MEmoteTile");
module.exports = React.createClass({
mixins: [MEmoteTileController],
render: function() {
var mxEvent = this.props.mxEvent;
var content = mxEvent.getContent();

4
src/molecules/MTextTile.js → src/views/molecules/MTextTile.js
View File

@ -1,6 +1,10 @@
var React = require('react');
var MTextTileController = require("../../controllers/molecules/MTextTile");
module.exports = React.createClass({
mixins: [MTextTileController],
render: function() {
var content = this.props.mxEvent.getContent();
return (

6
src/molecules/MatrixToolbar.js → src/views/molecules/MatrixToolbar.js
View File

@ -1,10 +1,14 @@
var React = require('react');
var ComponentBroker = require('../ComponentBroker');
var ComponentBroker = require('../../ComponentBroker');
var LogoutButton = ComponentBroker.get("atoms/LogoutButton");
var MatrixToolbarController = require("../../controllers/molecules/MatrixToolbar");
module.exports = React.createClass({
mixins: [MatrixToolbarController],
render: function() {
return (
<div className="mx_MatrixToolbar">

16
src/views/molecules/MessageComposer.js Normal file
View File

@ -0,0 +1,16 @@
var React = require('react');
var MessageComposerController = require("../../controllers/molecules/MessageComposer");
module.exports = React.createClass({
mixins: [MessageComposerController],
render: function() {
return (
<div className="mx_MessageComposer">
<textarea ref="textarea" onKeyDown={this.onKeyDown} />
</div>
);
},
});

6
src/molecules/MessageTile.js → src/views/molecules/MessageTile.js
View File

@ -2,7 +2,7 @@ var React = require('react');
var classNames = require("classnames");
var ComponentBroker = require('../ComponentBroker');
var ComponentBroker = require('../../ComponentBroker');
var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
var SenderProfile = ComponentBroker.get('molecules/SenderProfile');
@ -14,7 +14,11 @@ var tileTypes = {
'm.emote': ComponentBroker.get('molecules/MEmoteTile')
};
var MessageTileController = require("../../controllers/molecules/MessageTile");
module.exports = React.createClass({
mixins: [MessageTileController],
render: function() {
var content = this.props.mxEvent.getContent();
var msgtype = content.msgtype;

7
src/molecules/ProgressBar.js → src/views/molecules/ProgressBar.js
View File

@ -1,10 +1,9 @@
var React = require('react');
var ProgressBarController = require("./../molecules/ProgressBar");
module.exports = React.createClass({
propTypes: {
value: React.PropTypes.number,
max: React.PropTypes.number
},
mixins: [ProgressBarController],
render: function() {
// Would use an HTML5 progress tag but if that doesn't animate if you

4
src/molecules/RoomHeader.js → src/views/molecules/RoomHeader.js
View File

@ -1,6 +1,10 @@
var React = require('react');
var RoomHeaderController = require("../../controllers/molecules/RoomHeader");
module.exports = React.createClass({
mixins: [RoomHeaderController],
render: function() {
return (
<div className="mx_RoomHeader">

10
src/molecules/RoomTile.js → src/views/molecules/RoomTile.js
View File

@ -1,16 +1,10 @@
var React = require('react');
var classNames = require('classnames');
var dis = require("../dispatcher");
var RoomTileController = require("../../controllers/molecules/RoomTile");
module.exports = React.createClass({
onClick: function() {
dis.dispatch({
action: 'view_room',
room_id: this.props.room.roomId
});
},
mixins: [RoomTileController],
render: function() {
var classes = classNames({
'mx_RoomTile': true,

4
src/molecules/SenderProfile.js → src/views/molecules/SenderProfile.js
View File

@ -1,6 +1,10 @@
var React = require('react');
var SenderProfileController = require("../../controllers/molecules/SenderProfile");
module.exports = React.createClass({
mixins: [SenderProfileController],
render: function() {
var mxEvent = this.props.mxEvent;
var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();

24
src/views/molecules/ServerConfig.js Normal file
View File

@ -0,0 +1,24 @@
var React = require('react');
var ServerConfigController = require("../../controllers/molecules/ServerConfig");
module.exports = React.createClass({
mixins: [ServerConfigController],
render: function() {
return (
<div className="HomeServerTextBox">
<table className="serverConfig">
<tr>
<td>Home Server URL</td>
<td><input type="text" value={this.state.hs_url} onChange={this.hsChanged} /></td>
</tr>
<tr>
<td>Identity Server URL</td>
<td><input type="text" value={this.state.is_url} onChange={this.isChanged} /></td>
</tr>
</table>
</div>
);
}
});

4
src/molecules/UnknownMessageTile.js → src/views/molecules/UnknownMessageTile.js
View File

@ -1,6 +1,10 @@
var React = require('react');
var UnknownMessageTileController = require("../../controllers/molecules/UnknownMessageTile");
module.exports = React.createClass({
mixins: [UnknownMessageTileController],
render: function() {
return (
<span className="mx_UnknownMessageTile">

19
src/views/organisms/RoomList.js Normal file
View File

@ -0,0 +1,19 @@
var React = require('react');
var RoomListController = require("../../controllers/organisms/RoomList");
module.exports = React.createClass({
mixins: [RoomListController],
render: function() {
return (
<div className="mx_RoomList">
<ul>
{this.makeRoomTiles()}
</ul>
</div>
);
}
});

35
src/views/organisms/RoomView.js Normal file
View File

@ -0,0 +1,35 @@
var React = require('react');
var ComponentBroker = require('../../ComponentBroker');
var MessageTile = ComponentBroker.get('molecules/MessageTile');
var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
var RoomViewController = require("../../controllers/organisms/RoomView");
module.exports = React.createClass({
mixins: [RoomViewController],
getMessageTiles: function() {
return this.state.room.timeline.map(function(mxEv) {
return (
<li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
);
});
},
render: function() {
return (
<div className="mx_RoomView">
<RoomHeader room={this.state.room} />
<ul ref="messageList">
{this.getMessageTiles()}
</ul>
<MessageComposer roomId={this.props.roomId} />
</div>
);
},
});

40
src/views/pages/MatrixChat.js Normal file
View File

@ -0,0 +1,40 @@
var React = require('react');
var ComponentBroker = require('../../ComponentBroker');
var RoomList = ComponentBroker.get('organisms/RoomList');
var RoomView = ComponentBroker.get('organisms/RoomView');
var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
var Login = ComponentBroker.get('templates/Login');
var MatrixChatController = require("../../controllers/pages/MatrixChat");
// should be atomised
var Loader = require("react-loader");
module.exports = React.createClass({
mixins: [MatrixChatController],
render: function() {
if (this.state.logged_in && this.state.ready) {
return (
<div className="mx_MatrixChat">
<div className="mx_MatrixChat_leftPanel">
<MatrixToolbar />
<RoomList selectedRoom={this.state.currentRoom} />
</div>
<RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
</div>
);
} else if (this.state.logged_in) {
return (
<Loader />
);
} else {
return (
<Login onLoggedIn={this.onLoggedIn} />
);
}
}
});

37
src/views/templates/Login.js Normal file
View File

@ -0,0 +1,37 @@
var React = require('react');
var ComponentBroker = require("../../ComponentBroker");
var ProgressBar = ComponentBroker.get("molecules/ProgressBar");
var Loader = require("react-loader");
var LoginController = require("../../controllers/templates/Login");
module.exports = React.createClass({
mixins: [LoginController],
loginContent: function() {
if (this.state.busy) {
return (
<Loader />
);
} else {
return (
<div>
<h1>Please log in:</h1>
{this.componentForStep(this.state.step)}
<div className="error">{this.state.errorText}</div>
</div>
);
}
},
render: function() {
return (
<div className="mx_Login">
<ProgressBar value={this.state.currentStep} max={this.state.totalSteps} />
{this.loginContent()}
</div>
);
}
});