From e1bc2a321a31e3063ae922554bfac3ab54b00c44 Mon Sep 17 00:00:00 2001 From: Lukas Martinelli Date: Sun, 25 Dec 2016 17:46:18 +0100 Subject: [PATCH] Improve inspect popups --- src/components/AppLayout.jsx | 3 +- src/components/layers/LayerListItem.jsx | 6 +-- src/components/map/FeatureLayerTable.jsx | 56 +++++++++++++-------- src/components/map/FeaturePropertyPopup.jsx | 44 ++++++++++++++++ src/components/map/InspectionMap.jsx | 5 +- src/components/map/MapboxGlMap.jsx | 3 +- src/index.css | 32 ++---------- src/mapboxgl.css | 39 ++++++++++++++ 8 files changed, 133 insertions(+), 55 deletions(-) create mode 100644 src/components/map/FeaturePropertyPopup.jsx create mode 100644 src/mapboxgl.css diff --git a/src/components/AppLayout.jsx b/src/components/AppLayout.jsx index e619f79..7c2b654 100644 --- a/src/components/AppLayout.jsx +++ b/src/components/AppLayout.jsx @@ -3,6 +3,7 @@ import ScrollContainer from './ScrollContainer' import theme from '../config/theme' import colors from '../config/colors' +import { fontSizes } from '../config/scales' class AppLayout extends React.Component { static propTypes = { @@ -18,7 +19,7 @@ class AppLayout extends React.Component { getChildContext() { return { - reactIconBase: { size: 14 } + reactIconBase: { size: fontSizes[3] } } } diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index b9e6286..980a1fa 100644 --- a/src/components/layers/LayerListItem.jsx +++ b/src/components/layers/LayerListItem.jsx @@ -23,8 +23,8 @@ class LayerTypeDragHandle extends React.Component { {...this.props} style={{ cursor: 'move', - width: 15, - height: 15, + width: fontSizes[4], + height: fontSizes[4], paddingRight: margins[0], }} /> @@ -115,7 +115,7 @@ class LayerListItem extends React.Component { getChildContext() { return { - reactIconBase: { size: 12 } + reactIconBase: { size: fontSizes[4] } } } diff --git a/src/components/map/FeatureLayerTable.jsx b/src/components/map/FeatureLayerTable.jsx index 7e490b5..56236d2 100644 --- a/src/components/map/FeatureLayerTable.jsx +++ b/src/components/map/FeatureLayerTable.jsx @@ -1,19 +1,12 @@ import React from 'react' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' +import LayerIcon from '../icons/LayerIcon' +import input from '../../config/input' import colors from '../../config/colors' import { margins, fontSizes } from '../../config/scales' -function renderProperties(feature) { - return Object.keys(feature.properties).map(propertyName => { - const property = feature.properties[propertyName] - return - - - }) -} - const Panel = (props) => { return
{ function renderFeature(feature) { return
- Source - - - Layers - - - Properties - {renderProperties(feature)} + {feature.layer['source-layer']}
} -class FeatureLayerTable extends React.Component { +function groupFeaturesBySourceLayer(features) { + const sources = {} + features.forEach(feature => { + sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || [] + sources[feature.layer['source-layer']].push(feature) + }) + return sources +} +class FeatureLayerTable extends React.Component { render() { - const features = this.props.features + const sources = groupFeaturesBySourceLayer(this.props.features) + + const items = Object.keys(sources).map(vectorLayerId => { + const layers = sources[vectorLayerId].map(feature => { + return + }) + return
+ {vectorLayerId} + {layers} +
+ }) + return
- {features.map(renderFeature)} + {items}
} } diff --git a/src/components/map/FeaturePropertyPopup.jsx b/src/components/map/FeaturePropertyPopup.jsx new file mode 100644 index 0000000..b862b72 --- /dev/null +++ b/src/components/map/FeaturePropertyPopup.jsx @@ -0,0 +1,44 @@ +import React from 'react' +import InputBlock from '../inputs/InputBlock' +import StringInput from '../inputs/StringInput' + +import colors from '../../config/colors' +import { margins, fontSizes } from '../../config/scales' + +function renderProperties(feature) { + return Object.keys(feature.properties).map(propertyName => { + const property = feature.properties[propertyName] + return + + + }) +} + +const Panel = (props) => { + return
{props.children}
+} + +function renderFeature(feature) { + return
+ {feature.layer['source-layer']} + {renderProperties(feature)} +
+} + +class FeatureLayerTable extends React.Component { + + render() { + const features = this.props.features + return
+ {features.map(renderFeature)} +
+ } +} + + +export default FeatureLayerTable diff --git a/src/components/map/InspectionMap.jsx b/src/components/map/InspectionMap.jsx index 6a5029b..9f58e89 100644 --- a/src/components/map/InspectionMap.jsx +++ b/src/components/map/InspectionMap.jsx @@ -4,9 +4,10 @@ import MapboxGl from 'mapbox-gl' import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color' import colors from '../../config/colors' import style from '../../libs/style' -import FeatureLayerTable from './FeatureLayerTable' +import FeaturePropertyPopup from './FeaturePropertyPopup' import { generateColoredLayers } from '../../libs/stylegen' import 'mapbox-gl/dist/mapbox-gl.css' +import '../../mapboxgl.css' function convertInspectStyle(mapStyle, sources) { const newStyle = { @@ -27,7 +28,7 @@ function convertInspectStyle(mapStyle, sources) { function renderPopup(features) { var mountNode = document.createElement('div'); - ReactDOM.render(, mountNode) + ReactDOM.render(, mountNode) return mountNode.innerHTML; } diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 967c5a3..a010532 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -5,6 +5,7 @@ import FeatureLayerTable from './FeatureLayerTable' import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color' import style from '../../libs/style.js' import 'mapbox-gl/dist/mapbox-gl.css' +import '../../mapboxgl.css' function renderPopup(features) { var mountNode = document.createElement('div'); @@ -74,7 +75,7 @@ export default class MapboxGlMap extends React.Component { layers: this.layers }); - console.log('Click on features', features) + if(features.length < 1) return const popup = new MapboxGl.Popup() .setLngLat(e.lngLat) .setHTML(renderPopup(features)) diff --git a/src/index.css b/src/index.css index f82c04f..22fbc7c 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,10 @@ font-style: normal; } +html { + background-color: rgb(28, 31, 36); +} + .chrome-picker { background-color: #1c1f24 !important; font-family: inherit !important; @@ -15,31 +19,3 @@ color: rgb(142, 142, 142) !important; box-shadow: none !important; } - -.mapboxgl-popup-tip { - border-top-color: rgb(28, 31, 36) !important; -} - -.mapboxgl-popup-content { - background-color: rgb(28, 31, 36) !important; - border-radius: 0px !important; - box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px; - padding: 0px !important; -} - -.mapboxgl-popup-close-button { - color: white !important; -} - -.mapboxgl-ctrl-group { - background: rgb(28, 31, 36) !important; -} - -.mapboxgl-ctrl-group > button { - background-color: rgb(28, 31, 36) !important; - border-color: rgb(28, 31, 36) !important; - - &:hover { - background-color: rgb(86, 83, 83); - } -} diff --git a/src/mapboxgl.css b/src/mapboxgl.css new file mode 100644 index 0000000..b3477a3 --- /dev/null +++ b/src/mapboxgl.css @@ -0,0 +1,39 @@ +.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { + border-bottom-color: rgb(28, 31, 36); +} + +.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { + border-right-color: rgb(28, 31, 36); +} + +.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { + border-left-color: rgb(28, 31, 36); +} + +.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { + border-top-color: rgb(28, 31, 36); +} + +.mapboxgl-popup-content { + background-color: rgb(28, 31, 36); + border-radius: 0px; + box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px; + padding: 0px; +} + +.mapboxgl-popup-close-button { + color: white; +} + +.mapboxgl-ctrl-group { + background: rgb(28, 31, 36); +} + +.mapboxgl-ctrl-group > button { + background-color: rgb(28, 31, 36); + border-color: rgb(28, 31, 36); +} + +.mapboxgl-ctrl-group > button:hover { + background-color: rgb(86, 83, 83); +}