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

Commit07aa070

Browse files
committed
style subtasks
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent160185c commit07aa070

File tree

3 files changed

+40
-14
lines changed

3 files changed

+40
-14
lines changed

‎web-app/src/containers/Tutorial/components/Step.tsx

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
33
import{css,jsx}from'@emotion/core'
4-
importIconfrom'../../../components/Icon'
4+
importTestStatusIconfrom'./TestStatusIcon'
55
importMarkdownfrom'../../../components/Markdown'
66

77
interfaceProps{
@@ -25,6 +25,13 @@ const styles = {
2525
paddingTop:0,
2626
width:'1rem',
2727
},
28+
subtasks:{
29+
marginTop:'1rem',
30+
},
31+
subtask:{
32+
marginBottom:'1rem',
33+
display:'flex',
34+
},
2835
options:{
2936
display:'flex'as'flex',
3037
flexDirection:'row'as'row',
@@ -43,19 +50,25 @@ const Step = (props: Props) => {
4350
<div>
4451
<divcss={styles.card}>
4552
<divcss={styles.statusContainer}>
46-
{props.status==='ACTIVE'&&<Icontype="success-filling"size="small"style={{color:'lightgrey'}}/>}
47-
{props.status==='COMPLETE'&&<Icontype="success-filling"size="small"style={{color:'#37B809'}}/>}
53+
{props.status==='ACTIVE'&&<TestStatusIconsize="small"checked/>}
54+
{props.status==='COMPLETE'&&<TestStatusIconsize="small"/>}
4855
</div>
4956
<div>
50-
<Markdown>{props.content||''}</Markdown>
57+
<divcss={styles.content}>
58+
<Markdown>{props.content||''}</Markdown>
59+
</div>
60+
{props.subtasks ?(
61+
<ulcss={styles.subtasks}>
62+
{props.subtasks.map((subtask)=>(
63+
<likey={subtask.name}css={styles.subtask}>
64+
<TestStatusIconsize="xs"checked={subtask.pass}/>
65+
66+
<spanstyle={{marginLeft:'0.5rem'}}>{subtask.name}</span>
67+
</li>
68+
))}
69+
</ul>
70+
) :null}
5171
</div>
52-
{props.subtasks ?(
53-
<ul>
54-
{props.subtasks.map((subtask)=>(
55-
<likey={subtask.name}>{subtask.name}</li>
56-
))}
57-
</ul>
58-
) :null}
5972
</div>
6073
</div>
6174
)
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import*asReactfrom'react'
2+
importIconfrom'../../../components/Icon'
3+
4+
interfaceProps{
5+
size:'small'|'xs'|'xxs'
6+
checked?:boolean
7+
}
8+
9+
constTestStatusIcon=(props:Props)=>{
10+
return<Icontype="success-filling"size={props.size}style={{color:props.checked ?'#37B809' :'lightgrey'}}/>
11+
}
12+
13+
exportdefaultTestStatusIcon

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -161,9 +161,9 @@ storiesOf('Level', module)
161161
type:'error',
162162
title:'Test Failed because X',
163163
summary:{
164-
first:false,
165-
second:true,
166-
third:false,
164+
'Thefirst task in a set of multiple subtasks':false,
165+
'Thesecond task out of a bunch of subtasks':true,
166+
'Thethird and final task that has more text and might even wrap around because the text just keeps rambling on longer than anyone would conceivably want to read':false,
167167
},
168168
}
169169
return(

0 commit comments

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