Ensure zoom icon is nice

This commit is contained in:
Lukas Martinelli 2017-01-09 22:09:15 +01:00
parent 5d70de6202
commit c3417241f1
4 changed files with 20 additions and 5 deletions

View file

@ -19,8 +19,9 @@ export default class DocLabel extends React.Component {
return <label return <label
style={{ style={{
...input.label, ...input.label,
...this.props.style,
position: 'relative', position: 'relative',
verticalAlign: 'top',
...this.props.style,
}} }}
> >
<span <span

View file

@ -123,14 +123,15 @@ export default class ZoomSpecField extends React.Component {
}}> }}>
{label} {label}
<Button <Button
style={{backgroundColor: null}} style={{backgroundColor: null, verticalAlign: 'top'}}
onClick={this.deleteStop.bind(this, idx)} onClick={this.deleteStop.bind(this, idx)}
> >
<DeleteIcon /> <DeleteIcon />
</Button> </Button>
<NumberInput <NumberInput
style={{ style={{
width: '7.5%' width: '7.5%',
verticalAlign: 'top',
}} }}
value={zoomLevel} value={zoomLevel}
onChange={changedStop => this.changeStop(idx, changedStop, value)} onChange={changedStop => this.changeStop(idx, changedStop, value)}
@ -169,7 +170,11 @@ export default class ZoomSpecField extends React.Component {
/> />
{this.props.fieldSpec['zoom-function'] && {this.props.fieldSpec['zoom-function'] &&
<Button <Button
style={{backgroundColor: null}} style={{
verticalAlign: 'top',
backgroundColor: null,
display: 'inline-block',
}}
onClick={this.makeZoomFunction.bind(this)} onClick={this.makeZoomFunction.bind(this)}
> >
<FunctionIcon /> <FunctionIcon />

View file

@ -30,6 +30,7 @@ class ArrayInput extends React.Component {
const commonStyle = { const commonStyle = {
width: '48%', width: '48%',
marginRight: '2%', marginRight: '2%',
marginBottom: '2%'
} }
const inputs = this.values.map((v, i) => { const inputs = this.values.map((v, i) => {
if(this.props.type === 'number') { if(this.props.type === 'number') {

View file

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import AutocompleteInput from './AutocompleteInput' import AutocompleteInput from './AutocompleteInput'
import input from '../../config/input.js' import input from '../../config/input.js'
import { margins } from '../../config/scales.js'
//TODO: Query available font stack dynamically //TODO: Query available font stack dynamically
import fontStacks from '../../config/fontstacks.json' import fontStacks from '../../config/fontstacks.json'
@ -29,10 +30,17 @@ class FontInput extends React.Component {
value={value} value={value}
options={fontStacks.map(f => [f, f])} options={fontStacks.map(f => [f, f])}
onChange={this.changeFont.bind(this, i)} onChange={this.changeFont.bind(this, i)}
wrapperStyle={{
display: 'block',
marginBottom: i == this.values.length - 1 ? 0 : margins[2],
}}
/> />
}) })
return <div style={{display: 'inline-block'}}> return <div style={{
display: 'inline-block',
...this.props.style
}}>
{inputs} {inputs}
</div> </div>
} }