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

Style filter preview

pull/10616/head
Alex P 2018-05-10 14:00:02 -07:00
parent 24efe9058a
commit 8d512ffaf4
2 changed files with 144 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui/src/ifql/components/FilterPreview.tsx
View File

@ -10,9 +10,9 @@ interface Props {
class FilterPreview extends PureComponent<Props> {
public render() {
return (
<div style={{display: 'flex'}}>
<>
{this.props.nodes.map((n, i) => <FilterPreviewNode node={n} key={i} />)}
</div>
</>
)
}
}
@ -24,33 +24,37 @@ interface FilterPreviewNodeProps {
/* tslint:disable */
class FilterPreviewNode extends PureComponent<FilterPreviewNodeProps> {
public render() {
const {node} = this.props
return <div className={this.className}>{node.source}</div>
return this.className
}
private get className(): string {
const {type} = this.props.node
private get className(): JSX.Element {
const {node} = this.props
switch (type) {
case 'ObjectExpression':
switch (node.type) {
case 'ObjectExpression': {
return <div className="ifql-filter--key">{node.source}</div>
}
case 'MemberExpression': {
return 'ifql-filter--expression'
return <div className="ifql-filter--key">{node.property.name}</div>
}
case 'OpenParen': {
return <div className="ifql-filter--paren-open" />
}
case 'OpenParen':
case 'CloseParen': {
return 'ifql-filter--paren'
return <div className="ifql-filter--paren-close" />
}
case 'NumberLiteral': {
return 'variable-value--number'
case 'NumberLiteral':
case 'IntegerLiteral': {
return <div className="ifql-filter--value number">{node.source}</div>
}
case 'BooleanLiteral': {
return 'variable-value--boolean'
return <div className="ifql-filter--value boolean">{node.source}</div>
}
case 'StringLiteral': {
return 'variable-value--string'
return <div className="ifql-filter--value string">{node.source}</div>
}
case 'Operator': {
return 'ifql-filter--operator'
return <div className="ifql-filter--operator">{node.source}</div>
}
default: {
return ''

130
ui/src/style/components/time-machine/ifql-builder.scss
View File

@ -3,6 +3,16 @@ $ifql-node-tooltip-gap: 4px;
$ifql-node-gap: 5px;
$ifql-node-padding: 10px;
$ifql-arg-min-width: 120px;
<<<<<<< Updated upstream
=======
$ifql-number-color: $c-neutrino;
$ifql-string-color: $c-honeydew;
$ifql-boolean-color: $c-viridian;
$ifql-invalid-color: $c-viridian;
>>>>>>> Stashed changes
/*
Shared Node styles
------------------
@ -59,19 +69,19 @@ $ifql-arg-min-width: 120px;
}
.variable-value--string {
color: $c-honeydew
color: $ifql-string-color;
}
.variable-value--boolean {
color: $c-viridian
color: $ifql-boolean-color;
}
.variable-value--number {
color: $c-neutrino;
color: $ifql-number-color;
}
.variable-value--invalid {
color: $c-dreamsicle;
color: $ifql-invalid-color;
}
.func-node {
@ -222,6 +232,7 @@ $ifql-arg-min-width: 120px;
------------------------------------------------------------------------------
*/
<<<<<<< Updated upstream
.ifql-filter--expression {
min-height: 26px;
padding: 5px;
@ -234,17 +245,124 @@ $ifql-arg-min-width: 120px;
background-color: $g4-onyx;
border-radius: $radius - 2px;
}
=======
$ifql-filter-gap: 6px;
$ifql-filter-unit: 26px;
$ifql-filter-unit-wrapped: 34px;
$ifql-filter-expression: $g3-castle;
$ifql-filter-parens: $g5-pepper;
%ifql-filter-style {
height: $ifql-filter-unit;
line-height: $ifql-filter-unit;
border-style: solid;
border-width: 0;
}
.ifql-filter--key {
@extend %ifql-filter-style;
background-color: $ifql-filter-expression;
border-radius: 3px 0 0 3px;
padding-left: $ifql-filter-gap;
>>>>>>> Stashed changes
}
.ifql-filter--operator {
padding: 0 5px;
@extend %ifql-filter-style;
text-transform: uppercase;
padding: 0 ($ifql-filter-gap / 2);
}
<<<<<<< Updated upstream
.func-node:hover {
.ifql-filter--expression {
background-color: $g4-onyx;
>.ifql-filter--expression {
background-color: $g6-smoke;
}
=======
.ifql-filter--value + .ifql-filter--operator,
.ifql-filter--paren-close + .ifql-filter--operator {
padding: 0 $ifql-filter-gap;
}
.ifql-filter--key + .ifql-filter--operator {
background-color: $ifql-filter-expression;
}
.ifql-filter--key + .ifql-filter--operator + .ifql-filter--value {
background-color: $ifql-filter-expression;
border-radius: 0 3px 3px 0;
}
.ifql-filter--value {
@extend %ifql-filter-style;
padding-right: $ifql-filter-gap;
&.number {
color: $ifql-number-color;
}
}
&.string {
color: $ifql-string-color;
}
&.boolean {
color: $ifql-boolean-color;
}
}
.ifql-filter--paren-open,
.ifql-filter--paren-close {
@extend %ifql-filter-style;
height: $ifql-filter-unit-wrapped;
width: ($ifql-filter-unit-wrapped - $ifql-filter-unit) / 2;
background-color: $ifql-filter-parens;
border: (($ifql-filter-unit-wrapped - $ifql-filter-unit) / 2) solid $ifql-filter-expression;
}
.ifql-filter--paren-open {
border-right: 0;
border-radius: 3px 0 0 3px;
}
.ifql-filter--paren-close {
border-left: 0;
border-radius: 0 3px 3px 0;
}
%ifql-filter-wrapped {
position: relative;
z-index: 2;
background-color: $ifql-filter-parens;
&:before {
content: '';
width: 100%;
height: $ifql-filter-unit-wrapped;
position: absolute;
top: ($ifql-filter-unit - $ifql-filter-unit-wrapped) / 2;
left: 0;
border-style: solid;
border-width: (($ifql-filter-unit-wrapped - $ifql-filter-unit) / 2) 0;
border-color: $ifql-filter-expression;
z-index: -1;
box-sizing: border-box;
>>>>>>> Stashed changes
}
}
.ifql-filter--paren-open + .ifql-filter--key,
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator,
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value,
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key,
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key + .ifql-filter--operator,
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value,
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key,
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key + .ifql-filter--operator,
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value {
@extend %ifql-filter-wrapped;
}
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator,
.ifql-filter--paren-open + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator + .ifql-filter--key + .ifql-filter--operator + .ifql-filter--value + .ifql-filter--operator {
background-color: $ifql-filter-expression;
height: $ifql-filter-unit-wrapped;
line-height: $ifql-filter-unit-wrapped;
}