Skip to content

Commit a7d9a23

Browse files
ShMcKShMcK
committed
convert Less to inline styles in components
1 parent d32b813 commit a7d9a23

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+259
-222
lines changed

‎lib/components/AppMenu/index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ var React = require('react');
33
var AppBar_1 = require('material-ui/AppBar');
44
var menuIconLeft_1 = require('./menuIconLeft');
55
var menuRight_1 = require('./menuRight');
6+
var styles = {
7+
zIndex: '999 !important'
8+
};
69
exports.AppMenu = function (_a) {
710
var route = _a.route;
8-
return (React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: menuIconLeft_1.menuIconLeft(), iconElementRight: menuRight_1.menuRight(route)}));
11+
return (React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', styles: styles, iconElementLeft: menuIconLeft_1.menuIconLeft(), iconElementRight: menuRight_1.menuRight(route)}));
912
};

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
"use strict";
22
var React = require('react');
33
var index_1 = require('../../index');
4+
var styles = {
5+
display: 'block',
6+
height: '33px',
7+
width: '100%',
8+
padding: '10px',
9+
textAlign: 'center',
10+
};
411
exports.Chapter = function (_a) {
512
var chapter = _a.chapter;
6-
return (React.createElement("section", {className: 'cr-chapter'}, React.createElement(index_1.Markdown, null, chapter.title)));
13+
return (React.createElement("section", {styles: styles}, React.createElement(index_1.Markdown, null, chapter.title)));
714
};

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,21 @@ var Card_1 = require('material-ui/Card');
44
var index_1 = require('../../index');
55
var HintButton_1 = require('./HintButton');
66
var help_1 = require('material-ui/svg-icons/action/help');
7+
var styles = {
8+
position: 'relative',
9+
margin: '-5px 20px',
10+
width: '360px',
11+
textAlign: 'center',
12+
zIndex: '0',
13+
};
714
exports.Hints = function (_a) {
815
var task = _a.task, hintPosition = _a.hintPosition;
916
var hints = task && task.hints ? task.hints : null;
1017
if (hintPosition < 0 || !hints || !hints.length) {
1118
return null;
1219
}
1320
var hint = hints[hintPosition];
14-
return (React.createElement(Card_1.Card, {className: 'cr-task-hints'}, React.createElement(Card_1.CardHeader, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(Card_1.CardText, {className: 'cr-task-hint', expandable: true}, React.createElement(index_1.Markdown, null, hint)), hints.length > 1
15-
? React.createElement(Card_1.CardActions, {expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.HintButton, {type: 'prev', label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length}), React.createElement(HintButton_1.HintButton, {type: 'next', label: 'Next', hintPosition: hintPosition, hintsLength: hints.length}))
21+
return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardHeader, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(Card_1.CardText, {className: 'cr-task-hint', expandable: true}, React.createElement(index_1.Markdown, null, hint)), hints.length > 1
22+
? React.createElement(Card_1.CardActions, {style: { paddingBottom: '30px !important' }, expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.HintButton, {type: 'prev', label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length}), React.createElement(HintButton_1.HintButton, {type: 'next', label: 'Next', hintPosition: hintPosition, hintsLength: hints.length}))
1623
: null));
1724
};

‎lib/components/Page/PageContent.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
var React = require('react');
33
var index_1 = require('../index');
44
var Card_1 = require('material-ui/Card');
5+
var styles = {
6+
margin: '5px'
7+
};
58
exports.PageContent = function (_a) {
69
var page = _a.page;
7-
return (React.createElement(Card_1.Card, {className: 'cr-page-content'}, React.createElement(Card_1.CardHeader, {title: page.title}), React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, page.description))));
10+
return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardHeader, {title: page.title}), React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, page.description))));
811
};

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

