Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add connector line from unassigned FROM to following node

pull/3598/head
Alex P 2018-06-07 14:54:37 -07:00
parent 3a66f92114
commit d77263011c
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/flux/components/FuncNode.tsx
View File

@ -52,6 +52,7 @@ export default class FuncNode extends PureComponent<Props, State> {
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
> >
<div className="func-node--connector" />
<div className="func-node--name">{func.name}</div> <div className="func-node--name">{func.name}</div>
<FuncArgsPreview func={func} /> <FuncArgsPreview func={func} />
{isExpanded && ( {isExpanded && (

45
ui/src/style/components/time-machine/flux-builder.scss
View File

@ -136,8 +136,17 @@ $flux-invalid-color: $c-viridian;
@extend %flux-node; @extend %flux-node;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: $flux-node-gap; margin-left: $flux-node-gap;
}
.func-node--connector {
width: $flux-node-gap;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
z-index: 0;
// Connection Lines // Connection Lines
&:before, &:before,
@ -151,7 +160,7 @@ $flux-invalid-color: $c-viridian;
width: $flux-connector-line; width: $flux-connector-line;
height: calc(100% + #{$flux-node-tooltip-gap}); height: calc(100% + #{$flux-node-tooltip-gap});
top: -$flux-node-tooltip-gap / 2; top: -$flux-node-tooltip-gap / 2;
left: -$flux-node-gap / 2; left: $flux-node-gap / 2;
transform: translateX(-50%); transform: translateX(-50%);
} }
// Horizontal Line // Horizontal Line
@ -159,21 +168,33 @@ $flux-invalid-color: $c-viridian;
height: $flux-connector-line; height: $flux-connector-line;
width: $flux-node-gap / 2; width: $flux-node-gap / 2;
top: 50%; top: 50%;
left: 0; left: $flux-node-gap / 2;
transform: translate(-100%, -50%); transform: translateY(-50%);
} }
}
// When there is no variable name for the declaration // When a query exists unassigned to a variable
&:first-child { .func-node:first-child {
margin-left: 0; margin-left: 0;
padding-left: $flux-node-gap;
.func-node--connector {
transform: translateX(0);
z-index: 2;
// Vertical Line
&:before { &:before {
left: $flux-node-gap / 2; height: $flux-node-gap;
top: 100%; top: $flux-node-gap / 2;
height: $flux-node-tooltip-gap / 2; @include gradient-v($c-comet, $g4-onyx);
} }
// Dot
&:after { &:after {
content: none; width: 8px;
height: 8px;
border-radius: 50%;
background-color: $c-comet;
top: $flux-node-gap / 2;
transform: translate(-50%, -50%);
} }
} }
} }