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

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

@ -46,24 +46,32 @@ 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>
{/* improve this */}
{optional ? (
<Fragment>
<FlexItem> <FlexItem>
<Margin horizontal="1">
<Divider vertical /> <Divider vertical />
</Margin>
</FlexItem>
<FlexItem>
<P optional>Optional</P>
</FlexItem>
</Fragment>
) : null}
</Flex>
</FlexItem> </FlexItem>
<FlexItem alignCenter> <FlexItem alignCenter>
<Link <Link to={expanded ? `/${namespace}` : `/${namespace}/${name}`}>
to={expanded ? `/${namespace}` : `/${namespace}/${name}`}
id={'expand-card-' + name}
>
<Flex alignCenter> <Flex alignCenter>
{expanded ? 'Save and Collase' : 'Expand'} {expanded ? 'Save and Collase' : 'Edit'}
<Margin left={1}> <Margin left="1">
<Flex> <Flex>
<ArrowIcon <ArrowIcon
fill="primary" fill="primary"
@ -74,19 +82,6 @@ export const Header = ({ icon = null, children }) => (
</Flex> </Flex>
</Link> </Link>
</FlexItem> </FlexItem>
</Flex>
</FlexItem>
{isValid && !expanded && saved ? (
<FlexItem>
<SavedIcon />
</FlexItem>
) : null}
{/* improve this */}
{!saved && optional ? (
<FlexItem>
<P optional>Optional</P>
</FlexItem>
) : null}
{!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>