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

Commitfe0c662

Browse files
committed
add completed banner
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parentb59d9e5 commitfe0c662

File tree

8 files changed

+148
-121
lines changed

8 files changed

+148
-121
lines changed

‎web-app/src/Routes.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import ErrorView from './components/Error'
55
importLoadingPagefrom'./containers/Loading'
66
importStartPagefrom'./containers/Start'
77
importSelectTutorialPagefrom'./containers/SelectTutorial'
8-
importCompletedPagefrom'./containers/Tutorial/CompletedPage'
98
importTutorialPagefrom'./containers/Tutorial'
109

1110
/*
@@ -39,12 +38,8 @@ const Routes = () => {
3938
<Routepaths={{Tutorial:{Level:{Load:true}}}}>
4039
<LoadingPagetext="Loading Level..."processes={context.processes}/>
4140
</Route>
42-
<Routepaths={{Tutorial:{Level:true}}}>
43-
<TutorialPagesend={send}context={context}state={route.replace('Tutorial.Level.','')}/>
44-
</Route>
45-
{/* Completed */}
46-
<Routepaths={{Tutorial:{Completed:true}}}>
47-
<CompletedPagecontext={context}/>
41+
<Routepaths={{Tutorial:{Level:true,Completed:true}}}>
42+
<TutorialPagesend={send}context={context}state={route.replace('Tutorial.','')}/>
4843
</Route>
4944
</Router>
5045
)

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

