Skip to content

Commit 70bd389

Browse files
ShMcKShMcK
committed
style fixes, move tasksComplete into tasks component
1 parent 9755237 commit 70bd389

File tree

15 files changed

+149
-158
lines changed

15 files changed

+149
-158
lines changed

‎lib/components/Page/PageComplete/index.js

-24
This file was deleted.

‎lib/components/Page/ProgressBar/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ var style = {
55
height: '10px'
66
};
77
exports.ProgressBar = function (_a) {
8-
var taskPosition = _a.taskPosition, taskCount = _a.taskCount, completed = _a.completed;
9-
var progress = (taskPosition / taskCount) * 100;
8+
var taskPosition = _a.taskPosition, taskLength = _a.taskLength, completed = _a.completed;
9+
var progress = (taskPosition / taskLength) * 100;
1010
if (completed) {
1111
return null;
1212
}

‎lib/components/Page/Task/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,6 @@ function getStatus(index, taskPosition, testRun) {
2727
exports.Task = function (_a) {
2828
var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
2929
var backgroundColor = getStatus(index, taskPosition, testRun);
30-
return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, { backgroundColor: backgroundColor })}, taskCheckbox_1.taskCheckbox(testRun), React.createElement("span", {style: indexStyles}, index + 1, "."), React.createElement("div", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, task.description))));
30+
var currentTask = taskPosition === index;
31+
return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, { backgroundColor: backgroundColor })}, taskCheckbox_1.taskCheckbox(currentTask, testRun), React.createElement("span", {style: indexStyles}, index + 1, "."), React.createElement("div", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, task.description))));
3132
};

‎lib/components/Page/Task/taskCheckbox.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ var styles = {
66
position: 'absolute',
77
top: '15px'
88
};
9-
function taskCheckbox(testRun) {
10-
if (!testRun) {
9+
function taskCheckbox(currentTask, testRun) {
10+
if (!currentTask || !testRun) {
1111
return null;
1212
}
1313
return (React.createElement("span", {style: styles}, React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500})));

‎lib/components/Page/Tasks/index.js

+24-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,35 @@
11
"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+
};
27
var React = require('react');
8+
var ReactDOM = require('react-dom');
39
var List_1 = require('material-ui/List');
410
var Card_1 = require('material-ui/Card');
511
var Subheader_1 = require('material-ui/Subheader');
612
var Task_1 = require('../Task');
713
var colors_1 = require('material-ui/styles/colors');
14+
var TasksComplete_1 = require('../TasksComplete');
815
function visibleTasks(tasks, taskPosition) {
916
return tasks.slice(0, taskPosition + 1);
1017
}
1118
var margin = '10px 5px';
12-
exports.Tasks = function (_a) {
13-
var tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun, completed = _a.completed;
14-
var visTasks = visibleTasks(tasks, taskPosition);
15-
var backgroundColor = completed ? colors_1.lightGreen200 : 'white';
16-
return (React.createElement(Card_1.Card, {style: { backgroundColor: backgroundColor, margin: margin }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return (React.createElement(Task_1.Task, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))));
17-
};
19+
var Tasks = (function (_super) {
20+
__extends(Tasks, _super);
21+
function Tasks() {
22+
_super.apply(this, arguments);
23+
}
24+
Tasks.prototype.componentDidUpdate = function () {
25+
ReactDOM.findDOMNode(this.refs.listEnd).scrollIntoView();
26+
};
27+
Tasks.prototype.render = function () {
28+
var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun, completed = _a.completed, page = _a.page;
29+
var visTasks = visibleTasks(tasks, taskPosition);
30+
var backgroundColor = completed ? colors_1.lightGreen200 : 'white';
31+
return (React.createElement("div", null, React.createElement(Card_1.Card, {style: { backgroundColor: backgroundColor, margin: margin }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return (React.createElement(Task_1.Task, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))), React.createElement(TasksComplete_1.TasksComplete, {page: page}), React.createElement("div", {ref: 'listEnd'})));
32+
};
33+
return Tasks;
34+
}(React.Component));
35+
exports.Tasks = Tasks;

‎lib/components/Page/TasksComplete/index.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
"use strict";
2+
var React = require('react');
3+
var Card_1 = require('material-ui/Card');
4+
var index_1 = require('../../index');
5+
var colors_1 = require('material-ui/styles/colors');
6+
var styles = {
7+
backgroundColor: colors_1.cyan500,
8+
margin: '10px 5px',
9+
};
10+
var textStyles = {
11+
color: colors_1.grey100,
12+
fontSize: '1.1em'
13+
};
14+
exports.TasksComplete = function (_a) {
15+
var page = _a.page;
16+
if (!page.completed || !page.onPageComplete) {
17+
return null;
18+
}
19+
return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, {style: textStyles}, page.onPageComplete))));
20+
};

