Skip to content

Commit 5d6f39f

Browse files
ShMcKShMcK
committed
refactor and style page buttons
1 parent 27ad6ee commit 5d6f39f

File tree

13 files changed

+151
-24
lines changed

13 files changed

+151
-24
lines changed

‎lib/components/Page/PageToolbar/Continue/index.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var RaisedButton_1 = require('material-ui/RaisedButton');
19+
var actions_1 = require('../../../../actions');
20+
var styles = {
21+
border: '0px',
22+
boxShadow: 'none',
23+
backgroundColor: 'inherit',
24+
position: 'relative',
25+
top: '10px',
26+
};
27+
var Continue = (function (_super) {
28+
__extends(Continue, _super);
29+
function Continue() {
30+
_super.apply(this, arguments);
31+
}
32+
Continue.prototype.render = function () {
33+
return (React.createElement(RaisedButton_1.default, {style: styles, label: 'Continue', primary: true, onTouchTap: this.props.callNextPage}));
34+
};
35+
Continue = __decorate([
36+
react_redux_1.connect(null, function (dispatch) { return ({
37+
callNextPage: function () { return dispatch(actions_1.pageNext()); }
38+
}); }),
39+
__metadata('design:paramtypes', [])
40+
], Continue);
41+
return Continue;
42+
}(React.Component));
43+
Object.defineProperty(exports, "__esModule", { value: true });
44+
exports.default = Continue;

‎lib/components/Page/PageToolbar/Save/index.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var RaisedButton_1 = require('material-ui/RaisedButton');
19+
var actions_1 = require('../../../../actions');
20+
var styles = {
21+
border: '0px',
22+
boxShadow: 'none',
23+
backgroundColor: 'inherit',
24+
position: 'relative',
25+
top: '10px',
26+
};
27+
var Save = (function (_super) {
28+
__extends(Save, _super);
29+
function Save() {
30+
_super.apply(this, arguments);
31+
}
32+
Save.prototype.render = function () {
33+
return (React.createElement(RaisedButton_1.default, {label: 'Save', style: styles, secondary: true, onTouchTap: this.props.save}));
34+
};
35+
Save = __decorate([
36+
react_redux_1.connect(null, function (dispatch) { return ({
37+
save: function () { return dispatch(actions_1.editorSave()); },
38+
}); }),
39+
__metadata('design:paramtypes', [])
40+
], Save);
41+
return Save;
42+
}(React.Component));
43+
Object.defineProperty(exports, "__esModule", { value: true });
44+
exports.default = Save;

‎lib/components/Page/PageToolbar/ToggleDevTools/index.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var FlatButton_1 = require('material-ui/FlatButton');
19+
var code_1 = require('material-ui/svg-icons/action/code');
20+
var actions_1 = require('../../../../actions');
21+
var styles = {
22+
position: 'relative',
23+
top: '10px',
24+
};
25+
var ToggleDevTools = (function (_super) {
26+
__extends(ToggleDevTools, _super);
27+
function ToggleDevTools() {
28+
_super.apply(this, arguments);
29+
}
30+
ToggleDevTools.prototype.render = function () {
31+
return (React.createElement(FlatButton_1.default, {style: styles, icon: React.createElement(code_1.default, null), onTouchTap: this.props.toggle}));
32+
};
33+
;
34+
ToggleDevTools = __decorate([
35+
react_redux_1.connect(null, function (dispatch) { return ({
36+
toggle: function () { return dispatch(actions_1.editorDevToolsToggle()); },
37+
}); }),
38+
__metadata('design:paramtypes', [])
39+
], ToggleDevTools);
40+
return ToggleDevTools;
41+
}(React.Component));
42+
Object.defineProperty(exports, "__esModule", { value: true });
43+
exports.default = ToggleDevTools;

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
"use strict";
22
var React = require('react');
33
var Toolbar_1 = require('material-ui/Toolbar');
4-
var index_1 = require('../../index');
5-
var Continue_1 = require('../Continue');
4+
var Save_1 = require('./Save');
5+
var Continue_1 = require('./Continue');
6+
var ToggleDevTools_1 = require('./ToggleDevTools');
67
var styles = {
78
zIndex: '5',
89
position: 'relative',
@@ -14,8 +15,8 @@ var styles = {
1415
};
1516
exports.PageToolbar = function (_a) {
1617
var tasks = _a.tasks, taskPosition = _a.taskPosition, children = _a.children;
17-
return (React.createElement("section", {styles: styles}, children, React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(index_1.ToggleDevTools, null)), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
18-
React.createElement(Continue_1.default, null) : React.createElement(index_1.Save, null)))));
18+
return (React.createElement("section", {styles: styles}, children, React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(ToggleDevTools_1.default, null)), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
19+
React.createElement(Continue_1.default, null) : React.createElement(Save_1.default, null)))));
1920
};
2021
Object.defineProperty(exports, "__esModule", { value: true });
2122
exports.default = exports.PageToolbar;

‎lib/components/index.js

