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

Commitd0beca7

Browse files
committed
add click handler to levels
1 parent21e903d commitd0beca7

File tree

7 files changed

+47
-21
lines changed

7 files changed

+47
-21
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: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
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={
88
card:{
9-
// padding: '0.5rem 1rem',
9+
display:'grid',
10+
gridTemplateAreas:'Content Icon',
11+
gridTemplateColumns:'1fr 1.5rem',
12+
gridTemplateRows:'1fr',
1013
marginRight:'1.5rem',
1114
},
12-
options:{},
15+
continueIcon:{
16+
color:'#1890ff',
17+
},
18+
left:{},
19+
right:{
20+
alignSelf:'center',
21+
justifySelf:'center',
22+
marginBottom:'1rem',
23+
},
1324
}
1425

1526
interfaceProps{
@@ -21,9 +32,11 @@ const LevelStageSummary = (props: Props) => {
2132
const{ stage, onNext}=props
2233
const{ active}=stage.status
2334
return(
24-
<divstyle={styles.card}>
25-
<Markdown>{stage.content.text}</Markdown>
26-
<divstyle={styles.options}>{active&&<ButtononClick={onNext}>Continue</Button>}</div>
35+
<divstyle={styles.card}className={active ?'hover-select' :''}onClick={onNext}>
36+
<divstyle={styles.left}>
37+
<Markdown>{stage.content.text}</Markdown>
38+
</div>
39+
<divstyle={styles.right}>{active&&<Icontype="arrow-right"style={styles.continueIcon}/>}</div>
2740
</div>
2841
)
2942
}

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import{Button,Step}from'@alifd/next'
22
import*asReactfrom'react'
33
importCRfrom'typings'
4-
3
4+
importCCfrom'../../../../typings/context'
5+
56
importMarkdownfrom'../Markdown'
67
importLevelStageSummaryfrom'./LevelStageSummary'
78

@@ -38,6 +39,7 @@ const Level = ({ level, stages, onNext, onBack }: Props) => {
3839
constactiveIndex=stageList.findIndex((stageId:string)=>{
3940
returnstages[stageId].status.active
4041
})
42+
4143
return(
4244
<divstyle={styles.card}>
4345
<divstyle={styles.content}>
@@ -47,12 +49,22 @@ const Level = ({ level, stages, onNext, onBack }: Props) => {
4749
<divstyle={styles.steps}>
4850
<Stepcurrent={activeIndex}direction="ver"animation={false}>
4951
{stageList.map((stageId:string,index:number)=>{
50-
conststage=stages[stageId]
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
5157
return(
5258
<Step.Item
5359
key={stageId}
54-
title={stage.content.title||`Stage${index+1}`}
55-
content={<LevelStageSummarykey={stageId}stage={stage}onNext={onNext}/>}
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}
5668
/>
5769
)
5870
})}

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import{Checkbox}from'@alifd/next'
21
import*asReactfrom'react'
3-
// import CC from '../../typings/client'
42
importCRfrom'typings'
53
importMarkdownfrom'../../Markdown'
64

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
4747
<Markdown>{text}</Markdown>
4848
</div>
4949
<divstyle={styles.steps}>
50-
<Stepcurrent={activeIndex}direction="ver"shape="dot"animation>
50+
<Stepcurrent={activeIndex}direction="ver"shape="dot"animationreadOnly>
5151
{filteredStepList.map((stepId:string,index:number)=>{
5252
conststep=steps[stepId]
5353
return(

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