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

Commit6d105c7

Browse files
committed
Add a settings page
Signed-off-by: Shubham Shah <shubhamshahrising@gmail.com>
1 parent4d46bba commit6d105c7

File tree

4 files changed

+80
-10
lines changed

4 files changed

+80
-10
lines changed

‎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: 65 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,75 @@
1-
import*asReactfrom'react'
1+
importButtonfrom'components/Button'
2+
importReact,{useState}from'react'
3+
import{Theme}from'../../../styles/theme'
4+
importResetfrom'../components/Reset'
25

36
conststyles={
4-
container:{
7+
flexColumn:{
58
display:'flex'as'flex',
69
flexDirection:'column'as'column',
7-
padding:'1rem',
10+
},
11+
container:(theme:Theme)=>({
12+
display:'flex'as'flex',
13+
flexDirection:'column'as'column',
14+
backgroundColor:theme['$color-white'],
15+
height:'auto',
16+
}),
17+
header:(theme:Theme)=>({
18+
display:'flex'as'flex',
19+
alignItems:'center',
20+
justifyContent:'space-between',
21+
height:'2rem',
22+
backgroundColor:theme['$color-fill1-2'],
23+
fontSize:'1rem',
24+
lineHeight:'1rem',
25+
padding:'10px 0.4rem',
26+
}),
27+
content:{
28+
padding:'0.5rem',
29+
},
30+
menu:{},
31+
menuItem:{
32+
display:'flex'as'flex',
33+
border:'1px solid rgb(173, 173, 173)',
34+
borderRadius:'5px',
35+
padding:'0.5rem',
36+
},
37+
menuItemHeader:{
38+
fontWeight:'bold'as'bold',
39+
},
40+
menuItemContent:{},
41+
menuItemButton:{
42+
marginLeft:'auto'as'auto',
843
},
944
}
1045

11-
constSettingsPage=()=>{
12-
return<divcss={styles.container}>Settings coming soon...</div>
46+
interfaceProps{}
47+
48+
constSettingsPage=(props:Props)=>{
49+
constonReset=()=>{
50+
console.log('Trigger a reset event here')
51+
}
52+
return(
53+
<divcss={styles.container}>
54+
<divcss={styles.header}>
55+
<div>Settings</div>
56+
</div>
57+
<divcss={styles.content}>
58+
<divcss={styles.menu}>
59+
<divcss={styles.menuItem}>
60+
<divcss={styles.flexColumn}>
61+
<divcss={styles.menuItemHeader}>Reset Tutorial</div>
62+
<divcss={styles.menuItemContent}>
63+
This will reset the whole tutorial and change the source files back to the first level and first task
64+
checkpoint.
65+
</div>
66+
</div>
67+
<Resetstyle={styles.menuItemButton}warningonReset={onReset}/>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
)
1373
}
1474

1575
exportdefaultSettingsPage

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

Lines changed: 2 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:{
@@ -155,7 +156,7 @@ const TutorialPage = (props: PageProps) => {
155156
)}
156157
{page==='review'&&<ReviewPagelevels={levels}onResetToPosition={onResetToPosition}/>}
157158

158-
{/* {page === 'settings' && <SettingsPage />} */}
159+
{page==='settings'&&<SettingsPage/>}
159160
</div>
160161

161162
{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<Settings/>
10+
})

0 commit comments

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