Skip to content

Commit 49137bd

Browse files
ShMcKShMcK
committed
component style improvements
1 parent 996a73e commit 49137bd

File tree

25 files changed

+65
-73
lines changed

25 files changed

+65
-73
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
1414
- update tutorial button
1515
- remove 'lodash' dependency
1616
- attach hints to toolbar
17-
- style fix for Atom v1.8
17+
- style fixes for Atom v1.8
1818

1919
## [0.6.0] - 2016-04-01
2020
- fixes

‎lib/components/App.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ var App = (function (_super) {
3535
_super.apply(this, arguments);
3636
}
3737
App.prototype.render = function () {
38-
console.log(this.props.store);
3938
return (React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(index_1.AppMenu, __assign({}, this.props.store)), React.createElement(Routes_1.Routes, __assign({}, this.props.store)), React.createElement(index_1.Alert, __assign({}, this.props.store))));
4039
};
4140
App = __decorate([

‎lib/components/Markdown/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,6 @@ function formatText(text) {
2424
}
2525
;
2626
exports.Markdown = function (_a) {
27-
var children = _a.children;
28-
return (React.createElement("span", {className: 'cr-markdown', dangerouslySetInnerHTML: { __html: formatText(children) }}));
27+
var style = _a.style, children = _a.children;
28+
return (React.createElement("span", {className: 'cr-markdown', style: style ? style : null, dangerouslySetInnerHTML: { __html: formatText(children) }}));
2929
};

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,15 @@ var styles = {
1010
padding: '10px 15px 30px',
1111
right: '0px',
1212
margin: '0',
13-
width: '400px',
13+
width: '400px'
14+
};
15+
var textStyles = {
16+
color: colors_1.grey100,
17+
fontSize: '1.1em'
1418
};
1519
exports.PageComplete = function (_a) {
1620
var page = _a.page;
1721
return (React.createElement("div", {className: 'cr-page-onComplete'}, page.completed && page.onPageComplete
18-
? React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, page.onPageComplete)))
22+
? React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, {style: textStyles}, page.onPageComplete)))
1923
: null));
2024
};

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
11
"use strict";
22
var React = require('react');
33
var index_1 = require('../../index');
4+
var TaskCheckbox_1 = require('./TaskCheckbox');
45
var List_1 = require('material-ui/List');
56
var colors_1 = require('material-ui/styles/colors');
67
function getStatus(index, taskPosition, testRun) {
7-
switch (true) {
8-
case index < taskPosition:
9-
return colors_1.lightGreen200;
10-
case testRun:
11-
return colors_1.orange200;
12-
default:
13-
return 'inherit';
14-
}
8+
return index < taskPosition ? colors_1.lightGreen200 : 'inherit';
159
}
1610
exports.Task = function (_a) {
1711
var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
1812
var backgroundColor = getStatus(index, taskPosition, testRun);
19-
return (React.createElement(List_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: backgroundColor }}, React.createElement("span", {className: 'cr-task-index'}, index + 1, "."), React.createElement("div", {className: 'cr-task-description'}, React.createElement(index_1.Markdown, null, task.description))));
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))));
2014
};

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
"use strict";
2+
var React = require('react');
3+
var colors_1 = require('material-ui/styles/colors');
4+
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}))); };

‎lib/components/Progress/ProgressChapter.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ var React = require('react');
33
var classnames = require('classnames');
44
var List_1 = require('material-ui/List');
55
var ProgressPage_1 = require('./ProgressPage');
6-
var progressIcon_1 = require('./progressIcon');
76
var index_1 = require('../index');
87
exports.ProgressChapter = function (_a) {
98
var chapter = _a.chapter, chapterIndex = _a.chapterIndex, position = _a.position;
109
var isActive = chapterIndex === position.chapter;
1110
return (React.createElement(List_1.ListItem, {key: 'c' + chapterIndex, className: classnames({
1211
'chapter': true,
1312
'isActive': isActive
14-
}), initiallyOpen: chapterIndex === 0, leftIcon: progressIcon_1.progressIcon(chapter.completed), 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))));
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))));
1514
};

‎lib/components/Progress/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ var pageStyle = {
99
margin: 0,
1010
};
1111
exports.Progress = function (_a) {
12-
var progress = _a.progress, position = _a.position;
13-
return (React.createElement(Paper_1.default, {className: 'cr-progress', style: pageStyle, zDepth: 1}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Progress"), progress.chapters.map(function (chapter, chapterIndex) { return (React.createElement(ProgressChapter_1.ProgressChapter, {chapter: chapter, chapterIndex: chapterIndex, position: position})); }))));
12+
var progress = _a.progress, position = _a.position, info = _a.info;
13+
return (React.createElement(Paper_1.default, {className: 'cr-progress', style: pageStyle, zDepth: 1}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, info.title), progress.chapters.map(function (chapter, chapterIndex) { return (React.createElement(ProgressChapter_1.ProgressChapter, {chapter: chapter, chapterIndex: chapterIndex, position: position})); }))));
1414
};

