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

Commit8db3798

Browse files
authored
Merge pull requestcoderoad#408 from coderoad/feature/admin-mode
Style fixes
2 parents704193f +99bf1a9 commit8db3798

File tree

13 files changed

+148
-79
lines changed

13 files changed

+148
-79
lines changed

‎web-app/src/App.tsx

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
import*asReactfrom'react'
2-
import{ConfigProvider}from'@alifd/next'
3-
importenUSfrom'@alifd/next/lib/locale/en-us'
4-
importErrorBoundaryfrom'./components/ErrorBoundary'
5-
importWorkspacefrom'./components/Workspace'
6-
import{ThemeProvider}from'emotion-theming'
7-
importthemefrom'./styles/theme'
2+
importProviderfrom'./Provider'
83
importRoutesfrom'./Routes'
94

105
constApp=()=>(
11-
/*@ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
12-
<ConfigProviderlocale={enUS}>
13-
<Workspace>
14-
<ErrorBoundary>
15-
<ThemeProvidertheme={theme}>
16-
<Routes/>
17-
</ThemeProvider>
18-
</ErrorBoundary>
19-
</Workspace>
20-
</ConfigProvider>
6+
<Provider>
7+
<Routes/>
8+
</Provider>
219
)
2210

2311
exportdefaultApp

‎web-app/src/Provider.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
3+
import{ConfigProvider}from'@alifd/next'
4+
importenUSfrom'@alifd/next/lib/locale/en-us'
5+
importErrorBoundaryfrom'./components/ErrorBoundary'
6+
import{ThemeProvider}from'emotion-theming'
7+
import{AdminProvider}from'./services/admin/context'
8+
importtheme,{Theme}from'./styles/theme'
9+
10+
typeProps={
11+
children:React.ReactElement
12+
}
13+
14+
conststyles={
15+
page:(theme:Theme)=>({
16+
display:'flex'as'flex',
17+
position:'relative'as'relative',
18+
margin:0,
19+
width:'100vw',
20+
maxWidth:'100%',
21+
minHeight:'100vh',
22+
backgroundColor:theme['$color-white'],
23+
overflow:'auto',
24+
}),
25+
}
26+
27+
constProvider=(props:Props)=>(
28+
/*@ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
29+
<ConfigProviderlocale={enUS}>
30+
<divcss={styles.page}>
31+
<AdminProvider>
32+
<ErrorBoundary>
33+
<ThemeProvidertheme={theme}>{props.children}</ThemeProvider>
34+
</ErrorBoundary>
35+
</AdminProvider>
36+
</div>
37+
</ConfigProvider>
38+
)
39+
40+
exportdefaultProvider

‎web-app/src/components/Workspace/index.tsx

Lines changed: 0 additions & 25 deletions
This file was deleted.

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,19 @@ interface Props {
1111

1212
conststyles={
1313
page:{
14-
position:'relative'as'relative',
1514
display:'flex'as'flex',
1615
flexDirection:'column'as'column',
1716
alignItems:'center'as'center',
1817
justifyContent:'center'as'center',
19-
height:'100vh',
20-
width:'100vw',
18+
position:'absolute'as'absolute',
19+
top:0,
20+
bottom:0,
21+
left:0,
22+
right:0,
2123
},
2224
processes:{
2325
padding:'0 1rem',
24-
position:'fixed'as'fixed',
26+
position:'absolute'as'absolute',
2527
bottom:0,
2628
left:0,
2729
right:0,

‎web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const styles = {
1111
display:'flex'as'flex',
1212
flexDirection:'column'as'column',
1313
width:'100%',
14+
height:'100%',
1415
},
1516
nav:(theme:Theme)=>({
1617
height:theme['$nav-height'],
@@ -22,6 +23,7 @@ const styles = {
2223
cursor:'pointer',
2324
}),
2425
content:{
26+
height:'100%',
2527
paddingBottom:'5rem',
2628
},
2729
header:(theme:Theme)=>({
@@ -45,7 +47,7 @@ const styles = {
4547
paddingLeft:'1.1rem',
4648
},
4749
footer:(theme:Theme)=>({
48-
position:'fixed'as'fixed',
50+
position:'absolute'as'absolute',
4951
bottom:0,
5052
left:0,
5153
right:0,
@@ -54,10 +56,11 @@ const styles = {
5456
alignItems:'center'as'center',
5557
justifyContent:'flex-end'as'flex-end',
5658
height:theme['$footer-height'],
57-
padding:'1rem',
59+
padding:'0rem 0.5rem',
5860
paddingRight:'2rem',
5961
backgroundColor:theme['$color-black'],
6062
width:'100%',
63+
zIndex:100,
6164
}),
6265
}
6366

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import BetaBadge from '../../components/BetaBadge'
66
import{css,jsx}from'@emotion/core'
77
importButtonfrom'../../components/Button'
88
import{Theme}from'../../styles/theme'
9+
import{ADMIN_MODE}from'../../environment'
10+
importAdminTogglefrom'../../services/admin/AdminToggle'
911

1012
conststyles={
1113
page:(theme:Theme)=>({
@@ -104,6 +106,7 @@ export const StartPage = (props: Props) => (
104106
</div>
105107
)}
106108
</div>
109+
{ADMIN_MODE ?<AdminToggle/> :null}
107110
</div>
108111
)
109112

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,23 +56,23 @@ const styles = {
5656
fontSize:'1rem',
5757
lineHeight:'1rem',
5858
padding:'10px 0rem',
59-
position:'fixed'as'fixed',
59+
position:'absolute'as'absolute',
6060
bottom:0,
6161
left:0,
6262
right:0,
6363
color:theme['$color-white'],
6464
zIndex:1000,
6565
}),
6666
completeFooter:{
67-
position:'fixed'as'fixed',
67+
position:'absolute'as'absolute',
6868
bottom:0,
6969
left:0,
7070
right:0,
7171
zIndex:1000,
7272
},
7373
processes:(theme:Theme)=>({
7474
padding:'0 1rem',
75-
position:'fixed'as'fixed',
75+
position:'absolute'as'absolute',
7676
bottom:theme['$footer-height'],
7777
left:0,
7878
right:0,

‎web-app/src/environment.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,6 @@ export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL
1414

1515
// config variables
1616
exportconstDISPLAY_RUN_TEST_BUTTON=(process.env.CODEROAD_DISPLAY_RUN_TEST_BUTTON||'true').toLowerCase()==='true'
17+
18+
exportconstADMIN_MODE=
19+
(process.env.CODEROAD_ADMIN_MODE||process.env.STORYBOOK_ADMIN_MODE||'').toLowerCase()==='true'
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
3+
import{Form,Switch}from'@alifd/next'
4+
importAdminContext,{AdminContextType}from'./context'
5+
6+
typeProps={}
7+
8+
constAdminToggle=(props:Props)=>{
9+
const{ state, dispatch}=React.useContext<AdminContextType>(AdminContext)
10+
return(
11+
<Form.Itemlabel="Admin Mode">
12+
<Switch
13+
checked={state.adminMode}
14+
onChange={(checked:boolean)=>dispatch({type:checked ?'ADMIN_MODE_ON' :'ADMIN_MODE_OFF'})}
15+
/>
16+
</Form.Item>
17+
)
18+
}
19+
20+
exportdefaultAdminToggle
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import*asReactfrom'react'
2+
3+
typeProps={
4+
children:React.ReactElement
5+
}
6+
7+
typeState={
8+
adminMode:boolean
9+
}
10+
11+
typeAction={type:'ADMIN_MODE_ON'|'ADMIN_MODE_OFF'}
12+
13+
exporttypeAdminContextType={state:State;dispatch:(action:Action)=>void}
14+
15+
constAdminContext=React.createContext<AdminContextType>({
16+
state:{adminMode:false},
17+
dispatch:()=>{},
18+
})
19+
20+
exportdefaultAdminContext
21+
22+
exportconstAdminProvider=(props:Props)=>{
23+
const[state,dispatch]=React.useReducer(
24+
(state:State,action:Action)=>{
25+
console.log('action.type',action.type)
26+
switch(action.type){
27+
case'ADMIN_MODE_ON':
28+
return{ ...state,adminMode:true}
29+
case'ADMIN_MODE_OFF':
30+
return{ ...state,adminMode:false}
31+
default:
32+
thrownewError()
33+
}
34+
},
35+
{adminMode:false},
36+
)
37+
return<AdminContext.Providervalue={{ state, dispatch}}>{props.children}</AdminContext.Provider>
38+
}
39+
40+
exportconstAdminConsumer=AdminContext.Consumer
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+
importAdminTogglefrom'../../src/services/admin/AdminToggle'
5+
6+
storiesOf('Admin',module)
7+
.addDecorator(SideBarDecorator)
8+
.add('Toggle',()=>{
9+
return<AdminToggle/>
10+
})

‎web-app/stories/utils/ProviderDecorator.tsx

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎web-app/stories/utils/SideBarDecorator.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import*asReactfrom'react'
22
import{css,jsx}from'@emotion/core'
3-
import{Provider}from'./ProviderDecorator'
4-
import{ThemeProvider}from'emotion-theming'
5-
importthemefrom'../../src/styles/theme'
3+
importProviderfrom'../../src/Provider'
64

75
conststyles={
8-
container:{
9-
left:'25rem',
10-
position:'absolute'as'absolute',
11-
boxSizing:'border-box'as'border-box',
12-
borderLeft:'2px solid black',
13-
borderRight:'2px solid black',
6+
limitedWidthContainer:{
7+
left:0,
8+
top:0,
9+
position:'fixed'as'fixed',
10+
borderRight:'1px solid black',
1411
width:'50rem',
15-
height:window.innerHeight,
16-
backgroundColor:'white',
12+
height:'100%',
13+
// backgroundColor: 'white',
14+
},
15+
container:{
16+
position:'relative'as'relative',
1717
},
1818
}
1919

2020
constSideBarDecorator=(storyFn)=>(
2121
<Provider>
22-
<ThemeProvidertheme={theme}>
23-
<divcss={styles.container}>{storyFn()}</div>
24-
</ThemeProvider>
22+
<divcss={styles.container}>
23+
<divcss={styles.limitedWidthContainer}>{storyFn()}</div>
24+
</div>
2525
</Provider>
2626
)
2727

0 commit comments

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