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

Commit6609e13

Browse files
authored
Merge pull request#513 from ShubhamCanCreate/feat/reset-whole-tutorial
Reset whole tutorial
2 parents2662b04 +640f413 commit6609e13

File tree

5 files changed

+101
-12
lines changed

5 files changed

+101
-12
lines changed

‎web-app/src/containers/Tutorial/components/Reset.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { Button, Dialog, Message } from '@alifd/next'
44
interfaceProps{
55
disabled?:boolean
66
onReset():void
7+
warning?:boolean
8+
style?:React.CSSProperties
79
}
810

911
constReset=(props:Props)=>{
@@ -24,11 +26,13 @@ const Reset = (props: Props) => {
2426
return(
2527
<>
2628
<Button
27-
ghost="dark"
28-
type="secondary"
29+
ghost={props.warning ?false :'dark'}
30+
type={props.warning ?'normal' :'secondary'}
2931
size="medium"
3032
onClick={()=>setModalState('confirm')}
3133
disabled={props.disabled}
34+
warning={props.warning}
35+
style={props.style}
3236
>
3337
Reset
3438
</Button>

‎web-app/src/containers/Tutorial/components/SideMenu.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,19 +81,18 @@ const SideMenu = (props: Props) => {
8181
<Icontype="prompt"size="xs"color="#EBEBEB"/>
8282
<spanstyle={styles.itemText}>About</span>
8383
</Item>
84-
{/*<Item
84+
<Item
8585
key="settings"
8686
disabled={props.page==='settings'}
87-
style={props.page === 'settings' ? styles.active : {}}
87+
style={props.page==='settings' ?styles.active(theme) :{}}
8888
onClick={()=>{
8989
onMenuClose()
9090
props.setPage('settings')
9191
}}
9292
>
9393
<Icontype="set"size="small"color="#EBEBEB"/>
9494
<spanstyle={styles.itemText}>Settings</span>
95-
</Item>{' '}
96-
*/}
95+
</Item>
9796
</Menu>
9897
</Drawer>
9998
)
Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,78 @@
1-
import*asReactfrom'react'
1+
importButtonfrom'components/Button'
2+
importReact,{useState,useEffect}from'react'
3+
import{Theme}from'../../../styles/theme'
4+
importResetfrom'../components/Reset'
5+
6+
import*asTfrom'typings'
27

38
conststyles={
4-
container:{
9+
flexColumn:{
10+
display:'flex'as'flex',
11+
flexDirection:'column'as'column',
12+
},
13+
container:(theme:Theme)=>({
514
display:'flex'as'flex',
615
flexDirection:'column'as'column',
7-
padding:'1rem',
16+
backgroundColor:theme['$color-white'],
17+
height:'auto',
18+
}),
19+
header:(theme:Theme)=>({
20+
display:'flex'as'flex',
21+
alignItems:'center',
22+
justifyContent:'space-between',
23+
height:'2rem',
24+
backgroundColor:theme['$color-fill1-2'],
25+
fontSize:'1rem',
26+
lineHeight:'1rem',
27+
padding:'10px 0.4rem',
28+
}),
29+
content:{
30+
padding:'0.5rem',
831
},
32+
menu:{},
33+
menuItem:{
34+
display:'flex'as'flex',
35+
border:'1px solid rgb(173, 173, 173)',
36+
borderRadius:'5px',
37+
padding:'0.5rem',
38+
},
39+
menuItemHeader:{
40+
fontWeight:'bold'as'bold',
41+
},
42+
menuItemContent:{},
43+
menuItemButton:{
44+
marginLeft:'auto'as'auto',
45+
},
46+
}
47+
48+
interfaceProps{
49+
onReset():void
950
}
1051

11-
constSettingsPage=()=>{
12-
return<divcss={styles.container}>Settings coming soon...</div>
52+
constSettingsPage=(props:Props)=>{
53+
return(
54+
<divcss={styles.container}>
55+
<divcss={styles.header}>
56+
<div>Settings</div>
57+
</div>
58+
<divcss={styles.content}>
59+
<divcss={styles.menu}>
60+
<divcss={styles.menuItem}>
61+
<divcss={styles.flexColumn}>
62+
<divcss={styles.menuItemHeader}>Reset Tutorial</div>
63+
<divcss={styles.menuItemContent}>
64+
This will reset the whole tutorial and change the source files back to the first level and first task
65+
checkpoint. This will reset the whole tutorial and change the source files back to the first level and
66+
first task checkpoint. This will reset the whole tutorial and change the source files back to the first
67+
level and first task checkpoint.
68+
</div>
69+
</div>
70+
<Resetstyle={styles.menuItemButton}warningonReset={props.onReset}/>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
)
1376
}
1477

1578
exportdefaultSettingsPage

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import ScrollContent from './components/ScrollContent'
1818
importCompletedBannerfrom'./components/CompletedBanner'
1919
import{Theme}from'../../styles/theme'
2020
import{useTheme}from'emotion-theming'
21+
importSettingsPagefrom'./containers/Settings'
2122

2223
conststyles={
2324
page:{
@@ -127,6 +128,18 @@ const TutorialPage = (props: PageProps) => {
127128

128129
const[page,setPage]=React.useState<'about'|'level'|'review'|'settings'>('level')
129130

131+
constonSettingsReset=()=>{
132+
//Reset to first level first step
133+
constlevel:T.LevelUI|null=levels.length ?levels[1] :null
134+
if(level){
135+
onResetToPosition({
136+
levelId:level.id,
137+
stepId:level.steps.length ?level.steps[0].id :null,
138+
complete:false,
139+
})
140+
setPage('level')
141+
}
142+
}
130143
// format level code with status for easy rendering
131144
const{ level, levels, levelIndex, stepIndex}=formatLevels({
132145
position,
@@ -155,7 +168,7 @@ const TutorialPage = (props: PageProps) => {
155168
)}
156169
{page==='review'&&<ReviewPagelevels={levels}onResetToPosition={onResetToPosition}/>}
157170

158-
{/* {page === 'settings' && <SettingsPage/>} */}
171+
{page==='settings'&&<SettingsPageonReset={onSettingsReset}/>}
159172
</div>
160173

161174
{props.state==='Completed' ?(

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import*asReactfrom'react'
2+
import{storiesOf}from'@storybook/react'
3+
importSideBarDecoratorfrom'./utils/SideBarDecorator'
4+
importSettingsfrom'../src/containers/Tutorial/containers/Settings'
5+
6+
storiesOf('Settings',module)
7+
.addDecorator(SideBarDecorator)
8+
.add('Settings Page',()=>{
9+
return<SettingsonReset={()=>console.log('Reset...')}/>
10+
})

0 commit comments

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