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

Commit034fe00

Browse files
committed
load solution with help balloon
1 parentf0aa4d6 commit034fe00

File tree

5 files changed

+101
-29
lines changed

5 files changed

+101
-29
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import * as React from 'react'
22
import{ButtonasAlifdButton}from'@alifd/next'
33

44
interfaceProps{
5-
children:string
5+
style?:React.CSSProperties
6+
children:string|React.ReactNode
7+
disabled?:boolean
68
type?:'primary'|'secondary'|'normal'
7-
onClick():void
9+
onClick?:()=>void
810
}
911

1012
constButton=(props:Props)=>(
11-
<AlifdButtononClick={props.onClick}type={props.type}>
13+
<AlifdButtononClick={props.onClick}type={props.type}disabled={props.disabled}style={props.style}>
1214
{props.children}
1315
</AlifdButton>
1416
)

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import*asReactfrom'react'
2+
import{IconasAlifdIcon}from'@alifd/next'
3+
4+
interfaceProps{
5+
type:string
6+
role?:string
7+
style?:React.CSSProperties
8+
size?:'xxs'|'xs'|'small'|'medium'|'large'|'xl'|'xxl'|'xxxl'|'inherit'
9+
}
10+
11+
constIcon=(props:Props)=>{
12+
return<AlifdIcontype={props.type}role={props.role}size={props.size}style={props.style}/>
13+
}
14+
15+
exportdefaultIcon
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import*asReactfrom'react'
2+
import{Balloon}from'@alifd/next'
3+
importButtonfrom'../Button'
4+
importIconfrom'../Icon'
5+
6+
conststyles={
7+
iconButton:{
8+
display:'flex',
9+
justifyContent:'center',
10+
alignItems:'center',
11+
width:30,
12+
height:30,
13+
},
14+
balloonTitle:{
15+
marginTop:0,
16+
},
17+
balloonOptions:{
18+
display:'flex',
19+
justifyContent:'center',
20+
},
21+
}
22+
23+
interfaceProps{
24+
onLoadSolution():void
25+
}
26+
27+
constStepHelp=(props:Props)=>{
28+
// TODO: extract or replace load solution
29+
const[loadedSolution,setLoadedSolution]=React.useState()
30+
constonClickHandler=()=>{
31+
if(!loadedSolution){
32+
setLoadedSolution(true)
33+
props.onLoadSolution()
34+
}
35+
}
36+
constpromptLeft=(
37+
<Buttonstyle={styles.iconButton}>
38+
<Icontype="prompt"role="button"/>
39+
</Button>
40+
)
41+
return(
42+
<Balloontrigger={promptLeft}align="l"alignEdgetriggerType="click"style={{width:300}}>
43+
<div>
44+
<h4style={styles.balloonTitle}>Stuck? Need help?</h4>
45+
<divstyle={styles.balloonOptions}>
46+
<Buttontype="secondary"onClick={onClickHandler}disabled={loadedSolution}>
47+
Load Solution
48+
</Button>
49+
</div>
50+
</div>
51+
</Balloon>
52+
)
53+
}
54+
55+
exportdefaultStepHelp

‎web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
3-
importButtonfrom'../../../../../components/Button'
43
importCheckboxfrom'../../../../../components/Checkbox'
54
importMarkdownfrom'../../../../../components/Markdown'
5+
importStepHelpfrom'../../../../../components/StepHelp'
66

77
interfaceProps{
88
order:number
@@ -20,34 +20,32 @@ const styles = {
2020
content:{
2121
margin:0,
2222
},
23+
options:{
24+
display:'flex'as'flex',
25+
flexDirection:'row'as'row',
26+
justifyContent:'flex-end',
27+
alignItems:'center'as'center',
28+
padding:'0.5rem',
29+
},
2330
}
2431

2532
constStep=(props:Props)=>{
26-
// TODO: extract or replace load solution
27-
const[loadedSolution,setLoadedSolution]=React.useState()
28-
constonClickHandler=()=>{
29-
if(!loadedSolution){
30-
setLoadedSolution(true)
31-
props.onLoadSolution()
32-
}
33-
}
34-
constshowLoadSolution=props.status==='ACTIVE'&&!loadedSolution
35-
33+
constshowLoadSolution=props.status==='ACTIVE'
3634
return(
37-
<divstyle={styles.card}>
38-
<div>
39-
<Checkboxstatus={props.status}/>
40-
</div>
41-
<div>
42-
<Markdown>{props.content||''}</Markdown>
43-
</div>
44-
<div>
45-
{showLoadSolution&&(
46-
<Buttontype="normal"onClick={onClickHandler}>
47-
Load Solution
48-
</Button>
49-
)}
35+
<div>
36+
<divstyle={styles.card}>
37+
<div>
38+
<Checkboxstatus={props.status}/>
39+
</div>
40+
<div>
41+
<Markdown>{props.content||''}</Markdown>
42+
</div>
5043
</div>
44+
{showLoadSolution&&(
45+
<divstyle={styles.options}>
46+
<StepHelponLoadSolution={props.onLoadSolution}/>
47+
</div>
48+
)}
5149
</div>
5250
)
5351
}

‎web-app/stories/utils/SideBarDecorator.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import * as React from 'react'
22

33
conststyles={
44
container:{
5-
position:'relative'as'relative',
5+
left:'25rem',
6+
position:'absolute'as'absolute',
67
boxSizing:'border-box'as'border-box',
8+
borderLeft:'2px solid black',
79
borderRight:'2px solid black',
8-
width:'100%',
10+
width:'50rem',
911
height:window.innerHeight,
1012
},
1113
}

0 commit comments

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