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

Feature/styles#14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
ShMcK merged 3 commits intomasterfromfeature/styles
Jul 14, 2019
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletionsweb-app/src/App.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
Expand Down
12 changes: 12 additions & 0 deletionsweb-app/src/components/Divider.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import*asReactfrom'react'

conststyles={
divider:{
backgroundColor:'#e8e8e8',
height:'0.1rem',
},
}

constDivider=()=><divstyle={styles.divider}/>

exportdefaultDivider
51 changes: 51 additions & 0 deletionsweb-app/src/components/Level/LevelStageSummary.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
48 changes: 27 additions & 21 deletionsweb-app/src/components/Level/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
)
}

Expand Down
28 changes: 21 additions & 7 deletionsweb-app/src/components/Stage/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
)
}

Expand Down
21 changes: 13 additions & 8 deletionsweb-app/src/components/Step/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
},
}

Expand Down
22 changes: 17 additions & 5 deletionsweb-app/src/components/Summary/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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 {
Expand All@@ -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>
)
}

Expand Down
30 changes: 23 additions & 7 deletionsweb-app/stories/Level.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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')}
/>
))
10 changes: 5 additions & 5 deletionsweb-app/stories/Summary.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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')}
/>
))
[8]ページ先頭
©2009-2025 Movatter.jp