Skip to content

Commit dba399d

Browse files
ShMcKShMcK
committed
component refactor, img load
1 parent 4c66dce commit dba399d

File tree

22 files changed

+205
-27
lines changed

22 files changed

+205
-27
lines changed

‎lib/components/_components.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ var routes_1 = require('./routes/routes');
55
exports.Routes = routes_1.default;
66
var page_1 = require('./page/page');
77
exports.Page = page_1.default;
8-
var chapter_1 = require('./page/chapter');
9-
exports.Chapter = chapter_1.default;
108
var menu_1 = require('./menu/menu');
119
exports.Menu = menu_1.default;
1210
var progress_1 = require('./progress/progress');

‎lib/components/page/chapter/chapter.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
'use strict';
2+
var React = require('react');
3+
var _components_1 = require('../_components');
4+
Object.defineProperty(exports, "__esModule", { value: true });
5+
exports.default = function (_a) {
6+
var chapter = _a.chapter;
7+
return (React.createElement("section", {className: 'cr-chapter'}, React.createElement(_components_1.MarkdownText, {text: chapter.title})));
8+
};

‎lib/components/page/complete/page-complete.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use strict";
2+
var React = require('react');
3+
var list_item_1 = require('material-ui/lib/lists/list-item');
4+
var _components_1 = require('../../_components');
5+
exports.PageCompleteMessage = function (_a) {
6+
var page = _a.page;
7+
return (React.createElement("div", {className: 'cr-page-onComplete'}, page.completed && page.onPageComplete ?
8+
React.createElement(list_item_1.default, {key: 'page-complete'}, React.createElement(_components_1.MarkdownText, {text: page.onPageComplete}))
9+
: null));
10+
};

