Skip to content

Commit 0563867

Browse files
ShMcKShMcK
committed
use table with start component & mu-0.15
1 parent e5f6d01 commit 0563867

File tree

6 files changed

+47
-29
lines changed

6 files changed

+47
-29
lines changed

‎lib/components/page/toolbar.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ 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');
2223
var flat_button_1 = require('material-ui/lib/flat-button');
2324
var editor_1 = require('../../atom/editor');
2425
var actions_1 = require('../../atom/actions');
@@ -39,8 +40,8 @@ var default_1 = (function (_super) {
3940
var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, callNextPage = _a.callNextPage;
4041
var progress = taskProgress(taskPosition, tasks.length);
4142
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})))));
43+
React.createElement(raised_button_1.default, {label: 'Continue', primary: true, onTouchTap: callNextPage}) :
44+
React.createElement(raised_button_1.default, {label: 'Save', secondary: true, onTouchTap: editor_1.save})))));
4445
};
4546
default_1 = __decorate([
4647
react_redux_1.connect(null, function (dispatch, state) {

‎lib/components/progress/progress.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ var list_item_1 = require('material-ui/lib/lists/list-item');
2222
var Subheader_1 = require('material-ui/lib/Subheader');
2323
var _components_1 = require('../_components');
2424
var classnames = require('classnames');
25-
var colors_1 = require('material-ui/lib/styles/colors');
25+
var Colors = require('material-ui/lib/styles/colors');
2626
var check_box_1 = require('material-ui/lib/svg-icons/toggle/check-box');
2727
var play_circle_filled_1 = require('material-ui/lib/svg-icons/av/play-circle-filled');
2828
var check_box_outline_blank_1 = require('material-ui/lib/svg-icons/toggle/check-box-outline-blank');
@@ -36,7 +36,7 @@ var ProgressPage = (function (_super) {
3636
return React.createElement(check_box_1.default, null);
3737
}
3838
else if (current) {
39-
return React.createElement(play_circle_filled_1.default, {color: colors_1.pink500});
39+
return React.createElement(play_circle_filled_1.default, {color: Colors.pink500});
4040
}
4141
else {
4242
return React.createElement(check_box_outline_blank_1.default, null);

‎lib/components/start/tutorials.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
1414
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
1515
};
1616
var React = require('react');
17-
var list_1 = require('material-ui/lib/lists/list');
18-
var list_item_1 = require('material-ui/lib/lists/list-item');
1917
var raised_button_1 = require('material-ui/lib/raised-button');
20-
var Subheader_1 = require('material-ui/lib/Subheader');
18+
var table_1 = require('material-ui/lib/table/table');
19+
var table_header_column_1 = require('material-ui/lib/table/table-header-column');
20+
var table_row_1 = require('material-ui/lib/table/table-row');
21+
var table_header_1 = require('material-ui/lib/table/table-header');
22+
var table_row_column_1 = require('material-ui/lib/table/table-row-column');
23+
var table_body_1 = require('material-ui/lib/table/table-body');
2124
var react_redux_1 = require('react-redux');
2225
var Action = require('../../actions/actions');
2326
var default_1 = (function (_super) {
@@ -37,9 +40,9 @@ var default_1 = (function (_super) {
3740
default_1.prototype.render = function () {
3841
var _this = this;
3942
var _a = this.props, tutorials = _a.tutorials, loadTutorials = _a.loadTutorials, selectProject = _a.selectProject, toggleAlert = _a.toggleAlert;
40-
return (React.createElement("div", {className: 'cr-tutorials'}, React.createElement(list_1.default, null, React.createElement(Subheader_1.default, null, "Tutorials"), tutorials.map(function (tutorial, index) {
41-
return (React.createElement(list_item_1.default, {key: index, primaryText: _this.trim(tutorial), onClick: selectProject.bind(_this, tutorial)}));
42-
})), React.createElement("br", null), React.createElement(raised_button_1.default, {label: 'Load Tutorials', secondary: true, onTouchTap: loadTutorials})));
43+
return (React.createElement("div", {className: 'cr-tutorials'}, React.createElement(table_1.default, null, React.createElement(table_header_1.default, {displaySelectAll: false, adjustForCheckbox: false}, React.createElement(table_row_1.default, null, React.createElement(table_header_column_1.default, null, "Tutorial"), React.createElement(table_header_column_1.default, null, "Version"))), React.createElement(table_body_1.default, {displayRowCheckbox: false}, tutorials.map(function (tutorial, index) {
44+
return (React.createElement(table_row_1.default, null, React.createElement(table_row_column_1.default, {onClick: selectProject.bind(_this, tutorial)}, _this.trim(tutorial)), React.createElement(table_row_column_1.default, null, "v1.0.0"), "/>"));
45+
}))), React.createElement("br", null), React.createElement(raised_button_1.default, {label: 'Load Tutorials', secondary: true, onTouchTap: loadTutorials})));
4346
};
4447
default_1 = __decorate([
4548
react_redux_1.connect(null, function (dispatch) {

‎src/components/page/toolbar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ export default class extends React.Component<{
4343
</ToolbarGroup>
4444

4545
<ToolbarGroup float='right'>
46-
{/* add log here */}
4746
{taskPosition >= tasks.length ?
48-
<FlatButton label='Continue' primary={true} onTouchTap={callNextPage} /> :
49-
<FlatButton label='Save' secondary={true} onTouchTap={save} />}
47+
<RaisedButton label='Continue' primary={true} onTouchTap={callNextPage} /> :
48+
<RaisedButton label='Save' secondary={true} onTouchTap={save} />
49+
}
5050
</ToolbarGroup>
5151

5252
</Toolbar>

‎src/components/progress/progress.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import ListItem from 'material-ui/lib/lists/list-item';
88
import Subheader from 'material-ui/lib/Subheader';
99
import {MarkdownText} from '../_components';
1010
import * as classnames from 'classnames';
11-
import {pink500} from 'material-ui/lib/styles/colors';
11+
import * as Colors from 'material-ui/lib/styles/colors';
1212
import CheckBox from 'material-ui/lib/svg-icons/toggle/check-box';
1313
import PlayCircleFilled from 'material-ui/lib/svg-icons/av/play-circle-filled';
1414
import CheckBoxOutlineBlank from 'material-ui/lib/svg-icons/toggle/check-box-outline-blank';
@@ -27,7 +27,7 @@ class ProgressPage extends React.Component<{page: CR.Page, itemPosition: CR.Posi
2727
if (completed) {
2828
return <CheckBox />;
2929
} else if (current) {
30-
return <PlayCircleFilled color={pink500} />;
30+
return <PlayCircleFilled color={Colors.pink500} />;
3131
} else {
3232
return <CheckBoxOutlineBlank />;
3333
}

‎src/components/start/tutorials.tsx

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import * as React from 'react';
2-
import List from 'material-ui/lib/lists/list';
3-
import ListItem from 'material-ui/lib/lists/list-item';
42
import RaisedButton from 'material-ui/lib/raised-button';
5-
import Subheader from 'material-ui/lib/Subheader';
3+
import Table from 'material-ui/lib/table/table';
4+
import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
5+
import TableRow from 'material-ui/lib/table/table-row';
6+
import TableHeader from 'material-ui/lib/table/table-header';
7+
import TableRowColumn from 'material-ui/lib/table/table-row-column';
8+
import TableBody from 'material-ui/lib/table/table-body';
69
import {MarkdownText} from '../_components';
710
import {connect} from 'react-redux';
811
import * as Action from '../../actions/actions';
@@ -38,18 +41,29 @@ export default class extends React.Component<{
3841
const {tutorials, loadTutorials, selectProject, toggleAlert} = this.props;
3942
return (
4043
<div className='cr-tutorials'>
41-
<List>
42-
<Subheader>Tutorials</Subheader>
43-
{/* List of Tutorials */}
44-
{tutorials.map((tutorial: string, index) => {
45-
return (
46-
<ListItem
47-
key={index}
48-
primaryText={this.trim(tutorial)}
49-
onClick={selectProject.bind(this, tutorial)}/>);
50-
})}
44+
<Table>
45+
<TableHeader
46+
displaySelectAll={false}
47+
adjustForCheckbox={false}>
48+
<TableRow>
49+
<TableHeaderColumn>Tutorial</TableHeaderColumn>
50+
<TableHeaderColumn>Version</TableHeaderColumn>
51+
</TableRow>
52+
</TableHeader>
53+
<TableBody displayRowCheckbox={false}>
5154

52-
</List>
55+
{tutorials.map((tutorial: string, index) => {
56+
return (
57+
<TableRow>
58+
<TableRowColumn onClick={selectProject.bind(this, tutorial)}>{this.trim(tutorial)}</TableRowColumn>
59+
<TableRowColumn>v1.0.0</TableRowColumn>
60+
/>
61+
</TableRow>
62+
);
63+
})
64+
}
65+
</TableBody>
66+
</Table>
5367

5468
<br />
5569
<RaisedButton label='Load Tutorials' secondary={true} onTouchTap={loadTutorials} />

0 commit comments

Comments
 (0)