‎lib/components/Progress/progressIcon.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,6 @@ function progressIcon(completed, current) {
1111
else if (current) {
1212
return React.createElement(play_circle_filled_1.default, {color: colors_1.pink500});
1313
}
14-
else if (typeof current === 'undefined') {
15-
return null;
16-
}
1714
else {
1815
return React.createElement(check_box_outline_blank_1.default, null);
1916
}

‎lib/components/Routes/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ var Routes = (function (_super) {
2424
case 'page':
2525
return React.createElement(index_1.Page, __assign({}, this.props));
2626
case 'progress':
27-
return React.createElement(index_1.Progress, __assign({}, this.props));
27+
return React.createElement(index_1.Progress, __assign({}, this.props, {info: this.props.tutorial.info}));
2828
case 'start':
2929
return React.createElement(index_1.Start, __assign({}, this.props));
3030
case 'tutorials':

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@ var welcomeStyle = {
1111
var welcomeButtonStyle = {
1212
fontSize: '1.4em',
1313
padding: '5px 2px',
14+
textShadow: '1px 1px 0px #000',
1415
};
1516
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})))); };

‎src/components/Markdown/index.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,13 @@ function formatText(text: string): string {
2626
};
2727

2828
export const Markdown: React.StatelessComponent<{
29-
children?: string
30-
}> = ({children}) => (
31-
<span className='cr-markdown' dangerouslySetInnerHTML={
32-
{__html: formatText(children)}
33-
}></span>
29+
children?: string, style?: Object
30+
}> = ({style, children}) => (
31+
<span
32+
className='cr-markdown'
33+
style={style ? style : null}
34+
dangerouslySetInnerHTML={
35+
{__html: formatText(children)}
36+
}
37+
/>
3438
);

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import {Card, CardText} from 'material-ui/Card';
33
import {Markdown} from '../../index';
4-
import {cyan500} from 'material-ui/styles/colors';
4+
import {cyan500, grey100} from 'material-ui/styles/colors';
55