‎lib/components/page/hint/hint.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
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;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var Action = require('../../../actions/actions');
19+
var card_1 = require('material-ui/lib/card/card');
20+
var card_actions_1 = require('material-ui/lib/card/card-actions');
21+
var card_header_1 = require('material-ui/lib/card/card-header');
22+
var card_text_1 = require('material-ui/lib/card/card-text');
23+
var flat_button_1 = require('material-ui/lib/flat-button');
24+
var _components_1 = require('../../_components');
25+
var help_1 = require('material-ui/lib/svg-icons/action/help');
26+
var default_1 = (function (_super) {
27+
__extends(default_1, _super);
28+
function default_1() {
29+
_super.apply(this, arguments);
30+
}
31+
default_1.prototype.render = function () {
32+
var _a = this.props, task = _a.task, hintPosition = _a.hintPosition, nextHint = _a.nextHint, prevHint = _a.prevHint;
33+
var hints = task && task.hints ? task.hints : null;
34+
if (hintPosition < 0 || !hints || !hints.length) {
35+
return React.createElement("div", null);
36+
}
37+
var hint = hints[hintPosition];
38+
return (React.createElement(card_1.default, {className: 'cr-task-hints'}, React.createElement(card_header_1.default, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(card_text_1.default, {className: 'cr-task-hint', expandable: true}, React.createElement(_components_1.MarkdownText, {text: hint})), React.createElement(card_actions_1.default, {expandable: true}, React.createElement(flat_button_1.default, {label: 'Previous', disabled: hintPosition < 1, onTouchTap: prevHint.bind(this, hintPosition - 1)}), React.createElement(flat_button_1.default, {label: 'Next', disabled: hintPosition > hints.length - 2, onTouchTap: nextHint.bind(this, hintPosition + 1)}))));
39+
};
40+
default_1 = __decorate([
41+
react_redux_1.connect(null, function (dispatch, state) {
42+
return {
43+
nextHint: function (position) { return dispatch(Action.setHintPosition(position)); },
44+
prevHint: function (position) { return dispatch(Action.setHintPosition(position)); }
45+
};
46+
}),
47+
__metadata('design:paramtypes', [])
48+
], default_1);
49+
return default_1;
50+
}(React.Component));
51+
Object.defineProperty(exports, "__esModule", { value: true });
52+
exports.default = default_1;

‎lib/components/page/page.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ var ReactDOM = require('react-dom');
99
var paper_1 = require('material-ui/lib/paper');
1010
var divider_1 = require('material-ui/lib/divider');
1111
var content_1 = require('./content');
12-
var task_1 = require('./task');
13-
var hint_1 = require('./hint');
14-
var page_complete_1 = require('./page-complete');
15-
var toolbar_1 = require('./toolbar');
12+
var task_1 = require('./task/task');
13+
var hint_1 = require('./hint/hint');
14+
var page_complete_1 = require('./complete/page-complete');
15+
var toolbar_1 = require('./toolbar/toolbar');
1616
var pageStyle = {
1717
height: '100%',
1818
width: '100%'

‎lib/components/page/task/task.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use strict";
2+
var React = require('react');
3+
var _components_1 = require('../../_components');
4+
var list_1 = require('material-ui/lib/lists/list');
5+
var list_item_1 = require('material-ui/lib/lists/list-item');
6+
var Subheader_1 = require('material-ui/lib/Subheader');
7+
var colors_1 = require('material-ui/lib/styles/colors');
8+
var check_box_1 = require('material-ui/lib/svg-icons/toggle/check-box');
9+
var check_box_outline_blank_1 = require('material-ui/lib/svg-icons/toggle/check-box-outline-blank');
10+
var indeterminate_check_box_1 = require('material-ui/lib/svg-icons/toggle/indeterminate-check-box');
11+
function visibleTasks(tasks, taskPosition) {
12+
return tasks.slice(0, taskPosition + 1);
13+
}
14+
var TaskCheckbox = function (_a) {
15+
var index = _a.index, taskPosition = _a.taskPosition, runTests = _a.runTests;
16+
var icon = null;
17+
if (index < taskPosition) {
18+
icon = React.createElement(check_box_1.default, {color: colors_1.green500});
19+
}
20+
else if (index === taskPosition && runTests) {
21+
icon = React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500});
22+
}
23+
else {
24+
icon = React.createElement(check_box_outline_blank_1.default, null);
25+
}
26+
return React.createElement("span", {className: 'cr-task-checkbox'}, icon);
27+
};
28+
var TaskIndex = function (_a) {
29+
var index = _a.index;
30+
return (React.createElement("span", {className: 'cr-task-index'}, index + 1, "."));
31+
};
32+
var TaskContent = function (_a) {
33+
var task = _a.task;
34+
return (React.createElement("div", {className: 'cr-task-description'}, React.createElement(_components_1.MarkdownText, {text: task.description})));
35+
};
36+
exports.Task = function (_a) {
37+
var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, runTests = _a.runTests;
38+
var isCompleted = index < taskPosition;
39+
return (React.createElement(list_item_1.default, {key: index, className: 'cr-task', style: { backgroundColor: isCompleted ? '#c8e6c9' : 'inherit' }}, React.createElement(TaskCheckbox, {index: index, taskPosition: taskPosition, runTests: runTests}), React.createElement(TaskIndex, {index: index}), React.createElement(TaskContent, {task: task})));
40+
};
41+
exports.Tasks = function (_a) {
42+
var tasks = _a.tasks, taskPosition = _a.taskPosition, runTests = _a.runTests;
43+
var visTasks = visibleTasks(tasks, taskPosition);
44+
return React.createElement(list_1.default, {className: 'cr-tasks'}, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return React.createElement(exports.Task, {key: index, task: task, taskPosition: taskPosition, index: index, runTests: runTests}); }));
45+
};

