8000 add click handler to levels · benjaminthedev/coderoad-vscode@d0beca7 · GitHub
[go: up one dir, main page]
Skip to content

Commit d0beca7

Browse files
ShMcKShMcK
committed
add click handler to levels
1 parent 21e903d commit d0beca7

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
const req = 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 * as React from 'react'
33
import CC from '../../../../typings/context'
44

55
import Markdown from '../Markdown'
66

77
const styles = {
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
interface Props {
@@ -21,9 +32,11 @@ const LevelStageSummary = (props: Props) => {
2132
const { stage, onNext } = props
2233
const { active } = stage.status
2334
return (
24-
<div style={styles.card}>
25-
<Markdown>{stage.content.text}</Markdown>
26-
<div style={styles.options}>{active && <Button onClick={onNext}>Continue</Button>}</div>
35+
<div style={styles.card} className={active ? 'hover-select' : ''} onClick={onNext}>
36+
<div style={styles.left}>
37+
<Markdown>{stage.content.text}</Markdown>
38+
</div>
39+
<div style={styles.right}>{active && <Icon type="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 * as React from 'react'
33
import CR from 'typings'
4-
3
4+
import CC from '../../../../typings/context'
5+
56
import Markdown from '../Markdown'
67
import LevelStageSummary from './LevelStageSummary'
78

@@ -38,6 +39,7 @@ const Level = ({ level, stages, onNext, onBack }: Props) => {
3839
const activeIndex = stageList.findIndex((stageId: string) => {
3940
return stages[stageId].status.active
4041
})
42+
4143
return (
4244
<div style={styles.card}>
4345
<div style={styles.content}>
@@ -47,12 +49,22 @@ const Level = ({ level, stages, onNext, onBack }: Props) => {
4749
<div style={styles.steps}>
4850
<Step current={activeIndex} direction="ver" animation={false}>
4951
{stageList.map((stageId: string, index: number) => {
50-
const stage = stages[stageId]
52+
const stage: CC.StageWithStatus = stages[stageId]
53+
const { active } = stage.status
54+
const clickHandler = 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={<LevelStageSummary key={stageId} stage={stage} onNext={onNext} />}
60+
style={{ backgroundColor: 'blue' }}
61+
title={
62+
<span className={active ? 'hover-select' : ''} onClick={clickHandler}>
63+
{stage.content.title || `Stage ${index + 1}`}
64+
</span>
65+
}
66+
content={<LevelStageSummary key={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 * as React from 'react'
3-
// import CC from '../../typings/client'
42
import CR from 'typings'
53
import Markdown from '../../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
<div style={styles.steps}>
50-
<Step current={activeIndex} direction="ver" shape="dot" animation>
50+
<Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
5151
{filteredStepList.map((stepId: string, index: number) => {
5252
const step = 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)
0