8000 add click handler to levels · benjaminthedev/coderoad-vscode@d0beca7 · GitHub
[go: up one dir, main page]
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
Appearance settings

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