‎lib/components/page/toolbar/toolbar.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
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;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var Action = require('../../../actions/actions');
19+
var linear_progress_1 = require('material-ui/lib/linear-progress');
20+
var toolbar_1 = require('material-ui/lib/toolbar/toolbar');
21+
var toolbar_group_1 = require('material-ui/lib/toolbar/toolbar-group');
22+
var raised_button_1 = require('material-ui/lib/raised-button');
23+
var flat_button_1 = require('material-ui/lib/flat-button');
24+
var editor_1 = require('../../../atom/editor');
25+
var actions_1 = require('../../../atom/actions');
26+
var code_1 = require('material-ui/lib/svg-icons/action/code');
27+
var ProgressBar = function (_a) {
28+
var progress = _a.progress;
29+
return React.createElement(linear_progress_1.default, {mode: 'determinate', value: progress, style: { height: '10px' }});
30+
};
31+
function taskProgress(current, max) {
32+
return (current / max) * 100;
33+
}
34+
var default_1 = (function (_super) {
35+
__extends(default_1, _super);
36+
function default_1() {
37+
_super.apply(this, arguments);
38+
}
39+
default_1.prototype.render = function () {
40+
var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, callNextPage = _a.callNextPage;
41+
var progress = taskProgress(taskPosition, tasks.length);
42+
return (React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(ProgressBar, {progress: progress}), React.createElement(toolbar_1.default, null, React.createElement(toolbar_group_1.default, {float: 'left'}, React.createElement(flat_button_1.default, {icon: React.createElement(code_1.default, null), onTouchTap: actions_1.toggleDevTools})), React.createElement(toolbar_group_1.default, {float: 'right'}, taskPosition >= tasks.length ?
43+
React.createElement(raised_button_1.default, {label: 'Continue', primary: true, onTouchTap: callNextPage}) :
44+
React.createElement(flat_button_1.default, {label: 'Save', secondary: true, onTouchTap: editor_1.save})))));
45+
};
46+
default_1 = __decorate([
47+
react_redux_1.connect(null, function (dispatch, state) {
48+
return {
49+
callNextPage: function () { return dispatch(Action.nextPage()); },
50+
toggleLog: function () { return dispatch(Action.toggleLog()); }
51+
};
52+
}),
53+
__metadata('design:paramtypes', [])
54+
], default_1);
55+
return default_1;
56+
}(React.Component));
57+
Object.defineProperty(exports, "__esModule", { value: true });
58+
exports.default = default_1;

