Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit49137bd

Browse files
committed
component style improvements
1 parent996a73e commit49137bd

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-
- stylefix for Atom v1.8
17+
- stylefixes 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-
varchildren=_a.children;
28-
return(React.createElement("span",{className:'cr-markdown',dangerouslySetInnerHTML:{__html:formatText(children)}}));
27+
varstyle=_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+
vartextStyles={
16+
color:colors_1.grey100,
17+
fontSize:'1.1em'
1418
};
1519
exports.PageComplete=function(_a){
1620
varpage=_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
varReact=require('react');
33
varindex_1=require('../../index');
4+
varTaskCheckbox_1=require('./TaskCheckbox');
45
varList_1=require('material-ui/List');
56
varcolors_1=require('material-ui/styles/colors');
67
functiongetStatus(index,taskPosition,testRun){
7-
switch(true){
8-
caseindex<taskPosition:
9-
returncolors_1.lightGreen200;
10-
casetestRun:
11-
returncolors_1.orange200;
12-
default:
13-
return'inherit';
14-
}
8+
returnindex<taskPosition ?colors_1.lightGreen200 :'inherit';
159
}
1610
exports.Task=function(_a){
1711
vartask=_a.task,taskPosition=_a.taskPosition,index=_a.index,testRun=_a.testRun;
1812
varbackgroundColor=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
};
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
"use strict";
2+
varReact=require('react');
3+
varcolors_1=require('material-ui/styles/colors');
4+
varindeterminate_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
varclassnames=require('classnames');
44
varList_1=require('material-ui/List');
55
varProgressPage_1=require('./ProgressPage');
6-
varprogressIcon_1=require('./progressIcon');
76
varindex_1=require('../index');
87
exports.ProgressChapter=function(_a){
98
varchapter=_a.chapter,chapterIndex=_a.chapterIndex,position=_a.position;
109
varisActive=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-
varprogress=_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+
varprogress=_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
elseif(current){
1212
returnReact.createElement(play_circle_filled_1.default,{color:colors_1.pink500});
1313
}
14-
elseif(typeofcurrent==='undefined'){
15-
returnnull;
16-
}
1714
else{
1815
returnReact.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
returnReact.createElement(index_1.Page,__assign({},this.props));
2626
case'progress':
27-
returnReact.createElement(index_1.Progress,__assign({},this.props));
27+
returnReact.createElement(index_1.Progress,__assign({},this.props,{info:this.props.tutorial.info}));
2828
case'start':
2929
returnReact.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
varwelcomeButtonStyle={
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
exportconstMarkdown:React.StatelessComponent<{
29-
children?:string
30-
}>=({children})=>(
31-
<spanclassName='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*asReactfrom'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
conststyles={
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+
consttextStyles={
17+
color:grey100,
18+
fontSize:'1.1em'
1419
};
1520

1621
exportconstPageComplete:React.StatelessComponent<{
@@ -20,7 +25,7 @@ export const PageComplete: React.StatelessComponent<{
2025
{page.completed&&page.onPageComplete
2126
?<Cardstyle={styles}>
2227
<CardText>
23-
<Markdown>{page.onPageComplete}</Markdown>
28+
<Markdownstyle={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*asReactfrom'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
functiongetStatus(
88
index:number,taskPosition:number,testRun:boolean
99
):string{
10-
switch(true){
11-
caseindex<taskPosition:
12-
returnlightGreen200;
13-
casetestRun:
14-
returnorange200;
15-
default:
16-
return'inherit';
17-
}
10+
returnindex<taskPosition ?lightGreen200 :'inherit';
1811
}
1912

2013
exportconstTask:React.StatelessComponent<{
@@ -27,6 +20,7 @@ export const Task: React.StatelessComponent<{
2720
className='cr-task'
2821
style={{backgroundColor}}
2922
>
23+
{testRun ?<TaskCheckbox/> :null}
3024
<spanclassName='cr-task-index'>{index+1}.</span>
3125
<divclassName='cr-task-description'>
3226
<Markdown>{task.description}</Markdown>
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*asReactfrom'react';
2+
import{green500,orange500}from'material-ui/styles/colors';
3+
importCheckBoxfrom'material-ui/svg-icons/toggle/check-box';
4+
importCheckBoxOutlineBlankfrom'material-ui/svg-icons/toggle/check-box-outline-blank';
5+
importIndeterminateCheckBoxfrom'material-ui/svg-icons/toggle/indeterminate-check-box';
6+
7+
exportconstTaskCheckbox:React.StatelessComponent<{}>=()=>(
8+
<spanclassName='cr-task-checkbox'>
9+
<IndeterminateCheckBoxcolor={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
exportconstProgress: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
}elseif(current){
1111
return<PlayCircleFilledcolor={pink500}/>;
12-
}elseif(typeofcurrent==='undefined'){
13-
returnnull;
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
exportclassRoutesextendsReact.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:1px1px1px#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
constwelcomeButtonStyle={
1616
fontSize:'1.4em',
1717
padding:'5px 2px',
18+
textShadow:'1px 1px 0px #000',
1819
};
1920

2021
exportconstWelcome: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
exportclassAppextendsReact.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
declarenamespaceTutorial{
22
interfaceInfo{
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)
[8]ページ先頭
©2009-2025 Movatter.jp