Skip to content

Commit 85d0875

Browse files
ShMcKShMcK
committed
remove level header
Signed-off-by: shmck <[email protected]>
1 parent 9dc4ef5 commit 85d0875

File tree

2 files changed

+41
-65
lines changed

2 files changed

+41
-65
lines changed

‎web-app/src/containers/Tutorial/components/Level.tsx

Lines changed: 6 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@ import * as React from 'react'
22
import * as T from 'typings'
33
import * as TT from 'typings/tutorial'
44
import { css, jsx } from '@emotion/core'
5-
import { Dropdown } from '@alifd/next'
6-
import Icon from '../../../components/Icon'
75
import Button from '../../../components/Button'
86
import Markdown from '../../../components/Markdown'
97
import ProcessMessages from '../../../components/ProcessMessages'
108
import TestMessage from '../../../components/TestMessage'
11-
import ContentMenu from './ContentMenu'
129
import Step from './Step'
1310
import { DISPLAY_RUN_TEST_BUTTON } from '../../../environment'
1411

@@ -25,20 +22,7 @@ const styles = {
2522
padding: 0,
2623
paddingBottom: '5rem',
2724
},
28-
header: {
29-
display: 'flex' as 'flex',
30-
alignItems: 'center',
31-
justifyContent: 'space-between',
32-
height: '2rem',
33-
backgroundColor: '#EBEBEB',
34-
fontSize: '1rem',
35-
lineHeight: '1rem',
36-
padding: '10px 1rem',
37-
},
38-
learn: {
39-
textDecoration: 'none',
40-
color: 'inherit',
41-
},
25+
4226
text: {
4327
padding: '0rem 1rem',
4428
paddingBottom: '1rem',
@@ -122,9 +106,6 @@ const Level = ({
122106
}: Props) => {
123107
const level: TT.Level = tutorial.levels[index]
124108

125-
const [title, setTitle] = React.useState<string>(level.title)
126-
const [content, setContent] = React.useState<string>(level.content)
127-
128109
// hold state for hints for the level
129110
const [displayHintsIndex, setDisplayHintsIndex] = React.useState<number[]>([])
130111
const setHintsIndex = (index: number, value: number) => {
@@ -139,16 +120,6 @@ const Level = ({
139120
setDisplayHintsIndex(steps.map((s) => -1))
140121
}, [position.levelId])
141122

142-
const menu = (
143-
<ContentMenu
144-
levels={tutorial.levels || []}
145-
position={position}
146-
progress={progress}
147-
setTitle={setTitle}
148-
setContent={setContent}
149-
/>
150-
)
151-
152123
const steps: Array<TT.Step & { status: T.ProgressStatus }> = level.steps.map((step: TT.Step) => {
153124
// label step status for step component
154125
let status: T.ProgressStatus = 'INCOMPLETE'
@@ -175,27 +146,15 @@ const Level = ({
175146

176147
return (
177148
<div css={styles.page}>
178-
<div css={styles.header}>
179-
<Dropdown
180-
trigger={
181-
<a css={styles.learn}>
182-
{tutorial.summary.title} <Icon type="arrow-down" size="xxs" />
183-
</a>
184-
}
185-
triggerType="click"
186-
>
187-
{menu}
188-
</Dropdown>
189-
</div>
190149
<div css={styles.content}>
191-
{content.length ? (
150+
{level.content.length ? (
192151
<div css={styles.text}>
193-
<h2 css={styles.title}>{title}</h2>
194-
<Markdown>{content || ''}</Markdown>
152+
<h2 css={styles.title}>{level.title}</h2>
153+
<Markdown>{level.content || ''}</Markdown>
195154
</div>
196155
) : null}
197156

198-
{content.length && steps.length ? <div css={styles.separator} /> : null}
157+
{level.content.length && steps.length ? <div css={styles.separator} /> : null}
199158

200159
{steps.length ? (
201160
<div css={styles.tasks}>
@@ -249,12 +208,7 @@ const Level = ({
249208
<Button type="primary" onClick={onRunTest} disabled={processes.length > 0}>
250209
Run
251210
</Button>
252-
) : (
253-
<span>
254-
{typeof index === 'number' ? `${index + 1}. ` : ''}
255-
{title}
256-
</span>
257-
)}
211+
) : null}
258212
<span>
259213
{status === 'COMPLETE' || !steps.length ? (
260214
<Button type="primary" onClick={onContinue}>

‎web-app/src/containers/Tutorial/index.tsx

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
11
import * as React from 'react'
22
import * as T from 'typings'
33
import * as TT from 'typings/tutorial'
4+
// import { Dropdown } from '@alifd/next'
45
import * as selectors from '../../services/selectors'
56
import Level from './components/Level'
7+
// import Icon from '../../components/Icon'
8+
9+
const styles = {
10+
header: {
11+
display: 'flex' as 'flex',
12+
alignItems: 'center',
13+
justifyContent: 'space-between',
14+
height: '2rem',
15+
backgroundColor: '#EBEBEB',
16+
fontSize: '1rem',
17+
lineHeight: '1rem',
18+
padding: '10px 1rem',
19+
},
20+
learn: {
21+
textDecoration: 'none',
22+
color: 'inherit',
23+
},
24+
}
625

726
interface PageProps {
827
context: T.MachineContext
@@ -39,19 +58,22 @@ const TutorialPage = (props: PageProps) => {
3958
const levelStatus = progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'
4059

4160
return (
42-
<Level
43-
tutorial={tutorial}
44-
index={levelIndex}
45-
status={levelStatus}
46-
progress={progress}
47-
position={position}
48-
onContinue={onContinue}
49-
onRunTest={onRunTest}
50-
onLoadSolution={onLoadSolution}
51-
onOpenLogs={onOpenLogs}
52-
processes={processes}
53-
testStatus={testStatus}
54-
/>
61+
<div>
62+
<div css={styles.header}>{tutorial.summary.title}</div>
63+
<Level
64+
tutorial={tutorial}
65+
index={levelIndex}
66+
status={levelStatus}
67+
progress={progress}
68+
position={position}
69+
onContinue={onContinue}
70+
onRunTest={onRunTest}
71+
onLoadSolution={onLoadSolution}
72+
onOpenLogs={onOpenLogs}
73+
processes={processes}
74+
testStatus={testStatus}
75+
/>
76+
</div>
5577
)
5678
}
5779

0 commit comments

Comments
 (0)