Colours from constants lagend for toggle

This commit is contained in:
JUDIT GRESKOVITS 2017-03-01 14:59:21 +00:00 committed by Sérgio Ramos
parent 702747d520
commit 8bd2190863
7 changed files with 46 additions and 19 deletions

View File

@ -7,8 +7,17 @@ import { H2 } from '@ui/components/base-elements';
import {
FormGroup,
Toggle,
ToggleList
ToggleList,
Legend
} from '@ui/components/form';
import styled from 'styled-components';
import { unitcalc } from '@ui/shared/functions';
const StyledLegend = styled(Legend)`
float: left;
padding-top: ${unitcalc(2)};
margin-right: ${unitcalc(1.5)};
`;
const ServicesView = ({
children,
@ -37,6 +46,7 @@ const ServicesView = ({
return (
<FormGroup name='service-view' value={value}>
<StyledLegend>View</StyledLegend>
<ToggleList>
<Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
<Toggle value='list' onChange={onToggleChange}>List</Toggle>

View File

@ -6,7 +6,7 @@ export { default as FormLabel } from './label';
export { default as Legend } from './legend';
export { default as FormMeta } from './meta';
export { default as Radio } from './radio';
export { RadioList as RadioList } from './radio';
export { RadioList } from './radio';
export { default as Select } from './select';
export { default as Toggle } from './toggle';
export { ToggleList as ToggleList } from './toggle';
export { ToggleList } from './toggle';

View File

@ -1,21 +1,22 @@
import styled from 'styled-components';
import { Baseline } from '../../shared/composers';
import { colors } from '../../shared/constants';
import PropTypes from './prop-types';
import React from 'react';
const StyledLine = styled.line`
stroke: #343434;
stroke: ${colors.base.secondaryActive};
stroke-width: 1.5;
`;
const StyledCircle = styled.circle`
stroke: #343434;
fill: #464646;
stroke: ${colors.base.secondaryActive};
fill: colors.base.secondary;
stroke-width: 1.5;
`;
const StyledArrow = styled.line`
stroke: white;
stroke: ${colors.base.white};
stroke-width: 2;
stroke-linecap: round;
`;

View File

@ -1,5 +1,6 @@
import React from 'react';
import { Baseline } from '../../shared/composers';
import { colors } from '../../shared/constants';
import styled from 'styled-components';
const StyledButton = styled.rect`
@ -8,13 +9,14 @@ const StyledButton = styled.rect`
`;
const StyledButtonCircle = styled.circle`
fill: ${props => props.connected ? '#ffffff' : '#464646'};
fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
`;
const GraphNodeButton = ({
connected,
buttonRect,
onButtonClick
onButtonClick,
index
}) => {
const buttonCircleRadius = 2;
@ -36,7 +38,10 @@ const GraphNodeButton = ({
<StyledButton
height={buttonRect.height}
onClick={onButtonClick}
onKeyDown={onButtonClick}
width={buttonRect.width}
role='button'
tabIndex={100 + index}
/>
{buttonCircles}
</g>
@ -51,6 +56,7 @@ GraphNodeButton.propTypes = {
height: React.PropTypes.number
}).isRequired,
connected: React.PropTypes.bool,
index: React.PropTypes.number.isRequired,
onButtonClick: React.PropTypes.func.isRequired
};

View File

@ -1,21 +1,22 @@
import React from 'react';
import { Baseline } from '../../shared/composers';
import { colors } from '../../shared/constants';
import DataCentresIcon from './icon-data-centers.svg';
import InstancesIcon from './icon-instances.svg';
import styled from 'styled-components';
const StyledText = styled.text`
fill: ${props => props.connected ? '#ffffff' : '#464646'};
fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
font-size: 12px;
opacity: 0.8;
`;
const StyledInstancesIcon = styled(InstancesIcon)`
fill: ${props => props.connected ? '#ffffff' : '#464646'};
fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
`;
const StyledDataCentresIcon = styled(DataCentresIcon)`
fill: ${props => props.connected ? '#ffffff' : '#464646'};
fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
`;
const GraphNodeInfo = ({

View File

@ -1,9 +1,10 @@
import React from 'react';
import { Baseline } from '../../shared/composers';
import { colors } from '../../shared/constants';
import styled from 'styled-components';
const StyledText = styled.text`
fill: ${props => props.connected ? '#ffffff' : '#464646'};
fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
font-size: 12px;
opacity: 0.8;
`;

View File

@ -1,4 +1,5 @@
import { Baseline } from '../../shared/composers';
import { colors } from '../../shared/constants';
import PropTypes from './prop-types';
// import HeartIcon from './icon-heart.svg';
import GraphNodeButton from './graph-node-button';
@ -7,39 +8,44 @@ import GraphNodeMetrics from './graph-node-metrics';
import styled from 'styled-components';
import React from 'react';
const StyledRect = styled.rect`
stroke: ${props => props.connected ? '#343434' : '#d8d8d8'};
fill: ${props => props.connected ? '#464646' : '#ffffff'};
stroke: ${props => props.connected ?
colors.base.secondaryActive : colors.base.grey};
fill: ${props => props.connected ? colors.base.secondary : colors.base.white};
stroke-width: 1.5;
rx: 4;
ry: 4;
`;
const StyledShadowRect = styled.rect`
fill: ${props => props.connected ? '#464646' : '#d8d8d8'};
fill: ${props => props.connected ? colors.base.secondary : colors.base.grey};
opacity: 0.33;
rx: 4;
ry: 4;
`;
const StyledLine = styled.line`
stroke: ${props => props.connected ? '#343434' : '#d8d8d8'};
stroke: ${props => props.connected ?
colors.base.secondaryActive : colors.base.grey};
stroke-width: 1.5;
`;
const StyledText = styled.text`
fill: ${props => props.connected ? '#ffffff' : '#464646'};
fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
font-size: 16px;
font-weight: 600;
`;
const HeartCircle = styled.circle`
fill: #00af66;
fill: ${colors.base.green};
`;
const GraphNode = ({
connected,
data,
index,
size,
onDragStart
}) => {
@ -150,6 +156,7 @@ const GraphNode = ({
<GraphNodeButton
buttonRect={buttonRect}
onButtonClick={onButtonClick}
index={index}
connected={connected}
/>
{/*<GraphNodeInfo
@ -171,6 +178,7 @@ const GraphNode = ({
GraphNode.propTypes = {
connected: React.PropTypes.bool,
data: React.PropTypes.object.isRequired,
index: React.PropTypes.number.isRequired,
onDragStart: React.PropTypes.func,
size: PropTypes.Size
};