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

Commit5419d82

Browse files
committed
show tutorial progress on continue
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent5ef4439 commit5419d82

File tree

2 files changed

+15
-5
lines changed

2 files changed

+15
-5
lines changed

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import*asReactfrom'react'
22
import*asCRfrom'typings'
33
import*asTTfrom'typings/tutorial'
4+
import{Progress}from'@alifd/next'
45
importBetaBadgefrom'../../components/BetaBadge'
56
import{css,jsx}from'@emotion/core'
67
importButtonfrom'../../components/Button'
@@ -55,7 +56,7 @@ const styles = {
5556
borderColor:theme['$color-line1-4'],
5657
}),
5758
}),
58-
tutorialTitle:(theme:Theme)=>({
59+
continueTitle:(theme:Theme)=>({
5960
color:theme['$color-text1-3'],
6061
fontSize:'12px',
6162
}),
@@ -72,6 +73,7 @@ interface Props {
7273
onContinue():void
7374
onNew():void
7475
tutorial?:TT.Tutorial
76+
progress?:number
7577
}
7678

7779
exportconstStartPage=(props:Props)=>(
@@ -96,7 +98,8 @@ export const StartPage = (props: Props) => (
9698
<divcss={styles.buttonContainer}>
9799
<buttononClick={props.onContinue}css={styles.buttonLarge}>
98100
Continue Tutorial
99-
<divcss={styles.tutorialTitle}>"{props.tutorial.summary.title}"</div>
101+
<divcss={styles.continueTitle}>"{props.tutorial.summary.title}"</div>
102+
<Progressstyle={{marginLeft:'1rem'}}percent={props.progress||0}hasBordersize="large"/>
100103
</button>
101104
</div>
102105
)}
@@ -111,11 +114,18 @@ interface ContainerProps {
111114

112115
constStartPageContainer=({ context, send}:ContainerProps)=>{
113116
consttutorial=context.tutorial||undefined
117+
letprogress
118+
if(tutorial){
119+
consttotalLevels=tutorial.levels.length
120+
constfirstIncompleteLevelIndex=tutorial.levels.findIndex((level)=>!context.progress.levels[level.id])
121+
progress=Math.round((firstIncompleteLevelIndex/totalLevels)*100)
122+
}
114123
return(
115124
<StartPage
116125
onContinue={()=>send({type:'CONTINUE_TUTORIAL'})}
117126
onNew={()=>send({type:'NEW_TUTORIAL'})}
118127
tutorial={tutorial}
128+
progress={progress}
119129
/>
120130
)
121131
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions'
33
importReactfrom'react'
44
import{css,jsx}from'@emotion/core'
55
importSideBarDecoratorfrom'./utils/SideBarDecorator'
6-
importStartPagefrom'../src/containers/Start'
6+
import{StartPage}from'../src/containers/Start'
77

88
conststyles={
99
container:{},
@@ -14,7 +14,7 @@ storiesOf('Start', module)
1414
.add('New',()=>{
1515
return(
1616
<divcss={styles.container}>
17-
<StartPagesend={action('send')}context={{}}/>
17+
<StartPageonNew={action('onNew')}onContinue={action('onContinue')}/>
1818
</div>
1919
)
2020
})
@@ -27,7 +27,7 @@ storiesOf('Start', module)
2727
}
2828
return(
2929
<divcss={styles.container}>
30-
<StartPagesend={action('send')}context={{ tutorial}}/>
30+
<StartPageonNew={action('onNew')}onContinue={action('onContinue')}tutorial={tutorial}progress={20}/>
3131
</div>
3232
)
3333
})

0 commit comments

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