1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-13 06:40:06 +02:00

adding in filter + add new inputs

fixes #374
fixes #373
This commit is contained in:
Alex Windett 2017-03-17 16:54:10 +00:00 committed by Judit Greskovits
parent 263d1518af
commit 9a1a84510f
5 changed files with 96 additions and 8 deletions

View File

@ -0,0 +1,58 @@
import React from 'react';
import styled from 'styled-components';
import {
FormGroup,
Input
} from '@ui/components/form';
import Button from '@ui/components/button';
import { remcalc } from '@ui/shared/functions';
const StyledForm = styled(FormGroup)`
width: 60%;
float: left;
margin: 0;
`;
const StyledButton = styled(Button)`
margin-left: ${remcalc(48)};
`;
const StyledFilter = styled(Input)`
margin: 0;
`;
const handleAddService = () => console.log('Adding a service...');
const TopologyFilter = ({
services = [],
projects = []
}) => {
return (
<div>
<StyledForm name='topology-filter'>
<StyledFilter
placeholder='Filter'
services={services}
/>
</StyledForm>
<StyledButton
secondary
onClick={handleAddService}
>
Add A Service
</StyledButton>
</div>
);
};
TopologyFilter.propTypes = {
projects: React.PropTypes.array,
services: React.PropTypes.array
};
export default TopologyFilter;

View File

@ -10,8 +10,9 @@ import {
ToggleList,
Legend
} from '@ui/components/form';
import TopologyFilter from '@components/services/topology-filter';
import styled from 'styled-components';
import { unitcalc } from '@ui/shared/functions';
import { unitcalc, remcalc } from '@ui/shared/functions';
const StyledLegend = styled(Legend)`
float: left;
@ -19,9 +20,14 @@ const StyledLegend = styled(Legend)`
margin-right: ${unitcalc(1.5)};
`;
const PaddedRow = styled(Row)`
margin-bottom: ${remcalc(18)}
`;
const ServicesView = ({
children,
onToggle,
project,
services,
toggleValue
}) => {
@ -35,14 +41,26 @@ const ServicesView = ({
}
};
const filter = toggleValue === 'topology'
? (
<Column xs={7}>
<TopologyFilter services={services} project={project} />
</Column>
) : null;
const toggle = services ? (
<FormGroup name='service-view' value={toggleValue}>
<StyledLegend>View</StyledLegend>
<ToggleList>
<Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
<Toggle value='list' onChange={onToggleChange}>List</Toggle>
</ToggleList>
</FormGroup>
<PaddedRow>
<Column xs={5}>
<FormGroup name='service-view' value={toggleValue}>
<StyledLegend>View</StyledLegend>
<ToggleList>
<Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
<Toggle value='list' onChange={onToggleChange}>List</Toggle>
</ToggleList>
</FormGroup>
</Column>
{ filter }
</PaddedRow>
) : null;
const content = services.length ? children : (
@ -63,6 +81,7 @@ const ServicesView = ({
ServicesView.propTypes = {
children: React.PropTypes.node,
onToggle: React.PropTypes.func.isRequired,
project: React.PropTypes.arrayOf(PropTypes.project),
services: React.PropTypes.arrayOf(PropTypes.service),
toggleValue: React.PropTypes.string.isRequired
};

View File

@ -55,6 +55,7 @@ const Services = (props) => {
return (
<ServicesView
onToggle={onToggle}
project={project}
toggleValue={toggleValue}
services={services}
>

View File

@ -5,6 +5,7 @@ import PropTypes from '@root/prop-types';
import { TopologyGraph } from '@ui/components/topology';
import ServicesTooltip from '@components/services/tooltip';
import { toggleTooltip } from '@state/actions';
import {

View File

@ -0,0 +1,9 @@
import { Baseline } from '../../shared/composers';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import SearchIcon from './svg/close.svg';
export default Baseline(
SearchIcon
);