Merge pull request #408 from coderoad/feature/admin-mode

Style fixes

Author: ShMcK

web-app/src/App.tsx

@@ -1,23 +1,11 @@
 import * as React from 'react'
-import { ConfigProvider } from '@alifd/next'
-import enUS from '@alifd/next/lib/locale/en-us'
-import ErrorBoundary from './components/ErrorBoundary'
-import Workspace from './components/Workspace'
-import { ThemeProvider } from 'emotion-theming'
-import theme from './styles/theme'
+import Provider from './Provider'
 import Routes from './Routes'
 
 const App = () => (
-  /* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
-  <ConfigProvider locale={enUS}>
-    <Workspace>
-      <ErrorBoundary>
-        <ThemeProvider theme={theme}>
-          <Routes />
-        </ThemeProvider>
-      </ErrorBoundary>
-    </Workspace>
-  </ConfigProvider>
+  <Provider>
+    <Routes />
+  </Provider>
 )
 
 export default App

web-app/src/Provider.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { css, jsx } from '@emotion/core'
+import { ConfigProvider } from '@alifd/next'
+import enUS from '@alifd/next/lib/locale/en-us'
+import ErrorBoundary from './components/ErrorBoundary'
+import { ThemeProvider } from 'emotion-theming'
+import { AdminProvider } from './services/admin/context'
+import theme, { Theme } from './styles/theme'
+
+type Props = {
+  children: React.ReactElement
+}
+
+const styles = {
+  page: (theme: Theme) => ({
+    display: 'flex' as 'flex',
+    position: 'relative' as 'relative',
+    margin: 0,
+    width: '100vw',
+    maxWidth: '100%',
+    minHeight: '100vh',
+    backgroundColor: theme['$color-white'],
+    overflow: 'auto',
+  }),
+}
+
+const Provider = (props: Props) => (
+  /* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
+  <ConfigProvider locale={enUS}>
+    <div css={styles.page}>
+      <AdminProvider>
+        <ErrorBoundary>
+          <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+        </ErrorBoundary>
+      </AdminProvider>
+    </div>
+  </ConfigProvider>
+)
+
+export default Provider

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

@@ -11,17 +11,19 @@ interface Props {
 
 const styles = {
   page: {
-    position: 'relative' as 'relative',
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     alignItems: 'center' as 'center',
     justifyContent: 'center' as 'center',
-    height: '100vh',
-    width: '100vw',
+    position: 'absolute' as 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
   },
   processes: {
     padding: '0 1rem',
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: 0,
     left: 0,
     right: 0,

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

@@ -11,6 +11,7 @@ const styles = {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     width: '100%',
+    height: '100%',
   },
   nav: (theme: Theme) => ({
     height: theme['$nav-height'],
@@ -22,6 +23,7 @@ const styles = {
     cursor: 'pointer',
   }),
   content: {
+    height: '100%',
     paddingBottom: '5rem',
   },
   header: (theme: Theme) => ({
@@ -45,7 +47,7 @@ const styles = {
     paddingLeft: '1.1rem',
   },
   footer: (theme: Theme) => ({
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
@@ -54,10 +56,11 @@ const styles = {
     alignItems: 'center' as 'center',
     justifyContent: 'flex-end' as 'flex-end',
     height: theme['$footer-height'],
-    padding: '1rem',
+    padding: '0rem 0.5rem',
     paddingRight: '2rem',
     backgroundColor: theme['$color-black'],
     width: '100%',
+    zIndex: 100,
   }),
 }
 

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

@@ -6,6 +6,8 @@ import BetaBadge from '../../components/BetaBadge'
 import { css, jsx } from '@emotion/core'
 import Button from '../../components/Button'
 import { Theme } from '../../styles/theme'
+import { ADMIN_MODE } from '../../environment'
+import AdminToggle from '../../services/admin/AdminToggle'
 
 const styles = {
   page: (theme: Theme) => ({
@@ -104,6 +106,7 @@ export const StartPage = (props: Props) => (
         </div>
       )}
     </div>
+    {ADMIN_MODE ? <AdminToggle /> : null}
   </div>
 )
 

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

@@ -56,23 +56,23 @@ const styles = {
     fontSize: '1rem',
     lineHeight: '1rem',
     padding: '10px 0rem',
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
     color: theme['$color-white'],
     zIndex: 1000,
   }),
   completeFooter: {
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
     zIndex: 1000,
   },
   processes: (theme: Theme) => ({
     padding: '0 1rem',
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: theme['$footer-height'],
     left: 0,
     right: 0,

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

@@ -14,3 +14,6 @@ export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL
 
 // config variables
 export const DISPLAY_RUN_TEST_BUTTON = (process.env.CODEROAD_DISPLAY_RUN_TEST_BUTTON || 'true').toLowerCase() === 'true'
+
+export const ADMIN_MODE =
+  (process.env.CODEROAD_ADMIN_MODE || process.env.STORYBOOK_ADMIN_MODE || '').toLowerCase() === 'true'

web-app/src/environment.ts

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { css, jsx } from '@emotion/core'
+import { Form, Switch } from '@alifd/next'
+import AdminContext, { AdminContextType } from './context'
+
+type Props = {}
+
+const AdminToggle = (props: Props) => {
+  const { state, dispatch } = React.useContext<AdminContextType>(AdminContext)
+  return (
+    <Form.Item label="Admin Mode">
+      <Switch
+        checked={state.adminMode}
+        onChange={(checked: boolean) => dispatch({ type: checked ? 'ADMIN_MODE_ON' : 'ADMIN_MODE_OFF' })}
+      />
+    </Form.Item>
+  )
+}
+
+export default AdminToggle

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

@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+type Props = {
+  children: React.ReactElement
+}
+
+type State = {
+  adminMode: boolean
+}
+
+type Action = { type: 'ADMIN_MODE_ON' | 'ADMIN_MODE_OFF' }
+
+export type AdminContextType = { state: State; dispatch: (action: Action) => void }
+
+const AdminContext = React.createContext<AdminContextType>({
+  state: { adminMode: false },
+  dispatch: () => {},
+})
+
+export default AdminContext
+
+export const AdminProvider = (props: Props) => {
+  const [state, dispatch] = React.useReducer(
+    (state: State, action: Action) => {
+      console.log('action.type', action.type)
+      switch (action.type) {
+        case 'ADMIN_MODE_ON':
+          return { ...state, adminMode: true }
+        case 'ADMIN_MODE_OFF':
+          return { ...state, adminMode: false }
+        default:
+          throw new Error()
+      }
+    },
+    { adminMode: false },
+  )
+  return <AdminContext.Provider value={{ state, dispatch }}>{props.children}</AdminContext.Provider>
+}
+
+export const AdminConsumer = AdminContext.Consumer