schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 02:15:26 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Always show layer visibility toggle in layer list

Browse source
This commit is contained in:
orangemug 2018-09-23 09:05:08 +01:00
parent 805133d10c
commit a0ed6a379b
2 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,8 @@ class IconAction extends React.Component {
static propTypes = {
action: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
wdKey: PropTypes.string
wdKey: PropTypes.string,
classBlockName: PropTypes.string,
}
renderIcon() {
@ -44,10 +45,15 @@ class IconAction extends React.Component {
}
render() {
let classAdditions = '';
if (this.props.classBlockName) {
classAdditions = `maputnik-layer-list-icon-action__${this.props.classBlockName}`;
}
return <button
tabIndex="-1"
title={this.props.action}
className="maputnik-layer-list-icon-action"
className={`maputnik-layer-list-icon-action ${classAdditions}`}
data-wd-key={this.props.wdKey}
onClick={this.props.onClick}
>
@ -105,16 +111,19 @@ class LayerListItem extends React.Component {
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":delete"}
action={'delete'}
classBlockName="delete"
onClick={e => this.props.onLayerDestroy(this.props.layerId)}
/>
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":copy"}
action={'duplicate'}
classBlockName="duplicate"
onClick={e => this.props.onLayerCopy(this.props.layerId)}
/>
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
action={this.props.visibility === 'visible' ? 'hide' : 'show'}
classBlockName="visibility"
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
/>
</li>

29
src/styles/_layer.scss
View file

@ -58,22 +58,33 @@
}
}
.maputnik-layer-list-icon-action {
background: initial;
border: none;
padding: 0 2px;
svg {
fill: darken($color-lowgray, 20);
&:hover {
fill: $color-white;
}
}
}
.maputnik-layer-list-icon-action__visibility {
display: block;
}
.maputnik-layer-list-item:hover,
.maputnik-layer-list-item-selected {
background-color: lighten($color-black, 2);
.maputnik-layer-list-icon-action {
display: block;
background: initial;
border: none;
padding: 0 2px;
}
.maputnik-layer-list-icon-action svg {
fill: darken($color-lowgray, 0.5);
&:hover {
fill: $color-white;
svg {
fill: darken($color-lowgray, 0.5);
}
}
}