Reshuffle to put "HTML" (JSX) and CSS together as a theme with logic elsewhere.
This commit is contained in:
David Baker
parent
cc4fa6140c
commit
a022a4b9a6
37 changed files with 56 additions and 54 deletions
|
|
@ -1,7 +1,7 @@
|
|||
var components = {};
|
||||
|
||||
function load(name) {
|
||||
var module = require("./views/"+name);
|
||||
var module = require("../themes/base/views/"+name);
|
||||
components[name] = module;
|
||||
return module;
|
||||
};
|
||||
|
|
@ -23,22 +23,22 @@ 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('./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/MNoticeTile');
|
||||
require('./views/molecules/MEmoteTile');
|
||||
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');
|
||||
require('../themes/base/views/atoms/LogoutButton');
|
||||
require('../themes/base/views/atoms/MessageTimestamp');
|
||||
require('../themes/base/views/molecules/MatrixToolbar');
|
||||
require('../themes/base/views/molecules/RoomTile');
|
||||
require('../themes/base/views/molecules/MessageTile');
|
||||
require('../themes/base/views/molecules/SenderProfile');
|
||||
require('../themes/base/views/molecules/UnknownMessageTile');
|
||||
require('../themes/base/views/molecules/MTextTile');
|
||||
require('../themes/base/views/molecules/MNoticeTile');
|
||||
require('../themes/base/views/molecules/MEmoteTile');
|
||||
require('../themes/base/views/molecules/RoomHeader');
|
||||
require('../themes/base/views/molecules/MessageComposer');
|
||||
require('../themes/base/views/molecules/ProgressBar');
|
||||
require('../themes/base/views/molecules/ServerConfig');
|
||||
require('../themes/base/views/organisms/MemberList');
|
||||
require('../themes/base/views/molecules/MemberTile');
|
||||
require('../themes/base/views/organisms/RoomList');
|
||||
require('../themes/base/views/organisms/RoomView');
|
||||
require('../themes/base/views/templates/Login');
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
var React = require('react');
|
||||
|
||||
module.exports = {
|
||||
propTypes: {
|
||||
value: React.PropTypes.number,
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
module.exports.MatrixChat = require("./views/pages/MatrixChat");
|
||||
module.exports.MatrixChat = require("../themes/base/views/pages/MatrixChat");
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var LogoutButtonController = require("../../controllers/atoms/LogoutButton");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'LogoutButton',
|
||||
mixins: [LogoutButtonController],
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<button className="mx_LogoutButton" onClick={this.onClick}>Sign out</button>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var MessageTimestampController = require("../../controllers/atoms/MessageTimestamp");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MessageTimestamp',
|
||||
mixins: [MessageTimestampController],
|
||||
|
||||
render: function() {
|
||||
var date = new Date(this.props.ts);
|
||||
return (
|
||||
<span className="mx_MessageTimestamp">
|
||||
{date.toLocaleTimeString()}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var MEmoteTileController = require("../../controllers/molecules/MEmoteTile");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MEmoteTile',
|
||||
mixins: [MEmoteTileController],
|
||||
|
||||
render: function() {
|
||||
var mxEvent = this.props.mxEvent;
|
||||
var content = mxEvent.getContent();
|
||||
var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
|
||||
return (
|
||||
<span className="mx_MEmoteTile">
|
||||
{name} {content.body}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var MNoticeTileController = require("../../controllers/molecules/MNoticeTile");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MNoticeTile',
|
||||
mixins: [MNoticeTileController],
|
||||
|
||||
render: function() {
|
||||
var content = this.props.mxEvent.getContent();
|
||||
return (
|
||||
<span className="mx_MNoticeTile">
|
||||
{content.body}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var MTextTileController = require("../../controllers/molecules/MTextTile");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MTextTile',
|
||||
mixins: [MTextTileController],
|
||||
|
||||
render: function() {
|
||||
var content = this.props.mxEvent.getContent();
|
||||
return (
|
||||
<span className="mx_MTextTile">
|
||||
{content.body}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var ComponentBroker = require('../../ComponentBroker');
|
||||
|
||||
var LogoutButton = ComponentBroker.get("atoms/LogoutButton");
|
||||
|
||||
var MatrixToolbarController = require("../../controllers/molecules/MatrixToolbar");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MatrixToolbar',
|
||||
mixins: [MatrixToolbarController],
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_MatrixToolbar">
|
||||
<LogoutButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var MemberTileController = require("../../controllers/molecules/MemberTile");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MemberTile',
|
||||
mixins: [MemberTileController],
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_MemberTile">
|
||||
<div className="mx_MemberTile_name">{this.props.member.name}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var MessageComposerController = require("../../controllers/molecules/MessageComposer");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MessageComposer',
|
||||
mixins: [MessageComposerController],
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_MessageComposer">
|
||||
<textarea ref="textarea" onKeyDown={this.onKeyDown} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var classNames = require("classnames");
|
||||
|
||||
var ComponentBroker = require('../../ComponentBroker');
|
||||
|
||||
var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
|
||||
var SenderProfile = ComponentBroker.get('molecules/SenderProfile');
|
||||
|
||||
var UnknownMessageTile = ComponentBroker.get('molecules/UnknownMessageTile');
|
||||
|
||||
var tileTypes = {
|
||||
'm.text': ComponentBroker.get('molecules/MTextTile'),
|
||||
'm.notice': ComponentBroker.get('molecules/MNoticeTile'),
|
||||
'm.emote': ComponentBroker.get('molecules/MEmoteTile')
|
||||
};
|
||||
|
||||
var MessageTileController = require("../../controllers/molecules/MessageTile");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MessageTile',
|
||||
mixins: [MessageTileController],
|
||||
|
||||
render: function() {
|
||||
var content = this.props.mxEvent.getContent();
|
||||
var msgtype = content.msgtype;
|
||||
var TileType = UnknownMessageTile;
|
||||
if (msgtype && tileTypes[msgtype]) {
|
||||
TileType = tileTypes[msgtype];
|
||||
}
|
||||
var classes = classNames({
|
||||
mx_MessageTile: true,
|
||||
sending: this.props.mxEvent.status == 'sending',
|
||||
not_sent: this.props.mxEvent.status == 'not_sent'
|
||||
});
|
||||
return (
|
||||
<div className={classes}>
|
||||
<MessageTimestamp ts={this.props.mxEvent.getTs()} />
|
||||
<SenderProfile mxEvent={this.props.mxEvent} />
|
||||
<TileType mxEvent={this.props.mxEvent} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var ProgressBarController = require("./../molecules/ProgressBar");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'ProgressBar',
|
||||
mixins: [ProgressBarController],
|
||||
|
||||
render: function() {
|
||||
// Would use an HTML5 progress tag but if that doesn't animate if you
|
||||
// use the HTML attributes rather than styles
|
||||
var progressStyle = {
|
||||
width: ((this.props.value / this.props.max) * 100)+"%"
|
||||
};
|
||||
return (
|
||||
<div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var RoomHeaderController = require("../../controllers/molecules/RoomHeader");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'RoomHeader',
|
||||
mixins: [RoomHeaderController],
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_RoomHeader">
|
||||
{this.props.room.name}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
var React = require('react');
|
||||
var classNames = require('classnames');
|
||||
|
||||
var RoomTileController = require("../../controllers/molecules/RoomTile");
|
||||
|
||||
var MatrixClientPeg = require("../../MatrixClientPeg");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'RoomTile',
|
||||
mixins: [RoomTileController],
|
||||
render: function() {
|
||||
var myUserId = MatrixClientPeg.get().credentials.userId;
|
||||
var classes = classNames({
|
||||
'mx_RoomTile': true,
|
||||
'selected': this.props.selected,
|
||||
'unread': this.props.unread,
|
||||
'invited': this.props.room.currentState.members[myUserId].membership == 'invite'
|
||||
});
|
||||
return (
|
||||
<div className={classes} onClick={this.onClick}>
|
||||
<div className="mx_RoomTile_name">{this.props.room.name}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var SenderProfileController = require("../../controllers/molecules/SenderProfile");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'SenderProfile',
|
||||
mixins: [SenderProfileController],
|
||||
|
||||
render: function() {
|
||||
var mxEvent = this.props.mxEvent;
|
||||
var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
|
||||
|
||||
var msgtype = mxEvent.getContent().msgtype;
|
||||
if (msgtype && msgtype == 'm.emote') {
|
||||
name = ''; // emote message must include the name so don't duplicate it
|
||||
}
|
||||
return (
|
||||
<span className="mx_SenderProfile">
|
||||
{name}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var ServerConfigController = require("../../controllers/molecules/ServerConfig");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'ServerConfig',
|
||||
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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var UnknownMessageTileController = require("../../controllers/molecules/UnknownMessageTile");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'UnknownMessageTile',
|
||||
mixins: [UnknownMessageTileController],
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<span className="mx_UnknownMessageTile">
|
||||
?
|
||||
</span>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
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 (
|
||||
<li key={userId}>
|
||||
<MemberTile
|
||||
member={m}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_MemberList">
|
||||
<ul>
|
||||
{this.makeMemberTiles()}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var RoomListController = require("../../controllers/organisms/RoomList");
|
||||
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'RoomList',
|
||||
mixins: [RoomListController],
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_RoomList">
|
||||
<ul>
|
||||
{this.makeRoomTiles()}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
var React = require('react');
|
||||
|
||||
var MatrixClientPeg = require("../../MatrixClientPeg");
|
||||
|
||||
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");
|
||||
|
||||
var Loader = require("react-loader");
|
||||
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'RoomView',
|
||||
mixins: [RoomViewController],
|
||||
|
||||
getMessageTiles: function() {
|
||||
return this.state.room.timeline.map(function(mxEv) {
|
||||
return (
|
||||
<li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var myUserId = MatrixClientPeg.get().credentials.userId;
|
||||
if (this.state.room.currentState.members[myUserId].membership == 'invite') {
|
||||
if (this.state.joining) {
|
||||
return (
|
||||
<div className="mx_RoomView">
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
var inviteEvent = this.state.room.currentState.members[myUserId].events.member.event;
|
||||
// XXX: Leaving this intentionally basic for now because invites are about to change totally
|
||||
var joinErrorText = this.state.joinError ? "Failed to join room!" : "";
|
||||
return (
|
||||
<div className="mx_RoomView">
|
||||
<div className="mx_RoomView_invitePrompt">
|
||||
<div>{inviteEvent.user_id} has invited you to a room</div>
|
||||
<button ref="joinButton" onClick={this.onJoinButtonClicked}>Join</button>
|
||||
<div className="error">{joinErrorText}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<div className="mx_RoomView">
|
||||
<RoomHeader room={this.state.room} />
|
||||
<div className="mx_RoomView_HSplit">
|
||||
<ul className="mx_RoomView_MessageList" ref="messageList">
|
||||
{this.getMessageTiles()}
|
||||
</ul>
|
||||
<MemberList roomId={this.props.roomId} key={this.props.roomId} />
|
||||
</div>
|
||||
<MessageComposer roomId={this.props.roomId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
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({
|
||||
displayName: 'MatrixChat',
|
||||
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} />
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
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({
|
||||
displayName: 'Login',
|
||||
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>
|
||||
);
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue