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

Commit1df2bd6

Browse files
committed
closescoderoad#132. load solution in menu
1 parent34aff91 commit1df2bd6

File tree

4 files changed

+49
-12
lines changed

4 files changed

+49
-12
lines changed

‎web-app/src/components/NewUserExperience/NuxTutorial.tsx‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
importReactfrom'react'
22
import{Collapse,Icon}from'@alifd/next'
3+
importButtonfrom'../Button'
34
importReactCSSTransitionGroupfrom'react-addons-css-transition-group'
45
import'./transition.css'
56

@@ -26,7 +27,33 @@ const styles = {
2627
},
2728
}
2829

29-
constNewUserExperienceTutorialCollapsible=()=>{
30+
typeLoadSolutionButtonProps={
31+
onLoadSolution:()=>void
32+
close:()=>void
33+
}
34+
35+
constLoadSolutionButton=(props:LoadSolutionButtonProps)=>{
36+
const[loadedSolution,setLoadedSolution]=React.useState(false)
37+
constonClickHandler=()=>{
38+
props.close()
39+
if(!loadedSolution){
40+
setLoadedSolution(true)
41+
props.onLoadSolution()
42+
}
43+
}
44+
return(
45+
<Buttontype="secondary"onClick={onClickHandler}disabled={loadedSolution}>
46+
Load Solution
47+
</Button>
48+
)
49+
}
50+
51+
typeNuxProps={
52+
onClose:()=>void
53+
onLoadSolution:()=>void
54+
}
55+
56+
constNewUserExperienceTutorialCollapsible=(props:NuxProps)=>{
3057
const[expandedKeys,setExpandedKeys]=React.useState<string[]>([])
3158
return(
3259
<CollapseonExpand={setExpandedKeys}expandedKeys={expandedKeys}>
@@ -88,8 +115,17 @@ const NewUserExperienceTutorialCollapsible = () => {
88115
</li>
89116
<br/>
90117
<li>
91-
Load the solution. Each step in CodeRoad is stored as a Git commit - including the solution. Load the
92-
solution by pressing the help icon under the current task, and select the option "load solution".
118+
Still stuck? Load the solution. Each step in CodeRoad is stored as a Git commit - including the solution.
119+
Load the solution commit by pressing the button below.
120+
<br/>
121+
<br/>
122+
<LoadSolutionButton
123+
onLoadSolution={props.onLoadSolution}
124+
close={()=>{
125+
setExpandedKeys([])
126+
props.onClose()
127+
}}
128+
/>
93129
</li>
94130
</ol>
95131
</Panel>
@@ -103,6 +139,7 @@ const NewUserExperienceTutorialCollapsible = () => {
103139

104140
interfaceProps{
105141
css?:React.CSSProperties
142+
onLoadSolution:()=>void
106143
}
107144

108145
constNewUserExperienceTutorial=(props:Props)=>{
@@ -117,7 +154,12 @@ const NewUserExperienceTutorial = (props: Props) => {
117154
<spancss={styles.title}>Help</span>
118155
</div>
119156
<ReactCSSTransitionGrouptransitionName="slide"transitionEnterTimeout={500}transitionLeaveTimeout={300}>
120-
{isOpen&&<NewUserExperienceTutorialCollapsible/>}
157+
{isOpen&&(
158+
<NewUserExperienceTutorialCollapsible
159+
onLoadSolution={props.onLoadSolution}
160+
onClose={()=>setIsOpen(false)}
161+
/>
162+
)}
121163
</ReactCSSTransitionGroup>
122164
</div>
123165
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
137137
)}
138138

139139
<divcss={styles.nux}>
140-
<NuxTutorial/>
140+
<NuxTutorialonLoadSolution={onLoadSolution}/>
141141
</div>
142142

143143
<divcss={styles.footer}>

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ const Step = (props: Props) => {
3939
if(!showStep){
4040
returnnull
4141
}
42-
constshowLoadSolution=props.status==='ACTIVE'
4342
return(
4443
<div>
4544
<divcss={styles.card}>
@@ -50,11 +49,6 @@ const Step = (props: Props) => {
5049
<Markdown>{props.content||''}</Markdown>
5150
</div>
5251
</div>
53-
{showLoadSolution&&(
54-
<divcss={styles.options}>
55-
<StepHelponLoadSolution={props.onLoadSolution}/>
56-
</div>
57-
)}
5852
</div>
5953
)
6054
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import{storiesOf}from'@storybook/react'
2+
import{action}from'@storybook/addon-actions'
23
importReactfrom'react'
34
import{css,jsx}from'@emotion/core'
45
importSideBarDecoratorfrom'./utils/SideBarDecorator'
@@ -17,6 +18,6 @@ storiesOf('NewUserExperience', module)
1718
.addDecorator(SideBarDecorator)
1819
.add('NUXTutorial',()=>(
1920
<divcss={styles.container}>
20-
<NewUserExperienceTutorial/>
21+
<NewUserExperienceTutorialonLoadSolution={action('onLoadSolution')}/>
2122
</div>
2223
))

0 commit comments

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