‎lib/components/start/start.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,14 @@ var checks_1 = require('./checks/checks');
1919
var react_redux_1 = require('react-redux');
2020
var store_1 = require('../../store/store');
2121
var Action = require('../../actions/actions');
22+
var path = require('path');
2223
var Welcome = (function (_super) {
2324
__extends(Welcome, _super);
2425
function Welcome() {
2526
_super.apply(this, arguments);
2627
}
2728
Welcome.prototype.render = function () {
28-
return React.createElement("div", {class: 'cr-welcome'}, React.createElement(flat_button_1.default, {label: 'Start', onTouchTap: this.props.routeToTutorials}));
29+
return React.createElement("div", {class: 'cr-welcome'}, React.createElement("img", {src: path.resolve(__dirname, '../../../', 'styles', 'coderoad.jpg')}), React.createElement(flat_button_1.default, {label: 'Start', onTouchTap: this.props.routeToTutorials}));
2930
};
3031
Welcome = __decorate([
3132
react_redux_1.connect(null, function (dispatch) {

‎src/components/_app.less

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
@import 'ui-variables';
22
@import './routes/_routes';
33
@import './menu/_menu';
4-
@import './page/_chapter';
54
@import './page/_page';
6-
@import './page/_task';
75
@import './progress/_progress';
86
@import './alert/_alert';
97
@import './tutorials/_tutorials';

‎src/components/page/_page.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@import 'task/_task';
2+
@import 'chapter/_chapter';
3+
14
.cr-page {
25
position: relative;
36
overflow-y: scroll;

‎src/components/page/_chapter.less renamed to ‎src/components/page/chapter/_chapter.less

File renamed without changes.

‎src/components/page/chapter.tsx renamed to ‎src/components/page/chapter/chapter.tsx

File renamed without changes.

‎src/components/page/page-complete.tsx renamed to ‎src/components/page/complete/page-complete.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import ListItem from 'material-ui/lib/lists/list-item';
3-
import {MarkdownText} from '../_components';
3+
import {MarkdownText} from '../../_components';
44

55
export const PageCompleteMessage = ({page}) => (
66
<div className='cr-page-onComplete'>

‎src/components/page/hint.tsx renamed to ‎src/components/page/hint/hint.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
3-
import * as Action from '../../actions/actions';
3+
import * as Action from '../../../actions/actions';
44
import Card from 'material-ui/lib/card/card';
55
import CardActions from 'material-ui/lib/card/card-actions';
66
import CardHeader from 'material-ui/lib/card/card-header';
77
import CardText from 'material-ui/lib/card/card-text';
88
import FlatButton from 'material-ui/lib/flat-button';
9-
import {MarkdownText} from '../_components';
9+
import {MarkdownText} from '../../_components';
1010
import Help from 'material-ui/lib/svg-icons/action/help';
1111

1212
@connect(null, (dispatch, state) => {

‎src/components/page/page.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import * as ReactDOM from 'react-dom';
33
import Paper from 'material-ui/lib/paper';
44
import Divider from 'material-ui/lib/divider';
55
import PageContent from './content';
6-
import {Tasks} from './task';
7-
import Hints from './hint';
8-
import {PageCompleteMessage} from './page-complete';
9-
import PageToolbar from './toolbar';
6+
import {Tasks} from './task/task';
7+
import Hints from './hint/hint';
8+
import {PageCompleteMessage} from './complete/page-complete';
9+
import PageToolbar from './toolbar/toolbar';
1010

1111
const pageStyle = {
1212
height: '100%',

‎src/components/page/_task.less renamed to ‎src/components/page/task/_task.less

File renamed without changes.

‎src/components/page/task.tsx renamed to ‎src/components/page/task/task.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import {MarkdownText} from '../_components';
2+
import {MarkdownText} from '../../_components';
33
import List from 'material-ui/lib/lists/list';
44
import ListItem from 'material-ui/lib/lists/list-item';
55
import Subheader from 'material-ui/lib/Subheader';

‎src/components/page/toolbar.tsx renamed to ‎src/components/page/toolbar/toolbar.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
3-
import * as Action from '../../actions/actions';
3+
import * as Action from '../../../actions/actions';
44
import LinearProgress from 'material-ui/lib/linear-progress';
55
import Toolbar from 'material-ui/lib/toolbar/toolbar';
66
import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group';
77
import RaisedButton from 'material-ui/lib/raised-button';
88
import FlatButton from 'material-ui/lib/flat-button';
9-
import {save} from '../../atom/editor';
10-
import {toggleDevTools} from '../../atom/actions';
11-
import {store} from '../../store/store';
9+
import {save} from '../../../atom/editor';
10+
import {toggleDevTools} from '../../../atom/actions';
11+
import {store} from '../../../store/store';
1212
import Code from 'material-ui/lib/svg-icons/action/code';
1313

1414
const ProgressBar = ({progress}) => <LinearProgress mode='determinate'

‎src/components/start/_start.less

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
&-header {
77
display: block;
88
height: 500px;
9-
background-color: lightblue;
109
padding-top: 100px;
10+
text-align: center;
11+
color: #f8f8f8;
1112
.title {
1213
color: white;
1314
font-size: 2em;

‎src/components/start/start.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import Checks from './checks/checks';
44
import {connect} from 'react-redux';
55
import {store} from '../../store/store';
66
import * as Action from '../../actions/actions';
7+
import * as path from 'path';
8+
9+
const headerImg = path.resolve(__dirname, '../../../', 'styles', 'coderoad.jpg');
710

811
@connect(null, (dispatch) => {
912
return {
@@ -15,6 +18,7 @@ class Welcome extends React.Component<{
1518
}, {}> {
1619
render() {
1720
return <div class='cr-welcome'>
21+
<img src={headerImg} />
1822
<FlatButton label='Start' onTouchTap={this.props.routeToTutorials} />
1923
</div>;
2024
}

‎styles/coderoad.jpg

25.7 KB
Loading

‎tsconfig.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -104,14 +104,14 @@
104104
"src/components/final-page/final-page.tsx",
105105
"src/components/markdown/markdown.tsx",
106106
"src/components/menu/menu.tsx",
107-
"src/components/page/chapter.tsx",
107+
"src/components/page/chapter/chapter.tsx",
108+
"src/components/page/complete/page-complete.tsx",
108109
"src/components/page/content.tsx",
109110
"src/components/page/edit.tsx",
110-
"src/components/page/hint.tsx",
111-
"src/components/page/page-complete.tsx",
111+
"src/components/page/hint/hint.tsx",
112112
"src/components/page/page.tsx",
113-
"src/components/page/task.tsx",
114-
"src/components/page/toolbar.tsx",
113+
"src/components/page/task/task.tsx",
114+
"src/components/page/toolbar/toolbar.tsx",
115115
"src/components/progress/progress.tsx",
116116
"src/components/render.tsx",
117117
"src/components/routes/routes.tsx",

0 commit comments

Comments
 (0)