Fix margins in source editing area

This commit is contained in:
Lukas Martinelli 2016-12-31 14:02:14 +01:00
parent ca6b48843c
commit 4f26a521a0
4 changed files with 26 additions and 15 deletions

View file

@ -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(','))}

View file

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

View file

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

View file

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