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

Commit3505bc3

Browse files
authored
Merge pull requestcoderoad#14 from ShMcK/feature/styles
Feature/styles
2 parentsdf56808 +8d57540 commit3505bc3

File tree

9 files changed

+171
-55
lines changed

9 files changed

+171
-55
lines changed

‎web-app/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import*asReactfrom'react'
22
import*asCRfrom'typings'
33

4-
importDebuggerfrom'./components/Debugger'
4+
//import Debugger from './components/Debugger'
55
importRoutesfrom'./Routes'
6+
importDataContext,{initialData,initialState}from'./utils/DataContext'
67
import{send}from'./utils/vscode'
7-
importDataContext,{initialState,initialData}from'./utils/DataContext'
88

99
interfaceReceivedEvent{
1010
data:CR.Action

‎web-app/src/components/Divider.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import*asReactfrom'react'
2+
3+
conststyles={
4+
divider:{
5+
backgroundColor:'#e8e8e8',
6+
height:'0.1rem',
7+
},
8+
}
9+
10+
constDivider=()=><divstyle={styles.divider}/>
11+
12+
exportdefaultDivider
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import{Button}from'@alifd/next'
2+
import*asReactfrom'react'
3+
importCCfrom'../../../../typings/context'
4+
5+
importMarkdownfrom'../Markdown'
6+
7+
conststyles={
8+
active:{
9+
backgroundColor:'#e6f7ff',
10+
},
11+
card:{
12+
padding:'0.5rem 1rem',
13+
},
14+
completed:{
15+
backgroundColor:'#f6ffed',
16+
},
17+
disabled:{
18+
// backgroundColor: 'blue',
19+
},
20+
options:{},
21+
title:{
22+
margin:0,
23+
},
24+
}
25+
26+
interfaceProps{
27+
stage:CC.StageWithStatus
28+
onNext():void
29+
}
30+
31+
constLevelStageSummary=(props:Props)=>{
32+
const{ stage, onNext}=props
33+
const{ complete, active}=stage.status
34+
constcardStyle={
35+
...styles.card,
36+
...(active ?styles.active :styles.disabled),
37+
...(complete ?styles.completed :{}),
38+
}
39+
return(
40+
<divstyle={cardStyle}>
41+
<h3style={styles.title}>{stage.content.title}</h3>
42+
<Markdown>{stage.content.text}</Markdown>
43+
<divstyle={styles.options}>
44+
{active&&<ButtononClick={onNext}>Continue</Button>}
45+
{complete&&<div>Complete</div>}
46+
</div>
47+
</div>
48+
)
49+
}
50+
51+
exportdefaultLevelStageSummary

‎web-app/src/components/Level/index.tsx

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,54 @@
1+
import{Button}from'@alifd/next'
12
import*asReactfrom'react'
2-
import{Button,Card}from'@alifd/next'
33
importCRfrom'typings'
44

5+
importDividerfrom'../Divider'
56
importMarkdownfrom'../Markdown'
7+
importLevelStageSummaryfrom'./LevelStageSummary'
68

79
conststyles={
8-
card:{
9-
// width: '20rem',
10+
card:{},
11+
content:{
12+
padding:'0rem 1rem',
13+
paddingBottom:'1rem',
1014
},
11-
disabled:{
12-
backgroundColor:'grey',
15+
list:{
16+
padding:'0rem',
1317
},
18+
options:{
19+
padding:'0rem 1rem',
20+
},
21+
title:{},
1422
}
1523

1624
interfaceProps{
1725
level:CR.TutorialLevel
18-
onNext():void
19-
onBack():void
2026
stages:{
2127
[stageId:string]:any// CC.StageWithStatus
2228
}
29+
onNext():void
30+
onBack():void
2331
}
2432

2533
constLevel=({ level, stages, onNext, onBack}:Props)=>{
2634
const{ title, text}=level.content
2735
return(
28-
<Cardstyle={styles.card}title={title}showTitleBullet={false}contentHeight="auto">
29-
<Markdown>{text}</Markdown>
30-
<div>
36+
<divstyle={styles.card}>
37+
<divstyle={styles.content}>
38+
<h2style={styles.title}>{title}</h2>
39+
<Markdown>{text}</Markdown>
40+
</div>
41+
<Divider/>
42+
<divstyle={styles.list}>
3143
{level.stageList.map((stageId:string)=>{
3244
conststage=stages[stageId]
33-
constunavailable=!stage.status.complete&&!stage.status.active
34-
return(
35-
<divkey={stageId}style={unavailable ?styles.disabled :{}}>
36-
<h3>{stage.content.title}</h3>
37-
<p>{stage.content.text}</p>
38-
{stage.status.active&&<ButtononClick={onNext}>Continue</Button>}
39-
{stage.status.complete&&<div>Complete</div>}
40-
</div>
41-
)
45+
return<LevelStageSummarykey={stageId}stage={stage}onNext={onNext}/>
4246
})}
4347
</div>
44-
<ButtononClick={onBack}>Back</Button>
45-
</Card>
48+
<divstyle={styles.options}>
49+
<ButtononClick={onBack}>Back</Button>
50+
</div>
51+
</div>
4652
)
4753
}
4854

‎web-app/src/components/Stage/index.tsx

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,56 @@
1+
import{Button}from'@alifd/next'
12
import*asReactfrom'react'
2-
import{Button,Card}from'@alifd/next'
33
importCRfrom'typings'
44

5+
importDividerfrom'../Divider'
56
importMarkdownfrom'../Markdown'
67
importStepfrom'../Step'
78

89
conststyles={
910
card:{
10-
// width: '20rem',
11+
padding:0,
1112
},
13+
content:{
14+
padding:'0rem 1rem',
15+
paddingBottom:'1rem',
16+
},
17+
options:{
18+
padding:'0rem 1rem',
19+
},
20+
title:{},
1221
}
1322

1423
interfaceProps{
1524
stage:CR.TutorialStage
1625
steps:{
1726
[stepId:string]:any// CC.Step
1827
}
19-
onNextStage():void
2028
complete:boolean
29+
onNextStage():void
2130
}
2231

2332
constStage=({ stage, steps, onNextStage, complete}:Props)=>{
2433
const{ title, text}=stage.content
2534
return(
26-
<Cardstyle={styles.card}title={title}showTitleBullet={false}contentHeight="auto">
27-
<Markdown>{text}</Markdown>
35+
<divstyle={styles.card}>
36+
<divstyle={styles.content}>
37+
<h2style={styles.title}>{title}</h2>
38+
<Markdown>{text}</Markdown>
39+
</div>
40+
<Divider/>
2841
<div>
2942
{stage.stepList.map((stepId:string)=>{
3043
conststep=steps[stepId]
3144
return<Stepkey={stepId}content={step.content}status={step.status}/>
3245
})}
3346
</div>
47+
3448
{complete&&(
35-
<div>
49+
<divstyle={styles.options}>
3650
<ButtononClick={onNextStage}>Continue</Button>
3751
</div>
3852
)}
39-
</Card>
53+
</div>
4054
)
4155
}
4256

‎web-app/src/components/Step/index.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,24 @@ import CR from 'typings'
55
importMarkdownfrom'../Markdown'
66

77
conststyles={
8+
active:{
9+
backgroundColor:'#e6f7ff',
10+
},
811
card:{
9-
display:'flex',
10-
flexDirection:'row'as'row',
11-
margin:'1rem',
12+
borderRadius:'0.3rem',
13+
display:'grid',
14+
gridTemplateAreas:'CheckboxMargin Content',
15+
gridTemplateColumns:'2rem 1fr',
16+
gridTemplateRows:'1fr',
17+
padding:'1rem',
1218
},
1319
left:{
14-
width:'2rem',
20+
justifySelf:'center',
21+
paddingTop:'0.8rem',
1522
},
1623
right:{
17-
flex:1,
18-
},
19-
active:{
20-
backgroundColor:'yellow',
24+
padding:'0.2rem',
25+
paddingTop:0,
2126
},
2227
}
2328

‎web-app/src/components/Summary/index.tsx

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1+
import{Button}from'@alifd/next'
12
import*asReactfrom'react'
2-
import{Button,Card}from'@alifd/next'
33
importCRfrom'typings'
44

55
conststyles={
66
card:{
77
// width: '20rem',
88
},
9+
content:{
10+
padding:'0rem 1rem',
11+
},
12+
options:{
13+
padding:'1rem',
14+
},
15+
title:{},
916
}
1017

1118
interfaceProps{
@@ -16,10 +23,15 @@ interface Props {
1623
constSummary=({ data, onNext}:Props)=>{
1724
const{ summary}=data
1825
return(
19-
<Cardstyle={styles.card}title={summary.title}showTitleBullet={false}contentHeight="auto">
20-
<p>{summary.description}</p>
21-
<ButtononClick={()=>onNext()}>Continue</Button>
22-
</Card>
26+
<divstyle={styles.card}>
27+
<divstyle={styles.content}>
28+
<h2style={styles.title}>{summary.title}</h2>
29+
<p>{summary.description}</p>
30+
</div>
31+
<divstyle={styles.options}>
32+
<ButtononClick={()=>onNext()}>Continue</Button>
33+
</div>
34+
</div>
2335
)
2436
}
2537

‎web-app/stories/Level.stories.tsx

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,55 @@ import { storiesOf } from '@storybook/react'
66
importSideBarDecoratorfrom'./utils/SideBarDecorator'
77

88
importLevelfrom'../src/components/Level'
9-
importdemofrom'./data/basic'
109

1110
storiesOf('Tutorial SideBar',module)
1211
.addDecorator(SideBarDecorator)
1312
.addDecorator(withKnobs)
1413
.add('Level',()=>(
1514
<Level
16-
level={object('level',demo.data.levels.level1Id)}
15+
level={object('level',{
16+
content:{
17+
text:'A description of this stage',
18+
title:'Sum Level',
19+
},
20+
stageList:['stage1Id','stage2Id','stage3Id'],
21+
})}
1722
stages={object('stages',{
1823
stage1Id:{
19-
stepList:[],
2024
content:{
21-
title:'Stage 1',
2225
text:'some description',
26+
title:'Stage 1',
2327
},
2428
status:{
2529
active:false,
2630
complete:true,
2731
},
32+
stepList:[],
2833
},
2934
stage2Id:{
30-
stepList:[],
3135
content:{
32-
title:'Stage 2',
3336
text:'some description',
37+
title:'Stage 2',
3438
},
3539
status:{
3640
active:true,
3741
complete:false,
3842
},
43+
stepList:[],
44+
},
45+
stage3Id:{
46+
content:{
47+
text:'some description',
48+
title:'Stage 3',
49+
},
50+
status:{
51+
active:false,
52+
complete:false,
53+
},
54+
stepList:[],
3955
},
4056
})}
41-
onStageSelect={linkTo('Tutorial SideBar','Stage')}
57+
onNext={linkTo('Tutorial SideBar','Stage')}
4258
onBack={linkTo('TUtorial SideBar','Summary')}
4359
/>
4460
))

‎web-app/stories/Summary.stories.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
importReactfrom'react'
22

3-
import{storiesOf}from'@storybook/react'
3+
import{object,withKnobs}from'@storybook/addon-knobs'
44
import{linkTo}from'@storybook/addon-links'
5-
import{withKnobs,object}from'@storybook/addon-knobs'
5+
import{storiesOf}from'@storybook/react'
66
importSideBarDecoratorfrom'./utils/SideBarDecorator'
77

8-
importdemofrom'./data/basic'
98
importSummaryfrom'../src/components/Summary'
9+
importdemofrom'./data/basic'
1010

1111
storiesOf('Tutorial SideBar',module)
1212
.addDecorator(SideBarDecorator)
1313
.addDecorator(withKnobs)
1414
.add('Summary',()=>(
1515
<Summary
1616
data={object('data',{
17-
summary:demo.data.summary,
1817
levels:demo.data.levels,
18+
summary:demo.data.summary,
1919
})}
20-
onLevelSelect={linkTo('Tutorial SideBar','Level')}
20+
onNext={linkTo('Tutorial SideBar','Level')}
2121
/>
2222
))

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp