Added additional menu in <LayerEditor/>

This is to make the following options accessible to keyboard users

 - reorder layers
 - duplicate layer
 - delete layer
 - hide/show layer
This commit is contained in:
orangemug
2018-05-22 21:16:46 +01:00
parent 1aed761893
commit bd9076c4ff
7 changed files with 227 additions and 50 deletions

View File

@@ -50,14 +50,25 @@
@include flex-row;
}
&-icon-action svg {
fill: $color-black;
&-icon-action {
display: none;
svg {
fill: $color-black;
}
}
.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);
@@ -168,3 +179,38 @@
color: $color-lowgray;
}
}
.more-menu {
position: relative;
&__button {
}
&__menu {
position: absolute;
z-index: 9999;
background: $color-black;
border: solid 1px $color-midgray;
right: 0;
min-width: 120px;
}
&__menu__item {
padding: 4px;
}
}
.layer-header {
display: flex;
padding: 6px;
background: $color-black;
border-bottom: solid 1px $color-midgray;
&__title {
flex: 1;
}
&__info {
min-width: 28px;
}
}