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

Commite2665b5

Browse files
authored
Merge pull requestcoderoad#15 from ShMcK/style/steps-antd
Style/steps antd
2 parents3505bc3 +d0beca7 commite2665b5

File tree

11 files changed

+140
-117
lines changed

11 files changed

+140
-117
lines changed

‎web-app/.storybook/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import'@alifd/next/dist/next.css'
22
import{configure}from'@storybook/react'
3+
import'../src/styles/index.css'
34

45
// automatically import all files ending in *.stories.tsx
56
constreq=require.context('../stories',true,/\.stories\.tsx$/)

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

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import{Button}from'@alifd/next'
1+
import{Icon}from'@alifd/next'
22
import*asReactfrom'react'
33
importCCfrom'../../../../typings/context'
44

55
importMarkdownfrom'../Markdown'
66

77
conststyles={
8-
active:{
9-
backgroundColor:'#e6f7ff',
10-
},
118
card:{
12-
padding:'0.5rem 1rem',
13-
},
14-
completed:{
15-
backgroundColor:'#f6ffed',
9+
display:'grid',
10+
gridTemplateAreas:'Content Icon',
11+
gridTemplateColumns:'1fr 1.5rem',
12+
gridTemplateRows:'1fr',
13+
marginRight:'1.5rem',
1614
},
17-
disabled:{
18-
// backgroundColor: 'blue',
15+
continueIcon:{
16+
color:'#1890ff',
1917
},
20-
options:{},
21-
title:{
22-
margin:0,
18+
left:{},
19+
right:{
20+
alignSelf:'center',
21+
justifySelf:'center',
22+
marginBottom:'1rem',
2323
},
2424
}
2525

@@ -30,20 +30,13 @@ interface Props {
3030

3131
constLevelStageSummary=(props:Props)=>{
3232
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-
}
33+
const{ active}=stage.status
3934
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>}
35+
<divstyle={styles.card}className={active ?'hover-select' :''}onClick={onNext}>
36+
<divstyle={styles.left}>
37+
<Markdown>{stage.content.text}</Markdown>
4638
</div>
39+
<divstyle={styles.right}>{active&&<Icontype="arrow-right"style={styles.continueIcon}/>}</div>
4740
</div>
4841
)
4942
}

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

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import{Button}from'@alifd/next'
1+
import{Button,Step}from'@alifd/next'
22
import*asReactfrom'react'
33
importCRfrom'typings'
4+
importCCfrom'../../../../typings/context'
45

5-
importDividerfrom'../Divider'
66
importMarkdownfrom'../Markdown'
77
importLevelStageSummaryfrom'./LevelStageSummary'
88

@@ -18,6 +18,9 @@ const styles = {
1818
options:{
1919
padding:'0rem 1rem',
2020
},
21+
steps:{
22+
padding:'1rem 0.5rem',
23+
},
2124
title:{},
2225
}
2326

@@ -31,19 +34,41 @@ interface Props {
3134
}
3235

