styling work

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) => (
+  <div className="kuiVerticalRhythm">
+    <label className="kuiLabel kuiVerticalRhythmSmall" htmlFor={props.id}>
+      {props.label}
+    </label>
+    <div className="kuiVerticalRhythmSmall">
+      {props.children}
+    </div>
+  </div>
+);
+
+FormRow.propTypes = {
+  label: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  children: PropTypes.node.isRequired
+};

src/core_plugins/control_visualizations/public/terms_vis/components/input_control_vis.js

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { RangeControl } from './range_control';
 import { TermsControl } from './terms_control';
 import { TextControl } from './text_control';
-import { KuiButton } from 'ui_framework/components';
+import { KuiFieldGroup, KuiFieldGroupSection, KuiButton } from 'ui_framework/components';
 
 export class InputControlVis extends Component {
   constructor(props) {
@@ -27,7 +27,7 @@ export class InputControlVis extends Component {
 
   render() {
     return (
-      <div className="vertical-layout input-control-vis">
+      <div className="inputControlVis">
         {this.props.controls.map((control, index) => {
           let controlComponent = null;
           switch (control.type) {
@@ -58,32 +58,38 @@ export class InputControlVis extends Component {
                 />
               );
           }
-          return <div key={index}>{controlComponent}</div>;
+          return controlComponent;
         }
         )}
-        <div>
-          <KuiButton
-            buttonType="primary"
-            type="button"
-            onClick={this.handleSubmit}
-          >
-            Submit
-          </KuiButton>
-          <KuiButton
-            buttonType="primary"
-            type="button"
-            onClick={this.handleReset}
-          >
-            Reset
-          </KuiButton>
-          <KuiButton
-            buttonType="primary"
-            type="button"
-            onClick={this.handleClearAll}
-          >
-            Clear All
-          </KuiButton>
-        </div>
+        <KuiFieldGroup>
+          <KuiFieldGroupSection>
+            <KuiButton
+              buttonType="primary"
+              type="button"
+              onClick={this.handleSubmit}
+            >
+              Update filters
+            </KuiButton>
+          </KuiFieldGroupSection>
+          <KuiFieldGroupSection>
+            <KuiButton
+              buttonType="basic"
+              type="button"
+              onClick={this.handleReset}
+            >
+              Cancel
+            </KuiButton>
+          </KuiFieldGroupSection>
+          <KuiFieldGroupSection>
+            <KuiButton
+              buttonType="danger"
+              type="button"
+              onClick={this.handleClearAll}
+            >
+              Remove filters
+            </KuiButton>
+          </KuiFieldGroupSection>
+        </KuiFieldGroup>
       </div>
     );
   }

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 (
-      <div className="input-control range-control">
-        <span>{this.props.control.label}</span>
+      <FormRow
+        label={this.props.control.label}
+      >
         <InputRange
           maxValue={this.props.control.max}
           minValue={this.props.control.min}
@@ -33,7 +34,7 @@ export class RangeControl extends Component {
           onChange={newValue => this.setState({ sliderValue: newValue })}
           onChangeComplete={this.handleOnChange.bind(null, this.props.control)}
         />
-      </div>
+      </FormRow>
     );
   }
 }

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,16 +21,17 @@ export class TermsControl extends Component {
 
   render() {
     return (
-      <div className="input-control terms-control" data-test-subj="termsControl">
-        <span>{this.props.control.label}</span>
+      <FormRow
+        label={this.props.control.label}
+      >
         <Select
           className="terms-select"
           placeholder="Select..."
           value={this.props.control.value}
           options={this.props.control.terms}
           onChange={this.handleOnChange.bind(null, this.props.control)}
         />
-      </div>
+      </FormRow>
     );
   }
 }

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 (
-      <div className="input-control text-control">
-        <span>{this.props.control.label}</span>
+      <FormRow
+        label={this.props.control.label}
+      >
         <Select.Async
           placeholder=""
           value={this.props.control.value}
@@ -61,7 +63,7 @@ export class TextControl extends Component {
           filterOption={allowAnyOption}
           filterOptions={allowAllOptions}
         />
-      </div>
+      </FormRow>
     );
   }
 }

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;
-  }
 }

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 {

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 */