From 4f26a521a05dd867fc18aa41eeeb3e2c311c8ffa Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Sat, 31 Dec 2016 14:02:14 +0100
Subject: [PATCH] Fix margins in source editing area

---
 src/components/filter/FilterEditor.jsx        | 22 ++++++++++++-------
 src/components/layers/LayerEditor.jsx         | 17 ++++++++------
 src/components/layers/LayerSourceBlock.jsx    |  1 +
 .../layers/LayerSourceLayerBlock.jsx          |  1 +
 4 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx
index 836dfebc..7c1405ae 100644
--- a/src/components/filter/FilterEditor.jsx
+++ b/src/components/filter/FilterEditor.jsx
@@ -38,13 +38,16 @@ class CombiningOperatorSelect extends React.Component {
       return <option key={op} value={op}>{op}</option>
     })
 
-    return <div>
-
+    return <div
+      style={{
+          marginTop: margins[1],
+          marginBottom: margins[1],
+        }}
+      >
       <select
         style={{
           ...input.select,
           width: '20.5%',
-          margin: margins[0],
         }}
         value={this.props.value}
         onChange={e => this.props.onChange(e.target.value)}
@@ -103,11 +106,14 @@ class SingleFilterEditor extends React.Component {
     const propertyName = f[1]
     const filterArgs = f.slice(2)
 
-    return <div>
+    return <div style={{
+      marginTop: margins[1],
+      marginBottom: margins[1],
+    }}>
       <AutocompleteInput
         wrapperStyle={{
-          width: '35%',
-          margin: margins[0],
+          width: '31%',
+          marginRight: margins[0]
         }}
         value={propertyName}
         options={Object.keys(this.props.properties).map(propName => [propName, propName])}
@@ -119,8 +125,8 @@ class SingleFilterEditor extends React.Component {
       />
       <StringInput
         style={{
-          width: '35%',
-          margin: margins[0]
+          width: '50%',
+          marginLeft: margins[0]
         }}
         value={filterArgs.join(',')}
         onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index 1022f765..34383a7b 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -13,6 +13,7 @@ import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 import InputBlock from '../inputs/InputBlock'
 import MultiButtonInput from '../inputs/MultiButtonInput'
 
+import input from '../../config/input.js'
 import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
 import { margins, fontSizes } from '../../config/scales'
@@ -106,13 +107,6 @@ export default class LayerEditor extends React.Component {
           />
         </div>
       case 'source': return <div>
-        {this.props.layer.filter &&
-        <FilterEditor
-          filter={this.props.layer.filter}
-          properties={this.props.vectorLayers[this.props.layer['source-layer']]}
-          onChange={f => this.changeProperty(null, 'filter', f)}
-        />
-        }
         <LayerSourceBlock
           sourceIds={Object.keys(this.props.sources)}
           value={this.props.layer.source}
@@ -123,6 +117,15 @@ export default class LayerEditor extends React.Component {
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
+        {this.props.layer.filter &&
+        <div style={input.property}>
+          <FilterEditor
+            filter={this.props.layer.filter}
+            properties={this.props.vectorLayers[this.props.layer['source-layer']]}
+            onChange={f => this.changeProperty(null, 'filter', f)}
+          />
+        </div>
+        }
       </div>
       case 'properties': return <PropertyGroup
         layer={this.props.layer}
diff --git a/src/components/layers/LayerSourceBlock.jsx b/src/components/layers/LayerSourceBlock.jsx
index 6a85160f..6dc1890c 100644
--- a/src/components/layers/LayerSourceBlock.jsx
+++ b/src/components/layers/LayerSourceBlock.jsx
@@ -23,6 +23,7 @@ class LayerSourceBlock extends React.Component {
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceIds.map(src => [src, src])}
+        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }
diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx
index b7f9fd43..1966c84f 100644
--- a/src/components/layers/LayerSourceLayerBlock.jsx
+++ b/src/components/layers/LayerSourceLayerBlock.jsx
@@ -23,6 +23,7 @@ class LayerSourceLayer extends React.Component {
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}
+        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }