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

Commit8d57540

Browse files
committed
clean up styles
1 parentc3cf2a6 commit8d57540

File tree

8 files changed

+129
-37
lines changed

8 files changed

+129
-37
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: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Button } from '@alifd/next'
22
import*asReactfrom'react'
33
importCRfrom'typings'
44

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

@@ -11,6 +12,10 @@ const styles = {
1112
},
1213
content:{
1314
padding:'0rem 1rem',
15+
paddingBottom:'1rem',
16+
},
17+
options:{
18+
padding:'0rem 1rem',
1419
},
1520
title:{},
1621
}
@@ -32,14 +37,16 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
3237
<h2style={styles.title}>{title}</h2>
3338
<Markdown>{text}</Markdown>
3439
</div>
40+
<Divider/>
3541
<div>
3642
{stage.stepList.map((stepId:string)=>{
3743
conststep=steps[stepId]
3844
return<Stepkey={stepId}content={step.content}status={step.status}/>
3945
})}
4046
</div>
47+
4148
{complete&&(
42-
<div>
49+
<divstyle={styles.options}>
4350
<ButtononClick={onNextStage}>Continue</Button>
4451
</div>
4552
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{Button,Card}from'@alifd/next'
1+
import{Button}from'@alifd/next'
22
import*asReactfrom'react'
33
importCRfrom'typings'
44

‎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
))
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