+9-1
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,16 @@ var Toolbar_1 = require('material-ui/Toolbar');
44
var ToggleLog_1 = require('./ToggleLog');
55
var Save_1 = require('./Save');
66
var Continue_1 = require('./Continue');
7+
var styles = {
8+
zIndex: '10000',
9+
position: 'fixed',
10+
bottom: '0',
11+
right: '0',
12+
height: '60px',
13+
width: '400px',
14+
};
715
exports.PageToolbar = function (_a) {
816
var tasks = _a.tasks, taskPosition = _a.taskPosition, children = _a.children;
9-
return (React.createElement("section", {className: 'cr-page-toolbar'}, children, React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(ToggleLog_1.ToggleLog, null)), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
17+
return (React.createElement("section", {styles: styles}, children, React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(ToggleLog_1.ToggleLog, null)), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
1018
React.createElement(Continue_1.Continue, null) : React.createElement(Save_1.Save, null)))));
1119
};

‎lib/components/Page/Tasks/Task.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,28 @@ var index_1 = require('../../index');
44
var TaskCheckbox_1 = require('./TaskCheckbox');
55
var List_1 = require('material-ui/List');
66
var colors_1 = require('material-ui/styles/colors');
7+
var styles = {
8+
margin: '5px',
9+
padding: '5px',
10+
position: 'relative'
11+
};
12+
var indexStyles = {
13+
position: 'absolute',
14+
top: '20px',
15+
left: '45px',
16+
};
17+
var descriptionStyles = {
18+
backgroundColor: 'inherit',
19+
paddingTop: '-10px',
20+
paddingLeft: '55px',
21+
fontSize: '14px',
22+
lineHeight: '1.6',
23+
};
724
function getStatus(index, taskPosition, testRun) {
825
return index < taskPosition ? colors_1.lightGreen200 : 'inherit';
926
}
1027
exports.Task = function (_a) {
1128
var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
1229
var backgroundColor = getStatus(index, taskPosition, testRun);
13-
return (React.createElement(List_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: backgroundColor }}, testRun ? React.createElement(TaskCheckbox_1.TaskCheckbox, null) : null, React.createElement("span", {className: 'cr-task-index'}, index + 1, "."), React.createElement("div", {className: 'cr-task-description'}, React.createElement(index_1.Markdown, null, task.description))));
30+
return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, { backgroundColor: backgroundColor })}, testRun ? React.createElement(TaskCheckbox_1.TaskCheckbox, null) : null, React.createElement("span", {style: indexStyles}, index + 1, "."), React.createElement("div", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, task.description))));
1431
};

