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

Merge pull request #400 from orangemug/feature/make-layer-visibility-always-shown

Browse source 
Make layer visibility icon shown when hidden
This commit is contained in:
Gregory Wolanski 2018-09-24 22:19:07 +02:00 committed by GitHub
commit 060f7aa42c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,9 @@ 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,
classBlockModifier: PropTypes.string,
} }
renderIcon() { renderIcon() {
@ -44,10 +46,21 @@ class IconAction extends React.Component {
} }
render() { render() {
const {classBlockName, classBlockModifier} = this.props;
let classAdditions = '';
if (classBlockName) {
classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
if (classBlockModifier) {
classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
}
}
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}
> >
@ -90,6 +103,8 @@ class LayerListItem extends React.Component {
} }
render() { render() {
const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
return <li return <li
key={this.props.layerId} key={this.props.layerId}
onClick={e => this.props.onLayerSelect(this.props.layerId)} onClick={e => this.props.onLayerSelect(this.props.layerId)}
@ -105,16 +120,20 @@ 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' ? 'show' : 'hide'} action={visibilityAction}
classBlockName="visibility"
classBlockModifier={visibilityAction}
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)} onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
/> />
</li> </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--hide {
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;
} }
} }
} }