component style improvements

ShMcK · ShMcK · commit 49137bd982e4 · 2016-04-20T23:04:36.000-07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,7 +14,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
   - update tutorial button
 - remove 'lodash' dependency
 - attach hints to toolbar
-- style fix for Atom v1.8
+- style fixes for Atom v1.8
 
 ## [0.6.0] - 2016-04-01
 - fixes
diff --git a/lib/components/App.js b/lib/components/App.js
@@ -35,7 +35,6 @@ var App = (function (_super) {
         _super.apply(this, arguments);
     }
     App.prototype.render = function () {
-        console.log(this.props.store);
         return (React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(index_1.AppMenu, __assign({}, this.props.store)), React.createElement(Routes_1.Routes, __assign({}, this.props.store)), React.createElement(index_1.Alert, __assign({}, this.props.store))));
     };
     App = __decorate([
diff --git a/lib/components/Markdown/index.js b/lib/components/Markdown/index.js
@@ -24,6 +24,6 @@ function formatText(text) {
 }
 ;
 exports.Markdown = function (_a) {
-    var children = _a.children;
-    return (React.createElement("span", {className: 'cr-markdown', dangerouslySetInnerHTML: { __html: formatText(children) }}));
+    var style = _a.style, children = _a.children;
+    return (React.createElement("span", {className: 'cr-markdown', style: style ? style : null, dangerouslySetInnerHTML: { __html: formatText(children) }}));
 };
diff --git a/lib/components/Page/PageComplete/index.js b/lib/components/Page/PageComplete/index.js
@@ -10,11 +10,15 @@ var styles = {
     padding: '10px 15px 30px',
     right: '0px',
     margin: '0',
-    width: '400px',
+    width: '400px'
+};
+var textStyles = {
+    color: colors_1.grey100,
+    fontSize: '1.1em'
 };
 exports.PageComplete = function (_a) {
     var page = _a.page;
     return (React.createElement("div", {className: 'cr-page-onComplete'}, page.completed && page.onPageComplete
-        ? React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, page.onPageComplete)))
+        ? React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, {style: textStyles}, page.onPageComplete)))
         : null));
 };
diff --git a/lib/components/Page/Tasks/Task.js b/lib/components/Page/Tasks/Task.js
@@ -1,20 +1,14 @@
 "use strict";
 var React = require('react');
 var index_1 = require('../../index');
+var TaskCheckbox_1 = require('./TaskCheckbox');
 var List_1 = require('material-ui/List');
 var colors_1 = require('material-ui/styles/colors');
 function getStatus(index, taskPosition, testRun) {
-    switch (true) {
-        case index < taskPosition:
-            return colors_1.lightGreen200;
-        case testRun:
-            return colors_1.orange200;
-        default:
-            return 'inherit';
-    }
+    return index < taskPosition ? colors_1.lightGreen200 : 'inherit';
 }
 exports.Task = function (_a) {
     var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
     var backgroundColor = getStatus(index, taskPosition, testRun);
-    return (React.createElement(List_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: backgroundColor }}, React.createElement("span", {className: 'cr-task-index'}, index + 1, "."), React.createElement("div", {className: 'cr-task-description'}, React.createElement(index_1.Markdown, null, task.description))));
+    return (React.createElement(List_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: backgroundColor }}, testRun ? React.createElement(TaskCheckbox_1.TaskCheckbox, null) : null, React.createElement("span", {className: 'cr-task-index'}, index + 1, "."), React.createElement("div", {className: 'cr-task-description'}, React.createElement(index_1.Markdown, null, task.description))));
 };
