mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
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 {
|
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>
|
||||||
|
@ -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';
|
||||||
|
@ -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;
|
||||||
`;
|
`;
|
||||||
|
@ -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
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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 = ({
|
||||||
|
@ -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;
|
||||||
`;
|
`;
|
||||||
|
@ -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
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user