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

Commit704193f

Browse files
authored
Merge pull requestcoderoad#407 from coderoad/feature/continue-tutorial-title
Feature/continue tutorial title
2 parentsf2f515e +5419d82 commit704193f

File tree

2 files changed

+40
-7
lines changed

2 files changed

+40
-7
lines changed

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

Lines changed: 36 additions & 3 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'
@@ -41,7 +42,29 @@ const styles = {
4142
justifyContent:'flex-start'as'flex-start',
4243
alignItems:'center'as'center',
4344
},
45+
buttonLarge:(theme:Theme)=>({
46+
padding:'0.2rem 1rem',
47+
border:`solid 1px${theme['$color-line1-3']}`,
48+
borderRadius:'3px',
49+
minHeight:'2rem',
50+
fontSize:'16px',
51+
backgroundColor:'white',
52+
lineHeight:'1.5rem',
53+
color:theme['$color-text1-4'],
54+
'&:hover,&:focus':css({
55+
backgroundColor:theme['$color-fill1-1'],
56+
borderColor:theme['$color-line1-4'],
57+
}),
58+
}),
59+
continueTitle:(theme:Theme)=>({
60+
color:theme['$color-text1-3'],
61+
fontSize:'12px',
62+
}),
4463
buttonContainer:{
64+
display:'flex'as'flex',
65+
flexDirection:'column'as'column',
66+
justifyContent:'center'as'center',
67+
alignItems:'center'as'center',
4568
margin:'0.5rem',
4669
},
4770
}
@@ -50,6 +73,7 @@ interface Props {
5073
onContinue():void
5174
onNew():void
5275
tutorial?:TT.Tutorial
76+
progress?:number
5377
}
5478

5579
exportconstStartPage=(props:Props)=>(
@@ -72,9 +96,11 @@ export const StartPage = (props: Props) => (
7296
</div>
7397
{props.tutorial&&(
7498
<divcss={styles.buttonContainer}>
75-
<Buttonsize="large"onClick={props.onContinue}style={{padding:'0 1rem'}}>
76-
Continue Current Tutorial
77-
</Button>
99+
<buttononClick={props.onContinue}css={styles.buttonLarge}>
100+
Continue Tutorial
101+
<divcss={styles.continueTitle}>"{props.tutorial.summary.title}"</div>
102+
<Progressstyle={{marginLeft:'1rem'}}percent={props.progress||0}hasBordersize="large"/>
103+
</button>
78104
</div>
79105
)}
80106
</div>
@@ -88,11 +114,18 @@ interface ContainerProps {
88114

89115
constStartPageContainer=({ context, send}:ContainerProps)=>{
90116
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+
}
91123
return(
92124
<StartPage
93125
onContinue={()=>send({type:'CONTINUE_TUTORIAL'})}
94126
onNew={()=>send({type:'NEW_TUTORIAL'})}
95127
tutorial={tutorial}
128+
progress={progress}
96129
/>
97130
)
98131
}

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

Lines changed: 4 additions & 4 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,20 +14,20 @@ 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
})
2121
.add('Continue',()=>{
2222
consttutorial={
2323
summary:{
24-
title:'Tutorial Title',
24+
title:'Tutorial Title With A Really Long Name',
2525
summary:'Tutorial Summary',
2626
},
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