app structure refactor

Author: ShMcK

CHANGELOG.md

@@ -21,3 +21,6 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [0.5.3] - 2016-03-07
 - fix tutorial progress issues
 - use `::>` to set cursor position
+
+## [0.5.4] - 2016-03
+- fix bug that prevented scroll in Atom 1.6+

lib/atom/subscriptions.js

@@ -25,6 +25,7 @@ function onActivateSubscriptions() {
 }
 exports.onActivateSubscriptions = onActivateSubscriptions;
 function onDeactivateSubscriptionsAndUnmount() {
+    window.onresize = null;
     render_1.unmount(document.getElementById('crv'));
     subscriptions.dispose();
 }

lib/components/_components.js

@@ -1,8 +1,10 @@
 "use strict";
-var app_1 = require('./app/app');
+var app_1 = require('./app');
 exports.App = app_1.default;
-var router_1 = require('./app/router');
-exports.Router = router_1.default;
+var theme_1 = require('./theme/theme');
+exports.Theme = theme_1.default;
+var routes_1 = require('./routes/routes');
+exports.Routes = routes_1.default;
 var page_1 = require('./page/page');
 exports.Page = page_1.default;
 var chapter_1 = require('./page/chapter');

lib/components/app.js

@@ -0,0 +1,45 @@
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var React = require('react');
+var react_redux_1 = require('react-redux');
+var _components_1 = require('./_components');
+var ThemeDecorator = require('material-ui/lib/styles/theme-decorator');
+var ThemeManager = require('material-ui/lib/styles/theme-manager');
+var height = atom.getSize().height;
+window.onresize = function () {
+    height = atom.getSize().height;
+};
+var default_1 = (function (_super) {
+    __extends(default_1, _super);
+    function default_1() {
+        _super.apply(this, arguments);
+    }
+    default_1.prototype.render = function () {
+        var state = this.props.state;
+        return (React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(_components_1.Menu, {route: state.route, position: state.position}), React.createElement(_components_1.Routes, {state: state, ref: 'route'}), React.createElement(_components_1.Alert, {alert: state.alert})));
+    };
+    default_1 = __decorate([
+        ThemeDecorator(ThemeManager.getMuiTheme(_components_1.Theme)),
+        react_redux_1.connect(function (state) {
+            return { state: state };
+        }), 
+        __metadata('design:paramtypes', [])
+    ], default_1);
+    return default_1;
+}(React.Component));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+;

lib/components/render.js

@@ -3,7 +3,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var react_redux_1 = require('react-redux');
 var _base_1 = require('../_base');
-var app_1 = require('./app/app');
+var app_1 = require('./app');
 require('./remove-later');
 var rootName = 'crv';
 function render(target) {

lib/components/routes/routes.js

@@ -0,0 +1,35 @@
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var React = require('react');
+var _components_1 = require('../_components');
+var default_1 = (function (_super) {
+    __extends(default_1, _super);
+    function default_1() {
+        _super.apply(this, arguments);
+    }
+    default_1.prototype.chooseRoute = function (state) {
+        switch (state.route) {
+            case 'page':
+                return React.createElement(_components_1.Page, {page: state.page, tasks: state.tasks, taskPosition: state.taskPosition, hintPosition: state.hintPosition, editorActions: state.editorActions, runTests: state.runTests, log: state.log});
+            case 'progress':
+                return React.createElement(_components_1.Progress, {progress: state.progress, position: state.position});
+            case 'projects':
+                return React.createElement(_components_1.Start, {tutorials: state.tutorials, warning: state.warning});
+            case 'final':
+                return React.createElement(_components_1.FinalPage, null);
+            default:
+                throw 'Error: Route not found.';
+        }
+    };
+    default_1.prototype.render = function () {
+        var state = this.props.state;
+        return (React.createElement("div", null, this.chooseRoute(state)));
+    };
+    return default_1;
+}(React.Component));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;

package.json

@@ -55,7 +55,7 @@
   },
   "scripts": {
     "test": "ava",
-    "styles": "lessc src/components/_index.less styles/styles.css",
+    "styles": "lessc src/components/_app.less styles/styles.css",
     "compile": "tsc",
     "build": "npm run styles && npm run compile"
   }

src/atom/subscriptions.ts

@@ -41,6 +41,7 @@ export function onActivateSubscriptions() {
 export function onDeactivateSubscriptionsAndUnmount() {
   // unmount React
   // TODO: animate close first
+  window.onresize = null;
   unmount(document.getElementById('crv'));
   // cleanup subscriptions
   subscriptions.dispose();

src/components/_index.less renamed to src/components/_app.less

@@ -1,15 +1,30 @@
-@import './app/_app';
-@import './app/_route';
+@import './routes/_routes';
 @import './menu/_menu';
 @import './page/_chapter';
 @import './page/_page';
 @import './progress/_progress';
 @import './alert/_alert';
 @import './start/_start';
 
+atom-panel-container > atom-panel > #crv {
+  animation: slide 0.3s forwards;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes slide {
+  0% { width: 0px; }
+}
+@keyframes slide {
+  100% { width: 400px; }
+}
+
 #crv {
   position: relative;
   overflow-y: scroll;
+
+  code {
+    background-color: rgb(22, 23, 25);
+  }
 }
 
 #crv a, #crv a:hover, #crv a:visited {

src/components/_components.ts

@@ -1,11 +1,9 @@
-/**
- * Component List
- */
 // Root App
-export {default as App} from './app/app';
+export {default as App} from './app';
+export {default as Theme} from './theme/theme';
 
 // Router
-export {default as Router} from './app/router';
+export {default as Routes} from './routes/routes';
 
 // Components
 export {default as Page} from './page/page';