66
const styles = {
77
backgroundColor: cyan500,
@@ -10,7 +10,12 @@ const styles = {
1010
padding: '10px 15px 30px',
1111
right: '0px',
1212
margin: '0',
13-
width: '400px',
13+
width: '400px'
14+
};
15+
16+
const textStyles = {
17+
color: grey100,
18+
fontSize: '1.1em'
1419
};
1520

1621
export const PageComplete: React.StatelessComponent<{
@@ -20,7 +25,7 @@ export const PageComplete: React.StatelessComponent<{
2025
{page.completed && page.onPageComplete
2126
? <Card style={styles}>
2227
<CardText>
23-
<Markdown>{page.onPageComplete}</Markdown>
28+
<Markdown style={textStyles}>{page.onPageComplete}</Markdown>
2429
</CardText>
2530
</Card>
2631
: null

‎src/components/Page/Tasks/Task.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,13 @@
11
import * as React from 'react';
22
import {Markdown} from '../../index';
3-
// import {TaskCheckbox} from './TaskCheckbox';
3+
import {TaskCheckbox} from './TaskCheckbox';
44
import {ListItem} from 'material-ui/List';
55
import {lightGreen200, orange200} from 'material-ui/styles/colors';
66

77
function getStatus(
88
index: number, taskPosition: number, testRun: boolean
99
): string {
10-
switch (true) {
11-
case index < taskPosition:
12-
return lightGreen200;
13-
case testRun:
14-
return orange200;
15-
default:
16-
return 'inherit';
17-
}
10+
return index < taskPosition ? lightGreen200 : 'inherit';
1811
}
1912

2013
export const Task: React.StatelessComponent<{
@@ -27,6 +20,7 @@ export const Task: React.StatelessComponent<{
2720
className='cr-task'
2821
style={{backgroundColor}}
2922
>
23+
{testRun ? <TaskCheckbox /> : null}
3024
<span className='cr-task-index'>{index + 1}.</span>
3125
<div className='cr-task-description'>
3226
<Markdown >{task.description}</Markdown>

‎src/components/Page/Tasks/TaskCheckbox.tsx

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
1-
// import * as React from 'react';
2-
// import {green500, orange500} from 'material-ui/styles/colors';
3-
// import CheckBox from 'material-ui/svg-icons/toggle/check-box';
4-
// import CheckBoxOutlineBlank from 'material-ui/svg-icons/toggle/check-box-outline-blank';
5-
// import IndeterminateCheckBox from 'material-ui/svg-icons/toggle/indeterminate-check-box';
6-
//
7-
// export const TaskCheckbox: React.StatelessComponent<{
8-
// index: number, taskPosition: number, testRun: boolean
9-
// }> = ({index, taskPosition, testRun}) => {
10-
// let icon = null;
11-
// if (index < taskPosition) {
12-
// icon = <CheckBox color={green500} />;
13-
// } else if (index === taskPosition && testRun) {
14-
// // TODO: loading animation inside of checkbox
15-
// icon = <IndeterminateCheckBox color={orange500} />;
16-
// } else {
17-
// icon = <CheckBoxOutlineBlank />;
18-
// }
19-
// return <span className='cr-task-checkbox'>{icon}</span>;
20-
// };
1+
import * as React from 'react';
2+
import {green500, orange500} from 'material-ui/styles/colors';
3+
import CheckBox from 'material-ui/svg-icons/toggle/check-box';
4+
import CheckBoxOutlineBlank from 'material-ui/svg-icons/toggle/check-box-outline-blank';
5+
import IndeterminateCheckBox from 'material-ui/svg-icons/toggle/indeterminate-check-box';
6+
7+
export const TaskCheckbox: React.StatelessComponent<{}> = () => (
8+
<span className='cr-task-checkbox'>
9+
<IndeterminateCheckBox color={orange500} />
10+
</span>
11+
);

‎src/components/Progress/ProgressChapter.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export const ProgressChapter: React.StatelessComponent<{
1818
})
1919
}
2020
initiallyOpen={chapterIndex === 0}
21-
leftIcon={progressIcon(chapter.completed)}
2221
primaryTogglesNestedList={
2322
chapterIndex === position.chapter && !chapter.completed
2423
}

‎src/components/Progress/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ const pageStyle = {
1010
};
1111

1212
export const Progress: React.StatelessComponent<{
13-
progress: CR.Progress, position: CR.Position
14-
}> = ({progress, position}) => (
13+
progress: CR.Progress, position: CR.Position, info: Tutorial.Info
14+
}> = ({progress, position, info}) => (
1515
<Paper
1616
className='cr-progress'
1717
style={pageStyle}
1818
zDepth={1}
1919
>
2020
<List>
21-
<Subheader>Progress</Subheader>
21+
<Subheader>{info.title}</Subheader>
2222
{progress.chapters.map((chapter: CR.Chapter, chapterIndex: number) => (
2323
<ProgressChapter
2424
chapter={chapter}

‎src/components/Progress/progressIcon.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ export function progressIcon(completed: boolean, current?: boolean) {
99
return <CheckBox />;
1010
} else if (current) {
1111
return <PlayCircleFilled color={pink500} />;
12-
} else if (typeof current === 'undefined') {
13-
return null;
1412
} else {
1513
return <CheckBoxOutlineBlank />;
1614
}

‎src/components/Routes/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import * as React from 'react';
22
import {Page, Progress, Tutorials, Start, FinalPage} from '../index';
33

44
export class Routes extends React.Component<{
5-
route: string, progress: CR.Progress, page: CR.Page, tutorials: CR.Tutorial[],
5+
route: string, progress: CR.Progress, page: CR.Page, tutorials: Tutorial.Info[],
66
testRun: boolean, checks: CR.Checks, position: CR.Position, tasks: CR.Task[],
7-
taskPosition: number, hintPosition: number
7+
taskPosition: number, hintPosition: number, tutorial: CR.Tutorial
88
}, {}> {
99
render() {
1010
switch (this.props.route) {
1111
case 'page':
1212
return <Page {...this.props} />;
1313
case 'progress':
14-
return <Progress {...this.props} />;
14+
return <Progress {...this.props} info={this.props.tutorial.info}/>;
1515
case 'start':
1616
return <Start {...this.props} />;
1717
case 'tutorials':

‎src/components/Start/Welcome/_welcome.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.cr-welcome {
22
text-align: center;
33
marginTop: 0;
4+
text-shadow: 1px 1px 1px #000;
45
.title {
56
padding-top: 120px;
67
color: white;

‎src/components/Start/Welcome/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const welcomeStyle = {
1515
const welcomeButtonStyle = {
1616
fontSize: '1.4em',
1717
padding: '5px 2px',
18+
textShadow: '1px 1px 0px #000',
1819
};
1920

2021
export const Welcome: React.StatelessComponent<{}> = () => (

‎src/components/app.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ window.onresize = function() {
1313
})
1414
export class App extends React.Component<{store?: CR.State}, {}> {
1515
render(): React.ReactElement<{}> {
16-
console.log(this.props.store)
1716
return (
1817
<section
1918
className='cr'

‎src/typings/cr/cr.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ interface State {
3535
hintPosition: number;
3636
editorActions: string[];
3737
alert: Alert;
38-
tutorials: Tutorial[];
38+
tutorial: Tutorial;
39+
tutorials: Tutorial.Info[];
3940
testRun: boolean;
4041
checks: Checks;
4142
}

‎src/typings/cr/tutorial.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
declare namespace Tutorial {
22
interface Info {
3-
name: string;
3+
title: string;
44
version: string;
55
latest?: boolean;
66
description?: string;

‎tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
"src/services/system.ts",
108108
"src/store/index.ts",
109109
"src/components/Alert/index.tsx",
110-
"src/components/app.tsx",
110+
"src/components/App.tsx",
111111
"src/components/AppMenu/index.tsx",
112112
"src/components/AppMenu/issuesLink.tsx",
113113
"src/components/AppMenu/menuIconLeft.tsx",

0 commit comments

Comments
 (0)