schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-29 07:30:32 +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 = { static propTypes = {
action: PropTypes.string.isRequired, action: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
wdKey: PropTypes.string wdKey: PropTypes.string,
classBlockName: PropTypes.string,
} }
renderIcon() { renderIcon() {
@ -44,10 +45,15 @@ class IconAction extends React.Component {
} }
render() { render() {
let classAdditions = '';
if (this.props.classBlockName) {
classAdditions = `maputnik-layer-list-icon-action__${this.props.classBlockName}`;
}
return <button return <button
tabIndex="-1" tabIndex="-1"
title={this.props.action} title={this.props.action}
className="maputnik-layer-list-icon-action" className={`maputnik-layer-list-icon-action ${classAdditions}`}
data-wd-key={this.props.wdKey} data-wd-key={this.props.wdKey}
onClick={this.props.onClick} onClick={this.props.onClick}
> >
@ -105,16 +111,19 @@ class LayerListItem extends React.Component {
<IconAction <IconAction
wdKey={"layer-list-item:"+this.props.layerId+":delete"} wdKey={"layer-list-item:"+this.props.layerId+":delete"}
action={'delete'} action={'delete'}
classBlockName="delete"
onClick={e => this.props.onLayerDestroy(this.props.layerId)} onClick={e => this.props.onLayerDestroy(this.props.layerId)}
/> />
<IconAction <IconAction
wdKey={"layer-list-item:"+this.props.layerId+":copy"} wdKey={"layer-list-item:"+this.props.layerId+":copy"}
action={'duplicate'} action={'duplicate'}
classBlockName="duplicate"
onClick={e => this.props.onLayerCopy(this.props.layerId)} onClick={e => this.props.onLayerCopy(this.props.layerId)}
/> />
<IconAction <IconAction
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"} wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
action={this.props.visibility === 'visible' ? 'hide' : 'show'} action={this.props.visibility === 'visible' ? 'hide' : 'show'}
classBlockName="visibility"
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)} onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
/> />
</li> </li>

27
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:hover,
.maputnik-layer-list-item-selected { .maputnik-layer-list-item-selected {
background-color: lighten($color-black, 2); background-color: lighten($color-black, 2);
.maputnik-layer-list-icon-action { .maputnik-layer-list-icon-action {
display: block; display: block;
background: initial;
border: none;
padding: 0 2px;
}
.maputnik-layer-list-icon-action svg { svg {
fill: darken($color-lowgray, 0.5); fill: darken($color-lowgray, 0.5);
&:hover {
fill: $color-white;
} }
} }
} }