diff --git a/lib/components/Page/Tasks/TaskCheckbox.js b/lib/components/Page/Tasks/TaskCheckbox.js
@@ -0,0 +1,5 @@
+"use strict";
+var React = require('react');
+var colors_1 = require('material-ui/styles/colors');
+var indeterminate_check_box_1 = require('material-ui/svg-icons/toggle/indeterminate-check-box');
+exports.TaskCheckbox = function () { return (React.createElement("span", {className: 'cr-task-checkbox'}, React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500}))); };
diff --git a/lib/components/Progress/ProgressChapter.js b/lib/components/Progress/ProgressChapter.js
@@ -3,13 +3,12 @@ var React = require('react');
 var classnames = require('classnames');
 var List_1 = require('material-ui/List');
 var ProgressPage_1 = require('./ProgressPage');
-var progressIcon_1 = require('./progressIcon');
 var index_1 = require('../index');
 exports.ProgressChapter = function (_a) {
     var chapter = _a.chapter, chapterIndex = _a.chapterIndex, position = _a.position;
     var isActive = chapterIndex === position.chapter;
     return (React.createElement(List_1.ListItem, {key: 'c' + chapterIndex, className: classnames({
         'chapter': true,
         'isActive': isActive
-    }), initiallyOpen: chapterIndex === 0, leftIcon: progressIcon_1.progressIcon(chapter.completed), primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) { return (React.createElement(ProgressPage_1.ProgressPage, {key: chapterIndex + '_' + pageIndex, pageIndex: pageIndex, page: page, chapterIndex: chapterIndex, position: position})); })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {className: 'chapter-description'}, React.createElement(index_1.Markdown, null, chapter.description))));
+    }), initiallyOpen: chapterIndex === 0, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) { return (React.createElement(ProgressPage_1.ProgressPage, {key: chapterIndex + '_' + pageIndex, pageIndex: pageIndex, page: page, chapterIndex: chapterIndex, position: position})); })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {className: 'chapter-description'}, React.createElement(index_1.Markdown, null, chapter.description))));
 };
diff --git a/lib/components/Progress/index.js b/lib/components/Progress/index.js
@@ -9,6 +9,6 @@ var pageStyle = {
     margin: 0,
 };
 exports.Progress = function (_a) {
-    var progress = _a.progress, position = _a.position;
-    return (React.createElement(Paper_1.default, {className: 'cr-progress', style: pageStyle, zDepth: 1}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Progress"), progress.chapters.map(function (chapter, chapterIndex) { return (React.createElement(ProgressChapter_1.ProgressChapter, {chapter: chapter, chapterIndex: chapterIndex, position: position})); }))));
+    var progress = _a.progress, position = _a.position, info = _a.info;
+    return (React.createElement(Paper_1.default, {className: 'cr-progress', style: pageStyle, zDepth: 1}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, info.title), progress.chapters.map(function (chapter, chapterIndex) { return (React.createElement(ProgressChapter_1.ProgressChapter, {chapter: chapter, chapterIndex: chapterIndex, position: position})); }))));
 };
