admin toggle added

Signed-off-by: shmck <[email protected]>

Author: ShMcK

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

@@ -12,14 +12,20 @@ import AdminToggle from '../../services/admin/AdminToggle'
 const styles = {
   page: (theme: Theme) => ({
     position: 'relative' as 'relative',
-    display: 'flex' as 'flex',
-    flexDirection: 'column' as 'column',
+    display: 'grid' as 'grid',
+    gridTemplateColumns: '1fr',
+    gridTemplateRows: '1fr 1fr 1fr 1fr',
+    gridTemplateAreas: `
+      "." "header" "options" "hidden-options";
+    `,
+    justifyItems: 'center',
     width: '100%',
     maxWidth: '100%',
     height: '100vh',
     backgroundColor: theme['$color-white'],
   }),
   header: {
+    gridArea: 'header',
     flex: 1,
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
@@ -38,6 +44,7 @@ const styles = {
     textAlign: 'center' as 'center',
   },
   options: {
+    gridArea: 'options',
     flex: 1,
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
@@ -56,6 +63,8 @@ const styles = {
     '&:hover,&:focus': css({
       backgroundColor: theme['$color-fill1-1'],
       borderColor: theme['$color-line1-4'],
+      outline: 'none',
+      boxShadow: 'none',
     }),
   }),
   continueTitle: (theme: Theme) => ({
@@ -69,6 +78,18 @@ const styles = {
     alignItems: 'center' as 'center',
     margin: '0.5rem',
   },
+  hiddenOptions: (theme: Theme) => ({
+    gridArea: 'hidden-options',
+    display: 'flex' as 'flex',
+    justifyContent: 'center' as 'center',
+    alignItems: 'center' as 'center',
+    width: '6rem',
+    padding: '0.5rem',
+    marginTop: '8rem',
+    borderTopLeftRadius: '8px',
+    borderTopRightRadius: '8px',
+    backgroundColor: theme['$color-fill1-1'],
+  }),
 }
 
 interface Props {
@@ -106,7 +127,11 @@ export const StartPage = (props: Props) => (
         </div>
       )}
     </div>
-    {ADMIN_MODE ? <AdminToggle /> : null}
+    {ADMIN_MODE ? (
+      <div css={styles.hiddenOptions}>
+        <AdminToggle />
+      </div>
+    ) : null}
   </div>
 )
 

web-app/src/environment.ts

@@ -16,5 +16,5 @@ export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL
 export const DISPLAY_RUN_TEST_BUTTON =
   (process.env.CODEROAD_DISPLAY_RUN_TEST_BUTTON || 'true').toLowerCase() !== 'false' // default true
 
-export const ADMIN_MODE =
-  (process.env.CODEROAD_ADMIN_MODE || process.env.STORYBOOK_ADMIN_MODE || '').toLowerCase() === 'true' // default false
+export const ADMIN_MODE = false
+// (process.env.CODEROAD_ADMIN_MODE || process.env.STORYBOOK_ADMIN_MODE || '').toLowerCase() === 'true' // default false

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

@@ -1,19 +1,32 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
-import { Form, Switch } from '@alifd/next'
+import { Switch } from '@alifd/next'
 import AdminContext, { AdminContextType } from './context'
 
+const styles = {
+  container: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+    justifyContent: 'center' as 'center',
+    alignItems: 'center' as 'center',
+  },
+  label: {
+    marginBottom: '4px',
+  },
+}
+
 type Props = {}
 
 const AdminToggle = (props: Props) => {
   const { state, dispatch } = React.useContext<AdminContextType>(AdminContext)
   return (
-    <Form.Item label="Admin Mode">
+    <div css={styles.container}>
+      <div css={styles.label}>Admin Mode</div>
       <Switch
         checked={state.adminMode}
         onChange={(checked: boolean) => dispatch({ type: checked ? 'ADMIN_MODE_ON' : 'ADMIN_MODE_OFF' })}
       />
-    </Form.Item>
+    </div>
   )
 }
 

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { ADMIN_MODE } from '../../environment'
 
 type Props = {
   children: React.ReactElement
@@ -13,7 +14,7 @@ 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 },
+  state: { adminMode: ADMIN_MODE },
   dispatch: () => {},
 })
 
@@ -22,7 +23,6 @@ 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 }
@@ -32,7 +32,7 @@ export const AdminProvider = (props: Props) => {
           throw new Error()
       }
     },
-    { adminMode: false },
+    { adminMode: ADMIN_MODE },
   )
   return <AdminContext.Provider value={{ state, dispatch }}>{props.children}</AdminContext.Provider>
 }