mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2025-01-19 14:29:28 +01:00
Ensure zoom icon is nice
This commit is contained in:
parent
5d70de6202
commit
c3417241f1
4 changed files with 20 additions and 5 deletions
src/components
|
@ -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
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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') {
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue