1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-28 14:10:04 +02:00

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 { import {
FormGroup, FormGroup,
Toggle, Toggle,
ToggleList ToggleList,
Legend
} from '@ui/components/form'; } 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 = ({ const ServicesView = ({
children, children,
@ -37,6 +46,7 @@ const ServicesView = ({
return ( return (
<FormGroup name='service-view' value={value}> <FormGroup name='service-view' value={value}>
<StyledLegend>View</StyledLegend>
<ToggleList> <ToggleList>
<Toggle value='topology' onChange={onToggleChange}>Topology</Toggle> <Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
<Toggle value='list' onChange={onToggleChange}>List</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 Legend } from './legend';
export { default as FormMeta } from './meta'; export { default as FormMeta } from './meta';
export { default as Radio } from './radio'; 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 Select } from './select';
export { default as Toggle } from './toggle'; 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 styled from 'styled-components';
import { Baseline } from '../../shared/composers'; import { Baseline } from '../../shared/composers';
import { colors } from '../../shared/constants';
import PropTypes from './prop-types'; import PropTypes from './prop-types';
import React from 'react'; import React from 'react';
const StyledLine = styled.line` const StyledLine = styled.line`
stroke: #343434; stroke: ${colors.base.secondaryActive};
stroke-width: 1.5; stroke-width: 1.5;
`; `;
const StyledCircle = styled.circle` const StyledCircle = styled.circle`
stroke: #343434; stroke: ${colors.base.secondaryActive};
fill: #464646; fill: colors.base.secondary;
stroke-width: 1.5; stroke-width: 1.5;
`; `;
const StyledArrow = styled.line` const StyledArrow = styled.line`
stroke: white; stroke: ${colors.base.white};
stroke-width: 2; stroke-width: 2;
stroke-linecap: round; stroke-linecap: round;
`; `;

View File

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

View File

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

View File

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

View File

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