‎lib/components/Page/Tasks/TaskCheckbox.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,8 @@
22
var React = require('react');
33
var colors_1 = require('material-ui/styles/colors');
44
var indeterminate_check_box_1 = require('material-ui/svg-icons/toggle/indeterminate-check-box');
5-
exports.TaskCheckbox = function () { return (React.createElement("span", {className: 'cr-task-checkbox'}, React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500}))); };
5+
var styles = {
6+
position: 'absolute',
7+
top: '15px'
8+
};
9+
exports.TaskCheckbox = function () { return (React.createElement("span", {style: styles}, React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500}))); };

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@ function visibleTasks(tasks, taskPosition) {
1111
exports.Tasks = function (_a) {
1212
var tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun, completed = _a.completed;
1313
var visTasks = visibleTasks(tasks, taskPosition);
14-
return (React.createElement(Card_1.Card, {className: 'cr-tasks', style: { backgroundColor: completed ? colors_1.lightGreen200 : 'white' }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return (React.createElement(Task_1.Task, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))));
14+
var bg = completed ? colors_1.lightGreen200 : 'white';
15+
return (React.createElement(Card_1.Card, {style: { margin: '10px 5px', backGroundColor: bg }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return (React.createElement(Task_1.Task, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))));
1516
};

‎lib/components/Page/index.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@ var Hints_1 = require('./Hints');
2020
var PageComplete_1 = require('./PageComplete');
2121
var PageToolbar_1 = require('./PageToolbar');
2222
var ProgressBar_1 = require('./ProgressBar');
23-
var pageStyle = {
23+
var styles = {
2424
height: '100%',
2525
width: '100%',
26+
position: 'relative',
27+
overflowY: 'scroll',
2628
};
2729
var Page = (function (_super) {
2830
__extends(Page, _super);
@@ -36,7 +38,7 @@ var Page = (function (_super) {
3638
var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, testRun = _a.testRun;
3739
var task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
3840
var allComplete = taskPosition >= tasks.length;
39-
return (React.createElement("section", {className: 'cr-page'}, React.createElement(PageContent_1.PageContent, __assign({}, this.props)), React.createElement(Tasks_1.Tasks, __assign({}, this.props, {completed: page.completed})), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(PageComplete_1.PageComplete, __assign({}, this.props)), React.createElement(Hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(PageToolbar_1.PageToolbar, __assign({}, this.props), React.createElement(ProgressBar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length, completed: page.completed}))));
41+
return (React.createElement("section", {style: styles}, React.createElement(PageContent_1.PageContent, __assign({}, this.props)), React.createElement(Tasks_1.Tasks, __assign({}, this.props, {completed: page.completed})), React.createElement("div", {ref: 'listEnd', style: { marginBottom: '110px' }}), React.createElement(PageToolbar_1.PageToolbar, __assign({}, this.props), React.createElement(PageComplete_1.PageComplete, __assign({}, this.props)), React.createElement(Hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(ProgressBar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length, completed: page.completed}))));
4042
};
4143
return Page;
4244
}(React.Component));

‎lib/components/Progress/ProgressChapter.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
"use strict";
22
var React = require('react');
3-
var classnames = require('classnames');
43
var List_1 = require('material-ui/List');
54
var ProgressPage_1 = require('./ProgressPage');
65
var index_1 = require('../index');
6+
var styles = {
7+
marginBottom: '0'
8+
};
9+
var descriptionStyles = {
10+
fontSize: '14px'
11+
};
712
exports.ProgressChapter = function (_a) {
813
var chapter = _a.chapter, chapterIndex = _a.chapterIndex, position = _a.position;
914
var isActive = chapterIndex === position.chapter;
10-
return (React.createElement(List_1.ListItem, {key: 'c' + chapterIndex, className: classnames({
11-
'chapter': true,
12-
'isActive': isActive
13-
}), initiallyOpen: chapterIndex === 0, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) { return (React.createElement(ProgressPage_1.ProgressPage, {key: chapterIndex + '_' + pageIndex, pageIndex: pageIndex, page: page, chapterIndex: chapterIndex, position: position})); })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {className: 'chapter-description'}, React.createElement(index_1.Markdown, null, chapter.description))));
15+
return (React.createElement(List_1.ListItem, {key: 'c' + chapterIndex, className: isActive ? 'isActive' : null, style: styles, initiallyOpen: chapterIndex === 0, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) { return (React.createElement(ProgressPage_1.ProgressPage, {key: chapterIndex + '_' + pageIndex, pageIndex: pageIndex, page: page, chapterIndex: chapterIndex, position: position})); })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, chapter.description))));
1416
};