diff --git a/lib/components/Progress/progressIcon.js b/lib/components/Progress/progressIcon.js
@@ -11,9 +11,6 @@ function progressIcon(completed, current) {
     else if (current) {
         return React.createElement(play_circle_filled_1.default, {color: colors_1.pink500});
     }
-    else if (typeof current === 'undefined') {
-        return null;
-    }
     else {
         return React.createElement(check_box_outline_blank_1.default, null);
     }
diff --git a/lib/components/Routes/index.js b/lib/components/Routes/index.js
@@ -24,7 +24,7 @@ var Routes = (function (_super) {
             case 'page':
                 return React.createElement(index_1.Page, __assign({}, this.props));
             case 'progress':
-                return React.createElement(index_1.Progress, __assign({}, this.props));
+                return React.createElement(index_1.Progress, __assign({}, this.props, {info: this.props.tutorial.info}));
             case 'start':
                 return React.createElement(index_1.Start, __assign({}, this.props));
             case 'tutorials':
diff --git a/lib/components/Start/Welcome/index.js b/lib/components/Start/Welcome/index.js
@@ -11,5 +11,6 @@ var welcomeStyle = {
 var welcomeButtonStyle = {
     fontSize: '1.4em',
     padding: '5px 2px',
+    textShadow: '1px 1px 0px #000',
 };
 exports.Welcome = function () { return (React.createElement("div", {style: welcomeStyle}, React.createElement("div", {className: 'cr-welcome'}, React.createElement("div", {className: 'title'}, "CodeRoad"), React.createElement("div", {className: 'tagline'}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(index_1.RouteButton, {label: 'Start', route: 'tutorials', style: welcomeButtonStyle})))); };
diff --git a/src/components/Markdown/index.tsx b/src/components/Markdown/index.tsx
@@ -26,9 +26,13 @@ function formatText(text: string): string {
 };
 
 export const Markdown: React.StatelessComponent<{
-  children?: string
-}> = ({children}) => (
-  <span className='cr-markdown' dangerouslySetInnerHTML={
-    {__html: formatText(children)}
-  }></span>
+  children?: string, style?: Object
+}> = ({style, children}) => (
+  <span
+    className='cr-markdown'
+    style={style ? style : null}
+    dangerouslySetInnerHTML={
+      {__html: formatText(children)}
+    }
+  />
 );
diff --git a/src/components/Page/PageComplete/index.tsx b/src/components/Page/PageComplete/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {Card, CardText} from 'material-ui/Card';
 import {Markdown} from '../../index';
-import {cyan500} from 'material-ui/styles/colors';
+import {cyan500, grey100} from 'material-ui/styles/colors';
 
 const styles = {
   backgroundColor: cyan500,
@@ -10,7 +10,12 @@ const styles = {
   padding: '10px 15px 30px',
   right: '0px',
   margin: '0',
-  width: '400px',
+  width: '400px'
+};
+
+const textStyles = {
+  color: grey100,
+  fontSize: '1.1em'
 };
 
 export const PageComplete: React.StatelessComponent<{
@@ -20,7 +25,7 @@ export const PageComplete: React.StatelessComponent<{
     {page.completed && page.onPageComplete
         ? <Card style={styles}>
             <CardText>
-                <Markdown>{page.onPageComplete}</Markdown>
+                <Markdown style={textStyles}>{page.onPageComplete}</Markdown>
             </CardText>
           </Card>
         : null
diff --git a/src/components/Page/Tasks/Task.tsx b/src/components/Page/Tasks/Task.tsx
@@ -1,20 +1,13 @@
 import * as React from 'react';
 import {Markdown} from '../../index';
-// import {TaskCheckbox} from './TaskCheckbox';
+import {TaskCheckbox} from './TaskCheckbox';
 import {ListItem} from 'material-ui/List';
 import {lightGreen200, orange200} from 'material-ui/styles/colors';
 
 function getStatus(
   index: number, taskPosition: number, testRun: boolean
 ): string {
-  switch (true) {
-    case index < taskPosition:
-      return lightGreen200;
-    case testRun:
-      return orange200;
-    default:
-      return 'inherit';
-  }
+  return index < taskPosition ? lightGreen200 : 'inherit';
 }
 
 export const Task: React.StatelessComponent<{
@@ -27,6 +20,7 @@ export const Task: React.StatelessComponent<{
       className='cr-task'
       style={{backgroundColor}}
     >
+      {testRun ? <TaskCheckbox /> : null}
       <span className='cr-task-index'>{index + 1}.</span>
       <div className='cr-task-description'>
         <Markdown >{task.description}</Markdown>
diff --git a/src/components/Page/Tasks/TaskCheckbox.tsx b/src/components/Page/Tasks/TaskCheckbox.tsx
@@ -1,20 +1,11 @@
-// import * as React from 'react';
-// import {green500, orange500} from 'material-ui/styles/colors';
-// import CheckBox from 'material-ui/svg-icons/toggle/check-box';
-// import CheckBoxOutlineBlank from 'material-ui/svg-icons/toggle/check-box-outline-blank';
-// import IndeterminateCheckBox from 'material-ui/svg-icons/toggle/indeterminate-check-box';
-//
-// export const TaskCheckbox: React.StatelessComponent<{
-//   index: number, taskPosition: number, testRun: boolean
-// }> = ({index, taskPosition, testRun}) => {
-//   let icon = null;
-//   if (index < taskPosition) {
-//     icon = <CheckBox color={green500} />;
-//   } else if (index === taskPosition && testRun) {
-//     // TODO: loading animation inside of checkbox
-//     icon = <IndeterminateCheckBox color={orange500} />;
-//   } else {
-//     icon = <CheckBoxOutlineBlank />;
-//   }
-//   return <span className='cr-task-checkbox'>{icon}</span>;
-// };
+import * as React from 'react';
+import {green500, orange500} from 'material-ui/styles/colors';
+import CheckBox from 'material-ui/svg-icons/toggle/check-box';
+import CheckBoxOutlineBlank from 'material-ui/svg-icons/toggle/check-box-outline-blank';
+import IndeterminateCheckBox from 'material-ui/svg-icons/toggle/indeterminate-check-box';
+
+export const TaskCheckbox: React.StatelessComponent<{}> = () => (
+  <span className='cr-task-checkbox'>
+    <IndeterminateCheckBox color={orange500} />
+  </span>
+);
diff --git a/src/components/Progress/ProgressChapter.tsx b/src/components/Progress/ProgressChapter.tsx
@@ -18,7 +18,6 @@ export const ProgressChapter: React.StatelessComponent<{
           })
         }
         initiallyOpen={chapterIndex === 0}
-        leftIcon={progressIcon(chapter.completed)}
         primaryTogglesNestedList={
           chapterIndex === position.chapter && !chapter.completed
         }
diff --git a/src/components/Progress/index.tsx b/src/components/Progress/index.tsx
@@ -10,15 +10,15 @@ const pageStyle = {
 };
 
 export const Progress: React.StatelessComponent<{
-  progress: CR.Progress, position: CR.Position
-}> = ({progress, position}) => (
+  progress: CR.Progress, position: CR.Position, info: Tutorial.Info
+}> = ({progress, position, info}) => (
   <Paper
     className='cr-progress'
     style={pageStyle}
     zDepth={1}
   >
     <List>
-      <Subheader>Progress</Subheader>
+      <Subheader>{info.title}</Subheader>
       {progress.chapters.map((chapter: CR.Chapter, chapterIndex: number) => (
         <ProgressChapter
           chapter={chapter}
diff --git a/src/components/Progress/progressIcon.tsx b/src/components/Progress/progressIcon.tsx
@@ -9,8 +9,6 @@ export function progressIcon(completed: boolean, current?: boolean) {
     return <CheckBox />;
   } else if (current) {
     return <PlayCircleFilled color={pink500} />;
-  } else if (typeof current === 'undefined') {
-    return null;
   } else {
     return <CheckBoxOutlineBlank />;
   }
diff --git a/src/components/Routes/index.tsx b/src/components/Routes/index.tsx
@@ -2,16 +2,16 @@ import * as React from 'react';
 import {Page, Progress, Tutorials, Start, FinalPage} from '../index';
 
 export class Routes extends React.Component<{
-  route: string, progress: CR.Progress, page: CR.Page, tutorials: CR.Tutorial[],
+  route: string, progress: CR.Progress, page: CR.Page, tutorials: Tutorial.Info[],
   testRun: boolean, checks: CR.Checks, position: CR.Position, tasks: CR.Task[],
-  taskPosition: number, hintPosition: number
+  taskPosition: number, hintPosition: number, tutorial: CR.Tutorial
 }, {}> {
   render() {
     switch (this.props.route) {
       case 'page':
         return <Page {...this.props} />;
       case 'progress':
-        return <Progress {...this.props} />;
+        return <Progress {...this.props} info={this.props.tutorial.info}/>;
       case 'start':
         return <Start {...this.props} />;
       case 'tutorials':
diff --git a/src/components/Start/Welcome/_welcome.less b/src/components/Start/Welcome/_welcome.less
@@ -1,6 +1,7 @@
 .cr-welcome {
   text-align: center;
   marginTop: 0;
+  text-shadow: 1px 1px 1px #000;
   .title {
     padding-top: 120px;
     color: white;
diff --git a/src/components/Start/Welcome/index.tsx b/src/components/Start/Welcome/index.tsx
@@ -15,6 +15,7 @@ const welcomeStyle = {
 const welcomeButtonStyle = {
   fontSize: '1.4em',
   padding: '5px 2px',
+  textShadow: '1px 1px 0px #000',
 };
 
 export const Welcome: React.StatelessComponent<{}> = () => (
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -13,7 +13,6 @@ window.onresize = function() {
 })
 export class App extends React.Component<{store?: CR.State}, {}> {
   render(): React.ReactElement<{}> {
-    console.log(this.props.store)
     return (
       <section
         className='cr'
diff --git a/src/typings/cr/cr.d.ts b/src/typings/cr/cr.d.ts
@@ -35,7 +35,8 @@ interface State {
   hintPosition: number;
   editorActions: string[];
   alert: Alert;
-  tutorials: Tutorial[];
+  tutorial: Tutorial;
+  tutorials: Tutorial.Info[];
   testRun: boolean;
   checks: Checks;
 }
diff --git a/src/typings/cr/tutorial.d.ts b/src/typings/cr/tutorial.d.ts
@@ -1,6 +1,6 @@
 declare namespace Tutorial {
   interface Info {
-    name: string;
+    title: string;
     version: string;
     latest?: boolean;
     description?: string;
diff --git a/tsconfig.json b/tsconfig.json
@@ -107,7 +107,7 @@
         "src/services/system.ts",
         "src/store/index.ts",
         "src/components/Alert/index.tsx",
-        "src/components/app.tsx",
+        "src/components/App.tsx",
         "src/components/AppMenu/index.tsx",
         "src/components/AppMenu/issuesLink.tsx",
         "src/components/AppMenu/menuIconLeft.tsx",

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,6 @@ var App = (function (_super) {`
`35`	`35`	`_super.apply(this, arguments);`
`36`	`36`	`}`
`37`	`37`	`App.prototype.render = function () {`
`38`		`- console.log(this.props.store);`
`39`	`38`	`return (React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(index_1.AppMenu, __assign({}, this.props.store)), React.createElement(Routes_1.Routes, __assign({}, this.props.store)), React.createElement(index_1.Alert, __assign({}, this.props.store))));`
`40`	`39`	`};`
`41`	`40`	`App = __decorate([`
Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,6 @@ function formatText(text) {`
`24`	`24`	`}`
`25`	`25`	`;`
`26`	`26`	`exports.Markdown = function (_a) {`
`27`		`- var children = _a.children;`
`28`		`- return (React.createElement("span", {className: 'cr-markdown', dangerouslySetInnerHTML: { __html: formatText(children) }}));`
	`27`	`+ var style = _a.style, children = _a.children;`
	`28`	`+ return (React.createElement("span", {className: 'cr-markdown', style: style ? style : null, dangerouslySetInnerHTML: { __html: formatText(children) }}));`
`29`	`29`	`};`
Original file line number	Diff line number	Diff line change
`@@ -11,9 +11,6 @@ function progressIcon(completed, current) {`
`11`	`11`	`else if (current) {`
`12`	`12`	`return React.createElement(play_circle_filled_1.default, {color: colors_1.pink500});`
`13`	`13`	`}`
`14`		`- else if (typeof current === 'undefined') {`
`15`		`- return null;`
`16`		`- }`
`17`	`14`	`else {`
`18`	`15`	`return React.createElement(check_box_outline_blank_1.default, null);`
`19`	`16`	`}`