Skip to content

Commit 7f9c118

Browse files
ShMcKShMcK
committed
step buttons & refactor publish step, fix page backgrounds
1 parent 3f8ae96 commit 7f9c118

File tree

12 files changed

+168
-108
lines changed

12 files changed

+168
-108
lines changed

‎lib/components/Config/index.js‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -78,24 +78,26 @@ var TutorialConfig = (function (_super) {
7878
};
7979
TutorialConfig.prototype.render = function () {
8080
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
81-
return (React.createElement(Card_1.Card, {style: styles.card},
82-
React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}),
83-
React.createElement("form", {onSubmit: handleSubmit(this.onSubmit.bind(this))},
84-
React.createElement(redux_form_1.Field, {id: 'name', name: 'name', component: textField_1.default.bind(null, {
85-
hintText: 'coderoad-tutorial-name',
86-
}), tabIndex: '1'}),
87-
React.createElement(redux_form_1.Field, {name: 'language', component: selectField_1.default.bind(null, {
88-
children: languageItems_1.default(),
89-
floatingLabelText: 'language',
90-
id: 'language',
91-
}), tabIndex: '2'}),
92-
React.createElement(redux_form_1.Field, {name: 'runner', component: selectField_1.default.bind(null, {
93-
children: runnerItems_1.default('JS'),
94-
floatingLabelText: 'Test Runner',
95-
id: 'runner',
96-
}), tabIndex: '3'}),
97-
React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: invalid}),
98-
React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, disabled: invalid, onTouchTap: this.routeToPage.bind(this)}))));
81+
return (React.createElement("section", {className: 'cr-page'},
82+
React.createElement(Card_1.Card, {style: styles.card},
83+
React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}),
84+
React.createElement("form", {onSubmit: handleSubmit(this.onSubmit.bind(this))},
85+
React.createElement(redux_form_1.Field, {id: 'name', name: 'name', component: textField_1.default.bind(null, {
86+
hintText: 'coderoad-tutorial-name',
87+
}), tabIndex: '1'}),
88+
React.createElement(redux_form_1.Field, {name: 'language', component: selectField_1.default.bind(null, {
89+
children: languageItems_1.default(),
90+
floatingLabelText: 'language',
91+
id: 'language',
92+
}), tabIndex: '2'}),
93+
React.createElement(redux_form_1.Field, {name: 'runner', component: selectField_1.default.bind(null, {
94+
children: runnerItems_1.default('JS'),
95+
floatingLabelText: 'Test Runner',
96+
id: 'runner',
97+
}), tabIndex: '3'}),
98+
React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: invalid}),
99+
React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, disabled: invalid, onTouchTap: this.routeToPage.bind(this)})))
100+
));
99101
};
100102
TutorialConfig = __decorate([
101103
react_redux_1.connect(function (state) { return ({

‎lib/components/Publish/PublishStep.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use strict";
2+
var React = require('react');
3+
var Stepper_1 = require('material-ui/Stepper');
4+
var error_1 = require('material-ui/svg-icons/alert/error');
5+
var warning_1 = require('material-ui/svg-icons/alert/warning');
6+
var colors_1 = require('material-ui/styles/colors');
7+
var styles = {
8+
stepContent: {
9+
textAlign: 'left',
10+
},
11+
};
12+
function publishStep(index, type, field, click) {
13+
var icon;
14+
if (type === 'error') {
15+
icon = React.createElement(error_1.default, {color: colors_1.pink500});
16+
}
17+
else if (type === 'warning') {
18+
icon = React.createElement(warning_1.default, {color: colors_1.amber500});
19+
}
20+
else {
21+
throw 'Invalid PublishError icon';
22+
}
23+
return (React.createElement(Stepper_1.Step, {key: index, completed: false},
24+
React.createElement(Stepper_1.StepButton, {icon: icon, onClick: click}, field.name),
25+
React.createElement(Stepper_1.StepContent, null,
26+
React.createElement("p", {style: styles.stepContent},
27+
"\"",
28+
field.name,
29+
"\" ",
30+
field.msg),
31+
React.createElement("p", null, "Example:"),
32+
React.createElement("pre", null,
33+
React.createElement("code", null,
34+
"\"",
35+
field.name,
36+
"\": \"",
37+
field.example,
38+
"\"")
39+
))));
40+
}
41+
Object.defineProperty(exports, "__esModule", { value: true });
42+
exports.default = publishStep;
43+
;

‎lib/components/Publish/index.js‎

Lines changed: 15 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,8 @@ var Card_1 = require('material-ui/Card');
1919
var RaisedButton_1 = require('material-ui/RaisedButton');
2020
var actions_1 = require('../../actions');
2121
var TopPanel_1 = require('../TopPanel');
22-
var error_1 = require('material-ui/svg-icons/alert/error');
23-
var warning_1 = require('material-ui/svg-icons/alert/warning');
24-
var colors_1 = require('material-ui/styles/colors');
2522
var Stepper_1 = require('material-ui/Stepper');
23+
var publishStep_1 = require('./publishStep');
2624
var styles = {
2725
card: {
2826
margin: '10px',
@@ -53,42 +51,23 @@ var TutorialPublish = (function (_super) {
5351
this.props.pjLoad();
5452
this.props.validatePj();
5553
};
54+
TutorialPublish.prototype.selectStep = function (index) {
55+
this.setState({
56+
stepIndex: index
57+
});
58+
};
5659
TutorialPublish.prototype.render = function () {
5760
var _this = this;
5861
var validation = this.props.validation;
59-
return (React.createElement(Card_1.Card, {style: styles.card},
60-
React.createElement(Card_1.CardHeader, {title: 'Tutorial Info'}),
61-
React.createElement(Stepper_1.Stepper, {activeStep: this.state.stepIndex, linear: false, orientation: 'vertical'},
62-
validation.errors.map(function (field, index) { return (React.createElement(Stepper_1.Step, {key: index, completed: false},
63-
React.createElement(Stepper_1.StepButton, {icon: React.createElement(error_1.default, {color: colors_1.pink500}), onClick: function () { return _this.setState({
64-
stepIndex: index
65-
}); }}, field.name),
66-
React.createElement(Stepper_1.StepContent, null,
67-
React.createElement("p", null, "Example:"),
68-
React.createElement("pre", null,
69-
React.createElement("code", null,
70-
"\"",
71-
field.name,
72-
"\": \"",
73-
field.example,
74-
"\"")
75-
)))); }),
76-
validation.warnings.map(function (field, index) { return (React.createElement(Stepper_1.Step, {key: index, completed: false},
77-
React.createElement(Stepper_1.StepButton, {icon: React.createElement(warning_1.default, {color: colors_1.amber500}), onClick: function () { return _this.setState({
78-
stepIndex: index + validation.errors.length
79-
}); }}, field.name),
80-
React.createElement(Stepper_1.StepContent, null,
81-
React.createElement("p", null, "Example:"),
82-
React.createElement("pre", null,
83-
React.createElement("code", null,
84-
"\"",
85-
field.name,
86-
"\": \"",
87-
field.example,
88-
"\"")
89-
)))); })),
90-
React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Validate', primary: true, onTouchTap: this.validate.bind(this)}),
91-
React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Publish', secondary: true, disabled: validation.errors.length > 0, onTouchTap: function () { return alert('Publish not yet implemented'); }})));
62+
return (React.createElement("section", {className: 'cr-page'},
63+
React.createElement(Card_1.Card, {style: styles.card},
64+
React.createElement(Card_1.CardHeader, {title: 'Tutorial Errors & Warnings'}),
65+
React.createElement(Stepper_1.Stepper, {activeStep: this.state.stepIndex, linear: false, orientation: 'vertical'},
66+
validation.errors.map(function (field, index) { return publishStep_1.default(index, 'error', field, _this.selectStep.bind(_this, index)); }),
67+
validation.warnings.map(function (field, index) { return publishStep_1.default(index + validation.errors.length, 'warning', field, _this.selectStep.bind(_this, index + validation.errors.length)); })),
68+
React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Validate', primary: true, onTouchTap: this.validate.bind(this)}),
69+
React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Publish', secondary: true, disabled: validation.errors.length > 0, onTouchTap: function () { return alert('Publish not yet implemented'); }}))
70+
));
9271
};
9372
TutorialPublish = __decorate([
9473
react_redux_1.connect(function (state) { return ({

‎lib/components/SidePanel/SidePanel.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,13 @@ var react_redux_1 = require('react-redux');
1818
var index_1 = require('../index');
1919
var Routes_1 = require('../Routes');
2020
var Drawer_1 = require('material-ui/Drawer');
21+
var styles = {
22+
drawer: {
23+
height: '100%',
24+
width: '100%',
25+
overflowY: 'scroll',
26+
},
27+
};
2128
var SidePanel = (function (_super) {
2229
__extends(SidePanel, _super);
2330
function SidePanel() {
@@ -26,7 +33,7 @@ var SidePanel = (function (_super) {
2633
SidePanel.prototype.render = function () {
2734
var windowToggle = this.props.windowToggle;
2835
return (React.createElement("section", null,
29-
React.createElement(Drawer_1.default, {width: 400, openSecondary: true, open: windowToggle},
36+
React.createElement(Drawer_1.default, {width: 400, openSecondary: true, open: windowToggle, style: styles.drawer},
3037
React.createElement("div", {className: 'cr-bg'},
3138
React.createElement(index_1.AppMenu, null),
3239
React.createElement(Routes_1.default, null))

‎lib/components/common/ContentCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ var React = require('react');
33
var index_1 = require('../index');
44
var Card_1 = require('material-ui/Card');
55
var styles = {
6-
margin: '5px'
6+
margin: '5px',
77
};
88
var ContentCard = function (_a) {
99
var title = _a.title, content = _a.content, open = _a.open;

‎src/components/Config/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ class TutorialConfig extends React.Component <{
8585
render() {
8686
const {pristine, submitting, handleSubmit, invalid} = this.props;
8787
return (
88+
<section className='cr-page'>
8889
<Card style={styles.card}>
8990
<CardHeader
9091
title='Tutorial Configuration'
@@ -137,6 +138,7 @@ class TutorialConfig extends React.Component <{
137138

138139
</form>
139140
</Card>
141+
</section>
140142
);
141143
}
142144
}

‎src/components/Publish/index.tsx‎

Lines changed: 21 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
3-
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
4-
import MenuItem from 'material-ui/MenuItem';
53
import {Card, CardHeader} from 'material-ui/Card';
64
import RaisedButton from 'material-ui/RaisedButton';
75
import {validatePj, pjSave, pjLoad, routeSet, editorPjOpen} from '../../actions';
86
import {topElement} from '../TopPanel';
9-
import textField from '../Form/textField';
10-
import ErrorIcon from 'material-ui/svg-icons/alert/error';
11-
import WarningIcon from 'material-ui/svg-icons/alert/warning';
12-
import {pink500, amber500} from 'material-ui/styles/colors';
13-
import {Stepper, Step, StepButton, StepContent} from 'material-ui/Stepper';
14-
import {Markdown} from '../index';
7+
import {Stepper} from 'material-ui/Stepper';
8+
import publishStep from './publishStep';
159

1610
const styles = {
1711
card: {
@@ -53,58 +47,35 @@ export default class TutorialPublish extends React.Component<{
5347
this.props.pjLoad();
5448
this.props.validatePj();
5549
}
50+
selectStep(index) {
51+
this.setState({
52+
stepIndex: index
53+
});
54+
}
5655
render() {
5756
const {validation} = this.props;
5857
return (
58+
<section className='cr-page'>
5959
<Card style={styles.card}>
6060
<CardHeader
61-
title='Tutorial Info'
61+
title='Tutorial Errors & Warnings'
6262
/>
6363
<Stepper
6464
activeStep={this.state.stepIndex}
6565
linear={false}
6666
orientation='vertical'
6767
>
68-
{validation.errors.map((field, index) => (
69-
<Step
70-
key={index}
71-
completed={false}
72-
>
73-
<StepButton
74-
icon={<ErrorIcon color={pink500} />}
75-
onClick={() => this.setState({
76-
stepIndex: index
77-
})}>
78-
{field.name}
79-
</StepButton>
80-
<StepContent>
81-
<p>Example:</p>
82-
<pre><code>
83-
"{field.name}": "{field.example}"
84-
</code></pre>
85-
</StepContent>
86-
</Step>
87-
))}
88-
{validation.warnings.map((field, index) => (
89-
<Step
90-
key={index}
91-
completed={false}
92-
>
93-
<StepButton
94-
icon={<WarningIcon color={amber500}/>}
95-
onClick={() => this.setState({
96-
stepIndex: index + validation.errors.length
97-
})}>
98-
{field.name}
99-
</StepButton>
100-
<StepContent>
101-
<p>Example:</p>
102-
<pre><code>
103-
"{field.name}": "{field.example}"
104-
</code></pre>
105-
</StepContent>
106-
</Step>
107-
))}
68+
{/* Errors */}
69+
{validation.errors.map((field, index) => publishStep(
70+
index, 'error', field, this.selectStep.bind(this, index))
71+
)}
72+
73+
{/* Warnings */}
74+
{validation.warnings.map((field, index) => publishStep(
75+
index + validation.errors.length, 'warning', field,
76+
this.selectStep.bind(this, index + validation.errors.length))
77+
)}
78+
10879
</Stepper>
10980
<RaisedButton
11081
style={styles.button}
@@ -120,6 +91,7 @@ export default class TutorialPublish extends React.Component<{
12091
onTouchTap={() => alert('Publish not yet implemented')}
12192
/>
12293
</Card>
94+
</section>
12395
);
12496
}
12597
}

‎src/components/Publish/publishStep.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as React from 'react';
2+
import {Step, StepButton, StepContent} from 'material-ui/Stepper';
3+
import ErrorIcon from 'material-ui/svg-icons/alert/error';
4+
import WarningIcon from 'material-ui/svg-icons/alert/warning';
5+
import {pink500, amber500} from 'material-ui/styles/colors';
6+
7+
const styles = {
8+
stepContent: {
9+
textAlign: 'left',
10+
},
11+
};
12+
13+
export default function publishStep(
14+
index: number, type: string, field: Validation.Error, click: () => any
15+
) {
16+
let icon;
17+
if (type === 'error') {
18+
icon = <ErrorIcon color={pink500} />;
19+
} else if (type === 'warning') {
20+
icon = <WarningIcon color={amber500}/>;
21+
} else {
22+
throw 'Invalid PublishError icon';
23+
}
24+
25+
return (
26+
<Step
27+
key={index}
28+
completed={false}
29+
>
30+
<StepButton
31+
icon={icon}
32+
onClick={click}>
33+
{field.name}
34+
</StepButton>
35+
<StepContent>
36+
<p style={styles.stepContent}>"{field.name}" {field.msg}</p>
37+
<p>Example:</p>
38+
<pre><code>
39+
"{field.name}": "{field.example}"
40+
</code></pre>
41+
</StepContent>
42+
</Step>
43+
);
44+
};

‎src/components/SidePanel/SidePanel.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@ import Routes from '../Routes';
55
import Drawer from 'material-ui/Drawer';
66
import Menu from 'material-ui/svg-icons/navigation/menu';
77

8+
const styles = {
9+
drawer: {
10+
height: '100%',
11+
width: '100%',
12+
overflowY: 'scroll',
13+
},
14+
};
15+
816
@connect(state => ({
917
windowToggle: state.windowToggle,
1018
}))
@@ -19,6 +27,7 @@ export default class SidePanel extends React.Component<{
1927
width={400}
2028
openSecondary={true}
2129
open={windowToggle}
30+
style={styles.drawer}
2231
>
2332
<div className='cr-bg'>
2433
<AppMenu />

‎src/components/common/ContentCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {Markdown} from '../index';
33
import {Card, CardHeader, CardText} from 'material-ui/Card';
44

55
const styles = {
6-
margin: '5px'
6+
margin: '5px',
77
};
88

99
const ContentCard: React.StatelessComponent<{

0 commit comments

Comments
 (0)