-4
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,3 @@ var ContentCard_1 = require('./common/ContentCard');
2323
exports.ContentCard = ContentCard_1.default;
2424
var RouteButton_1 = require('./common/RouteButton');
2525
exports.RouteButton = RouteButton_1.default;
26-
var Save_1 = require('./common/Save');
27-
exports.Save = Save_1.default;
28-
var ToggleDevTools_1 = require('./common/ToggleDevTools');
29-
exports.ToggleDevTools = ToggleDevTools_1.default;

‎lib/modules/page/actions.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use strict";
22
var types_1 = require('./types');
33
var actions_1 = require('../../actions');
4-
var selectors_1 = require('../../selectors');
54
function pageNext() {
65
return function (dispatch, getState) {
76
var pagePosition = getState().pagePosition;
@@ -18,7 +17,7 @@ function pageSet(pagePosition) {
1817
return dispatch(actions_1.routeSet('final'));
1918
}
2019
dispatch(actions_1.hintPositionSet(0));
21-
var tasks = selectors_1.tasksSelector(state) || [];
20+
var tasks = tutorial.pages[pagePosition].tasks || [];
2221
dispatch({
2322
type: types_1.PAGE_SET, payload: { pagePosition: pagePosition, tutorial: tutorial, progress: progress, tasks: tasks }
2423
});

‎src/components/Page/Continue/index.tsx renamed to ‎src/components/Page/PageToolbar/Continue/index.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
33
import RaisedButton from 'material-ui/RaisedButton';
4-
import {pageNext} from '../../../actions';
4+
import {pageNext} from '../../../../actions';
55

66
const styles = {
7-
zIndex: '10000',
87
border: '0px',
98
boxShadow: 'none',
109
backgroundColor: 'inherit',
@@ -21,7 +20,7 @@ export default class Continue extends React.Component<{
2120
render() {
2221
return (
2322
<RaisedButton
24-
style={{styles}}
23+
style={styles}
2524
label='Continue'
2625
primary={true}
2726
onTouchTap={this.props.callNextPage}

‎src/components/common/Save.tsx renamed to ‎src/components/Page/PageToolbar/Save/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
33
import RaisedButton from 'material-ui/RaisedButton';
4-
import {editorSave} from '../../actions';
4+
import {editorSave} from '../../../../actions';
55

66
const styles = {
77
border: '0px',

‎src/components/common/ToggleDevTools.tsx renamed to ‎src/components/Page/PageToolbar/ToggleDevTools/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
3-
import {editorDevToolsToggle} from '../../actions';
43
import FlatButton from 'material-ui/FlatButton';
54
import Code from 'material-ui/svg-icons/action/code';
5+
import {editorDevToolsToggle} from '../../../../actions';
66

77
const styles = {
88
position: 'relative',

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as React from 'react';
22
import {Toolbar, ToolbarGroup} from 'material-ui/Toolbar';
3-
import {ToggleDevTools, Save} from '../../index';
4-
import Continue from '../Continue';
3+
import Save from './Save';
4+
import Continue from './Continue';
5+
import ToggleDevTools from './ToggleDevTools';
56

67
const styles = {
78
zIndex: '5',

‎src/components/index.ts

-2
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,3 @@ export {default as Tutorials} from './Tutorials';
1111
export {default as Markdown} from './common/Markdown';
1212
export {default as ContentCard} from './common/ContentCard';
1313
export {default as RouteButton} from './common/RouteButton';
14-
export {default as Save} from './common/Save';
15-
export {default as ToggleDevTools} from './common/ToggleDevTools';

‎src/modules/page/actions.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@ export function pageSet(pagePosition = 0): ReduxThunk.ThunkInterface {
1818
return dispatch(routeSet('final'));
1919
}
2020
dispatch(hintPositionSet(0));
21-
// create absolute paths for 'task-tests'
22-
const tasks = tasksSelector(state) || [];
21+
22+
// sets tasks to new pagePosition
23+
const tasks = tutorial.pages[pagePosition].tasks || [];
24+
2325
dispatch({
2426
type: PAGE_SET, payload: { pagePosition, tutorial, progress, tasks }
2527
});

‎tsconfig.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -94,15 +94,15 @@
9494
"src/components/common/ContentCard.tsx",
9595
"src/components/common/Markdown.tsx",
9696
"src/components/common/RouteButton.tsx",
97-
"src/components/common/Save.tsx",
98-
"src/components/common/ToggleDevTools.tsx",
9997
"src/components/FinalPage/index.tsx",
100-
"src/components/Page/Continue/index.tsx",
10198
"src/components/Page/EditPage/index.tsx",
10299
"src/components/Page/Hints/HintButton.tsx",
103100
"src/components/Page/Hints/index.tsx",
104101
"src/components/Page/index.tsx",
102+
"src/components/Page/PageToolbar/Continue/index.tsx",
105103
"src/components/Page/PageToolbar/index.tsx",
104+
"src/components/Page/PageToolbar/Save/index.tsx",
105+
"src/components/Page/PageToolbar/ToggleDevTools/index.tsx",
106106
"src/components/Page/ProgressBar/index.tsx",
107107
"src/components/Page/Task/index.tsx",
108108
"src/components/Page/Task/taskCheckbox.tsx",

0 commit comments

Comments
 (0)