fix code background color

ShMcK · ShMcK · commit 8e0ca1eb6d9c · 2016-03-05T16:20:01.000-08:00
diff --git a/lib/atom/editor.js b/lib/atom/editor.js
@@ -6,6 +6,7 @@ var Action = require('../actions/actions');
 function setAtomGlobals() {
     if (atom.project.rootDirectories.length > 0) {
         window.coderoad.dir = atom.project.rootDirectories[0].path;
+        _base_1.store.dispatch(Action.setSetup({ hasDirectory: true }));
     }
     else {
         var message = 'Create a new Atom project. In Atom: File > Open > any folder';
diff --git a/lib/components/app/router.js b/lib/components/app/router.js
@@ -6,7 +6,6 @@ var __extends = (this && this.__extends) || function (d, b) {
 };
 var React = require('react');
 var _components_1 = require('./../_components');
-var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
 var default_1 = (function (_super) {
     __extends(default_1, _super);
     function default_1() {
@@ -26,7 +25,7 @@ var default_1 = (function (_super) {
     };
     default_1.prototype.render = function () {
         var state = this.props.state;
-        return (React.createElement(ReactCSSTransitionGroup, {transitionName: 'route', transitionEnterTimeout: 500, transitionLeaveTimeout: 300}, this.chooseRoute(state)));
+        return (React.createElement("div", null, this.chooseRoute(state)));
     };
     return default_1;
 }(React.Component));
diff --git a/lib/services/package.js b/lib/services/package.js
@@ -62,12 +62,9 @@ var PackageService = (function () {
         return tasks;
     };
     PackageService.prototype.getPage = function (position) {
-        var page = this.page(position);
+        var _a = this.page(position), title = _a.title, description = _a.description, onPageComplete = _a.onPageComplete, completed = _a.completed;
         return {
-            title: page.title,
-            description: page.description,
-            onPageComplete: page.onPageComplete,
-            completed: page.completed || false,
+            title: title, description: description, onPageComplete: onPageComplete, completed: completed || false
         };
     };
     PackageService.prototype.getSavedPosition = function () {
@@ -96,12 +93,11 @@ var PackageService = (function () {
         var chapters = this.data.chapters;
         return {
             completed: false,
-            chapters: !chapters ? [] : chapters.map(function (chapter) {
+            chapters: !chapters ? [] : chapters.map(function (_a) {
+                var title = _a.title, description = _a.description, completed = _a.completed, pages = _a.pages;
                 return {
-                    title: chapter.title,
-                    description: chapter.description,
-                    completed: chapter.completed || false,
-                    pages: !chapter.pages ? [] : chapter.pages.map(function (page) {
+                    title: title, description: description, completed: completed || false,
+                    pages: !pages ? [] : pages.map(function (page) {
                         return {
                             title: page.title,
                             description: page.description,
diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
     "marked": "0.3.5",
     "material-ui": "0.14.4",
     "react": "0.14.7",
-    "react-addons-css-transition-group": "^0.14.7",
     "react-dom": "0.14.7",
     "react-redux": "4.4.0",
     "react-tap-event-plugin": "0.2.2",
diff --git a/src/atom/editor.ts b/src/atom/editor.ts
@@ -6,6 +6,7 @@ import * as Action from '../actions/actions';
 export function setAtomGlobals() {
   if (atom.project.rootDirectories.length > 0) {
     window.coderoad.dir = atom.project.rootDirectories[0].path;
+    store.dispatch(Action.setSetup({hasDirectory: true}));
   } else {
     let message = 'Create a new Atom project. In Atom: File > Open > any folder';
     store.dispatch(Action.toggleAlert({ message, action: 'tip', duration: 6000 }));
@@ -48,7 +49,7 @@ export function getEditor() {
  * Actions in Atom Editor
  * @return {[type]} [description]
  */
-export function open(filePath: string, options?: Object) {
+export function open(filePath: string, options = {}) {
   // delete file first, to avoid bug
   if (fileExists(filePath)) {
     fs.unlink(filePath);
@@ -67,7 +68,7 @@ export function set(text: string) {
   });
 }
 
-export function insert(text: string, options?: Object) {
+export function insert(text: string, options = {}) {
   options = Object.assign(options, {
     autoIndent: true
   });
diff --git a/src/atom/main.ts b/src/atom/main.ts
@@ -30,10 +30,12 @@ class Main {
     this.statusBarTile = addToStatusBar(statusBar);
   }
   deactivate(): void {
+    // remove bottom status bar icon
     if (this.statusBarTile) {
       this.statusBarTile.destroy();
       this.statusBarTile = null;
     }
+    // remove subscriptions & unmount react app
     onDeactivateSubscriptionsAndUnmount();
   }
   toggle(): void {
diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
@@ -20,13 +20,14 @@ const defaultAlert = {
 export default class extends React.Component<{alert: CR.Alert, toggleAlert?: any}, CR.Alert> {
   render() {
     const {alert, toggleAlert} = this.props;
+    const {action, open, message, duration} = alert;
     return (
     <Snackbar
-          className={classNames('cr-alert', alert.action)}
-          open={alert.open || false}
-          message={alert.message || ''}
-          action={alert.action}
-          autoHideDuration={alert.duration || 1500}
+          className={classNames('cr-alert', action)}
+          open={open || false}
+          message={message || ''}
+          action={action}
+          autoHideDuration={duration || 1500}
           onActionTouchTap={toggleAlert}
           onRequestClose={toggleAlert}
         />
diff --git a/src/components/app/_app.less b/src/components/app/_app.less
@@ -9,3 +9,9 @@ atom-panel-container > atom-panel > #crv {
 @keyframes slide {
   100% { width: 400px; }
 }
+
+#crv {
+  code {
+    background-color: rgb(22, 23, 25);
+  }
+}
diff --git a/src/components/app/router.tsx b/src/components/app/router.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {Page, Progress, Start} from './../_components';
-import * as ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 export default class extends React.Component<{state: CR.State}, {}> {
   chooseRoute(state: CR.State) {
@@ -25,9 +24,9 @@ export default class extends React.Component<{state: CR.State}, {}> {
   render() {
     const state = this.props.state;
     return (
-       <ReactCSSTransitionGroup transitionName='route' transitionEnterTimeout={500} transitionLeaveTimeout={300}>
+       <div>
         {this.chooseRoute(state)}
-       </ReactCSSTransitionGroup>
+       </div>
     );
   }
 }
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
@@ -34,31 +34,35 @@ export default class extends React.Component<{
   route: string, position: CR.Position, routeToProgress?: any, routeToPage?: any, routeToProjects?: any, quit?: any
 }, {}> {
   navOptions(): React.ReactElement<{}> {
+    const {routeToProgress, routeToPage} = this.props;
     switch (this.props.route) {
       case 'page':
-        return <button onTouchTap={this.props.routeToProgress}>progress</button>;
+        return <button onTouchTap={routeToProgress}>progress</button>;
       case 'progress':
-        return <button onTouchTap={this.props.routeToPage}>page</button>;
+        return <button onTouchTap={routeToPage}>page</button>;
       default: return null;
     }
   }
   menuOptions() {
+    const {routeToProgress, routeToProjects} = this.props;
     switch (this.props.route) {
       case 'page':
         return (
           <div>
-        <MenuItem primaryText='progress' onTouchTap={this.props.routeToProgress} key='progress' />
-        <MenuItem primaryText='projects' onTouchTap={this.props.routeToProjects} key='projects' />
+        <MenuItem primaryText='progress' onTouchTap={routeToProgress} key='progress' />
+        <MenuItem primaryText='projects' onTouchTap={routeToProjects} key='projects' />
       </div>);
       case 'progress':
-        return <MenuItem primaryText='projects' onTouchTap={this.props.routeToProjects} key='projects' />;
+        return <MenuItem primaryText='projects' onTouchTap={routeToProjects} key='projects' />;
       default: return null;
     }
   }
   closePanel() {
     togglePanel();
   }
   render(): React.ReactElement<{}> {
+    const origin = {horizontal: 'right', vertical: 'top'};
+    const {quit} = this.props;
     return (
       <AppBar title={'CodeRoad'}
               className='cr-menu-bar'
@@ -68,20 +72,19 @@ export default class extends React.Component<{
         iconButtonElement={
           <IconButton><MoreVertIcon /></IconButton>
         }
-        targetOrigin={{horizontal: 'right', vertical: 'top'}}
-        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
-      >
+        targetOrigin={origin}
+        anchorOrigin={origin}>
         {/* Menu Items */}
         {this.menuOptions()}
-        {}
+
         {window.coderoad.issuesPath ? <MenuItem key='issue'>
           <a href={window.coderoad.issuesPath}>
             post issue
           </a>
           </MenuItem> : null}
 
         <Divider />
-        <MenuItem primaryText='quit' onTouchTap={this.props.quit}/>
+        <MenuItem primaryText='quit' onTouchTap={quit}/>
 
       </IconMenu>
     } />
diff --git a/src/components/page/edit.tsx b/src/components/page/edit.tsx
@@ -1,16 +1,13 @@
 import * as React from 'react';
 import * as path from 'path';
 const Edit = require('material-ui/lib/svg-icons/editor/mode-edit');
+const editStyle = {position: 'absolute', top: '10px', right: '10px'};
 
-/**
- * Edit Component
- * 	basic chapter info
- */
-export default (editPath) => {
+export default (editPath: string) => {
   if (editPath && window.coderoad.edit) {
     let repoPath = path.join(window.coderoad.repo, 'edit', 'master', editPath);
     return <a href={repoPath}>
-      <Edit style={{position: 'absolute', top: '10px', right: '10px'}}/>
+      <Edit style={editStyle}/>
       </a>;
   }
 }
diff --git a/src/components/projects/_projects.less b/src/components/projects/_projects.less
@@ -0,0 +1,27 @@
+.cr {
+  &-projects {
+    height: 100%;
+    text-align: center;
+    &-header {
+      display: block;
+      height: 300px;
+      background-color: lightblue;
+      padding-top: 100px;
+      .title {
+        color: white;
+        font-size: 2em;
+      }
+      .tagline {
+        color: white;
+        font-size: 1.5em;
+      }
+      .notes {
+        padding-top: 10px;
+        font-size: 1em;
+      }
+    }
+  }
+  &-tutorials {
+    padding: 10px;
+  }
+}
diff --git a/src/components/projects/projects.tsx b/src/components/projects/projects.tsx
@@ -0,0 +1,76 @@
+'use strict';
+import * as React from 'react';
+import {connect} from 'react-redux';
+import * as Action from '../../actions/actions';
+import {Paper, RaisedButton, List, ListItem} from 'material-ui';
+
+@connect(null, (dispatch) => {
+  return {
+    selectProject: (name: string) => {
+      Action.loadTutorial(name);
+      dispatch(Action.setRoute('progress'));
+    },
+    toggleAlert: (item: CR.Alert): void => {
+      dispatch(Action.toggleAlert(item));
+    },
+    loadTutorials: () => {
+      dispatch(Action.loadTutorials());
+    }
+  };
+})
+export default class Projects extends React.Component<{
+  tutorials: string[], toggleAlert?: any, selectProject?: any, loadTutorials?: any
+}, {}> {
+  load() {
+    this.props.loadTutorials();
+  }
+  trim(name: string): string {
+    if (name.match(/^coderoad-tutorial-/)) {
+      return name.slice(18);
+    }
+    if (name.match(/^coderoad-/)) {
+      return name.slice(9);
+    }
+    return name;
+  }
+  render() {
+    // let tutorials: string[] = getTutorials();
+    return (
+       <Paper className='cr-projects'>
+
+         <div className='cr-projects-header'>
+            <span className='title'>CodeRoad</span>
+            <p className='tagline'>Tutorials in the Editor</p>
+
+
+            <div className='cr-tutorials'>
+            <List subheader='Tutorials' >
+
+            {window.coderoad.dir ? null : <ListItem
+                key='open'
+                primaryText='Create an Atom Project'
+                secondaryText='File > Open > any older' /> }
+
+              {this.props.tutorials.length > 0 ?
+                this.props.tutorials.map((tutorial: string, index) => {
+              return (<ListItem
+                  key={index}
+                  primaryText={this.trim(tutorial)}
+                  onClick={this.props.selectProject.bind(this,
+                    tutorial)}/>);
+            }) : <ListItem
+                key='demo'
+                primaryText='Try a Demo'
+                secondaryText='npm i -s coderoad-functional-school'/>}
+
+            </List>
+            <br />
+            <RaisedButton label='Load Tutorials' secondary={true} onClick={this.load.bind(this)} />
+            </div>
+            <p className='notes'>Beta</p>
+
+         </div>
+       </Paper>
+    );
+  }
+};
diff --git a/src/services/package.ts b/src/services/package.ts
diff --git a/styles/styles.css b/styles/styles.css
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ var Action = require('../actions/actions');`
`6`	`6`	`function setAtomGlobals() {`
`7`	`7`	`if (atom.project.rootDirectories.length > 0) {`
`8`	`8`	`window.coderoad.dir = atom.project.rootDirectories[0].path;`
	`9`	`+ _base_1.store.dispatch(Action.setSetup({ hasDirectory: true }));`
`9`	`10`	`}`
`10`	`11`	`else {`
`11`	`12`	`var message = 'Create a new Atom project. In Atom: File > Open > any folder';`
Original file line number	Diff line number	Diff line change
`@@ -30,10 +30,12 @@ class Main {`
`30`	`30`	`this.statusBarTile = addToStatusBar(statusBar);`
`31`	`31`	`}`
`32`	`32`	`deactivate(): void {`
	`33`	`+ // remove bottom status bar icon`
`33`	`34`	`if (this.statusBarTile) {`
`34`	`35`	`this.statusBarTile.destroy();`
`35`	`36`	`this.statusBarTile = null;`
`36`	`37`	`}`
	`38`	`+ // remove subscriptions & unmount react app`
`37`	`39`	`onDeactivateSubscriptionsAndUnmount();`
`38`	`40`	`}`
`39`	`41`	`toggle(): void {`