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

Commitf56ad56

Browse files
committed
style step checkbox
1 parentf486127 commitf56ad56

File tree

5 files changed

+38
-27
lines changed

5 files changed

+38
-27
lines changed

‎web-app/.storybook/addons.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
import'@storybook/addon-actions/register'
22
import'@storybook/addon-knobs/register'
3-
import'@storybook/addon-links/register'
4-
import'@storybook/addon-viewport/register'
3+
import'@storybook/addon-links/register'

‎web-app/src/App.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import ErrorBoundary from './components/ErrorBoundary'
55
importclientfrom'./services/apollo'
66
importRoutesfrom'./Routes'
77

8+
89
constApp=()=>(
910
<ErrorBoundary>
1011
<ApolloProviderclient={client}>

‎web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,33 +13,42 @@ interface Props {
1313

1414
conststyles={
1515
card:{
16-
display:'grid',
17-
18-
padding:'0 1rem 1rem 0.5rem',
19-
},
16+
display:'grid',
17+
gridTemplateColumns:'25px 1fr',
18+
padding:'1rem 1rem 1rem 0.5rem',
19+
},
20+
content:{
21+
margin:0
22+
}
2023
}
2124

2225
constStep=(props:Props)=>{
26+
// TODO: extract or replace load solution
2327
const[loadedSolution,setLoadedSolution]=React.useState()
24-
2528
constonClickHandler=()=>{
2629
if(!loadedSolution){
2730
setLoadedSolution(true)
2831
props.onLoadSolution()
2932
}
3033
}
31-
32-
constshowLoadSolution=status==='ACTIVE'&&!loadedSolution
34+
constshowLoadSolution=props.status==='ACTIVE'&&!loadedSolution
3335

3436
return(
3537
<divstyle={styles.card}>
36-
<Checkbox
37-
checked={status==='COMPLETE'}
38-
indeterminate={false}
39-
disabled={status==='INCOMPLETE'}
40-
/>
41-
<Markdown>{props.content||''}</Markdown>
42-
{showLoadSolution&&<ButtononClick={onClickHandler}>Load Solution</Button>}
38+
<div>
39+
<Checkbox
40+
checked={props.status==='COMPLETE'}
41+
indeterminate={false/* TODO: running */}
42+
disabled={props.status!=='COMPLETE'/* TODO: and not running */}
43+
onChange={()=>{
44+
/* do nothing */
45+
}}
46+
/>
47+
</div>
48+
<divid='content'>
49+
<Markdown>{props.content||''}</Markdown>
50+
</div>
51+
<div>{showLoadSolution&&<ButtononClick={onClickHandler}>Load Solution</Button>}</div>
4352
</div>
4453
)
4554
}

‎web-app/src/styles/index.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ code {
1010
font-family: source-code-pro, Menlo, Monaco, Consolas,'Courier New', monospace;
1111
}
1212

13-
.hover-select:hover {
14-
cursor: pointer;
15-
}
13+
p {
14+
margin:0
15+
}

‎web-app/stories/Step.stories.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { select, text, withKnobs } from '@storybook/addon-knobs'
55
import{storiesOf}from'@storybook/react'
66
importSideBarDecoratorfrom'./utils/SideBarDecorator'
77

8-
importStepDescriptionfrom'../src/containers/Tutorial/LevelPage/Level/StepDescription'
8+
importStepfrom'../src/containers/Tutorial/LevelPage/Level/Step'
99

1010
conststepText=
1111
'This is a long paragraph of step text intended to wrap around the side after a short period of writing to demonstrate text wrap among other things'
@@ -33,17 +33,19 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
3333
storiesOf('Level',module)
3434
.addDecorator(SideBarDecorator)
3535
.addDecorator(withKnobs)
36-
.add('Step Description',()=>(
37-
<StepDescription
38-
text={text('text',stepText)}
39-
mode={select('mode',{ACTIVE:'ACTIVE',COMPLETE:'COMPLETE',INCOMPLETE:'INCOMPLETE'},'ACTIVE','step')}
36+
.add('Step',()=>(
37+
<Step
38+
order={1}
39+
content={text('text',stepText)}
40+
status={select('mode',{ACTIVE:'ACTIVE',COMPLETE:'COMPLETE',INCOMPLETE:'INCOMPLETE'},'COMPLETE','step')}
4041
onLoadSolution={action('onLoadSolution')}
4142
/>
4243
))
4344
.add('Step Markdown',()=>(
44-
<StepDescription
45-
text={text('text',paragraphText)}
46-
mode={select('mode',{ACTIVE:'ACTIVE',COMPLETE:'COMPLETE',INCOMPLETE:'INCOMPLETE'},'ACTIVE','step')}
45+
<Step
46+
order={2}
47+
content={text('text',paragraphText)}
48+
status={select('mode',{ACTIVE:'ACTIVE',COMPLETE:'COMPLETE',INCOMPLETE:'INCOMPLETE'},'ACTIVE','step')}
4749
onLoadSolution={action('onLoadSolution')}
4850
/>
4951
))

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp