ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-01-06 21:40:01 +00:00
Code Issues Projects Releases Wiki Activity

Improve inspect hover UI (#879)

Browse Source 
Fixes #868
- #868

It solves all the block within blocks and all kind of controls that are
not required which creates gaps.
I use a simple table, so the width is dynamic but it is always aligned
for all the properties and the features.

![image](https://github.com/maplibre/maputnik/assets/3269297/75138b00-ec7b-4e8d-b51b-f8ff6abcd5cb)

Vary basic stuff.
There's still the layer popup, which I'm not sure I know what it is and
might need to be fixed as well.
CC: @zstadler
This commit is contained in:
Harel M
2024-02-21 07:17:28 +02:00
committed by GitHub
parent 079c5f67cc
commit 3727f5da48
2 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/MapMaplibreGlFeaturePropertyPopup.tsx
View File

@@ -1,6 +1,4 @@
import React from 'react' import React from 'react'
import Block from './Block'
import FieldString from './FieldString'
export type InspectFeature = { export type InspectFeature = {
id: string id: string
@@ -21,30 +19,25 @@ function displayValue(value: string | number | Date | object) {
return value; return value;
} }
function renderProperties(feature: InspectFeature) { function renderKeyValueTableRow(key: string, value: string) {
return Object.keys(feature.properties).map(propertyName => { return <tr key={key}>
const property = feature.properties[propertyName] <td className="maputnik-popup-table-cell">{key}</td>
return <Block key={propertyName} label={propertyName}> <td className="maputnik-popup-table-cell">{value}</td>
<FieldString value={displayValue(property)} style={{backgroundColor: 'transparent'}}/> </tr>
</Block>
})
}
function renderFeatureId(feature: InspectFeature) {
return <Block key={"feature-id"} label={"feature_id"}>
<FieldString value={displayValue(feature.id)} style={{backgroundColor: 'transparent'}} />
</Block>
} }
function renderFeature(feature: InspectFeature, idx: number) { function renderFeature(feature: InspectFeature, idx: number) {
return <div key={`${feature.sourceLayer}-${idx}`}> return <>
<div className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div> <tr key={`${feature.sourceLayer}-${idx}`}>
<Block key={"property-type"} label={"$type"}> <td colSpan={2} className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td>
<FieldString value={feature.geometry.type} style={{backgroundColor: 'transparent'}} /> </tr>
</Block> {renderKeyValueTableRow("$type", feature.geometry.type)}
{renderFeatureId(feature)} {renderKeyValueTableRow("Feature ID", displayValue(feature.id))}
{renderProperties(feature)} {Object.keys(feature.properties).map(propertyName => {
</div> const property = feature.properties[propertyName];
return renderKeyValueTableRow(propertyName, displayValue(property))
})}
</>
} }
function removeDuplicatedFeatures(features: InspectFeature[]) { function removeDuplicatedFeatures(features: InspectFeature[]) {
@@ -78,7 +71,9 @@ class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
render() { render() {
const features = removeDuplicatedFeatures(this.props.features) const features = removeDuplicatedFeatures(this.props.features)
return <div className="maputnik-feature-property-popup"> return <div className="maputnik-feature-property-popup">
{features.map(renderFeature)} <table className="maputnik-popup-table">
{features.map(renderFeature)}
</table>
</div> </div>
} }
} }

9
src/styles/_popup.scss
View File

@@ -36,3 +36,12 @@
margin-top: $margin-2; margin-top: $margin-2;
} }
} }
.maputnik-popup-table {
width: 100%;
}
.maputnik-popup-table-cell {
color: $color-lowgray;
padding-left: $margin-2;
}