Show hints in the source modal as well

This commit is contained in:
Lukas Martinelli 2017-01-09 22:44:22 +01:00
parent a3caf8499c
commit d3276829b2
3 changed files with 12 additions and 10 deletions

View file

@ -46,7 +46,7 @@ class SettingsModal extends React.Component {
onOpenToggle={this.props.onOpenToggle}
title={'Style Settings'}
>
<InputBlock label={"Name"} doc={GlSpec['$root'].name.doc}>
<InputBlock label={"Name"} doc={GlSpec.$root.name.doc}>
<StringInput {...inputProps}
value={this.props.mapStyle.name}
onChange={this.changeStyleProperty.bind(this, "name")}
@ -58,14 +58,14 @@ class SettingsModal extends React.Component {
onChange={this.changeStyleProperty.bind(this, "owner")}
/>
</InputBlock>
<InputBlock label={"Sprite URL"} doc={GlSpec['$root'].sprite.doc}>
<InputBlock label={"Sprite URL"} doc={GlSpec.$root.sprite.doc}>
<StringInput {...inputProps}
value={this.props.mapStyle.sprite}
onChange={this.changeStyleProperty.bind(this, "sprite")}
/>
</InputBlock>
<InputBlock label={"Glyphs URL"} doc={GlSpec['$root'].glyphs.doc}>
<InputBlock label={"Glyphs URL"} doc={GlSpec.$root.glyphs.doc}>
<StringInput {...inputProps}
value={this.props.mapStyle.glyphs}
onChange={this.changeStyleProperty.bind(this, "glyphs")}

View file

@ -1,4 +1,5 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import Modal from './Modal'
import Heading from '../Heading'
import Button from '../Button'
@ -163,13 +164,13 @@ class AddSource extends React.Component {
render() {
return <div>
<InputBlock label={"Source ID"}>
<InputBlock label={"Source ID"} doc={"Unique ID that identifies the source and is used in the layer to reference the source."}>
<StringInput
value={this.state.sourceId}
onChange={v => this.setState({ sourceId: v})}
/>
</InputBlock>
<InputBlock label={"Source Type"}>
<InputBlock label={"Source Type"} doc={GlSpec.source_tile.type.doc}>
<SelectInput
options={[
['geojson', 'GeoJSON'],

View file

@ -1,4 +1,5 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import NumberInput from '../inputs/NumberInput'
@ -10,7 +11,7 @@ class TileJSONSourceEditor extends React.Component {
}
render() {
return <InputBlock label={"TileJSON URL"}>
return <InputBlock label={"TileJSON URL"} doc={GlSpec.source_tile.url.doc}>
<StringInput
value={this.props.source.url}
onChange={url => this.props.onChange({
@ -32,7 +33,7 @@ class TileURLSourceEditor extends React.Component {
const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
const tiles = this.props.source.tiles || []
return tiles.map((tileUrl, tileIndex) => {
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"}>
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={GlSpec.source_tile.tiles.doc}>
<StringInput
value={tileUrl}
/>
@ -43,7 +44,7 @@ class TileURLSourceEditor extends React.Component {
render() {
return <div>
{this.renderTileUrls()}
<InputBlock label={"Min Zoom"}>
<InputBlock label={"Min Zoom"} doc={GlSpec.source_tile.minzoom.doc}>
<NumberInput
value={this.props.source.minZoom}
onChange={minZoom => this.props.onChange({
@ -52,7 +53,7 @@ class TileURLSourceEditor extends React.Component {
})}
/>
</InputBlock>
<InputBlock label={"Max Zoom"}>
<InputBlock label={"Max Zoom"} doc={GlSpec.source_tile.maxzoom.doc}>
<NumberInput
value={this.props.source.maxZoom}
onChange={maxZoom => this.props.onChange({
@ -73,7 +74,7 @@ class GeoJSONSourceEditor extends React.Component {
}
render() {
return <InputBlock label={"GeoJSON Data"}>
return <InputBlock label={"GeoJSON Data"} doc={GlSpec.source_geojson.data.doc}>
<StringInput
value={this.props.source.data}
onChange={data => this.props.onChange({