feat(instances): wip networks, tags

This commit is contained in:
johnytiago 2018-05-09 10:51:10 +01:00
parent f007889283
commit 1317894f27
5 changed files with 48 additions and 33 deletions

View File

@ -9,6 +9,8 @@ import get from 'lodash.get';
import forceArray from 'force-array';
import includes from 'lodash.includes';
import find from 'lodash.find';
import styled from 'styled-components';
import remcalc from 'remcalc';
import Step, {
Header as StepHeader,
@ -26,6 +28,10 @@ import { Forms, Values } from '../constants';
const { IC_NW_F } = Forms;
const { IC_NW_V_INFO_EXPANDED, IC_NW_V_MACHINES_EXPANDED } = Values;
const Form = styled.form`
padding-top: ${remcalc(1)};
`;
const Network = ({
preview = [],
initialValues,
@ -78,7 +84,7 @@ const Network = ({
<StatusLoader />
) : (
<Fragment>
<form>
<Form>
{networks.map(
(
{
@ -105,7 +111,7 @@ const Network = ({
/>
)
)}
</form>
</Form>
<Margin top="5">
<Button type="button" component={Link} to={next}>
Save

View File

@ -39,7 +39,7 @@ const TagList = styled(BaseTagList)`
const Tag = ({ name, value, onRemoveClick }) => (
<Margin right={1} bottom={1} key={`${name}-${value}`}>
<TagItem onRemoveClick={onRemoveClick}>
<TagItem fill="grey" onRemoveClick={onRemoveClick}>
{name ? `${name}: ${value}` : value}
</TagItem>
</Margin>
@ -96,6 +96,7 @@ const TagsContainer = ({
) : null}
{addOpen ? (
<Fragment>
<Margin top={2}>
<ReduxForm
form={IC_TAG_F_ADD}
destroyOnUnmount={false}
@ -118,6 +119,7 @@ const TagsContainer = ({
</Fragment>
)}
</ReduxForm>
</Margin>
</Fragment>
) : (
<Margin top={5}>

View File

@ -6,6 +6,7 @@ import { Margin, Padding } from 'styled-components-spacing';
import styled from 'styled-components';
import Flex, { FlexItem } from 'styled-flex-component';
import remcalc from 'remcalc';
import { isNot } from 'styled-is';
import {
H4,
@ -13,7 +14,7 @@ import {
Small,
DotIcon,
Card,
CardHeader,
CardHeader as BaseCardHeader,
CardHeaderMeta,
CardHeaderBox,
CardOutlet,
@ -38,6 +39,12 @@ const Box = styled.div`
min-width: ${remcalc(300)};
`;
const CardHeader = styled(BaseCardHeader)`
${isNot('secondary')`
background-color: #f7f7f7;
`};
`;
export const Collapsed = ({ name, fabric, ...network }) => (
<Margin inline right={3} top={3}>
<Box>
@ -186,7 +193,7 @@ export const Expanded = ({
<Fragment>
<Margin top={3}>
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
<CardHeader
<BaseCardHeader
secondary={false}
transparent={false}
onClick={onInfoClick}
@ -199,7 +206,7 @@ export const Expanded = ({
<CardHeaderBox>
<ArrowIcon direction={infoExpanded ? 'up' : 'down'} />
</CardHeaderBox>
</CardHeader>
</BaseCardHeader>
{infoExpanded ? (
<CardOutlet>
<Padding all={3}>
@ -277,7 +284,7 @@ export const Expanded = ({
collapsed={!machinesExpanded}
actionable={!machinesExpanded}
>
<CardHeader
<BaseCardHeader
secondary={false}
transparent={false}
onClick={onMachinesClick}
@ -292,7 +299,7 @@ export const Expanded = ({
direction={machinesExpanded ? 'up' : 'down'}
/>
</CardHeaderBox>
</CardHeader>
</BaseCardHeader>
{machinesExpanded ? (
<CardOutlet>
<Padding top={2} bottom={2} left={3} right={3}>

View File

@ -210,7 +210,7 @@ export const KeyValue = ({
onClick={handleHeaderClick}
>
<PaddingMaxWidth left={borderless ? 0 : 3} right={borderless ? 0 : 3}>
<Flex alignCenter justifyBetween full>
<Flex alignCenter justifyBetween>
<Meta>
{method === 'add' || method === 'create' ? (
<H4>{`${titleCase(method)} ${type}`}</H4>

View File

@ -46,13 +46,13 @@ const Tag = styled.li`
`;
export default withTheme(
({ theme, children, active, onRemoveClick, ...rest }) => (
({ theme, children, active, onRemoveClick, fill = null, ...rest }) => (
<Container>
<Tag active={active} {...rest}>
{children}
{onRemoveClick ? (
<CloseIcon
fill={active ? theme.primaryActive : theme.text}
fill={fill ? fill : active ? theme.primaryActive : theme.text}
disabled
onClick={onRemoveClick}
/>