diff --git a/src/core_plugins/control_visualizations/public/terms_vis/components/form_row.js b/src/core_plugins/control_visualizations/public/terms_vis/components/form_row.js
new file mode 100644
index 000000000000000..d9a30274d595cec
--- /dev/null
+++ b/src/core_plugins/control_visualizations/public/terms_vis/components/form_row.js
@@ -0,0 +1,18 @@
+import React, { PropTypes } from 'react';
+
+export const FormRow = (props) => (
+
+
{this.props.controls.map((control, index) => {
let controlComponent = null;
switch (control.type) {
@@ -58,32 +58,38 @@ export class InputControlVis extends Component {
/>
);
}
- return
{controlComponent}
;
+ return controlComponent;
}
)}
-
-
- Submit
-
-
- Reset
-
-
- Clear All
-
-
+
+
+
+ Update filters
+
+
+
+
+ Cancel
+
+
+
+
+ Remove filters
+
+
+
);
}
diff --git a/src/core_plugins/control_visualizations/public/terms_vis/components/range_control.js b/src/core_plugins/control_visualizations/public/terms_vis/components/range_control.js
index 08264343da150b2..a02877be1ced058 100644
--- a/src/core_plugins/control_visualizations/public/terms_vis/components/range_control.js
+++ b/src/core_plugins/control_visualizations/public/terms_vis/components/range_control.js
@@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
import InputRange from 'react-input-range';
-import 'react-input-range/lib/css/index.css';
+import { FormRow } from './form_row';
export class RangeControl extends Component {
constructor(props) {
@@ -23,8 +23,9 @@ export class RangeControl extends Component {
render() {
return (
-
- {this.props.control.label}
+
this.setState({ sliderValue: newValue })}
onChangeComplete={this.handleOnChange.bind(null, this.props.control)}
/>
-
+
);
}
}
diff --git a/src/core_plugins/control_visualizations/public/terms_vis/components/terms_control.js b/src/core_plugins/control_visualizations/public/terms_vis/components/terms_control.js
index 10c0f5f21fa1c5c..beac34d790e3890 100644
--- a/src/core_plugins/control_visualizations/public/terms_vis/components/terms_control.js
+++ b/src/core_plugins/control_visualizations/public/terms_vis/components/terms_control.js
@@ -1,5 +1,6 @@
import React, { Component, PropTypes } from 'react';
import Select from 'react-select';
+import { FormRow } from './form_row';
export class TermsControl extends Component {
constructor(props) {
@@ -20,8 +21,9 @@ export class TermsControl extends Component {
render() {
return (
-
- {this.props.control.label}
+
-
+
);
}
}
diff --git a/src/core_plugins/control_visualizations/public/terms_vis/components/text_control.js b/src/core_plugins/control_visualizations/public/terms_vis/components/text_control.js
index f70cc971eb7e797..91d758a665f6d39 100644
--- a/src/core_plugins/control_visualizations/public/terms_vis/components/text_control.js
+++ b/src/core_plugins/control_visualizations/public/terms_vis/components/text_control.js
@@ -1,6 +1,7 @@
import _ from 'lodash';
import React, { Component, PropTypes } from 'react';
import Select from 'react-select';
+import { FormRow } from './form_row';
// React select tries to perform client-side filtering of options
// Since options are loaded from ES, client-side filtering is not desired
@@ -49,8 +50,9 @@ export class TextControl extends Component {
render() {
return (
-
- {this.props.control.label}
+
-
+
);
}
}
diff --git a/src/core_plugins/control_visualizations/public/terms_vis/input_control_vis.less b/src/core_plugins/control_visualizations/public/terms_vis/input_control_vis.less
index 43dde0bff9e25e4..f69c6f00df54d9e 100644
--- a/src/core_plugins/control_visualizations/public/terms_vis/input_control_vis.less
+++ b/src/core_plugins/control_visualizations/public/terms_vis/input_control_vis.less
@@ -1,39 +1,5 @@
@import (reference) "~ui/styles/mixins.less";
-.input-control-vis {
- position: absolute;
- top: 0;
- left: 0;
+.inputControlVis {
width: 100%;
- height: 100%;
- overflow: hidden;
-
- .horizontal-layout {
- display: flex;
- }
-
- .vertical-layout {
- display: flex;
- flex-direction: column;
- }
-
- .input-control {
- display: flex;
- flex: 1 1 auto;
- align-items: center;
- margin-top: 10px;
- }
-
- .input-control > span {
- width: 120px;
- }
-
- .input-range {
- margin-left: 25px;
- margin-right: 15px;
- }
-
- .terms-select {
- flex: 1 1 auto;
- }
}
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 9c0598e5b60a7a1..02668e8dc0ecc80 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -2,6 +2,7 @@
@import (reference) "./mixins";
@import (reference) "./variables";
@import (reference) "~ui/styles/bootstrap/bootstrap";
+@import "./react_input_range";
html,
body {
diff --git a/src/ui/public/styles/react_input_range.less b/src/ui/public/styles/react_input_range.less
new file mode 100644
index 000000000000000..35d17797727a0f6
--- /dev/null
+++ b/src/ui/public/styles/react_input_range.less
@@ -0,0 +1,85 @@
+.input-range__slider {
+ appearance: none;
+ background: #3f51b5;
+ border: 1px solid #3f51b5;
+ border-radius: 100%;
+ cursor: pointer;
+ display: block;
+ height: 1rem;
+ margin-left: -0.5rem;
+ margin-top: -0.65rem;
+ outline: none;
+ position: absolute;
+ top: 50%;
+ transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
+ width: 1rem; }
+ .input-range__slider:active {
+ transform: scale(1.3); }
+ .input-range__slider:focus {
+ box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2); }
+ .input-range--disabled .input-range__slider {
+ background: #cccccc;
+ border: 1px solid #cccccc;
+ box-shadow: none;
+ transform: none; }
+
+.input-range__slider-container {
+ transition: left 0.3s ease-out; }
+
+.input-range__label {
+ color: #aaaaaa;
+ font-family: "Helvetica Neue", san-serif;
+ font-size: 0.8rem;
+ transform: translateZ(0);
+ white-space: nowrap; }
+
+.input-range__label--min,
+.input-range__label--max {
+ bottom: -1.4rem;
+ position: absolute; }
+
+.input-range__label--min {
+ left: 0; }
+
+.input-range__label--max {
+ right: 0; }
+
+.input-range__label--value {
+ position: absolute;
+ top: -1.8rem; }
+
+.input-range__label-container {
+ left: -50%;
+ position: relative; }
+ .input-range__label--max .input-range__label-container {
+ left: 50%; }
+
+.input-range__track {
+ background: #eeeeee;
+ border-radius: 0.3rem;
+ cursor: pointer;
+ display: block;
+ height: 0.3rem;
+ position: relative;
+ transition: left 0.3s ease-out, width 0.3s ease-out; }
+ .input-range--disabled .input-range__track {
+ background: #eeeeee; }
+
+.input-range__track--background {
+ left: 0;
+ margin-top: -0.15rem;
+ position: absolute;
+ right: 0;
+ top: 50%; }
+
+.input-range__track--active {
+ background: #3f51b5; }
+
+.input-range {
+ height: 30px;
+ margin: 0px 10px;
+ position: relative;
+ width: calc(~"100% - 20px");
+}
+
+/*# sourceMappingURL=index.css.map */