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

Commit1d9cf71

Browse files
committed
setup menu dropdown of learn levels
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent38a474f commit1d9cf71

File tree

3 files changed

+71
-2
lines changed

3 files changed

+71
-2
lines changed

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

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import * as React from 'react'
22
import*asTfrom'typings'
33
import*asTTfrom'typings/tutorial'
44
import{css,jsx}from'@emotion/core'
5+
import{Dropdown}from'@alifd/next'
6+
importIconfrom'../../../components/Icon'
57
importButtonfrom'../../../components/Button'
68
importMarkdownfrom'../../../components/Markdown'
79
importProcessMessagesfrom'../../../components/ProcessMessages'
@@ -22,12 +24,19 @@ const styles = {
2224
paddingBottom:'5rem',
2325
},
2426
header:{
27+
display:'flex'as'flex',
28+
alignItems:'center',
29+
justifyContent:'space-between',
2530
height:'2rem',
2631
backgroundColor:'#EBEBEB',
2732
fontSize:'1rem',
2833
lineHeight:'1rem',
2934
padding:'10px 1rem',
3035
},
36+
learn:{
37+
textDecoration:'none',
38+
color:'inherit',
39+
},
3140
text:{
3241
padding:'0rem 1rem',
3342
paddingBottom:'1rem',
@@ -77,14 +86,15 @@ const styles = {
7786
}
7887

7988
interfaceProps{
89+
menu:any
8090
level:TT.Level&{status:T.ProgressStatus;index:number;steps:Array<TT.Step&{status:T.ProgressStatus}>}
8191
processes:T.ProcessEvent[]
8292
testStatus:T.TestStatus|null
8393
onContinue():void
8494
onLoadSolution():void
8595
}
8696

87-
constLevel=({ level, onContinue, onLoadSolution, processes, testStatus}:Props)=>{
97+
constLevel=({menu,level, onContinue, onLoadSolution, processes, testStatus}:Props)=>{
8898
//@ts-ignore
8999
letcurrentStep=level.steps.findIndex((s)=>s.status==='ACTIVE')
90100
if(currentStep===-1){
@@ -103,7 +113,16 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
103113
<divcss={styles.page}>
104114
<divcss={styles.content}>
105115
<divcss={styles.header}>
106-
<span>Learn</span>
116+
<Dropdown
117+
trigger={
118+
<acss={styles.learn}>
119+
Learn<Icontype="arrow-down"size="xxs"/>{' '}
120+
</a>
121+
}
122+
triggerType="click"
123+
>
124+
{menu}
125+
</Dropdown>
107126
</div>
108127
<divcss={styles.text}>
109128
<h2css={styles.title}>{level.title}</h2>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
33
import*asTTfrom'typings/tutorial'
4+
import{Menu}from'@alifd/next'
45
import*asselectorsfrom'../../services/selectors'
6+
importIconfrom'../../components/Icon'
57
importLevelfrom'./components/Level'
8+
importloggerfrom'services/logger'
69

710
interfacePageProps{
811
context:T.MachineContext
@@ -48,8 +51,35 @@ const TutorialPage = (props: PageProps) => {
4851
}),
4952
}
5053

54+
constmenu=(
55+
<Menu>
56+
{tutorial.levels.map((level:TT.Level)=>{
57+
constisCurrent=level.id===position.levelId
58+
logger('progress',progress)
59+
constisComplete=progress.levels[level.id]
60+
leticon
61+
letdisabled=false
62+
63+
if(isComplete){
64+
icon=<Icontype="success"size="xs"/>
65+
}elseif(isCurrent){
66+
icon=<Icontype="eye"size="xs"/>
67+
}else{
68+
disabled=true
69+
icon=<Icontype="minus"size="xs"/>
70+
}
71+
return(
72+
<Menu.Itemkey={level.id}disabled={disabled}>
73+
{icon}&nbsp;&nbsp;&nbsp;{level.title}
74+
</Menu.Item>
75+
)
76+
})}
77+
</Menu>
78+
)
79+
5180
return(
5281
<Level
82+
menu={menu}
5383
level={level}
5484
onContinue={onContinue}
5585
onLoadSolution={onLoadSolution}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,28 @@ import * as T from '../../typings'
66
import*asTTfrom'../../typings/tutorial'
77
importLevelfrom'../src/containers/Tutorial/components/Level'
88
importSideBarDecoratorfrom'./utils/SideBarDecorator'
9+
import{Menu}from'@alifd/next'
10+
importIconfrom'../src/components/Icon'
911

1012
typeModifiedLevel=TT.Level&{
1113
status:T.ProgressStatus
1214
index:number
1315
steps:Array<TT.Step&{status:T.ProgressStatus}>
1416
}
1517

18+
constmenu=(
19+
<Menu>
20+
{[{id:'1',title:'First'}].map((level:TT.Level)=>{
21+
consticon=<Icontype="eye"size="xs"/>
22+
return(
23+
<Menu.Itemkey={level.id}>
24+
{icon}&nbsp;&nbsp;&nbsp;{level.title}
25+
</Menu.Item>
26+
)
27+
})}
28+
</Menu>
29+
)
30+
1631
storiesOf('Level',module)
1732
.addDecorator(SideBarDecorator)
1833
.addDecorator(withKnobs)
@@ -72,6 +87,7 @@ storiesOf('Level', module)
7287
}
7388
return(
7489
<Level
90+
menu={menu}
7591
level={level}
7692
onContinue={action('onContinue')}
7793
onLoadSolution={action('onLoadSolution')}
@@ -126,6 +142,7 @@ storiesOf('Level', module)
126142
}
127143
return(
128144
<Level
145+
menu={menu}
129146
level={level}
130147
onContinue={action('onContinue')}
131148
onLoadSolution={action('onLoadSolution')}
@@ -209,6 +226,7 @@ storiesOf('Level', module)
209226
}
210227
return(
211228
<Level
229+
menu={menu}
212230
level={level}
213231
onContinue={action('onContinue')}
214232
onLoadSolution={action('onLoadSolution')}
@@ -281,6 +299,7 @@ storiesOf('Level', module)
281299
}
282300
return(
283301
<Level
302+
menu={menu}
284303
level={level}
285304
onContinue={action('onContinue')}
286305
onLoadSolution={action('onLoadSolution')}
@@ -302,6 +321,7 @@ storiesOf('Level', module)
302321
}
303322
return(
304323
<Level
324+
menu={menu}
305325
level={level}
306326
onContinue={action('onContinue')}
307327
onLoadSolution={action('onLoadSolution')}

0 commit comments

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