Colours from constants lagend for toggle
This commit is contained in:
parent
702747d520
commit
8bd2190863
@ -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>
|
||||
|
@ -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';
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
|
@ -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 = ({
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user