From 30facc885f11e9c7a118ca27ef6147bab737933d Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 23 Jan 2020 08:33:12 +0000 Subject: [PATCH] Tidy inline docs and added sdk support table. --- src/components/Button.jsx | 3 +- src/components/fields/DocLabel.jsx | 27 ++++++--- src/components/fields/_DataProperty.jsx | 21 ++++--- src/components/fields/_DeleteStopButton.jsx | 7 +-- src/components/fields/_FunctionButtons.jsx | 15 ++--- src/components/fields/_SpecProperty.jsx | 1 + src/components/fields/_ZoomProperty.jsx | 2 +- src/components/filter/FilterEditor.jsx | 27 ++++++++- src/components/inputs/InputBlock.jsx | 13 +++-- src/components/inputs/SelectInput.jsx | 2 + src/components/inputs/SpecDoc.js | 55 +++++++++++++++++++ src/components/layers/CommentBlock.jsx | 6 +- src/components/layers/LayerIdBlock.jsx | 2 +- src/components/layers/LayerSourceBlock.jsx | 2 +- .../layers/LayerSourceLayerBlock.jsx | 2 +- src/components/layers/LayerTypeBlock.jsx | 2 +- src/components/layers/MaxZoomBlock.jsx | 2 +- src/components/layers/MinZoomBlock.jsx | 2 +- src/components/modals/AddModal.jsx | 1 + src/components/modals/Modal.jsx | 4 +- src/components/modals/SettingsModal.jsx | 36 ++++++------ src/components/modals/SourcesModal.jsx | 4 +- src/components/sources/SourceTypeEditor.jsx | 14 ++--- src/styles/_components.scss | 18 +++--- src/styles/_input.scss | 17 ++++++ src/styles/_layout.scss | 2 +- src/styles/_modal.scss | 5 ++ 27 files changed, 204 insertions(+), 88 deletions(-) create mode 100644 src/components/inputs/SpecDoc.js diff --git a/src/components/Button.jsx b/src/components/Button.jsx index 0d350b0d..4c2105f3 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -20,7 +20,8 @@ class Button extends React.Component { aria-label={this.props["aria-label"]} className={classnames("maputnik-button", this.props.className)} data-wd-key={this.props["data-wd-key"]} - style={this.props.style}> + style={this.props.style} + > {this.props.children} } diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx index 5f5edac0..3addf054 100644 --- a/src/components/fields/DocLabel.jsx +++ b/src/components/fields/DocLabel.jsx @@ -1,13 +1,15 @@ import React from 'react' import PropTypes from 'prop-types' +import {MdInfoOutline, MdHighlightOff} from 'react-icons/md' + export default class DocLabel extends React.Component { static propTypes = { label: PropTypes.oneOfType([ PropTypes.object, PropTypes.string ]).isRequired, - doc: PropTypes.string.isRequired, + fieldSpec: PropTypes.object.isRequired, } constructor (props) { @@ -28,19 +30,26 @@ export default class DocLabel extends React.Component { } render() { - return + } + else { + return
+ } } } diff --git a/src/components/fields/_DataProperty.jsx b/src/components/fields/_DataProperty.jsx index acfa2f6e..b4b5431d 100644 --- a/src/components/fields/_DataProperty.jsx +++ b/src/components/fields/_DataProperty.jsx @@ -200,17 +200,17 @@ export default class DataProperty extends React.Component { return
this.changeDataProperty("property", propVal)} />
@@ -218,12 +218,12 @@ export default class DataProperty extends React.Component {
this.changeDataProperty("type", propVal)} + title={"Select a type of data scale (default is 'categorical')."} options={this.getDataFunctionTypes(this.props.fieldSpec)} />
@@ -231,7 +231,6 @@ export default class DataProperty extends React.Component {
+ {dataFields} +
- {dataFields} -
} } diff --git a/src/components/fields/_DeleteStopButton.jsx b/src/components/fields/_DeleteStopButton.jsx index 3cab507e..fe984212 100644 --- a/src/components/fields/_DeleteStopButton.jsx +++ b/src/components/fields/_DeleteStopButton.jsx @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import DocLabel from './DocLabel' import Button from '../Button' import {MdDelete} from 'react-icons/md' @@ -15,11 +14,9 @@ export default class DeleteStopButton extends React.Component { return } } diff --git a/src/components/fields/_FunctionButtons.jsx b/src/components/fields/_FunctionButtons.jsx index 9048a608..220e77e8 100644 --- a/src/components/fields/_FunctionButtons.jsx +++ b/src/components/fields/_FunctionButtons.jsx @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import DocLabel from './DocLabel' import Button from '../Button' import {MdFunctions, MdInsertChart} from 'react-icons/md' @@ -19,24 +18,18 @@ export default class FunctionButtons extends React.Component { makeZoomButton = if (this.props.fieldSpec['property-type'] === 'data-driven') { makeDataButton = } return
{makeDataButton}{makeZoomButton}
diff --git a/src/components/fields/_SpecProperty.jsx b/src/components/fields/_SpecProperty.jsx index 0e0fd9f7..febe80a6 100644 --- a/src/components/fields/_SpecProperty.jsx +++ b/src/components/fields/_SpecProperty.jsx @@ -25,6 +25,7 @@ export default class SpecProperty extends React.Component { return diff --git a/src/components/fields/_ZoomProperty.jsx b/src/components/fields/_ZoomProperty.jsx index adb5bcba..86d6f77e 100644 --- a/src/components/fields/_ZoomProperty.jsx +++ b/src/components/fields/_ZoomProperty.jsx @@ -125,7 +125,7 @@ export default class ZoomProperty extends React.Component { return diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index 8073f57b..e49948ef 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/src/components/filter/FilterEditor.jsx @@ -8,6 +8,7 @@ import SelectInput from '../inputs/SelectInput' import SingleFilterEditor from './SingleFilterEditor' import FilterEditorBlock from './FilterEditorBlock' import Button from '../Button' +import SpecDoc from '../inputs/SpecDoc' function hasCombiningFilter(filter) { return combiningFilterOps.indexOf(filter[0]) >= 0 @@ -29,6 +30,13 @@ export default class CombiningFilterEditor extends React.Component { onChange: PropTypes.func.isRequired, } + constructor () { + super(); + this.state = { + showDoc: false, + }; + } + // Convert filter to combining filter combiningFilter() { let filter = this.props.filter || ['all'] @@ -63,11 +71,21 @@ export default class CombiningFilterEditor extends React.Component { this.props.onChange(newFilterItem) } + onToggleDoc = (val) => { + this.setState({ + showDoc: val + }); + } + render() { const filter = this.combiningFilter() let combiningOp = filter[0] let filters = filter.slice(1) + const fieldSpec={ + doc: latest.layer.filter.doc + " Combine multiple filters together by using a compound filter." + }; + const editorBlocks = filters.map((f, idx) => { return
+
+ +
} } diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx index 0645acfa..de3de64d 100644 --- a/src/components/inputs/InputBlock.jsx +++ b/src/components/inputs/InputBlock.jsx @@ -2,6 +2,8 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import DocLabel from '../fields/DocLabel' +import SpecDoc from './SpecDoc' + /** Wrap a component with a label */ class InputBlock extends React.Component { @@ -11,7 +13,6 @@ class InputBlock extends React.Component { PropTypes.string, PropTypes.element, ]).isRequired, - doc: PropTypes.string, action: PropTypes.element, children: PropTypes.node.isRequired, style: PropTypes.object, @@ -44,16 +45,16 @@ class InputBlock extends React.Component { "maputnik-action-block": this.props.action })} > - {this.props.doc && + {this.props.fieldSpec &&
} - {!this.props.doc && + {!this.props.fieldSpec && @@ -66,12 +67,12 @@ class InputBlock extends React.Component {
{this.props.children}
- {this.props.doc && + {this.props.fieldSpec &&
- {this.props.doc} +
}
diff --git a/src/components/inputs/SelectInput.jsx b/src/components/inputs/SelectInput.jsx index 7d06a64b..edbbb38a 100644 --- a/src/components/inputs/SelectInput.jsx +++ b/src/components/inputs/SelectInput.jsx @@ -8,6 +8,7 @@ class SelectInput extends React.Component { options: PropTypes.array.isRequired, style: PropTypes.object, onChange: PropTypes.func.isRequired, + title: PropTypes.string, } @@ -21,6 +22,7 @@ class SelectInput extends React.Component { className="maputnik-select" data-wd-key={this.props["data-wd-key"]} style={this.props.style} + title={this.props.title} value={this.props.value} onChange={e => this.props.onChange(e.target.value)} > diff --git a/src/components/inputs/SpecDoc.js b/src/components/inputs/SpecDoc.js new file mode 100644 index 00000000..390d7579 --- /dev/null +++ b/src/components/inputs/SpecDoc.js @@ -0,0 +1,55 @@ +import React from 'react' + +export default function SpecDoc (props={}) { + const {fieldSpec} = props; + + const {doc} = fieldSpec; + const sdkSupport = fieldSpec['sdk-support']; + + const headers = { + js: "JS", + android: "Android", + ios: "iOS", + macos: "macOS", + }; + + return ( + <> + {doc && +
{doc}
+ } + {sdkSupport && +
+ + + + + {Object.values(headers).map(header => { + return ; + })} + + + + {Object.entries(sdkSupport).map(([key, supportObj]) => { + return ( + + + {Object.keys(headers).map(k => { + const value = supportObj[k]; + if (supportObj.hasOwnProperty(k)) { + return ; + } + else { + return ; + } + })} + + ); + })} + +
{header}
{key}{supportObj[k]}no
+
+ } + + ); +} diff --git a/src/components/layers/CommentBlock.jsx b/src/components/layers/CommentBlock.jsx index fb7d1acb..5f538482 100644 --- a/src/components/layers/CommentBlock.jsx +++ b/src/components/layers/CommentBlock.jsx @@ -11,9 +11,13 @@ class MetadataBlock extends React.Component { } render() { + const fieldSpec = { + doc: "Comments for the current layer. This is non-standard and not in the spec." + }; + return
-
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 43163173..3655ad7b 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -86,21 +86,21 @@ class SettingsModal extends React.Component { title={'Style Settings'} >
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + this.setState({ sourceId: v})} /> - + - + this.props.onChange({ @@ -52,7 +52,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 + return {this.renderTileUrls()} - + this.props.onChange({ @@ -73,7 +73,7 @@ class TileURLSourceEditor extends React.Component { })} /> - + this.props.onChange({ @@ -95,7 +95,7 @@ class GeoJSONSourceUrlEditor extends React.Component { } render() { - return + return this.props.onChange({ @@ -114,7 +114,7 @@ class GeoJSONSourceJSONEditor extends React.Component { } render() { - return + return case 'tilejson_raster-dem': return case 'tilexyz_raster-dem': return - + this.props.onChange({ diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 2fc3a231..01bb3a6f 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -28,7 +28,8 @@ height: 100%; } -.maputnik-input-block:hover { +.maputnik-input-block:hover, +.maputnik-filter-editor-compound-select:hover { .maputnik-doc-button { opacity: 1; pointer-events: all; @@ -68,14 +69,16 @@ &-button { opacity: 0; pointer-events: none; - background: #000; + background: $color-black; color: white; - border: solid 1px #555; - border-radius: 100px; + border: none; + padding: 0; + + svg { + pointer-events: none; + } &--open { - background: white; - color: black; opacity: 1; pointer-events: all; } @@ -87,7 +90,8 @@ background-color: $color-gray; padding: $margin-2; font-size: 12px; - margin-top: $margin-2; + margin-top: $margin-3; + line-height: 1.5; } .maputnik-doc-target:hover .maputnik-doc-popup { diff --git a/src/styles/_input.scss b/src/styles/_input.scss index 6c196a2b..a77a96bb 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -193,3 +193,20 @@ position: relative; overflow: hidden; } + +.sdk-support { + position: relative; + max-width: 100%; + overflow-x: auto; +} + +.sdk-support__table { + width: 100%; + margin-top: $margin-3; + + td, th { + border: solid 1px $color-midgray; + padding: 4px 6px; + white-space: nowrap; + } +} diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index 25299b27..e0f00ad7 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -32,7 +32,7 @@ top: $toolbar-height + $toolbar-offset; left: 200px; z-index: 1; - width: 350px; + width: 370px; background-color: $color-black; } diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index f15cf79e..a0519798 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -108,6 +108,11 @@ background-color: $color-midgray; } +.maputnik-add-modal { + width: 400px; + max-width: 100%; +} + .maputnik-add-layer { @extend .clearfix; }