Skip to content

Commit dd7b94b

Browse files
ShMcKShMcK
committed
add dynamic stepper header
1 parent 2ca1142 commit dd7b94b

File tree

6 files changed

+58
-21
lines changed

6 files changed

+58
-21
lines changed

‎lib/components/start/dynamic-stepper.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,16 @@ var initState = {
1111
activeStep: -1,
1212
statusSteps: []
1313
};
14+
var styles = {
15+
header: {
16+
textAlign: 'center',
17+
padding: 10,
18+
fontSize: 20
19+
},
20+
actionButton: {
21+
marginRight: 8
22+
}
23+
};
1424
var default_1 = (function (_super) {
1525
__extends(default_1, _super);
1626
function default_1() {
@@ -41,7 +51,7 @@ var default_1 = (function (_super) {
4151
};
4252
};
4353
default_1.prototype.render = function () {
44-
return React.createElement(Stepper_1.default, {activeStep: this.state.activeStep, onStepHeaderTouch: this.selectStep.bind(this), updateCompletedStatus: this.updateCompletedSteps.bind(this), createIcon: this.createIcon}, this.props.children);
54+
return React.createElement("div", null, React.createElement("div", {style: styles.header}, this.props.title), React.createElement(Stepper_1.default, {activeStep: this.state.activeStep, onStepHeaderTouch: this.selectStep.bind(this), updateCompletedStatus: this.updateCompletedSteps.bind(this), createIcon: this.createIcon}, this.props.children));
4555
};
4656
return default_1;
4757
}(React.Component));

‎lib/components/start/start.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ exports.Start = function (_a) {
1111
var tutorials = _a.tutorials, warning = _a.warning;
1212
return (React.createElement(paper_1.default, {className: 'cr-start'}, React.createElement("div", {className: 'cr-start-header'}, React.createElement("span", {className: 'title'}, "CodeRoad"), React.createElement("p", {className: 'tagline'}, "Tutorials in the Editor"), React.createElement("p", {className: 'version'}, "Beta"), !warning
1313
? React.createElement(tutorials_1.default, {tutorials: tutorials})
14-
: React.createElement(setup_1.SetupGuide, {warning: warning}), React.createElement(dynamic_stepper_1.default, null, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'Node >= 0.10', actions: [
14+
: React.createElement(setup_1.SetupGuide, {warning: warning}), React.createElement(dynamic_stepper_1.default, {title: 'Dependency Checks'}, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'Node >= 0.10', actions: [
1515
React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
1616
React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
1717
]}, React.createElement("div", null, "Install a newer version of ", React.createElement("a", {href: 'https://nodejs.org'}, "Node"))), React.createElement(VerticalStep_1.default, {orderStepLabel: '2', stepLabel: 'NPM >= 3', actions: [
1818
React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
1919
React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
20-
]}, React.createElement("div", null, "Update your version of NPM.", React.createElement("br", null), "`> npm update -g npm`"))), React.createElement(dynamic_stepper_1.default, null, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'working directory', actions: [
20+
]}, React.createElement("div", null, "Update your version of NPM.", React.createElement("br", null), "`> npm update -g npm`"))), React.createElement(dynamic_stepper_1.default, {title: 'Setup Checks'}, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'working directory', actions: [
2121
React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
2222
React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
2323
]}, React.createElement("div", null, "File -> Open (a new folder)")), React.createElement(VerticalStep_1.default, {orderStepLabel: '2', stepLabel: 'package.json', actions: [

‎lib/services/setup/system-checks.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
"use strict";
2+
var command_line_1 = require('../command-line');
23
function npmVersionThreeOrLater() {
34
var minVersion = 3;
45
return new Promise(function (resolve, reject) {
5-
resolve();
6+
var threeOrLater = command_line_1.default('npm', '-v').then(function (res) { return parseInt(res, 10) >= minVersion; });
7+
if (!threeOrLater) {
8+
reject({
9+
key: 'updateNpm',
10+
title: 'Please update to NPM version 3+',
11+
text: 'Open a terminal and run:\n `npm install npm -g`',
12+
verify: 'NPM updated to version 3 or later'
13+
});
14+
}
15+
else {
16+
resolve();
17+
}
618
});
719
}
820
exports.npmVersionThreeOrLater = npmVersionThreeOrLater;

‎src/components/start/dynamic-stepper.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,19 @@ let initState = {
77
statusSteps: []
88
};
99

10+
const styles = {
11+
header: {
12+
textAlign: 'center',
13+
padding: 10,
14+
fontSize: 20
15+
},
16+
actionButton: {
17+
marginRight: 8
18+
}
19+
};
20+
1021
export default class extends React.Component<{
11-
children?: any, onStepHeaderHover?: any
22+
title?: string, children?: any
1223
}, {
1324
activeStep: number, statusSteps: boolean[]
1425
}> {
@@ -44,12 +55,17 @@ export default class extends React.Component<{
4455
};
4556
}
4657
render() {
47-
return <Stepper
58+
return <div>
59+
<div style={styles.header}>
60+
{this.props.title}
61+
</div>
62+
<Stepper
4863
activeStep={this.state.activeStep}
4964
onStepHeaderTouch={this.selectStep.bind(this)}
5065
updateCompletedStatus={this.updateCompletedSteps.bind(this)}
5166
createIcon={this.createIcon}>
5267
{this.props.children}
53-
</Stepper>;
68+
</Stepper>
69+
</div>;
5470
}
5571
}

‎src/components/start/start.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const Start = ({tutorials, warning}) => (
2020
? <Tutorials tutorials={tutorials}/>
2121
: <SetupGuide warning={warning} />}
2222

23-
<DynamicStepper>
23+
<DynamicStepper title='Dependency Checks'>
2424
<Step orderStepLabel='1'
2525
stepLabel='Node >= 0.10'
2626
actions={[
@@ -48,7 +48,7 @@ export const Start = ({tutorials, warning}) => (
4848
</Step>
4949
</DynamicStepper>
5050
51-
<DynamicStepper>
51+
<DynamicStepper title='Setup Checks'>
5252
<Step orderStepLabel='1'
5353
stepLabel='working directory'
5454
actions={[

‎src/services/setup/system-checks.ts

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@ import commandLine from '../command-line';
33
export function npmVersionThreeOrLater(): Promise<CR.SetupWarning> {
44
const minVersion = 3;
55
return new Promise((resolve, reject) => {
6-
resolve();
7-
// let threeOrLater: Promise<boolean> = commandLine('npm', '-v').then((res: string) => parseInt(res, 10) >= minVersion);
8-
// if (!threeOrLater) {
9-
// reject({
10-
// key: 'updateNpm',
11-
// title: 'Please update to NPM version 3+',
12-
// text: 'Open a terminal and run:\n `npm install npm -g`',
13-
// verify: 'NPM updated to version 3 or later'
14-
// });
15-
// } else {
16-
// resolve();
17-
// }
6+
let threeOrLater: Promise<boolean> = commandLine('npm', '-v').then((res: string) => parseInt(res, 10) >= minVersion);
7+
if (!threeOrLater) {
8+
reject({
9+
key: 'updateNpm',
10+
title: 'Please update to NPM version 3+',
11+
text: 'Open a terminal and run:\n `npm install npm -g`',
12+
verify: 'NPM updated to version 3 or later'
13+
});
14+
} else {
15+
resolve();
16+
}
1817
});
1918
}

0 commit comments

Comments
 (0)