schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-14 17:23:26 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added classBlockModifier to <LayerAction/> and switched to only displaying icons for hidden layers

Browse source
This commit is contained in:
orangemug 2018-09-24 20:40:51 +01:00
parent cdcf16196c
commit 252403b1e3
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/layers/LayerListItem.jsx
View file

@ -33,6 +33,7 @@ class IconAction extends React.Component {
onClick: PropTypes.func.isRequired,
wdKey: PropTypes.string,
classBlockName: PropTypes.string,
classBlockModifier: PropTypes.string,
}
renderIcon() {
@ -45,9 +46,15 @@ class IconAction extends React.Component {
}
render() {
const {classBlockName, classBlockModifier} = this.props;
let classAdditions = '';
if (this.props.classBlockName) {
classAdditions = `maputnik-layer-list-icon-action__${this.props.classBlockName}`;
if (classBlockName) {
classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
if (classBlockModifier) {
classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
}
}
return <button
@ -96,6 +103,8 @@ class LayerListItem extends React.Component {
}
render() {
const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
return <li
key={this.props.layerId}
onClick={e => this.props.onLayerSelect(this.props.layerId)}
@ -122,8 +131,9 @@ class LayerListItem extends React.Component {
/>
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
action={this.props.visibility === 'visible' ? 'show' : 'hide'}
action={visibilityAction}
classBlockName="visibility"
classBlockModifier={visibilityAction}
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
/>
</li>

2
src/styles/_layer.scss
View file

@ -72,7 +72,7 @@
}
}
.maputnik-layer-list-icon-action__visibility {
.maputnik-layer-list-icon-action__visibility--hide {
display: block;
}