Reshuffle to put "HTML" (JSX) and CSS together as a theme with logic elsewhere.

package.json

@@ -8,12 +8,12 @@
     "url": "https://github.com/matrix-org/matrix-react-sdk"
   },
   "license": "Apache 2",
-  "main": "build/index.js",
+  "main": "src/index.js",
   "scripts": {
-    "build:js": "jsx src/ build",
-    "start:js": "jsx -w src/ build --source-map-inline",
-    "build:css": "catw 'css/**/*.css' -o bundle.css -c uglifycss --no-watch",
-    "start:css": "catw 'css/**/*.css' -o bundle.css -v",
+    "build:js": "jsx themes/base/views/ build",
+    "start:js": "jsx -w themes/base/views/ build --source-map-inline",
+    "build:css": "catw 'themes/base/css/**/*.css' -o bundle.css -c uglifycss --no-watch",
+    "start:css": "catw 'themes/base/css/**/*.css' -o bundle.css -v",
     "build": "npm run build:js && npm run build:css",
     "start": "parallelshell 'npm run start:js' 'npm run start:css'"
   },

src/ComponentBroker.js

@@ -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');

src/controllers/molecules/ProgressBar.js

@@ -1,3 +1,5 @@
+var React = require('react');
+
 module.exports = {
     propTypes: {
         value: React.PropTypes.number,

src/index.js

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

themes/base/views/atoms/LogoutButton.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var LogoutButtonController = require("../../controllers/atoms/LogoutButton");
+var LogoutButtonController = require("../../../../src/controllers/atoms/LogoutButton");
 
 module.exports = React.createClass({
     displayName: 'LogoutButton',

themes/base/views/atoms/MessageTimestamp.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var MessageTimestampController = require("../../controllers/atoms/MessageTimestamp");
+var MessageTimestampController = require("../../../../src/controllers/atoms/MessageTimestamp");
 
 module.exports = React.createClass({
     displayName: 'MessageTimestamp',

themes/base/views/molecules/MEmoteTile.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var MEmoteTileController = require("../../controllers/molecules/MEmoteTile");
+var MEmoteTileController = require("../../../../src/controllers/molecules/MEmoteTile");
 
 module.exports = React.createClass({
     displayName: 'MEmoteTile',

themes/base/views/molecules/MNoticeTile.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var MNoticeTileController = require("../../controllers/molecules/MNoticeTile");
+var MNoticeTileController = require("../../../../src/controllers/molecules/MNoticeTile");
 
 module.exports = React.createClass({
     displayName: 'MNoticeTile',

themes/base/views/molecules/MTextTile.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var MTextTileController = require("../../controllers/molecules/MTextTile");
+var MTextTileController = require("../../../../src/controllers/molecules/MTextTile");
 
 module.exports = React.createClass({
     displayName: 'MTextTile',

themes/base/views/molecules/MatrixToolbar.js

@@ -1,10 +1,10 @@
 var React = require('react');
 
-var ComponentBroker = require('../../ComponentBroker');
+var ComponentBroker = require('../../../../src/ComponentBroker');
 
 var LogoutButton = ComponentBroker.get("atoms/LogoutButton");
 
-var MatrixToolbarController = require("../../controllers/molecules/MatrixToolbar");
+var MatrixToolbarController = require("../../../../src/controllers/molecules/MatrixToolbar");
 
 module.exports = React.createClass({
     displayName: 'MatrixToolbar',

themes/base/views/molecules/MemberTile.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var MemberTileController = require("../../controllers/molecules/MemberTile");
+var MemberTileController = require("../../../../src/controllers/molecules/MemberTile");
 
 module.exports = React.createClass({
     displayName: 'MemberTile',

themes/base/views/molecules/MessageComposer.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var MessageComposerController = require("../../controllers/molecules/MessageComposer");
+var MessageComposerController = require("../../../../src/controllers/molecules/MessageComposer");
 
 module.exports = React.createClass({
     displayName: 'MessageComposer',

themes/base/views/molecules/MessageTile.js

@@ -2,7 +2,7 @@ var React = require('react');
 
 var classNames = require("classnames");
 
-var ComponentBroker = require('../../ComponentBroker');
+var ComponentBroker = require('../../../../src/ComponentBroker');
 
 var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
 var SenderProfile = ComponentBroker.get('molecules/SenderProfile');
@@ -15,7 +15,7 @@ var tileTypes = {
     'm.emote': ComponentBroker.get('molecules/MEmoteTile')
 };
 
-var MessageTileController = require("../../controllers/molecules/MessageTile");
+var MessageTileController = require("../../../../src/controllers/molecules/MessageTile");
 
 module.exports = React.createClass({
     displayName: 'MessageTile',

themes/base/views/molecules/ProgressBar.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var ProgressBarController = require("./../molecules/ProgressBar");
+var ProgressBarController = require("../../../../src/controllers/molecules/ProgressBar");
 
 module.exports = React.createClass({
     displayName: 'ProgressBar',

themes/base/views/molecules/RoomHeader.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var RoomHeaderController = require("../../controllers/molecules/RoomHeader");
+var RoomHeaderController = require("../../../../src/controllers/molecules/RoomHeader");
 
 module.exports = React.createClass({
     displayName: 'RoomHeader',

themes/base/views/molecules/RoomTile.js

@@ -1,9 +1,9 @@
 var React = require('react');
 var classNames = require('classnames');
 
-var RoomTileController = require("../../controllers/molecules/RoomTile");
+var RoomTileController = require("../../../../src/controllers/molecules/RoomTile");
 
-var MatrixClientPeg = require("../../MatrixClientPeg");
+var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 
 module.exports = React.createClass({
     displayName: 'RoomTile',

themes/base/views/molecules/SenderProfile.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var SenderProfileController = require("../../controllers/molecules/SenderProfile");
+var SenderProfileController = require("../../../../src/controllers/molecules/SenderProfile");
 
 module.exports = React.createClass({
     displayName: 'SenderProfile',

themes/base/views/molecules/ServerConfig.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var ServerConfigController = require("../../controllers/molecules/ServerConfig");
+var ServerConfigController = require("../../../../src/controllers/molecules/ServerConfig");
 
 module.exports = React.createClass({
     displayName: 'ServerConfig',

themes/base/views/molecules/UnknownMessageTile.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var UnknownMessageTileController = require("../../controllers/molecules/UnknownMessageTile");
+var UnknownMessageTileController = require("../../../../src/controllers/molecules/UnknownMessageTile");
 
 module.exports = React.createClass({
     displayName: 'UnknownMessageTile',

themes/base/views/organisms/MemberList.js

@@ -1,8 +1,8 @@
 var React = require('react');
 
-var MemberListController = require("../../controllers/organisms/MemberList");
+var MemberListController = require("../../../../src/controllers/organisms/MemberList");
 
-var ComponentBroker = require('../../ComponentBroker');
+var ComponentBroker = require('../../../../src/ComponentBroker');
 
 var MemberTile = ComponentBroker.get("molecules/MemberTile");
 

themes/base/views/organisms/RoomList.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var RoomListController = require("../../controllers/organisms/RoomList");
+var RoomListController = require("../../../../src/controllers/organisms/RoomList");
 
 
 module.exports = React.createClass({

themes/base/views/organisms/RoomView.js

@@ -1,15 +1,15 @@
 var React = require('react');
 
-var MatrixClientPeg = require("../../MatrixClientPeg");
+var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 
-var ComponentBroker = require('../../ComponentBroker');
+var ComponentBroker = require('../../../../src/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 RoomViewController = require("../../../../src/controllers/organisms/RoomView");
 
 var Loader = require("react-loader");
 

themes/base/views/pages/MatrixChat.js

@@ -1,12 +1,12 @@
 var React = require('react');
-var ComponentBroker = require('../../ComponentBroker');
+var ComponentBroker = require('../../../../src/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");
+var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
 
 // should be atomised
 var Loader = require("react-loader");

themes/base/views/templates/Login.js

@@ -1,11 +1,11 @@
 var React = require('react');
 
-var ComponentBroker = require("../../ComponentBroker");
+var ComponentBroker = require("../../../../src/ComponentBroker");
 
 var ProgressBar = ComponentBroker.get("molecules/ProgressBar");
 var Loader = require("react-loader");
 
-var LoginController = require("../../controllers/templates/Login");
+var LoginController = require("../../../../src/controllers/templates/Login");
 
 module.exports = React.createClass({
     displayName: 'Login',