Lines changed: 0 additions & 55 deletions
This file was deleted.
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
3+
import{Icon}from'@alifd/next'
4+
5+
conststyles={
6+
banner:{
7+
height:'auto',
8+
width:'100%',
9+
backgroundColor:'rgb(85, 132, 255)',
10+
color:'white',
11+
padding:'0.5rem',
12+
},
13+
header:{
14+
position:'relative'as'relative',
15+
width:'100%',
16+
},
17+
headerMessage:{
18+
marginLeft:'0.5rem',
19+
},
20+
// close: {
21+
// position: 'absolute' as 'absolute',
22+
// right: '0.5rem',
23+
// top: '0.5rem',
24+
// padding: '2px',
25+
// },
26+
section:{
27+
padding:'0rem 0.5rem 1rem 0.5rem',
28+
},
29+
}
30+
31+
interfaceProps{
32+
title:string
33+
}
34+
35+
constCompletedBanner=(props:Props)=>{
36+
return(
37+
<divcss={styles.banner}>
38+
<divcss={styles.header}>
39+
{/* <div css={styles.close} onClick={() => setOpen(false)}>
40+
<Icon type="close" size="xs" />
41+
</div> */}
42+
<h3>
43+
<Icontype="success-filling"size="large"/>
44+
<spancss={styles.headerMessage}>Congratulations on completing "{props.title}"!</span>
45+
</h3>
46+
</div>
47+
<divcss={styles.section}>
48+
<h5>You've reached the end of the road...</h5>
49+
<p>To go down another path:</p>
50+
<ul>
51+
<li>- open a new VSCode workspace</li>
52+
<li>- relaunch the CodeRoad app</li>
53+
<li>- select a new tutorial</li>
54+
</ul>
55+
</div>
56+
</div>
57+
)
58+
}
59+
60+
exportdefaultCompletedBanner

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ For learners, there are a number of advantages to running tutorials inside VSCod
4444
4545
a. Learn in a real world coding environment
4646
b. Get rapid feedback on save and helpful error messages
47-
c.Users own the code, and can build a Git timeline and deploy a portfolio
47+
c.Users own the code, and can build a Git timeline and deploy a portfolio
4848
4949
##### Subscribe
5050

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ interface Props {
1010

1111
conststyles={
1212
container:{
13+
height:'auto',
14+
width:'100%',
1315
display:'flex'as'flex',
1416
flexDirection:'column'as'column',
1517
},

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

Lines changed: 69 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import formatLevels from './formatLevels'
1515
importResetfrom'./components/Reset'
1616
importContinuefrom'./components/Continue'
1717
importScrollContentfrom'./components/ScrollContent'
18+
importCompletedBannerfrom'./components/CompletedBanner'
1819

1920
conststyles={
2021
page:{
@@ -54,6 +55,13 @@ const styles = {
5455
color:'white',
5556
zIndex:1000,
5657
},
58+
completeFooter:{
59+
position:'fixed'as'fixed',
60+
bottom:0,
61+
left:0,
62+
right:0,
63+
zIndex:1000,
64+
},
5765
processes:{
5866
padding:'0 1rem',
5967
position:'fixed'as'fixed',
@@ -74,7 +82,7 @@ const styles = {
7482
interfacePageProps{
7583
context:T.MachineContext
7684
send(action:T.Action):void
77-
state:string// 'Normal' | 'TestRunning' | 'TestFail' | 'TestPass' | 'LevelComplete'
85+
state:string// 'Normal' | 'TestRunning' | 'TestFail' | 'TestPass' | 'Level.LevelComplete'
7886
}
7987

8088
/**
@@ -114,7 +122,9 @@ const TutorialPage = (props: PageProps) => {
114122
testStatus,
115123
})
116124

117-
constdisableOptions=processes.length>0||props.state==='TestRunning'
125+
constdisableOptions=processes.length>0||props.state==='Level.TestRunning'
126+
127+
console.log(`STATE:${props.state}`)
118128

119129
return(
120130
<div>
@@ -134,62 +144,70 @@ const TutorialPage = (props: PageProps) => {
134144
</ScrollContent>
135145
)}
136146
{page==='review'&&<ReviewPagelevels={levels}/>}
147+
137148
{/* {page === 'settings' && <SettingsPage />} */}
138149
</div>
139-
<divcss={styles.footer}>
140-
{/* Process Modal */}
141-
{processes.length>0&&(
142-
<divcss={styles.processes}>
143-
<ProcessMessagesprocesses={processes}/>
144-
</div>
145-
)}
146-
{/* Test Fail Modal */}
147-
{testStatus&&testStatus.type==='warning'&&(
148-
<divcss={styles.testMessage}>
149-
<TestMessagemessage={testStatus.title}/>
150-
</div>
151-
)}
152-
{/* Left */}
153-
<divcss={{flex:1}}>
154-
{DISPLAY_RUN_TEST_BUTTON&&level.status!=='COMPLETE' ?(
155-
<Buttonstyle={{marginLeft:'1rem'}}type="primary"onClick={onRunTest}disabled={disableOptions}>
156-
Run
157-
</Button>
158-
) :null}
159-
</div>
160150

161-
{/* Center */}
162-
<divcss={{flex:1,display:'flex',justifyContent:'center'}}>
163-
<ResetonReset={onReset}disabled={disableOptions||props.state==='LevelComplete'}/>
151+
{props.state==='Completed' ?(
152+
<divcss={styles.completeFooter}>
153+
<CompletedBannertitle={tutorial.summary.title||'Unknown'}/>
164154
</div>
165-
166-
{/* Right */}
167-
<divcss={{flex:1,display:'flex',justifyContent:'flex-end'}}>
168-
{!level.steps.length ?(
169-
<divcss={{marginRight:'0.5rem'}}>
170-
<Continue
171-
onContinue={onContinue}
172-
current={levelIndex+1}
173-
max={levels.length}
174-
title={tutorial.summary.title}
175-
defaultOpen={false}
176-
/>
155+
) :(
156+
<divcss={styles.footer}>
157+
{/* Process Modal */}
158+
{processes.length>0&&(
159+
<divcss={styles.processes}>
160+
<ProcessMessagesprocesses={processes}/>
177161
</div>
178-
) :props.state==='LevelComplete' ?(
179-
<divcss={{marginRight:'0.5rem'}}>
180-
<Continue
181-
onContinue={onContinue}
182-
current={levelIndex+1}
183-
max={levels.length}
184-
title={tutorial.summary.title}
185-
defaultOpen={true}
186-
/>
162+
)}
163+
{/* Test Fail Modal */}
164+
{testStatus&&testStatus.type==='warning'&&(
165+
<divcss={styles.testMessage}>
166+
<TestMessagemessage={testStatus.title}/>
187167
</div>
188-
) :level.steps.length>1 ?(
189-
<StepProgresscurrent={stepIndex+1}max={level.steps.length}/>
190-
) :null}
168+
)}
169+
{/* Left */}
170+
<divcss={{flex:1}}>
171+
{DISPLAY_RUN_TEST_BUTTON&&level.status!=='COMPLETE' ?(
172+
<Buttonstyle={{marginLeft:'1rem'}}type="primary"onClick={onRunTest}disabled={disableOptions}>
173+
Run
174+
</Button>
175+
) :null}
176+
</div>
177+
178+
{/* Center */}
179+
<divcss={{flex:1,display:'flex',justifyContent:'center'}}>
180+
<ResetonReset={onReset}disabled={disableOptions||props.state==='Level.LevelComplete'}/>
181+
</div>
182+
183+
{/* Right */}
184+
<divcss={{flex:1,display:'flex',justifyContent:'flex-end'}}>
185+
{!level.steps.length ?(
186+
<divcss={{marginRight:'0.5rem'}}>
187+
<Continue
188+
onContinue={onContinue}
189+
current={levelIndex+1}
190+
max={levels.length}
191+
title={tutorial.summary.title}
192+
defaultOpen={false}
193+
/>
194+
</div>
195+
) :props.state==='Level.LevelComplete' ?(
196+
<divcss={{marginRight:'0.5rem'}}>
197+
<Continue
198+
onContinue={onContinue}
199+
current={levelIndex+1}
200+
max={levels.length}
201+
title={tutorial.summary.title}
202+
defaultOpen={true}
203+
/>
204+
</div>
205+
) :level.steps.length>1 ?(
206+
<StepProgresscurrent={stepIndex+1}max={level.steps.length}/>
207+
) :null}
208+
</div>
191209
</div>
192-
</div>
210+
)}
193211
<SideMenuvisible={menuVisible}toggleVisible={setMenuVisible}page={page}setPage={setPage}/>
194212
</div>
195213
)

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import{action}from'@storybook/addon-actions'
21
import{storiesOf}from'@storybook/react'
32
importReactfrom'react'
4-
importCompletedPagefrom'../src/containers/Tutorial/CompletedPage'
3+
importCompletedBannerfrom'../src/containers/Tutorial/components/CompletedBanner'
54
importSideBarDecoratorfrom'./utils/SideBarDecorator'
65

76
storiesOf('Completed',module)
87
.addDecorator(SideBarDecorator)
9-
.add('Page',()=><CompletedPagecontext={{}}/>)
8+
.add('Page',()=><CompletedBannertitle="A tutorial name"/>)

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,29 +146,37 @@ storiesOf('Tutorial', module)
146146
position:{levelId:'1',stepId:'1.2'},
147147
progress:{levels:{},steps:{},complete:false},
148148
}
149-
return<Tutorialstate="Normal"context={firstLevel}send={action('send')}/>
149+
return<Tutorialstate="Level.Normal"context={firstLevel}send={action('send')}/>
150150
})
151151
.add('1.3 Level Complete',()=>{
152152
constlevelComplete={
153153
...context,
154154
position:{levelId:'1',stepId:'1.2'},
155155
progress:{levels:{},steps:{'1.1':true},complete:false},
156156
}
157-
return<Tutorialstate="LevelComplete"context={levelComplete}send={action('send')}/>
157+
return<Tutorialstate="Level.LevelComplete"context={levelComplete}send={action('send')}/>
158158
})
159159
.add('3.1 Level Start',()=>{
160160
constnewLevel={
161161
...context,
162162
position:{levelId:'1',stepId:'1.2'},
163163
progress:{levels:{'1':true,'2':true},steps:{},complete:false},
164164
}
165-
return<Tutorialstate="Normal"context={newLevel}send={action('send')}/>
165+
return<Tutorialstate="Level.Normal"context={newLevel}send={action('send')}/>
166166
})
167167
.add('3.3 Final',()=>{
168168
constlastLevel={
169169
...context,
170170
position:{levelId:'3',stepId:'3.3'},
171171
progress:{levels:{'3':true},steps:{'3.3':true},complete:true},
172172
}
173-
return<Tutorialstate="LevelComplete"context={lastLevel}send={action('send')}/>
173+
return<Tutorialstate="Level.LevelComplete"context={lastLevel}send={action('send')}/>
174+
})
175+
.add('3.3 Completed',()=>{
176+
constlastLevel={
177+
...context,
178+
position:{levelId:'3',stepId:'3.3'},
179+
progress:{levels:{'3':true},steps:{'3.3':true},complete:true},
180+
}
181+
return<Tutorialstate="Completed"context={lastLevel}send={action('send')}/>
174182
})

0 commit comments

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