diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx
index 9a89777..bbeff47 100644
--- a/src/components/fields/ColorField.jsx
+++ b/src/components/fields/ColorField.jsx
@@ -82,7 +82,6 @@ class ColorField extends React.Component {
</div>
return <div style={{
- ...input.property,
position: 'relative',
display: 'inline',
}}>
diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx
index 1691403..8deafa7 100644
--- a/src/components/fields/ZoomSpecField.jsx
+++ b/src/components/fields/ZoomSpecField.jsx
@@ -3,6 +3,7 @@ import Color from 'color'
import Button from '../Button'
import SpecField from './SpecField'
+import NumberInput from '../inputs/NumberInput'
import DocLabel from './DocLabel'
import AddIcon from 'react-icons/lib/md/add-circle-outline'
@@ -44,20 +45,21 @@ export default class ZoomSpecField extends React.Component {
let label = <DocLabel
label={labelFromFieldName(this.props.fieldName)}
doc={this.props.fieldSpec.doc}
+ style={{
+ width: '50%',
+ }}
/>
if(isZoomField(this.props.value)) {
const zoomFields = this.props.value.stops.map((stop, idx) => {
- label = <label style={{...input.label, width: '30%'}}>
- {labelFromFieldName(this.props.fieldName)}
- </label>
-
- if(idx > 0) {
- label = <label style={{...input.label, width: '30%'}}></label>
- }
+ label = <DocLabel
+ doc={this.props.fieldSpec.doc}
+ style={{ width: '42.5%'}}
+ label={idx > 0 ? "" : labelFromFieldName(this.props.fieldName)}
+ />
if(idx === 1) {
- label = <label style={{...input.label, width: '30%'}}>
+ label = <label style={{...input.label, width: '42.5%'}}>
<Button style={{fontSize: fontSizes[5]}}>
Add stop
</Button>
@@ -67,17 +69,19 @@ export default class ZoomSpecField extends React.Component {
const zoomLevel = stop[0]
const value = stop[1]
- return <div style={input.property} key={zoomLevel}>
+ return <div key={zoomLevel} style={{
+ ...input.property,
+ marginLeft: 0,
+ marginRight: 0
+ }}>
{label}
<Button style={{backgroundColor: null}}>
<DeleteIcon />
</Button>
- <input
+ <NumberInput
style={{
- ...input.input,
- width: '10%',
+ width: '7%',
}}
- type="number"
value={zoomLevel}
min={0}
max={22}
@@ -85,19 +89,20 @@ export default class ZoomSpecField extends React.Component {
<SpecField {...this.props}
value={value}
style={{
- width: '33%',
+ width: '42%',
marginLeft: margins[0],
}}
/>
</div>
})
+
return <div style={input.property}>
{zoomFields}
</div>
} else {
return <div style={input.property}>
{label}
- <SpecField {...this.props} />
+ <SpecField {...this.props} style={{ width: '50%' } }/>
</div>
}
}
diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx
index 4e804da..836dfeb 100644
--- a/src/components/filter/FilterEditor.jsx
+++ b/src/components/filter/FilterEditor.jsx
@@ -5,6 +5,10 @@ import input from '../../config/input.js'
import colors from '../../config/colors.js'
import { margins } from '../../config/scales.js'
+import SelectInput from '../inputs/SelectInput'
+import StringInput from '../inputs/StringInput'
+import AutocompleteInput from '../inputs/AutocompleteInput'
+
const combiningFilterOps = ['all', 'any', 'none']
const setFilterOps = ['in', '!in']
const otherFilterOps = Object
@@ -35,6 +39,7 @@ class CombiningOperatorSelect extends React.Component {
})
return <div>
+
<select
style={{
...input.select,
@@ -64,20 +69,15 @@ class OperatorSelect extends React.Component {
}
render() {
- const options = otherFilterOps.map(op => {
- return <option key={op} value={op}>{op}</option>
- })
- return <select
+ return <SelectInput
style={{
- ...input.select,
width: '15%',
margin: margins[0]
}}
value={this.props.value}
- onChange={e => this.props.onChange(e.target.value)}
- >
- {options}
- </select>
+ onChange={this.props.onChange}
+ options={otherFilterOps.map(op => [op, op])}
+ />
}
}
@@ -104,32 +104,26 @@ class SingleFilterEditor extends React.Component {
const filterArgs = f.slice(2)
return <div>
- <select
- style={{
- ...input.select,
- width: '17%',
- margin: margins[0]
+ <AutocompleteInput
+ wrapperStyle={{
+ width: '35%',
+ margin: margins[0],
}}
value={propertyName}
+ options={Object.keys(this.props.properties).map(propName => [propName, propName])}
onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
- >
- {Object.keys(this.props.properties).map(propName => {
- return <option key={propName} value={propName}>{propName}</option>
- })}
- </select>
+ />
<OperatorSelect
value={filterOp}
onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
/>
- <input
+ <StringInput
style={{
- ...input.input,
- width: '53%',
+ width: '35%',
margin: margins[0]
}}
value={filterArgs.join(',')}
- onChange={e => {
- this.onFilterPartChanged(filterOp, propertyName, e.target.value.split(','))}}
+ onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
/>
</div>
}
@@ -182,11 +176,7 @@ export default class CombiningFilterEditor extends React.Component {
return null
}
- return <div style={{
- padding: margins[2],
- paddingRight: 0,
- backgroundColor: colors.black
- }}>
+ return <div>
<CombiningOperatorSelect
value={combiningOp}
onChange={this.onFilterPartChanged.bind(this, 0)}
diff --git a/src/components/inputs/ArrayInput.jsx b/src/components/inputs/ArrayInput.jsx
index 34e6159..1bf665f 100644
--- a/src/components/inputs/ArrayInput.jsx
+++ b/src/components/inputs/ArrayInput.jsx
@@ -18,8 +18,8 @@ class ArrayInput extends React.Component {
render() {
const values = this.props.value || this.props.default || []
const commonStyle = {
- width: '15%',
- marginRight: margins[0],
+ width: '49%',
+ marginRight: '1%',
}
const inputs = values.map((v, i) => {
if(this.props.type === 'number') {
@@ -28,7 +28,7 @@ class ArrayInput extends React.Component {
return <StringInput key={i} value={v} style={commonStyle} />
})
- return <div style={{display: 'inline-block', width: '51%'}}>
+ return <div style={{display: 'inline-block', width: '50%'}}>
{inputs}
</div>
}
diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx
index 36edb4b..9077de8 100644
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/src/components/inputs/AutocompleteInput.jsx
@@ -8,7 +8,8 @@ class AutocompleteInput extends React.Component {
static propTypes = {
value: React.PropTypes.string,
options: React.PropTypes.array,
- style: React.PropTypes.object,
+ wrapperStyle: React.PropTypes.object,
+ inputStyle: React.PropTypes.object,
onChange: React.PropTypes.func,
}
@@ -28,11 +29,15 @@ class AutocompleteInput extends React.Component {
background: colors.gray,
zIndex: 3,
}}
+ wrapperStyle={{
+ display: 'inline-block',
+ ...this.props.wrapperStyle
+ }}
inputProps={{
style: {
...input.input,
- width: null,
- ...this.props.style,
+ width: '100%',
+ ...this.props.inputStyle,
}
}}
value={this.props.value}
diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx
index 51775b3..9023911 100644
--- a/src/components/inputs/InputBlock.jsx
+++ b/src/components/inputs/InputBlock.jsx
@@ -15,15 +15,30 @@ class InputBlock extends React.Component {
return this.props.onChange(value === "" ? null: value)
}
+ renderChildren() {
+ return React.Children.map(this.props.children, child => {
+ return React.cloneElement(child, {
+ style: {
+ ...child.props.style,
+ width: '50%',
+ }
+ })
+ })
+ }
+
render() {
return <div style={{
- display: 'block',
- marginTop: margins[2],
- marginBottom: margins[2],
+ ...input.property,
...this.props.style,
}}>
- <label style={input.label}>{this.props.label}</label>
- {this.props.children}
+ <label
+ style={{
+ ...input.label,
+ width: '50%',
+ }}>
+ {this.props.label}
+ </label>
+ {this.renderChildren()}
</div>
}
}
diff --git a/src/config/input.js b/src/config/input.js
index 7b4940f..2ec996e 100644
--- a/src/config/input.js
+++ b/src/config/input.js
@@ -3,6 +3,7 @@ import { margins, fontSizes } from './scales'
const base = {
display: 'inline-block',
+ boxSizing: 'border-box',
fontSize: fontSizes[5],
lineHeight: 2,
paddingLeft: 5,
@@ -11,20 +12,19 @@ const base = {
const label = {
...base,
- width: '40%',
+ padding: null,
color: colors.lowgray,
userSelect: 'none',
}
const property = {
- marginTop: margins[2],
- marginBottom: margins[2],
+ display: 'block',
+ margin: margins[2],
}
const input = {
...base,
border: 'none',
- width: '47%',
backgroundColor: colors.gray,
color: colors.lowgray,
}
@@ -38,7 +38,6 @@ const checkbox = {
const select = {
...input,
- width: '50%',
height: '2.15em',
}