Feature/styles

web-app/src/App.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import * as CR from 'typings'
 
-import Debugger from './components/Debugger'
+// import Debugger from './components/Debugger'
 import Routes from './Routes'
+import DataContext, { initialData, initialState } from './utils/DataContext'
 import { send } from './utils/vscode'
-import DataContext, { initialState, initialData } from './utils/DataContext'
 
 interface ReceivedEvent {
  data: CR.Action

web-app/src/components/Divider.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+const styles = {
+ divider: {
+ backgroundColor: '#e8e8e8',
+ height: '0.1rem',
+ },
+}
+
+const Divider = () => <div style={styles.divider} />
+
+export default Divider

web-app/src/components/Level/LevelStageSummary.tsx

@@ -0,0 +1,51 @@
+import { Button } from '@alifd/next'
+import * as React from 'react'
+import CC from '../../../../typings/context'
+
+import Markdown from '../Markdown'
+
+const styles = {
+ active: {
+ backgroundColor: '#e6f7ff',
+ },
+ card: {
+ padding: '0.5rem 1rem',
+ },
+ completed: {
+ backgroundColor: '#f6ffed',
+ },
+ disabled: {
+ // backgroundColor: 'blue',
+ },
+ options: {},
+ title: {
+ margin: 0,
+ },
+}
+
+interface Props {
+ stage: CC.StageWithStatus
+ onNext(): void
+}
+
+const LevelStageSummary = (props: Props) => {
+ const { stage, onNext } = props
+ const { complete, active } = stage.status
+ const cardStyle = {
+ ...styles.card,
+ ...(active ? styles.active : styles.disabled),
+ ...(complete ? styles.completed : {}),
+ }
+ return (
+ <div style={cardStyle}>
+ <h3 style={styles.title}>{stage.content.title}</h3>
+ <Markdown>{stage.content.text}</Markdown>
+ <div style={styles.options}>
+ {active && <Button onClick={onNext}>Continue</Button>}
+ {complete && <div>Complete</div>}
+ </div>
+ </div>
+ )
+}
+
+export default LevelStageSummary

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

@@ -1,48 +1,54 @@
+import { Button } from '@alifd/next'
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
+import Divider from '../Divider'
 import Markdown from '../Markdown'
+import LevelStageSummary from './LevelStageSummary'
 
 const styles = {
- card: {
- // width: '20rem',
+ card: {},
+ content: {
+ padding: '0rem 1rem',
+ paddingBottom: '1rem',
  },
-disabled: {
-backgroundColor: 'grey',
+list: {
+padding: '0rem',
  },
+ options: {
+ padding: '0rem 1rem',
+ },
+ title: {},
 }
 
 interface Props {
  level: CR.TutorialLevel
- onNext(): void
- onBack(): void
  stages: {
  [stageId: string]: any // CC.StageWithStatus
  }
+ onNext(): void
+ onBack(): void
 }
 
 const Level = ({ level, stages, onNext, onBack }: Props) => {
  const { title, text } = level.content
  return (
- <Card style={styles.card} title={title} showTitleBullet={false} contentHeight="auto">
- <Markdown>{text}</Markdown>
- <div>
+ <div style={styles.card}>
+ <div style={styles.content}>
+ <h2 style={styles.title}>{title}</h2>
+ <Markdown>{text}</Markdown>
+ </div>
+ <Divider />
+ <div style={styles.list}>
  {level.stageList.map((stageId: string) => {
  const stage = stages[stageId]
- const unavailable = !stage.status.complete && !stage.status.active
- return (
- <div key={stageId} style={unavailable ? styles.disabled : {}}>
- <h3>{stage.content.title}</h3>
- <p>{stage.content.text}</p>
- {stage.status.active && <Button onClick={onNext}>Continue</Button>}
- {stage.status.complete && <div>Complete</div>}
- </div>
- )
+ return <LevelStageSummary key={stageId} stage={stage} onNext={onNext} />
  })}
  </div>
- <Button onClick={onBack}>Back</Button>
- </Card>
+ <div style={styles.options}>
+ <Button onClick={onBack}>Back</Button>
+ </div>
+ </div>
  )
 }
 

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

@@ -1,42 +1,56 @@
+import { Button } from '@alifd/next'
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
+import Divider from '../Divider'
 import Markdown from '../Markdown'
 import Step from '../Step'
 
 const styles = {
  card: {
-// width: '20rem',
+padding: 0,
  },
+ content: {
+ padding: '0rem 1rem',
+ paddingBottom: '1rem',
+ },
+ options: {
+ padding: '0rem 1rem',
+ },
+ title: {},
 }
 
 interface Props {
  stage: CR.TutorialStage
  steps: {
  [stepId: string]: any // CC.Step
  }
- onNextStage(): void
  complete: boolean
+ onNextStage(): void
 }
 
 const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
  const { title, text } = stage.content
  return (
- <Card style={styles.card} title={title} showTitleBullet={false} contentHeight="auto">
- <Markdown>{text}</Markdown>
+ <div style={styles.card}>
+ <div style={styles.content}>
+ <h2 style={styles.title}>{title}</h2>
+ <Markdown>{text}</Markdown>
+ </div>
+ <Divider />
  <div>
  {stage.stepList.map((stepId: string) => {
  const step = steps[stepId]
  return <Step key={stepId} content={step.content} status={step.status} />
  })}
  </div>
+
  {complete && (
- <div>
+ <div style={styles.options}>
  <Button onClick={onNextStage}>Continue</Button>
  </div>
  )}
- </Card>
+ </div>
  )
 }
 

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

@@ -5,19 +5,24 @@ import CR from 'typings'
 import Markdown from '../Markdown'
 
 const styles = {
+ active: {
+ backgroundColor: '#e6f7ff',
+ },
  card: {
- display: 'flex',
- flexDirection: 'row' as 'row',
- margin: '1rem',
+ borderRadius: '0.3rem',
+ display: 'grid',
+ gridTemplateAreas: 'CheckboxMargin Content',
+ gridTemplateColumns: '2rem 1fr',
+ gridTemplateRows: '1fr',
+ padding: '1rem',
  },
  left: {
- width: '2rem',
+ justifySelf: 'center',
+ paddingTop: '0.8rem',
  },
  right: {
- flex: 1,
- },
- active: {
- backgroundColor: 'yellow',
+ padding: '0.2rem',
+ paddingTop: 0,
  },
 }
 

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

@@ -1,11 +1,18 @@
+import { Button } from '@alifd/next'
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
 const styles = {
  card: {
  // width: '20rem',
  },
+ content: {
+ padding: '0rem 1rem',
+ },
+ options: {
+ padding: '1rem',
+ },
+ title: {},
 }
 
 interface Props {
@@ -16,10 +23,15 @@ interface Props {
 const Summary = ({ data, onNext }: Props) => {
  const { summary } = data
  return (
- <Card style={styles.card} title={summary.title} showTitleBullet={false} contentHeight="auto">
- <p>{summary.description}</p>
- <Button onClick={() => onNext()}>Continue</Button>
- </Card>
+ <div style={styles.card}>
+ <div style={styles.content}>
+ <h2 style={styles.title}>{summary.title}</h2>
+ <p>{summary.description}</p>
+ </div>
+ <div style={styles.options}>
+ <Button onClick={() => onNext()}>Continue</Button>
+ </div>
+ </div>
  )
 }
 

web-app/stories/Level.stories.tsx

@@ -6,39 +6,55 @@ import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 import Level from '../src/components/Level'
-import demo from './data/basic'
 
 storiesOf('Tutorial SideBar', module)
  .addDecorator(SideBarDecorator)
  .addDecorator(withKnobs)
  .add('Level', () => (
  <Level
- level={object('level', demo.data.levels.level1Id)}
+ level={object('level', {
+ content: {
+ text: 'A description of this stage',
+ title: 'Sum Level',
+ },
+ stageList: ['stage1Id', 'stage2Id', 'stage3Id'],
+ })}
  stages={object('stages', {
  stage1Id: {
- stepList: [],
  content: {
- title: 'Stage 1',
  text: 'some description',
+ title: 'Stage 1',
  },
  status: {
  active: false,
  complete: true,
  },
+ stepList: [],
  },
  stage2Id: {
- stepList: [],
  content: {
- title: 'Stage 2',
  text: 'some description',
+ title: 'Stage 2',
  },
  status: {
  active: true,
  complete: false,
  },
+ stepList: [],
+ },
+ stage3Id: {
+ content: {
+ text: 'some description',
+ title: 'Stage 3',
+ },
+ status: {
+ active: false,
+ complete: false,
+ },
+ stepList: [],
  },
  })}
-onStageSelect={linkTo('Tutorial SideBar', 'Stage')}
+onNext={linkTo('Tutorial SideBar', 'Stage')}
  onBack={linkTo('TUtorial SideBar', 'Summary')}
  />
  ))

web-app/stories/Summary.stories.tsx

@@ -1,22 +1,22 @@
 import React from 'react'
 
-import { storiesOf } from '@storybook/react'
+import { object, withKnobs } from '@storybook/addon-knobs'
 import { linkTo } from '@storybook/addon-links'
-import { withKnobs, object } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
-import demo from './data/basic'
 import Summary from '../src/components/Summary'
+import demo from './data/basic'
 
 storiesOf('Tutorial SideBar', module)
  .addDecorator(SideBarDecorator)
  .addDecorator(withKnobs)
  .add('Summary', () => (
  <Summary
  data={object('data', {
- summary: demo.data.summary,
  levels: demo.data.levels,
+ summary: demo.data.summary,
  })}
-onLevelSelect={linkTo('Tutorial SideBar', 'Level')}
+onNext={linkTo('Tutorial SideBar', 'Level')}
  />
  ))