Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(instances): refactor card headers #1417

Browse Source
This commit is contained in:
johnytiago 2018-05-17 11:58:18 +01:00 committed by Sérgio Ramos
parent 0189822a08
commit 5c98a4cecb
1 changed files with 30 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/resource-step/src/index.js
View File

@ -46,47 +46,42 @@ export const Header = ({ icon = null, children }) => (
<Flex justifyBetween> <Flex justifyBetween>
<FlexItem> <FlexItem>
<Flex alignCenter> <Flex alignCenter>
<FlexItem>{icon}</FlexItem>
<FlexItem> <FlexItem>
<Divider vertical /> <Margin right="2">{icon}</Margin>
</FlexItem> </FlexItem>
<FlexItem> <FlexItem>
<H3 bold>{children}</H3> <H3 bold>{children}</H3>
</FlexItem> </FlexItem>
<FlexItem> {/* improve this */}
<Divider vertical /> {optional ? (
</FlexItem> <Fragment>
<FlexItem alignCenter> <FlexItem>
<Link <Margin horizontal="1">
to={expanded ? `/${namespace}` : `/${namespace}/${name}`} <Divider vertical />
id={'expand-card-' + name}
>
<Flex alignCenter>
{expanded ? 'Save and Collase' : 'Expand'}
<Margin left={1}>
<Flex>
<ArrowIcon
fill="primary"
direction={expanded ? 'up' : 'down'}
/>
</Flex>
</Margin> </Margin>
</Flex> </FlexItem>
</Link> <FlexItem>
</FlexItem> <P optional>Optional</P>
</FlexItem>
</Fragment>
) : null}
</Flex> </Flex>
</FlexItem> </FlexItem>
{isValid && !expanded && saved ? ( <FlexItem alignCenter>
<FlexItem> <Link to={expanded ? `/${namespace}` : `/${namespace}/${name}`}>
<SavedIcon /> <Flex alignCenter>
</FlexItem> {expanded ? 'Save and Collase' : 'Edit'}
) : null} <Margin left="1">
{/* improve this */} <Flex>
{!saved && optional ? ( <ArrowIcon
<FlexItem> fill="primary"
<P optional>Optional</P> direction={expanded ? 'up' : 'down'}
</FlexItem> />
) : null} </Flex>
</Margin>
</Flex>
</Link>
</FlexItem>
{!expanded && !isValid ? ( {!expanded && !isValid ? (
<FlexItem> <FlexItem>
<ErrorIcon /> <ErrorIcon />
@ -94,7 +89,7 @@ export const Header = ({ icon = null, children }) => (
) : null} ) : null}
</Flex> </Flex>
{expanded || saved ? ( {expanded || saved ? (
<Margin vertical={3}> <Margin vertical="3">
<Divider noMargin /> <Divider noMargin />
</Margin> </Margin>
) : null} ) : null}
@ -173,7 +168,7 @@ export default class Step extends PureComponent {
> >
<Card expanded={expanded} error={!expanded && !isValid}> <Card expanded={expanded} error={!expanded && !isValid}>
<CardOutlet> <CardOutlet>
<Padding all={5}>{children}</Padding> <Padding all="5">{children}</Padding>
</CardOutlet> </CardOutlet>
</Card> </Card>
</Broadcast> </Broadcast>