toolbar component added

ShMcK · ShMcK · commit 339d092ecd52 · 2016-03-03T17:18:45.000-08:00
diff --git a/lib/components/account/account.js b/lib/components/account/account.js
@@ -11,7 +11,9 @@ var default_1 = (function (_super) {
         _super.apply(this, arguments);
     }
     default_1.prototype.render = function () {
-        return (React.createElement("section", {className: 'cr-account'}, React.createElement("h3", null, "Account")));
+        return (React.createElement("section", {className: 'cr-account'}, 
+            React.createElement("h3", null, "Account")
+        ));
     };
     return default_1;
 }(React.Component));
diff --git a/lib/components/app/app.js b/lib/components/app/app.js
@@ -30,7 +30,10 @@ var default_1 = (function (_super) {
     };
     default_1.prototype.render = function () {
         var state = this.props.state;
-        return (React.createElement("section", {className: 'cr'}, React.createElement(_components_1.Menu, {route: state.route, position: state.position}), React.createElement(_components_1.Router, {state: state}), React.createElement(_components_1.Alert, {alert: state.alert})));
+        return (React.createElement("section", {className: 'cr'}, 
+            React.createElement(_components_1.Menu, {route: state.route, position: state.position}), 
+            React.createElement(_components_1.Router, {state: state}), 
+            React.createElement(_components_1.Alert, {alert: state.alert})));
     };
     default_1.childContextTypes = {
         muiTheme: React.PropTypes.object,
diff --git a/lib/components/menu/menu.js b/lib/components/menu/menu.js
@@ -39,7 +39,9 @@ var default_1 = (function (_super) {
     default_1.prototype.menuOptions = function () {
         switch (this.props.route) {
             case 'page':
-                return (React.createElement("div", null, React.createElement(material_ui_1.MenuItem, {primaryText: 'progress', onClick: this.props.routeToProgress}), React.createElement(material_ui_1.MenuItem, {primaryText: 'projects', onClick: this.props.routeToProjects})));
+                return (React.createElement("div", null, 
+                    React.createElement(material_ui_1.MenuItem, {primaryText: 'progress', onClick: this.props.routeToProgress}), 
+                    React.createElement(material_ui_1.MenuItem, {primaryText: 'projects', onClick: this.props.routeToProjects})));
             case 'progress':
                 return React.createElement(material_ui_1.MenuItem, {primaryText: 'projects', onClick: this.props.routeToProjects});
             default: return null;
@@ -49,7 +51,17 @@ var default_1 = (function (_super) {
         render_1.togglePanel();
     };
     default_1.prototype.render = function () {
-        return (React.createElement(material_ui_1.AppBar, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: React.createElement(material_ui_1.IconButton, {onClick: this.closePanel}, React.createElement(NavigationClose, null)), iconElementRight: React.createElement(material_ui_1.IconMenu, {iconButtonElement: React.createElement(material_ui_1.IconButton, null, React.createElement(MoreVertIcon, null)), targetOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'top' }}, this.menuOptions(), window.coderoad.issuesPath ? React.createElement(material_ui_1.MenuItem, null, React.createElement("a", {href: window.coderoad.issuesPath}, "post issue")) : null, React.createElement(material_ui_1.Divider, null), React.createElement(material_ui_1.MenuItem, {primaryText: 'quit', onClick: this.props.quit}))}));
+        return (React.createElement(material_ui_1.AppBar, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: React.createElement(material_ui_1.IconButton, {onClick: this.closePanel}, 
+            React.createElement(NavigationClose, null)
+        ), iconElementRight: React.createElement(material_ui_1.IconMenu, {iconButtonElement: React.createElement(material_ui_1.IconButton, null, 
+            React.createElement(MoreVertIcon, null)
+        ), targetOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'top' }}, 
+            this.menuOptions(), 
+            window.coderoad.issuesPath ? React.createElement(material_ui_1.MenuItem, null, 
+                React.createElement("a", {href: window.coderoad.issuesPath}, "post issue")
+            ) : null, 
+            React.createElement(material_ui_1.Divider, null), 
+            React.createElement(material_ui_1.MenuItem, {primaryText: 'quit', onClick: this.props.quit}))}));
     };
     default_1 = __decorate([
         react_redux_1.connect(null, function (dispatch) {
diff --git a/lib/components/page/chapter.js b/lib/components/page/chapter.js
@@ -4,5 +4,7 @@ var _components_1 = require('../_components');
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = function (_a) {
     var chapter = _a.chapter;
-    return (React.createElement("section", {className: 'cr-chapter'}, React.createElement(_components_1.MarkdownText, {text: chapter.title})));
+    return (React.createElement("section", {className: 'cr-chapter'}, 
+        React.createElement(_components_1.MarkdownText, {text: chapter.title})
+    ));
 };
diff --git a/lib/components/page/content.js b/lib/components/page/content.js
@@ -4,7 +4,11 @@ var _components_1 = require('../_components');
 var material_ui_1 = require('material-ui');
 function default_1(_a) {
     var page = _a.page;
-    return (React.createElement(material_ui_1.Card, null, React.createElement(material_ui_1.CardHeader, {title: page.title}), React.createElement(material_ui_1.CardText, null, React.createElement(_components_1.MarkdownText, {text: page.description}))));
+    return (React.createElement(material_ui_1.Card, null, 
+        React.createElement(material_ui_1.CardHeader, {title: page.title}), 
+        React.createElement(material_ui_1.CardText, null, 
+            React.createElement(_components_1.MarkdownText, {text: page.description})
+        )));
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
diff --git a/lib/components/page/edit.js b/lib/components/page/edit.js
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = function (editPath) {
     if (editPath && window.coderoad.edit) {
         var repoPath = path.join(window.coderoad.repo, 'edit', 'master', editPath);
-        return React.createElement("a", {href: repoPath}, React.createElement(Edit, {style: { position: 'absolute', top: '10px', right: '10px' }}));
+        return React.createElement("a", {href: repoPath}, 
+            React.createElement(Edit, {style: { position: 'absolute', top: '10px', right: '10px' }})
+        );
     }
 };
diff --git a/lib/components/page/hint.js b/lib/components/page/hint.js
@@ -10,7 +10,15 @@ function hintsShown(task, hintPosition) {
 }
 exports.TaskHint = function (_a) {
     var hint = _a.hint, index = _a.index;
-    return (React.createElement(material_ui_1.ListItem, {className: 'cr-task-hint', key: 'hint' + index}, React.createElement("div", {class: 'cr-task-hint-box'}, React.createElement("span", {className: 'cr-task-hint-index'}, index + 1, "."), React.createElement("div", {className: 'cr-task-hint-description'}, React.createElement(_components_1.MarkdownText, {text: hint})))));
+    return (React.createElement(material_ui_1.ListItem, {className: 'cr-task-hint', key: 'hint' + index}, 
+        React.createElement("div", {class: 'cr-task-hint-box'}, 
+            React.createElement("span", {className: 'cr-task-hint-index'}, 
+                index + 1, 
+                "."), 
+            React.createElement("div", {className: 'cr-task-hint-description'}, 
+                React.createElement(_components_1.MarkdownText, {text: hint})
+            ))
+    ));
 };
 exports.TaskHints = function (_a) {
     var task = _a.task, hintPosition = _a.hintPosition;
diff --git a/lib/components/page/page-complete.js b/lib/components/page/page-complete.js
@@ -5,6 +5,8 @@ var _components_1 = require('../_components');
 exports.PageCompleteMessage = function (_a) {
     var page = _a.page;
     return (React.createElement("div", {className: 'cr-task-onComplete-description'}, page.completed && page.onPageComplete ?
-        React.createElement(material_ui_1.ListItem, {className: 'cr-task-onComplete', key: 'page-complete'}, React.createElement(_components_1.MarkdownText, {text: page.onPageComplete}))
+        React.createElement(material_ui_1.ListItem, {className: 'cr-task-onComplete', key: 'page-complete'}, 
+            React.createElement(_components_1.MarkdownText, {text: page.onPageComplete})
+        )
         : null));
 };
diff --git a/lib/components/page/page.js b/lib/components/page/page.js
@@ -24,9 +24,10 @@ var Incomplete = require(iconPath + 'toggle/check-box-outline-blank');
 var RunningTest = require(iconPath + 'toggle/indeterminate-check-box');
 var material_ui_2 = require('material-ui');
 var content_1 = require('./content');
+var task_1 = require('./task');
 var hint_1 = require('./hint');
 var page_complete_1 = require('./page-complete');
-var task_1 = require('./task');
+var toolbar_1 = require('./toolbar');
 var Info = require(iconPath + 'action/info');
 var InfoOutline = require(iconPath + 'action/info-outline');
 var style = {
@@ -68,14 +69,15 @@ var default_1 = (function (_super) {
         var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, runTests = _a.runTests;
         var currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
         var allComplete = taskPosition >= tasks.length;
-        return (React.createElement(material_ui_2.Paper, {style: style, zDepth: 1, className: 'cr-page'}, React.createElement(content_1.default, {page: page}), React.createElement(material_ui_1.Divider, null), React.createElement(material_ui_1.List, {subheader: 'Tasks', className: 'cr-tasks', ref: 'tasks'}, React.createElement(task_1.Tasks, {tasks: tasks, taskPosition: taskPosition, runTests: runTests}), React.createElement(hint_1.TaskHints, {task: currentTask, hintPosition: hintPosition}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement("div", {ref: 'listEnd'})), React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(material_ui_2.LinearProgress, {mode: 'determinate', value: taskProgress(taskPosition, tasks.length), style: { height: '6px' }}), React.createElement(material_ui_2.Toolbar, null, currentTask && currentTask.hints && currentTask.hints.length ?
-            React.createElement(material_ui_2.ToolbarGroup, {float: 'left'}, hintPosition <= currentTask.hints.length - 2 ?
-                React.createElement(material_ui_2.FlatButton, {className: 'cr-task-showHint', icon: React.createElement(InfoOutline, null), onClick: this.displayHint.bind(this, currentTask)})
-                : React.createElement(material_ui_2.FlatButton, {className: 'cr-task-showHint-disabled', icon: React.createElement(Info, null), disabled: true}))
-            : null, React.createElement(material_ui_2.ToolbarGroup, {float: 'right'}, allComplete ?
-            React.createElement(material_ui_2.RaisedButton, {label: 'Continue', primary: true, onClick: this.props.callNextPage})
-            :
-                React.createElement(material_ui_2.RaisedButton, {label: 'Run', secondary: true, onClick: this.props.callRunTests}))))));
+        return (React.createElement(material_ui_2.Paper, {style: style, zDepth: 1, className: 'cr-page'}, 
+            React.createElement(content_1.default, {page: page}), 
+            React.createElement(material_ui_1.Divider, null), 
+            React.createElement(material_ui_1.List, {subheader: 'Tasks', className: 'cr-page-list', ref: 'tasks'}, 
+                React.createElement(task_1.Tasks, {tasks: tasks, taskPosition: taskPosition, runTests: runTests}), 
+                React.createElement(hint_1.TaskHints, {task: currentTask, hintPosition: hintPosition}), 
+                React.createElement(page_complete_1.PageCompleteMessage, {page: page}), 
+                React.createElement("div", {ref: 'listEnd'})), 
+            React.createElement(toolbar_1.default, {tasks: tasks, taskPosition: taskPosition, hintPosition: hintPosition})));
     };
     default_1 = __decorate([
         react_redux_1.connect(null, function (dispatch, state) {
diff --git a/lib/components/page/task.js b/lib/components/page/task.js
@@ -26,11 +26,15 @@ var TaskCheckbox = function (_a) {
 };
 var TaskIndex = function (_a) {
     var index = _a.index;
-    return (React.createElement("span", {className: 'cr-task-index'}, index + 1, "."));
+    return (React.createElement("span", {className: 'cr-task-index'}, 
+        index + 1, 
+        "."));
 };
 var TaskContent = function (_a) {
     var task = _a.task;
-    return (React.createElement("div", {className: 'cr-task-description'}, React.createElement(_components_1.MarkdownText, {text: task.description})));
+    return (React.createElement("div", {className: 'cr-task-description'}, 
+        React.createElement(_components_1.MarkdownText, {text: task.description})
+    ));
 };
 exports.Task = function (_a) {
     var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, runTests = _a.runTests;
@@ -43,7 +47,10 @@ exports.Task = function (_a) {
     else if (isCurrentTask) {
         taskClass += 'isCurrentTask';
     }
-    return (React.createElement(material_ui_1.ListItem, {key: index, className: taskClass}, React.createElement(TaskCheckbox, {index: index, taskPosition: taskPosition, runTests: runTests}), React.createElement(TaskIndex, {index: index}), React.createElement(TaskContent, {task: task})));
+    return (React.createElement(material_ui_1.ListItem, {key: index, className: taskClass}, 
+        React.createElement(TaskCheckbox, {index: index, taskPosition: taskPosition, runTests: runTests}), 
+        React.createElement(TaskIndex, {index: index}), 
+        React.createElement(TaskContent, {task: task})));
 };
 exports.Tasks = function (_a) {
     var tasks = _a.tasks, taskPosition = _a.taskPosition, runTests = _a.runTests;
diff --git a/lib/components/page/toolbar.js b/lib/components/page/toolbar.js
@@ -44,26 +44,39 @@ var default_1 = (function (_super) {
         }
     };
     default_1.prototype.render = function () {
-        var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, callNextPage = _a.callNextPage, callRunTests = _a.callRunTests;
+        var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, callNextPage = _a.callNextPage, callRunTests = _a.callRunTests, showHint = _a.showHint;
         var currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
         var progress = taskProgress(taskPosition, tasks.length);
         var allComplete = taskPosition >= tasks.length;
-        return (React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(ProgressBar, {progress: progress}), React.createElement(material_ui_1.Toolbar, null, currentTask && currentTask.hints && currentTask.hints.length ?
-            React.createElement(material_ui_1.ToolbarGroup, {float: 'left'}, hintPosition <= currentTask.hints.length - 2 ?
-                React.createElement(material_ui_1.FlatButton, {className: 'cr-task-showHint', icon: React.createElement(InfoOutline, null), onClick: this.displayHint.bind(this)})
-                : React.createElement(material_ui_1.FlatButton, {className: 'cr-task-showHint-disabled', icon: React.createElement(Info, null), disabled: true}))
-            : null, React.createElement(material_ui_1.ToolbarGroup, {float: 'right'}, allComplete ?
-            React.createElement(material_ui_1.RaisedButton, {label: 'Continue', primary: true, onClick: callNextPage})
-            :
-                React.createElement(material_ui_1.RaisedButton, {label: 'Run', secondary: true, onClick: callRunTests})))));
+        return (React.createElement("section", {className: 'cr-page-toolbar'}, 
+            React.createElement(ProgressBar, {progress: progress}), 
+            React.createElement(material_ui_1.Toolbar, null, 
+                currentTask && currentTask.hints && currentTask.hints.length ?
+                    React.createElement(material_ui_1.ToolbarGroup, {float: 'left'}, hintPosition <= currentTask.hints.length - 2 ?
+                        React.createElement(material_ui_1.FlatButton, {className: 'cr-task-showHint', icon: React.createElement(InfoOutline, null), onClick: showHint.bind(this, currentTask, hintPosition)})
+                        : React.createElement(material_ui_1.FlatButton, {className: 'cr-task-showHint-disabled', icon: React.createElement(Info, null), disabled: true}))
+                    : null, 
+                React.createElement(material_ui_1.ToolbarGroup, {float: 'right'}, allComplete ?
+                    React.createElement(material_ui_1.RaisedButton, {label: 'Continue', primary: true, onClick: callNextPage})
+                    :
+                        React.createElement(material_ui_1.RaisedButton, {label: 'Run', secondary: true, onClick: callRunTests})))));
     };
     default_1 = __decorate([
         react_redux_1.connect(null, function (dispatch, state) {
             return {
                 callNextPage: function () { return dispatch(Action.nextPage()); },
                 callRunTests: function () { return dispatch(Action.runTests()); },
                 toggleLog: function () { return dispatch(Action.toggleLog()); },
-                showHint: function (newHintPos) { return dispatch(Action.setHintPosition(newHintPos)); }
+                showHint: function (task, hintPosition) {
+                    if (task && task.hints && task.hints.length) {
+                        if (hintPosition < task.hints.length - 1) {
+                            dispatch(Action.setHintPosition(hintPosition + 1));
+                        }
+                    }
+                    else {
+                        dispatch(Action.setHintPosition(-1));
+                    }
+                }
             };
         }), 
         __metadata('design:paramtypes', [])
diff --git a/lib/components/progress/progress.js b/lib/components/progress/progress.js
@@ -88,14 +88,16 @@ var style = {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = function (_a) {
     var progress = _a.progress, position = _a.position;
-    return (React.createElement(material_ui_1.Paper, {style: style, zDepth: 1, className: 'cr-progress'}, React.createElement(material_ui_1.List, {subheader: 'Progress'}, progress.chapters.map(function (chapter, chapterIndex) {
-        var isActive = chapterIndex === position.chapter;
-        return React.createElement(material_ui_1.ListItem, {primaryText: (chapterIndex + 1) + ". " + chapter.title, className: classnames({
-            'chapter': true,
-            'isActive': isActive
-        }), secondaryText: chapter.description, secondaryTextLines: chapter.description.length > 35 ? 2 : 1, initiallyOpen: chapterIndex === 0, leftIcon: chapter.completed ? React.createElement(AllCompleted, null) : null, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) {
-            var itemPosition = { chapter: chapterIndex, page: pageIndex };
-            return React.createElement(ProgressPage, {page: page, itemPosition: itemPosition, position: position});
-        })});
-    }))));
+    return (React.createElement(material_ui_1.Paper, {style: style, zDepth: 1, className: 'cr-progress'}, 
+        React.createElement(material_ui_1.List, {subheader: 'Progress'}, progress.chapters.map(function (chapter, chapterIndex) {
+            var isActive = chapterIndex === position.chapter;
+            return React.createElement(material_ui_1.ListItem, {primaryText: (chapterIndex + 1) + ". " + chapter.title, className: classnames({
+                'chapter': true,
+                'isActive': isActive
+            }), secondaryText: chapter.description, secondaryTextLines: chapter.description.length > 35 ? 2 : 1, initiallyOpen: chapterIndex === 0, leftIcon: chapter.completed ? React.createElement(AllCompleted, null) : null, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) {
+                var itemPosition = { chapter: chapterIndex, page: pageIndex };
+                return React.createElement(ProgressPage, {page: page, itemPosition: itemPosition, position: position});
+            })});
+        }))
+    ));
 };
diff --git a/lib/components/projects/projects.js b/lib/components/projects/projects.js
diff --git a/lib/components/render.js b/lib/components/render.js
diff --git a/src/components/page/_page.less b/src/components/page/_page.less
diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx
diff --git a/src/components/page/toolbar.tsx b/src/components/page/toolbar.tsx
diff --git a/styles/styles.less b/styles/styles.less