‎lib/components/Page/index.js

+6-32
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,8 @@
11
"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 __assign = (this && this.__assign) || Object.assign || function(t) {
8-
for (var s, i = 1, n = arguments.length; i < n; i++) {
9-
s = arguments[i];
10-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11-
t[p] = s[p];
12-
}
13-
return t;
14-
};
152
var React = require('react');
16-
var ReactDOM = require('react-dom');
173
var PageContent_1 = require('./PageContent');
184
var Tasks_1 = require('./Tasks');
195
var Hints_1 = require('./Hints');
20-
var PageComplete_1 = require('./PageComplete');
216
var PageToolbar_1 = require('./PageToolbar');
227
var ProgressBar_1 = require('./ProgressBar');
238
var styles = {
@@ -26,20 +11,9 @@ var styles = {
2611
position: 'relative',
2712
overflowY: 'scroll',
2813
};
29-
var Page = (function (_super) {
30-
__extends(Page, _super);
31-
function Page() {
32-
_super.apply(this, arguments);
33-
}
34-
Page.prototype.componentDidUpdate = function () {
35-
ReactDOM.findDOMNode(this.refs.listEnd).scrollIntoView();
36-
};
37-
Page.prototype.render = function () {
38-
var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, testRun = _a.testRun;
39-
var task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
40-
var allComplete = taskPosition >= tasks.length;
41-
return (React.createElement("section", {style: styles}, React.createElement(PageContent_1.PageContent, __assign({}, this.props)), React.createElement(Tasks_1.Tasks, __assign({}, this.props, {completed: page.completed})), React.createElement("div", {ref: 'listEnd', style: { marginBottom: '110px' }}), React.createElement(PageToolbar_1.PageToolbar, __assign({}, this.props), React.createElement(PageComplete_1.PageComplete, __assign({}, this.props)), React.createElement(Hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(ProgressBar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length, completed: page.completed}))));
42-
};
43-
return Page;
44-
}(React.Component));
45-
exports.Page = Page;
14+
exports.Page = function (_a) {
15+
var page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, testRun = _a.testRun;
16+
var task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
17+
var completed = page.completed;
18+
return (React.createElement("section", {style: styles}, React.createElement(PageContent_1.PageContent, {page: page}), React.createElement(Tasks_1.Tasks, {tasks: tasks, taskPosition: taskPosition, testRun: testRun, completed: completed, page: page}), React.createElement(PageToolbar_1.PageToolbar, {tasks: tasks, taskPosition: taskPosition}, React.createElement(Hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(ProgressBar_1.ProgressBar, {taskLength: tasks.length, taskPosition: taskPosition, completed: completed}))));
19+
};

‎src/components/Page/PageComplete/index.tsx

-34
This file was deleted.

‎src/components/Page/ProgressBar/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ const style = {
66
};
77

88
export const ProgressBar: React.StatelessComponent<{
9-
taskPosition: number, taskCount: number, completed: boolean
10-
}> = ({taskPosition, taskCount, completed}) => {
11-
const progress: number = (taskPosition / taskCount) * 100;
9+
taskPosition: number, taskLength: number, completed: boolean
10+
}> = ({taskPosition, taskLength, completed}) => {
11+
const progress: number = (taskPosition / taskLength) * 100;
1212
if (completed) {
1313
return null;
1414
}

‎src/components/Page/Task/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@ export const Task: React.StatelessComponent<{
3434
task: CR.Task, taskPosition: number, index: number, testRun: boolean
3535
}> = ({task, taskPosition, index, testRun}) => {
3636
const backgroundColor = getStatus(index, taskPosition, testRun);
37+
const currentTask = taskPosition === index;
3738
return (
3839
<ListItem
3940
key={index}
4041
style={Object.assign({}, styles, {backgroundColor})}
4142
>
42-
{taskCheckbox(testRun)}
43+
{taskCheckbox(currentTask, testRun)}
4344
<span style={indexStyles}>{index + 1}.</span>
4445
<div style={descriptionStyles}>
4546
<Markdown >{task.description}</Markdown>

‎src/components/Page/Task/taskCheckbox.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ const styles = {
99
top: '15px'
1010
};
1111

12-
export function taskCheckbox(testRun) {
13-
if (!testRun) { return null; }
12+
export function taskCheckbox(currentTask: number, testRun: boolean) {
13+
if (!currentTask || !testRun) { return null; }
1414
return (
1515
<span style={styles}>
1616
<IndeterminateCheckBox color={orange500} />

‎src/components/Page/Tasks/index.tsx

+41-24
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,54 @@
11
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
23
import {List} from 'material-ui/List';
34
import {Card} from 'material-ui/Card';
45
import Subheader from 'material-ui/Subheader';
56
import {Task} from '../Task';
67
import {lightGreen200} from 'material-ui/styles/colors';
8+
import {TasksComplete} from '../TasksComplete';
79

810
function visibleTasks(tasks: CR.Task[], taskPosition: number): CR.Task[] {
911
return tasks.slice(0, taskPosition + 1);
1012
}
1113

1214
const margin = '10px 5px';
1315

14-
export const Tasks: React.StatelessComponent<{
15-
tasks: CR.Task[], taskPosition: number,
16-
testRun: boolean, completed: boolean
17-
}> = ({tasks, taskPosition, testRun, completed}) => {
18-
const visTasks = visibleTasks(tasks, taskPosition);
19-
const backgroundColor = completed ? lightGreen200 : 'white';
20-
return (
21-
<Card
22-
style={{backgroundColor, margin}}>
23-
<List>
24-
<Subheader>Tasks</Subheader>
25-
{visTasks.map((task: CR.Task, index: number) => (
26-
<Task
27-
key={index}
28-
index={index}
29-
task={task}
30-
taskPosition={taskPosition}
31-
testRun={testRun}
32-
/>)
33-
)}
34-
</List>
35-
</Card>
36-
);
37-
};
16+
export class Tasks extends React.Component<{
17+
tasks: CR.Task[], taskPosition: number,
18+
testRun: boolean, completed: boolean, page: CR.Page
19+
}, {}> {
20+
refs: {
21+
[key: string]: (Element);
22+
listEnd: Element;
23+
};
24+
componentDidUpdate() {
25+
ReactDOM.findDOMNode<HTMLElement>(this.refs.listEnd).scrollIntoView();
26+
}
27+
render() {
28+
const {tasks, taskPosition, testRun, completed, page} = this.props;
29+
const visTasks = visibleTasks(tasks, taskPosition);
30+
const backgroundColor = completed ? lightGreen200 : 'white';
31+
return (
32+
<div>
33+
<Card style={{backgroundColor, margin}}>
34+
<List>
35+
<Subheader>Tasks</Subheader>
36+
{visTasks.map((task: CR.Task, index: number) => (
37+
<Task
38+
key={index}
39+
index={index}
40+
task={task}
41+
taskPosition={taskPosition}
42+
testRun={testRun}
43+
/>)
44+
)}
45+
</List>
46+
</Card>
47+
48+
<TasksComplete page={page} />
49+
50+
<div ref='listEnd' />
51+
</div>
52+
);
53+
}
54+
}

‎src/components/Page/TasksComplete/index.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react';
2+
import {Card, CardText} from 'material-ui/Card';
3+
import {Markdown} from '../../index';
4+
import {cyan500, grey100} from 'material-ui/styles/colors';
5+
6+
const styles = {
7+
backgroundColor: cyan500,
8+
margin: '10px 5px',
9+
};
10+
11+
const textStyles = {
12+
color: grey100,
13+
fontSize: '1.1em'
14+
};
15+
16+
export const TasksComplete: React.StatelessComponent<{
17+
page: CR.Page
18+
}> = ({page}) => {
19+
if (!page.completed || !page.onPageComplete) { return null; }
20+
return (
21+
<Card style={styles}>
22+
<CardText>
23+
<Markdown style={textStyles}>{page.onPageComplete}</Markdown>
24+
</CardText>
25+
</Card>
26+
);
27+
};

0 commit comments

Comments
 (0)