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

Commit90440c9

Browse files
authored
Merge pull requestcoderoad#52 from ShMcK/feature/balloon-load-solution
load solution with help balloon
2 parentsf0aa4d6 +034fe00 commit90440c9

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 { Button as AlifdButton } from '@alifd/next'
33

44
interface Props {
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
const Button = (props: Props) => (
11-
<AlifdButton onClick={props.onClick} type={props.type}>
13+
<AlifdButton onClick={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 * as React from 'react'
2+
import { Icon as AlifdIcon } from '@alifd/next'
3+
4+
interface Props {
5+
type: string
6+
role?: string
7+
style?: React.CSSProperties
8+
size?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit'
9+
}
10+
11+
const Icon = (props: Props) => {
12+
return <AlifdIcon type={props.type} role={props.role} size={props.size} style={props.style} />
13+
}
14+
15+
export default Icon
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import * as React from 'react'
2+
import { Balloon } from '@alifd/next'
3+
import Button from '../Button'
4+
import Icon from '../Icon'
5+
6+
const styles = {
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+
interface Props {
24+
onLoadSolution(): void
25+
}
26+
27+
const StepHelp = (props: Props) => {
28+
// TODO: extract or replace load solution
29+
const [loadedSolution, setLoadedSolution] = React.useState()
30+
const onClickHandler = () => {
31+
if (!loadedSolution) {
32+
setLoadedSolution(true)
33+
props.onLoadSolution()
34+
}
35+
}
36+
const promptLeft = (
37+
<Button style={styles.iconButton}>
38+
<Icon type="prompt" role="button" />
39+
</Button>
40+
)
41+
return (
42+
<Balloon trigger={promptLeft} align="l" alignEdge triggerType="click" style={{ width: 300 }}>
43+
<div>
44+
<h4 style={styles.balloonTitle}>Stuck? Need help?</h4>
45+
<div style={styles.balloonOptions}>
46+
<Button type="secondary" onClick={onClickHandler} disabled={loadedSolution}>
47+
Load Solution
48+
</Button>
49+
</div>
50+
</div>
51+
</Balloon>
52+
)
53+
}
54+
55+
export default StepHelp

‎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 * as React from 'react'
22
import * as T from 'typings'
3-
import Button from '../../../../../components/Button'
43
import Checkbox from '../../../../../components/Checkbox'
54
import Markdown from '../../../../../components/Markdown'
5+
import StepHelp from '../../../../../components/StepHelp'
66

77
interface Props {
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
const Step = (props: Props) => {
26-
// TODO: extract or replace load solution
27-
const [loadedSolution, setLoadedSolution] = React.useState()
28-
const onClickHandler = () => {
29-
if (!loadedSolution) {
30-
setLoadedSolution(true)
31-
props.onLoadSolution()
32-
}
33-
}
34-
const showLoadSolution = props.status === 'ACTIVE' && !loadedSolution
35-
33+
const showLoadSolution = props.status === 'ACTIVE'
3634
return (
37-
<div style={styles.card}>
38-
<div>
39-
<Checkbox status={props.status} />
40-
</div>
41-
<div>
42-
<Markdown>{props.content || ''}</Markdown>
43-
</div>
44-
<div>
45-
{showLoadSolution && (
46-
<Button type="normal" onClick={onClickHandler}>
47-
Load Solution
48-
</Button>
49-
)}
35+
<div>
36+
<div style={styles.card}>
37+
<div>
38+
<Checkbox status={props.status} />
39+
</div>
40+
<div>
41+
<Markdown>{props.content || ''}</Markdown>
42+
</div>
5043
</div>
44+
{showLoadSolution && (
45+
<div style={styles.options}>
46+
<StepHelp onLoadSolution={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
const styles = {
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