‎lib/components/Progress/ProgressPage.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ var actions_1 = require('../../actions');
1919
var List_1 = require('material-ui/List');
2020
var progressIcon_1 = require('./progressIcon');
2121
var colors_1 = require('material-ui/styles/colors');
22+
var styles = {
23+
paddingLeft: '15px',
24+
marginTop: '0',
25+
};
2226
var ProgressPage = (function (_super) {
2327
__extends(ProgressPage, _super);
2428
function ProgressPage() {
@@ -36,7 +40,7 @@ var ProgressPage = (function (_super) {
3640
var _a = this.props, page = _a.page, position = _a.position, chapterIndex = _a.chapterIndex, pageIndex = _a.pageIndex, selectPage = _a.selectPage;
3741
var isActive = chapterIndex === position.chapter && pageIndex === position.page;
3842
var canActivate = this.canActivate(isActive);
39-
return (React.createElement(List_1.ListItem, {className: 'page', style: !canActivate ? { color: colors_1.grey400 } : {}, primaryText: (pageIndex + 1) + ". " + page.title, secondaryText: canActivate ? page.description : '', leftIcon: progressIcon_1.progressIcon(page.completed, isActive), onClick: canActivate
43+
return (React.createElement(List_1.ListItem, {style: Object.assign({}, styles, !canActivate ? { color: colors_1.grey400 } : {}), primaryText: (pageIndex + 1) + ". " + page.title, secondaryText: canActivate ? page.description : '', leftIcon: progressIcon_1.progressIcon(page.completed, isActive), onClick: canActivate
4044
? selectPage.bind(this, {
4145
chapter: chapterIndex,
4246
page: pageIndex

‎lib/components/Start/Checks/index.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ var React = require('react');
33
var SystemChecks_1 = require('./SystemChecks');
44
var SetupChecks_1 = require('./SetupChecks');
55
var InstallGuide_1 = require('./InstallGuide');
6+
var styles = {
7+
margin: '10px',
8+
padding: '40px 20px',
9+
};
610
exports.Checks = function (_a) {
711
var checks = _a.checks;
8-
return (React.createElement("div", {className: 'cr-checks'}, React.createElement(SystemChecks_1.SystemChecks, {checks: checks}), React.createElement(SetupChecks_1.SetupChecks, {checks: checks}), React.createElement(InstallGuide_1.InstallGuide, {show: checks.passed})));
12+
return (React.createElement("div", {styles: styles}, React.createElement(SystemChecks_1.SystemChecks, {checks: checks}), React.createElement(SetupChecks_1.SetupChecks, {checks: checks}), React.createElement(InstallGuide_1.InstallGuide, {show: checks.passed})));
913
};

‎lib/components/Start/Welcome/index.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,25 @@ var React = require('react');
33
var path_1 = require('path');
44
var index_1 = require('../../index');
55
var imagePath = path_1.resolve(__dirname, '../../../../', 'styles', 'coderoad.jpg');
6-
var welcomeStyle = {
6+
var styles = {
77
backgroundImage: "url(https://github.com/""%3C/span%3E%20%3Cspan%20class=pl-c1%3E+%3C/span%3E%20%3Cspan%20class=pl-s1%3EimagePath%3C/span%3E%20%3Cspan%20class=pl-c1%3E+%3C/span%3E%20%3Cspan%20class=pl-s%3E"/")",
88
backgroundRepeat: 'no-repeat',
99
height: '350px',
10+
textAlign: 'center',
11+
marginTop: '0',
12+
textShadow: '1px 1px 1px #000',
1013
};
11-
var welcomeButtonStyle = {
14+
var titleStyles = {
15+
paddingTop: '120px',
16+
color: 'white',
17+
fontSize: '2em'
18+
};
19+
var taglineStyles = {
20+
fontSize: '1.5em',
21+
};
22+
var buttonStyles = {
1223
fontSize: '1.4em',
1324
padding: '5px 2px',
1425
textShadow: '1px 1px 0px #000',
1526
};
16-
exports.Welcome = function () { return (React.createElement("div", {style: welcomeStyle}, React.createElement("div", {className: 'cr-welcome'}, React.createElement("div", {className: 'title'}, "CodeRoad"), React.createElement("div", {className: 'tagline'}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(index_1.RouteButton, {label: 'Start', route: 'tutorials', style: welcomeButtonStyle})))); };
27+
exports.Welcome = function () { return (React.createElement("div", {style: styles}, React.createElement("div", {style: titleStyles}, "CodeRoad"), React.createElement("div", {style: taglineStyles}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(index_1.RouteButton, {label: 'Start', route: 'tutorials', style: buttonStyles}))); };

‎lib/components/Start/index.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,21 @@ var _this = this;
1111
var React = require('react');
1212
var Checks_1 = require('./Checks');
1313
var Welcome_1 = require('./Welcome');
14+
var styles = {
15+
position: 'relative',
16+
height: '100%',
17+
textAlign: 'center',
18+
color: 'white',
19+
};
20+
var headerStyles = {
21+
display: 'block',
22+
height: '300px',
23+
textAlign: 'center',
24+
color: '#f8f8f8',
25+
};
1426
exports.Start = function (_a) {
1527
var checks = _a.checks;
16-
return (React.createElement("section", {className: 'cr-start'}, React.createElement("div", {className: 'cr-start-header'}, checks.passed
28+
return (React.createElement("section", {style: styles}, React.createElement("div", {style: headerStyles}, checks.passed
1729
? React.createElement(Welcome_1.Welcome, null)
1830
: React.createElement(Checks_1.Checks, __assign({}, _this.props)))));
1931
};

‎lib/components/Tutorials/index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ var Table_1 = require('material-ui/Table');
44
var LoadTutorials_1 = require('./LoadTutorials');
55
var UpdateTutorial_1 = require('./UpdateTutorial');
66
var SelectTutorial_1 = require('./SelectTutorial');
7+
var styles = {
8+
padding: '10px',
9+
};
710
exports.Tutorials = function (_a) {
811
var tutorials = _a.tutorials;
9-
return (React.createElement("div", {className: 'cr-tutorials'}, React.createElement(Table_1.Table, null, React.createElement(Table_1.TableHeader, {displaySelectAll: false, adjustForCheckbox: false}, React.createElement(Table_1.TableRow, null, React.createElement(Table_1.TableHeaderColumn, null, "Tutorial"), React.createElement(Table_1.TableHeaderColumn, null, "Version"))), React.createElement(Table_1.TableBody, {displayRowCheckbox: false}, tutorials.map(function tutorialRow(tutorial, index) {
12+
return (React.createElement("div", {style: styles}, React.createElement(Table_1.Table, null, React.createElement(Table_1.TableHeader, {displaySelectAll: false, adjustForCheckbox: false}, React.createElement(Table_1.TableRow, null, React.createElement(Table_1.TableHeaderColumn, null, "Tutorial"), React.createElement(Table_1.TableHeaderColumn, null, "Version"))), React.createElement(Table_1.TableBody, {displayRowCheckbox: false}, tutorials.map(function tutorialRow(tutorial, index) {
1013
return (React.createElement(Table_1.TableRow, {key: index}, React.createElement(Table_1.TableRowColumn, null, React.createElement(SelectTutorial_1.SelectTutorial, {tutorial: tutorial})), tutorial.latest
1114
? React.createElement(Table_1.TableRowColumn, null, tutorial.version, " ", React.createElement(UpdateTutorial_1.UpdateTutorial, {name: tutorial.name}))
1215
: React.createElement(Table_1.TableRowColumn, null, tutorial.version)));

‎src/components/AppMenu/_app-menu.less

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
.cr {
22
.cr-menu-bar {
3-
z-index: 999 !important;
4-
53
a, a:visited, a:link, a:hover {
64
color: black;
75
text-decoration: none;

‎src/components/AppMenu/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,18 @@ import AppBar from 'material-ui/AppBar';
33
import {menuIconLeft} from './menuIconLeft';
44
import {menuRight} from './menuRight';
55

6+
const styles = {
7+
zIndex: '999 !important'
8+
};
9+
610
export const AppMenu: React.StatelessComponent<{
711
route: string, quit?: any
812
}> = ({route}) => {
913
return (
1014
<AppBar
1115
title='CodeRoad'
1216
className='cr-menu-bar'
17+
styles={styles}
1318
iconElementLeft={menuIconLeft()}
1419
iconElementRight={menuRight(route)}
1520
/>

0 commit comments

Comments
 (0)