Skip to content

Commit dc0d391

Browse files
ShMcKShMcK
committed
update components for material-ui 0.15
1 parent d047d06 commit dc0d391

File tree

8 files changed

+33
-52
lines changed

8 files changed

+33
-52
lines changed

‎lib/components/page/hint.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@ var card_header_1 = require('material-ui/lib/card/card-header');
2222
var card_text_1 = require('material-ui/lib/card/card-text');
2323
var flat_button_1 = require('material-ui/lib/flat-button');
2424
var _components_1 = require('../_components');
25-
var iconPath = 'material-ui/lib/svg-icons/';
26-
var Help = require(iconPath + 'action/help');
25+
var help_1 = require('material-ui/lib/svg-icons/action/help');
2726
var default_1 = (function (_super) {
2827
__extends(default_1, _super);
2928
function default_1() {
@@ -36,7 +35,7 @@ var default_1 = (function (_super) {
3635
return React.createElement("div", null);
3736
}
3837
var hint = hints[hintPosition];
39-
return (React.createElement(card_1.default, {className: 'cr-task-hints'}, React.createElement(card_header_1.default, {title: 'Hints', avatar: React.createElement(Help, 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)}))));
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)}))));
4039
};
4140
default_1 = __decorate([
4241
react_redux_1.connect(null, function (dispatch, state) {

‎lib/components/page/task.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,24 @@ var _components_1 = require('../_components');
44
var list_1 = require('material-ui/lib/lists/list');
55
var list_item_1 = require('material-ui/lib/lists/list-item');
66
var Subheader_1 = require('material-ui/lib/Subheader');
7-
var Colors = require('material-ui/lib/styles/colors');
8-
var iconPath = 'material-ui/lib/svg-icons/';
9-
var Complete = require(iconPath + 'toggle/check-box');
10-
var Incomplete = require(iconPath + 'toggle/check-box-outline-blank');
11-
var RunningTest = require(iconPath + 'toggle/indeterminate-check-box');
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');
1211
function visibleTasks(tasks, taskPosition) {
1312
return tasks.slice(0, taskPosition + 1);
1413
}
1514
var TaskCheckbox = function (_a) {
1615
var index = _a.index, taskPosition = _a.taskPosition, runTests = _a.runTests;
1716
var icon = null;
1817
if (index < taskPosition) {
19-
icon = React.createElement(Complete, {color: Colors.green500});
18+
icon = React.createElement(check_box_1.default, {color: colors_1.green500});
2019
}
2120
else if (index === taskPosition && runTests) {
22-
icon = React.createElement(RunningTest, {color: Colors.orange500});
21+
icon = React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500});
2322
}
2423
else {
25-
icon = React.createElement(Incomplete, null);
24+
icon = React.createElement(check_box_outline_blank_1.default, null);
2625
}
2726
return React.createElement("span", {className: 'cr-task-checkbox'}, icon);
2827
};

‎lib/components/page/toolbar.js

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,10 @@ var Action = require('../../actions/actions');
1919
var linear_progress_1 = require('material-ui/lib/linear-progress');
2020
var toolbar_1 = require('material-ui/lib/toolbar/toolbar');
2121
var toolbar_group_1 = require('material-ui/lib/toolbar/toolbar-group');
22-
var raised_button_1 = require('material-ui/lib/raised-button');
2322
var flat_button_1 = require('material-ui/lib/flat-button');
2423
var editor_1 = require('../../atom/editor');
2524
var actions_1 = require('../../atom/actions');
26-
var Code = require('material-ui/lib/svg-icons/action/code');
25+
var code_1 = require('material-ui/lib/svg-icons/action/code');
2726
var ProgressBar = function (_a) {
2827
var progress = _a.progress;
2928
return React.createElement(linear_progress_1.default, {mode: 'determinate', value: progress, style: { height: '10px' }});
@@ -36,19 +35,12 @@ var default_1 = (function (_super) {
3635
function default_1() {
3736
_super.apply(this, arguments);
3837
}
39-
default_1.prototype.getButton = function () {
40-
var _a = this.props, callNextPage = _a.callNextPage, showHint = _a.showHint, taskPosition = _a.taskPosition, tasks = _a.tasks;
41-
switch (true) {
42-
case taskPosition >= tasks.length:
43-
return React.createElement(raised_button_1.default, {label: 'Continue', primary: true, onTouchTap: callNextPage});
44-
default:
45-
return React.createElement(raised_button_1.default, {label: 'Save', secondary: true, onTouchTap: editor_1.save});
46-
}
47-
};
4838
default_1.prototype.render = function () {
49-
var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition;
39+
var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, callNextPage = _a.callNextPage;
5040
var progress = taskProgress(taskPosition, tasks.length);
51-
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, null), onTouchTap: actions_1.toggleDevTools})), React.createElement(toolbar_group_1.default, {float: 'right'}, this.getButton()))));
41+
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 ?
42+
React.createElement(flat_button_1.default, {label: 'Continue', primary: true, onTouchTap: callNextPage}) :
43+
React.createElement(flat_button_1.default, {label: 'Save', secondary: true, onTouchTap: editor_1.save})))));
5244
};
5345
default_1 = __decorate([
5446
react_redux_1.connect(null, function (dispatch, state) {

‎lib/components/progress/progress.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ var ProgressPage = (function (_super) {
3333
}
3434
ProgressPage.prototype.getProgressIcon = function (completed, current) {
3535
if (completed) {
36-
return React.createElement(check_box_outline_blank_1.default, null);
36+
return React.createElement(check_box_1.default, null);
3737
}
3838
else if (current) {
3939
return React.createElement(play_circle_filled_1.default, {color: colors_1.pink500});
4040
}
4141
else {
42-
return React.createElement(check_box_1.default, null);
42+
return React.createElement(check_box_outline_blank_1.default, null);
4343
}
4444
};
4545
ProgressPage.prototype.canActivate = function (isActive, itemPosition, position) {
@@ -59,7 +59,7 @@ var ProgressPage = (function (_super) {
5959
return React.createElement(list_item_1.default, {className: classnames({
6060
'page': true,
6161
'page-isDisabled': !this.canActivate(isActive, itemPosition, position)
62-
}), primaryText: (itemPosition.page + 1) + ". " + page.title, secondaryText: page.description, leftIcon: this.getProgressIcon(page.completed, isActive), onTouchTap: this.canActivate(isActive, itemPosition, position) ? this.props.selectPage.bind(this, itemPosition) : null});
62+
}), primaryText: (itemPosition.page + 1) + ". " + page.title, secondaryText: page.description, leftIcon: this.getProgressIcon(page.completed, isActive), onClick: this.canActivate(isActive, itemPosition, position) ? this.props.selectPage.bind(this, itemPosition) : null});
6363
};
6464
;
6565
ProgressPage = __decorate([

‎src/components/page/hint.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ 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';
99
import {MarkdownText} from '../_components';
10-
const iconPath = 'material-ui/lib/svg-icons/';
11-
let Help = require(iconPath + 'action/help');
10+
import Help from 'material-ui/lib/svg-icons/action/help';
1211

1312
@connect(null, (dispatch, state) => {
1413
return {

‎src/components/page/task.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ 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';
6-
import * as Colors from 'material-ui/lib/styles/colors';
7-
const iconPath = 'material-ui/lib/svg-icons/';
8-
let Complete = require(iconPath + 'toggle/check-box');
9-
let Incomplete = require(iconPath + 'toggle/check-box-outline-blank');
10-
let RunningTest = require(iconPath + 'toggle/indeterminate-check-box');
6+
import {green500, orange500} from 'material-ui/lib/styles/colors';
7+
import CheckBox from 'material-ui/lib/svg-icons/toggle/check-box';
8+
import CheckBoxOutlineBlank from 'material-ui/lib/svg-icons/toggle/check-box-outline-blank';
9+
import IndeterminateCheckBox from 'material-ui/lib/svg-icons/toggle/indeterminate-check-box';
1110

1211
function visibleTasks(tasks: CR.Task[], taskPosition: number) {
1312
return tasks.slice(0, taskPosition + 1);
@@ -16,12 +15,12 @@ function visibleTasks(tasks: CR.Task[], taskPosition: number) {
1615
const TaskCheckbox = ({index, taskPosition, runTests}) => {
1716
let icon = null;
1817
if (index < taskPosition) {
19-
icon = <Complete color={Colors.green500} />;
18+
icon = <CheckBox color={green500} />;
2019
} else if (index === taskPosition && runTests) {
2120
// TODO: loading animation inside of checkbox
22-
icon = <RunningTest color={Colors.orange500} />;
21+
icon = <IndeterminateCheckBox color={orange500} />;
2322
} else {
24-
icon = <Incomplete />;
23+
icon = <CheckBoxOutlineBlank />;
2524
}
2625
return <span className='cr-task-checkbox'>{icon}</span>;
2726
};

‎src/components/page/toolbar.tsx

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import FlatButton from 'material-ui/lib/flat-button';
99
import {save} from '../../atom/editor';
1010
import {toggleDevTools} from '../../atom/actions';
1111
import {store} from '../../_base';
12-
const Code = require('material-ui/lib/svg-icons/action/code');
12+
import Code from 'material-ui/lib/svg-icons/action/code';
1313

1414
const ProgressBar = ({progress}) => <LinearProgress mode='determinate'
1515
value={progress} style={{height: '10px'}}/>;
@@ -28,17 +28,8 @@ export default class extends React.Component<{
2828
tasks: CR.Task[], taskPosition: number,
2929
callNextPage?: () => void, callNextTask?: () => void, showHint?: (pos: number) => void
3030
}, {}> {
31-
getButton() {
32-
const {callNextPage, showHint, taskPosition, tasks} = this.props;
33-
switch (true) {
34-
case taskPosition >= tasks.length:
35-
return <RaisedButton label='Continue' primary={true} onTouchTap={callNextPage} />;
36-
default:
37-
return <RaisedButton label='Save' secondary={true} onTouchTap={save} />;
38-
}
39-
}
4031
render() {
41-
const {tasks, taskPosition} = this.props;
32+
const {tasks, taskPosition, callNextPage} = this.props;
4233
const progress: number = taskProgress(taskPosition, tasks.length);
4334

4435
return (
@@ -53,7 +44,9 @@ export default class extends React.Component<{
5344

5445
<ToolbarGroup float='right'>
5546
{/* add log here */}
56-
{this.getButton()}
47+
{taskPosition >= tasks.length ?
48+
<FlatButton label='Continue' primary={true} onTouchTap={callNextPage} /> :
49+
<FlatButton label='Save' secondary={true} onTouchTap={save} />}
5750
</ToolbarGroup>
5851

5952
</Toolbar>

‎src/components/progress/progress.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ import CheckBoxOutlineBlank from 'material-ui/lib/svg-icons/toggle/check-box-out
2525
class ProgressPage extends React.Component<{page: CR.Page, itemPosition: CR.Position, position: CR.Position, selectPage?: () => void}, {}> {
2626
getProgressIcon(completed, current) {
2727
if (completed) {
28-
return <CheckBoxOutlineBlank />;
28+
return <CheckBox />;
2929
} else if (current) {
3030
return <PlayCircleFilled color={pink500} />;
3131
} else {
32-
return <CheckBox />;
32+
return <CheckBoxOutlineBlank />;
3333
}
3434
}
3535
canActivate(isActive, itemPosition, position) {
@@ -53,7 +53,7 @@ class ProgressPage extends React.Component<{page: CR.Page, itemPosition: CR.Posi
5353
primaryText={`${itemPosition.page + 1}. ${page.title}`}
5454
secondaryText={page.description}
5555
leftIcon={this.getProgressIcon(page.completed, isActive)}
56-
onTouchTap={this.canActivate(isActive, itemPosition, position) ? this.props.selectPage.bind(this, itemPosition) : null }
56+
onClick={this.canActivate(isActive, itemPosition, position) ? this.props.selectPage.bind(this, itemPosition) : null }
5757
/>;
5858
};
5959
};

0 commit comments

Comments
 (0)