Jul 12, 2020 · Jul 12, 2020 · Jul 12, 2020
diff --git a/web-app/src/containers/Tutorial/containers/Review.tsx b/web-app/src/containers/Tutorial/containers/Review.tsx
 import * as React from 'react'
 import * as T from 'typings'
 import { Switch } from '@alifd/next'
 import Steps from '../components/Steps'
 import Content from '../components/Content'

  header: {
    display: 'flex' as 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    justifyContent: 'space-between',
    height: '2rem',
    backgroundColor: '#EBEBEB',
    fontSize: '1rem',
  title: {
    marginLeft: '0.5rem',
  },
  control: {
    display: 'flex' as 'flex',
    alignItems: 'center',
    fontSize: '70%',
  },
  levels: {
    paddingBottom: '2rem',
  },
 }

 const ReviewPage = (props: Props) => {
  const [stepVisibility, setStepVisibility] = React.useState(false)
  return (
    <div css={styles.container}>
      <div css={styles.header}>Review</div>
      {props.levels.map((level: T.LevelUI, index: number) => (
        <div key={level.id}>
          <div>
            <Content title={level.title} content={level.content} />
            <Steps steps={level.steps} displayAll />
          </div>
          {/* divider */}
          {index < props.levels.length - 1 ? <hr /> : null}
      <div css={styles.header}>
        <div>Review</div>
        <div css={styles.control}>
          <span>Show steps&nbsp;</span>
          <Switch checked={stepVisibility} onChange={(checked) => setStepVisibility(checked)} />
        </div>
      ))}
      </div>
      <div css={styles.levels}>
        {props.levels.map((level: T.LevelUI, index: number) => (
          <div key={level.id}>
            <div>
              <Content title={level.title} content={level.content} />
              {stepVisibility ? <Steps steps={level.steps} displayAll /> : null}
            </div>
            {/* divider */}
            {index < props.levels.length - 1 ? <hr /> : null}
          </div>
        ))}
      </div>
    </div>
  )
 }
diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx
 import * as React from 'react'
 import * as T from 'typings'
 import './style.css'
 import * as selectors from '../../services/selectors'
 import SideMenu from './components/SideMenu'
 import Level from './components/Level'
      <div>
        <div css={styles.header}>
          <a onClick={() => setMenuVisible(!menuVisible)}>
            <Icon type="toggle-left" size="small" />
            <Icon type="toggle-left" size="small"style={{ color: '#333' }}/>
          </a>
          <span css={styles.title}>{tutorial.summary.title}</span>
        </div>
diff --git a/web-app/src/containers/Tutorial/style.css b/web-app/src/containers/Tutorial/style.css
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		import * as React from 'react'
		import * as T from 'typings'
		import { Switch } from '@alifd/next'
		import Steps from '../components/Steps'
		import Content from '../components/Content'

Expand All		@@ -15,7 +16,7 @@ const styles = {
		header: {
		display: 'flex' as 'flex',
		alignItems: 'center',
		justifyContent: 'flex-start',
		justifyContent: 'space-between',
		height: '2rem',
		backgroundColor: '#EBEBEB',
		fontSize: '1rem',
Expand All		@@ -25,22 +26,39 @@ const styles = {
		title: {
		marginLeft: '0.5rem',
		},
		control: {
		display: 'flex' as 'flex',
		alignItems: 'center',
		fontSize: '70%',
		},
		levels: {
		paddingBottom: '2rem',
		},
		}

		const ReviewPage = (props: Props) => {
		const [stepVisibility, setStepVisibility] = React.useState(false)
		return (
		<div css={styles.container}>
		<div css={styles.header}>Review</div>
		{props.levels.map((level: T.LevelUI, index: number) => (
		<div key={level.id}>
		<div>
		<Content title={level.title} content={level.content} />
		<Steps steps={level.steps} displayAll />
		</div>
		{/* divider */}
		{index < props.levels.length - 1 ? <hr /> : null}
		<div css={styles.header}>
		<div>Review</div>
		<div css={styles.control}>
		<span>Show steps </span>
		<Switch checked={stepVisibility} onChange={(checked) => setStepVisibility(checked)} />
		</div>
		))}
		</div>
		<div css={styles.levels}>
		{props.levels.map((level: T.LevelUI, index: number) => (
		<div key={level.id}>
		<div>
		<Content title={level.title} content={level.content} />
		{stepVisibility ? <Steps steps={level.steps} displayAll /> : null}
		</div>
		{/* divider */}
		{index < props.levels.length - 1 ? <hr /> : null}
		</div>
		))}
		</div>
		</div>
		)
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,5 @@
		import * as React from 'react'
		import * as T from 'typings'
		import './style.css'
		import * as selectors from '../../services/selectors'
		import SideMenu from './components/SideMenu'
		import Level from './components/Level'
Expand DownExpand Up		@@ -118,7 +117,7 @@ const TutorialPage = (props: PageProps) => {
		<div>
		<div css={styles.header}>
		<a onClick={() => setMenuVisible(!menuVisible)}>
		<Icon type="toggle-left" size="small" />
		<Icon type="toggle-left" size="small"style={{ color: '#333' }}/>
		</a>
		<span css={styles.title}>{tutorial.summary.title}</span>
		</div>
Expand Down