3336
constLevel=({ level, stages, onNext, onBack}:Props)=>{
34-
const{ title, text}=level.content
37+
const{ content, stageList}=level
38+
const{ title, text}=content
39+
constactiveIndex=stageList.findIndex((stageId:string)=>{
40+
returnstages[stageId].status.active
41+
})
42+
3543
return(
3644
<divstyle={styles.card}>
3745
<divstyle={styles.content}>
3846
<h2style={styles.title}>{title}</h2>
3947
<Markdown>{text}</Markdown>
4048
</div>
41-
<Divider/>
42-
<divstyle={styles.list}>
43-
{level.stageList.map((stageId:string)=>{
44-
conststage=stages[stageId]
45-
return<LevelStageSummarykey={stageId}stage={stage}onNext={onNext}/>
46-
})}
49+
<divstyle={styles.steps}>
50+
<Stepcurrent={activeIndex}direction="ver"animation={false}>
51+
{stageList.map((stageId:string,index:number)=>{
52+
conststage:CC.StageWithStatus=stages[stageId]
53+
const{ active}=stage.status
54+
constclickHandler=active ?onNext :()=>{}
55+
// note - must add click handler to title, content & step.item
56+
// as all are separted components
57+
return(
58+
<Step.Item
59+
key={stageId}
60+
style={{backgroundColor:'blue'}}
61+
title={
62+
<spanclassName={active ?'hover-select' :''}onClick={clickHandler}>
63+
{stage.content.title||`Stage${index+1}`}
64+
</span>
65+
}
66+
content={<LevelStageSummarykey={stageId}stage={stage}onNext={clickHandler}/>}
67+
onClick={clickHandler}
68+
/>
69+
)
70+
})}
71+
</Step>
4772
</div>
4873
<divstyle={styles.options}>
4974
<ButtononClick={onBack}>Back</Button>
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import*asReactfrom'react'
2+
importCRfrom'typings'
3+
importMarkdownfrom'../../Markdown'
4+
5+
conststyles={
6+
// active: {
7+
// backgroundColor: '#e6f7ff',
8+
// },
9+
card:{
10+
paddingRight:'1rem',
11+
},
12+
}
13+
14+
interfaceProps{
15+
content:CR.TutorialStepContent
16+
status:any// CC.StageStepStatus
17+
}
18+
19+
constStepDescription=({ content, status}:Props)=>{
20+
consthidden=!status.active&&!status.complete
21+
if(hidden){
22+
returnnull
23+
}
24+
return(
25+
<divstyle={styles.card}>
26+
<Markdown>{content.text}</Markdown>
27+
</div>
28+
)
29+
}
30+
31+
exportdefaultStepDescription

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

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import{Button}from'@alifd/next'
1+
import{Button,Step}from'@alifd/next'
22
import*asReactfrom'react'
33
importCRfrom'typings'
44

5-
importDividerfrom'../Divider'
65
importMarkdownfrom'../Markdown'
7-
importStepfrom'../Step'
6+
importStepDescriptionfrom'./StepDescription'
87

98
conststyles={
109
card:{
@@ -17,6 +16,9 @@ const styles = {
1716
options:{
1817
padding:'0rem 1rem',
1918
},
19+
steps:{
20+
padding:'1rem 0rem',
21+
},
2022
title:{},
2123
}
2224

@@ -30,19 +32,33 @@ interface Props {
3032
}
3133

3234
constStage=({ stage, steps, onNextStage, complete}:Props)=>{
33-
const{ title, text}=stage.content
35+
const{ stepList, content}=stage
36+
const{ title, text}=content
37+
// grab the active step
38+
constactiveIndex=stepList.findIndex((stepId:string)=>{
39+
returnsteps[stepId].status.active
40+
})
41+
// only display up until the active step
42+
constfilteredStepList=stepList.slice(0,activeIndex+1)
3443
return(
3544
<divstyle={styles.card}>
3645
<divstyle={styles.content}>
3746
<h2style={styles.title}>{title}</h2>
3847
<Markdown>{text}</Markdown>
3948
</div>
40-
<Divider/>
41-
<div>
42-
{stage.stepList.map((stepId:string)=>{
43-
conststep=steps[stepId]
44-
return<Stepkey={stepId}content={step.content}status={step.status}/>
45-
})}
49+
<divstyle={styles.steps}>
50+
<Stepcurrent={activeIndex}direction="ver"shape="dot"animationreadOnly>
51+
{filteredStepList.map((stepId:string,index:number)=>{
52+
conststep=steps[stepId]
53+
return(
54+
<Step.Item
55+
key={stepId}
56+
title={step.content.title||`Step${index+1}`}
57+
content={<StepDescriptioncontent={step.content}status={step.status}/>}
58+
/>
59+
)
60+
})}
61+
</Step>
4662
</div>
4763

4864
{complete&&(

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

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎web-app/src/styles/index.css

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
body {
22
margin:0;
3-
font-family: -apple-system, BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen',
4-
'Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',
5-
sans-serif;
3+
font-family: -apple-system, BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans',
4+
'Droid Sans','Helvetica Neue', sans-serif;
65
-webkit-font-smoothing: antialiased;
76
-moz-osx-font-smoothing: grayscale;
87
}
98

109
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas,'Courier New',
12-
monospace;
10+
font-family: source-code-pro, Menlo, Monaco, Consolas,'Courier New', monospace;
11+
}
12+
13+
.hover-select:hover {
14+
cursor: pointer;
1315
}

‎web-app/src/tutorials/basic.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const basic: CR.Tutorial = {
4141
step1Id:{
4242
content:{
4343
title:'Sum',
44-
text:'Write a function that adds two numbers together',
44+
text:'Write a function`add`that adds two numbers together',
4545
},
4646
actions:{
4747
setup:{
@@ -58,7 +58,7 @@ const basic: CR.Tutorial = {
5858
step2Id:{
5959
content:{
6060
title:'Multiply',
61-
text:'Write a function that multiplies two numbers together',
61+
text:'Write a function`multiply`that multiplies two numbers together',
6262
},
6363
actions:{
6464
setup:{
@@ -74,7 +74,7 @@ const basic: CR.Tutorial = {
7474
step3Id:{
7575
content:{
7676
title:'Divide',
77-
text:'Write a function that divides',
77+
text:'Write a function`divide`that divides',
7878
},
7979
actions:{
8080
setup:{

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ storiesOf('Tutorial SideBar', module)
2323
stage1Id:{
2424
content:{
2525
text:'some description',
26-
title:'Stage 1',
26+
title:'First',
2727
},
2828
status:{
2929
active:false,
@@ -34,7 +34,7 @@ storiesOf('Tutorial SideBar', module)
3434
stage2Id:{
3535
content:{
3636
text:'some description',
37-
title:'Stage 2',
37+
title:'Second',
3838
},
3939
status:{
4040
active:true,
@@ -45,7 +45,7 @@ storiesOf('Tutorial SideBar', module)
4545
stage3Id:{
4646
content:{
4747
text:'some description',
48-
title:'Stage 3',
48+
title:'Third',
4949
},
5050
status:{
5151
active:false,

0 commit comments

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