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

Commitc6261c7

Browse files
committed
admin toggle added
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent107470b commitc6261c7

File tree

4 files changed

+49
-11
lines changed

4 files changed

+49
-11
lines changed

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

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,20 @@ import AdminToggle from '../../services/admin/AdminToggle'
1212
conststyles={
1313
page:(theme:Theme)=>({
1414
position:'relative'as'relative',
15-
display:'flex'as'flex',
16-
flexDirection:'column'as'column',
15+
display:'grid'as'grid',
16+
gridTemplateColumns:'1fr',
17+
gridTemplateRows:'1fr 1fr 1fr 1fr',
18+
gridTemplateAreas:`
19+
"." "header" "options" "hidden-options";
20+
`,
21+
justifyItems:'center',
1722
width:'100%',
1823
maxWidth:'100%',
1924
height:'100vh',
2025
backgroundColor:theme['$color-white'],
2126
}),
2227
header:{
28+
gridArea:'header',
2329
flex:1,
2430
display:'flex'as'flex',
2531
flexDirection:'column'as'column',
@@ -38,6 +44,7 @@ const styles = {
3844
textAlign:'center'as'center',
3945
},
4046
options:{
47+
gridArea:'options',
4148
flex:1,
4249
display:'flex'as'flex',
4350
flexDirection:'column'as'column',
@@ -56,6 +63,8 @@ const styles = {
5663
'&:hover,&:focus':css({
5764
backgroundColor:theme['$color-fill1-1'],
5865
borderColor:theme['$color-line1-4'],
66+
outline:'none',
67+
boxShadow:'none',
5968
}),
6069
}),
6170
continueTitle:(theme:Theme)=>({
@@ -69,6 +78,18 @@ const styles = {
6978
alignItems:'center'as'center',
7079
margin:'0.5rem',
7180
},
81+
hiddenOptions:(theme:Theme)=>({
82+
gridArea:'hidden-options',
83+
display:'flex'as'flex',
84+
justifyContent:'center'as'center',
85+
alignItems:'center'as'center',
86+
width:'6rem',
87+
padding:'0.5rem',
88+
marginTop:'8rem',
89+
borderTopLeftRadius:'8px',
90+
borderTopRightRadius:'8px',
91+
backgroundColor:theme['$color-fill1-1'],
92+
}),
7293
}
7394

7495
interfaceProps{
@@ -106,7 +127,11 @@ export const StartPage = (props: Props) => (
106127
</div>
107128
)}
108129
</div>
109-
{ADMIN_MODE ?<AdminToggle/> :null}
130+
{ADMIN_MODE ?(
131+
<divcss={styles.hiddenOptions}>
132+
<AdminToggle/>
133+
</div>
134+
) :null}
110135
</div>
111136
)
112137

‎web-app/src/environment.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,5 @@ export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL
1616
exportconstDISPLAY_RUN_TEST_BUTTON=
1717
(process.env.CODEROAD_DISPLAY_RUN_TEST_BUTTON||'true').toLowerCase()!=='false'// default true
1818

19-
exportconstADMIN_MODE=
20-
(process.env.CODEROAD_ADMIN_MODE||process.env.STORYBOOK_ADMIN_MODE||'').toLowerCase()==='true'// default false
19+
exportconstADMIN_MODE=false
20+
// (process.env.CODEROAD_ADMIN_MODE || process.env.STORYBOOK_ADMIN_MODE || '').toLowerCase() === 'true' // default false

‎web-app/src/services/admin/AdminToggle.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
11
import*asReactfrom'react'
22
import{css,jsx}from'@emotion/core'
3-
import{Form,Switch}from'@alifd/next'
3+
import{Switch}from'@alifd/next'
44
importAdminContext,{AdminContextType}from'./context'
55

6+
conststyles={
7+
container:{
8+
display:'flex'as'flex',
9+
flexDirection:'column'as'column',
10+
justifyContent:'center'as'center',
11+
alignItems:'center'as'center',
12+
},
13+
label:{
14+
marginBottom:'4px',
15+
},
16+
}
17+
618
typeProps={}
719

820
constAdminToggle=(props:Props)=>{
921
const{ state, dispatch}=React.useContext<AdminContextType>(AdminContext)
1022
return(
11-
<Form.Itemlabel="Admin Mode">
23+
<divcss={styles.container}>
24+
<divcss={styles.label}>Admin Mode</div>
1225
<Switch
1326
checked={state.adminMode}
1427
onChange={(checked:boolean)=>dispatch({type:checked ?'ADMIN_MODE_ON' :'ADMIN_MODE_OFF'})}
1528
/>
16-
</Form.Item>
29+
</div>
1730
)
1831
}
1932

‎web-app/src/services/admin/context.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import*asReactfrom'react'
2+
import{ADMIN_MODE}from'../../environment'
23

34
typeProps={
45
children:React.ReactElement
@@ -13,7 +14,7 @@ type Action = { type: 'ADMIN_MODE_ON' | 'ADMIN_MODE_OFF' }
1314
exporttypeAdminContextType={state:State;dispatch:(action:Action)=>void}
1415

1516
constAdminContext=React.createContext<AdminContextType>({
16-
state:{adminMode:false},
17+
state:{adminMode:ADMIN_MODE},
1718
dispatch:()=>{},
1819
})
1920

@@ -22,7 +23,6 @@ export default AdminContext
2223
exportconstAdminProvider=(props:Props)=>{
2324
const[state,dispatch]=React.useReducer(
2425
(state:State,action:Action)=>{
25-
console.log('action.type',action.type)
2626
switch(action.type){
2727
case'ADMIN_MODE_ON':
2828
return{ ...state,adminMode:true}
@@ -32,7 +32,7 @@ export const AdminProvider = (props: Props) => {
3232
thrownewError()
3333
}
3434
},
35-
{adminMode:false},
35+
{adminMode:ADMIN_MODE},
3636
)
3737
return<AdminContext.Providervalue={{ state, dispatch}}>{props.children}</AdminContext.Provider>
3838
}

0 commit comments

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