Rearrange and simplify filter layout

src/components/Button.jsx

@@ -19,6 +19,7 @@ class Button extends React.Component {
         padding: margins[1],
         userSelect: 'none',
         borderRadius: 2,
+        boxSizing: 'border-box',
         ...this.props.style,
       }}>
       {this.props.children}

src/components/filter/CombiningOperatorSelect.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import SelectInput from '../inputs/SelectInput'
-
-import input from '../../config/input.js'
-import { margins } from '../../config/scales.js'
-import { combiningFilterOps } from '../../libs/filterops.js'
-
-class CombiningOperatorSelect extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    return <div style={{
-      display: 'inline-block',
-      width: '50%',
-    }}>
-      <SelectInput
-        value={this.props.value}
-        options={combiningFilterOps}
-        onChange={this.props.onChange}
-        style={{
-          display: 'block',
-          width: '100%',
-        }}
-      />
-      <label style={{
-        ...input.label,
-        width: 'auto',
-        marginLeft: margins[2],
-        display: 'block',
-        width: '100%',
-      }}>
-        of the filters match
-      </label>
-    </div>
-  }
-}
-
-export default CombiningOperatorSelect

src/components/filter/FilterEditor.jsx

@@ -1,16 +1,15 @@
 import React from 'react'
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 
 import input from '../../config/input.js'
 import colors from '../../config/colors.js'
 import { margins, fontSizes } from '../../config/scales.js'
 import { combiningFilterOps } from '../../libs/filterops.js'
 
-import OperatorSelect from './OperatorSelect'
-import SingleFilterEditor from './SingleFilterEditor'
-import CombiningOperatorSelect from './CombiningOperatorSelect'
-import FilterEditorBlock from './FilterEditorBlock'
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import DocLabel from '../fields/DocLabel'
+import SelectInput from '../inputs/SelectInput'
+import SingleFilterEditor from './SingleFilterEditor'
+import FilterEditorBlock from './FilterEditorBlock'
 import Button from '../Button'
 
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
@@ -75,7 +74,7 @@ export default class CombiningFilterEditor extends React.Component {
     let combiningOp = filter[0]
     let filters = filter.slice(1)
 
-    const filterEditors = filters.map((f, idx) => {
+    const editorBlocks = filters.map((f, idx) => {
       return <FilterEditorBlock onDelete={this.deleteFilterItem.bind(this, idx)}>
         <SingleFilterEditor
           key={idx}
@@ -92,31 +91,33 @@ export default class CombiningFilterEditor extends React.Component {
     }
 
     return <div>
-      <div style={{
-        width: '50%',
-        verticalAlign: 'top',
-        display: 'inline-block',
-      }}>
-        <DocLabel
-          label={"Filter"}
-          doc={GlSpec.layer.filter.doc}
+      <div>
+        <Button onClick={this.addFilterItem.bind(this)} style={{
+          display: 'inline-block',
+          width: '18.5%',
+          marginLeft: '8%',
+        }}>Add filter</Button>
+        <SelectInput
+          value={combiningOp}
+          onChange={this.onFilterPartChanged.bind(this, 0)}
+          options={combiningFilterOps}
           style={{
-            display: 'block',
+            display: 'inline-block',
+            marginLeft: '10.5%',
+            width: '18%',
+          }}
+        />
+        <DocLabel
+          label={"of the filters match"}
+          doc={GlSpec.layer.filter.doc}
+          style={{
+            marginLeft: '2%',
+            display: 'inline-block',
+            width: '42%',
           }}
         />
-        <div>
-          <Button onClick={this.addFilterItem.bind(this)}>Add filter</Button>
-        </div>
       </div>
-      <CombiningOperatorSelect
-        value={combiningOp}
-        onChange={this.onFilterPartChanged.bind(this, 0)}
-        style={{
-          display: 'inline-block',
-          width: '50%'
-        }}
-      />
-      {filterEditors}
+      {editorBlocks}
     </div>
   }
 }

src/components/filter/FilterEditorBlock.jsx

@@ -8,21 +8,9 @@ class FilterEditorBlock extends React.Component {
     children: React.PropTypes.element.isRequired,
   }
 
-  renderChildren() {
-    return React.Children.map(this.props.children, child => {
-      return React.cloneElement(child, {
-        style: {
-          ...child.props.style,
-          display: 'inline-block',
-          width: '75%',
-        }
-      })
-    })
-  }
-
   render() {
     return <div>
-      <div style={{display: 'inline-block', width: '25%'}}>
+      <div style={{display: 'inline-block', width: '8%'}}>
         <Button
           style={{backgroundColor: null}}
           onClick={this.props.onDelete}
@@ -30,7 +18,9 @@ class FilterEditorBlock extends React.Component {
           <DeleteIcon />
         </Button>
       </div>
-      {this.props.children}
+      <div style={{display: 'inline-block', width: '92%'}}>
+        {this.props.children}
+      </div>
     </div>
   }
 }

src/components/filter/OperatorSelect.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import SelectInput from '../inputs/SelectInput'
-
-import { otherFilterOps } from '../../libs/filterops.js'
-import { margins, fontSizes } from '../../config/scales.js'
-
-class OperatorSelect extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <SelectInput
-      style={{
-        width: '15%',
-        margin: margins[0]
-      }}
-      value={this.props.value}
-      onChange={this.props.onChange}
-      options={otherFilterOps.map(op => [op, op])}
-    />
-  }
-}
-
-export default OperatorSelect

src/components/filter/SingleFilterEditor.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import OperatorSelect from './OperatorSelect'
 
 import { margins, fontSizes } from '../../config/scales.js'
+import { otherFilterOps } from '../../libs/filterops.js'
 import StringInput from '../inputs/StringInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'
+import SelectInput from '../inputs/SelectInput'
 
 class SingleFilterEditor extends React.Component {
   static propTypes = {
@@ -35,21 +36,25 @@ class SingleFilterEditor extends React.Component {
     }}>
       <AutocompleteInput
         wrapperStyle={{
-          width: '30%',
-          marginRight: margins[0]
+          width: '30%'
         }}
         value={propertyName}
         options={Object.keys(this.props.properties).map(propName => [propName, propName])}
         onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
       />
-      <OperatorSelect
+      <SelectInput
+        style={{
+          width: '19.5%',
+          marginLeft: '2%'
+        }}
         value={filterOp}
         onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
+        options={otherFilterOps}
       />
       <StringInput
         style={{
-          width: '50%',
-          marginLeft: margins[0]
+          width: '47%',
+          marginLeft: '1.5%'
         }}
         value={filterArgs.join(',')}
         onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}