mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2025-01-26 04:58:39 +01:00
Make the whole layer label draggable
This commit is contained in:
parent
1f81449e3c
commit
deec7894dd
2 changed files with 25 additions and 46 deletions
src
|
@ -7,23 +7,16 @@ import {MdMenu, MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 're
|
||||||
import LayerIcon from '../icons/LayerIcon'
|
import LayerIcon from '../icons/LayerIcon'
|
||||||
import {SortableElement, SortableHandle} from 'react-sortable-hoc'
|
import {SortableElement, SortableHandle} from 'react-sortable-hoc'
|
||||||
|
|
||||||
class LayerTypeDragHandle extends React.Component {
|
|
||||||
static propTypes = LayerIcon.propTypes
|
|
||||||
|
|
||||||
render() {
|
const DraggableLabel = SortableHandle((props) => {
|
||||||
return <div className="layer-handle">
|
return <div className="maputnik-layer-list-item-handle">
|
||||||
<div className="layer-handle__handle">
|
<LayerIcon
|
||||||
<MdMenu style={{marginRight: "5px"}} />
|
className="layer-handle__icon"
|
||||||
</div>
|
type={props.layerType}
|
||||||
<LayerIcon
|
/>
|
||||||
className="layer-handle__icon"
|
<span className="maputnik-layer-list-item-id">{props.layerId}</span>
|
||||||
{...this.props}
|
</div>
|
||||||
/>
|
});
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const LayerTypeDragHandleSortable = SortableHandle((props) => <LayerTypeDragHandle {...props} />)
|
|
||||||
|
|
||||||
class IconAction extends React.Component {
|
class IconAction extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
@ -111,8 +104,7 @@ class LayerListItem extends React.Component {
|
||||||
"maputnik-layer-list-item-selected": this.props.isSelected,
|
"maputnik-layer-list-item-selected": this.props.isSelected,
|
||||||
[this.props.className]: true,
|
[this.props.className]: true,
|
||||||
})}>
|
})}>
|
||||||
<LayerTypeDragHandleSortable type={this.props.layerType} />
|
<DraggableLabel {...this.props} />
|
||||||
<span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
|
|
||||||
<span style={{flexGrow: 1}} />
|
<span style={{flexGrow: 1}} />
|
||||||
<IconAction
|
<IconAction
|
||||||
wdKey={"layer-list-item:"+this.props.layerId+":delete"}
|
wdKey={"layer-list-item:"+this.props.layerId+":delete"}
|
||||||
|
|
|
@ -24,6 +24,15 @@
|
||||||
padding-bottom: $margin-5;
|
padding-bottom: $margin-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-item-handle {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: $color-lowgray;
|
color: $color-lowgray;
|
||||||
|
@ -36,14 +45,12 @@
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 5px 10px;
|
padding: 5px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
max-height: 50px;
|
max-height: 50px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-transition: opacity 600ms, visibility 600ms;
|
-webkit-transition: opacity 600ms, visibility 600ms;
|
||||||
transition: opacity 600ms, visibility 600ms;
|
transition: opacity 600ms, visibility 600ms;
|
||||||
padding-left: 0;
|
|
||||||
margin-left: -4px;
|
|
||||||
|
|
||||||
@media screen and (prefers-reduced-motion: reduce) {
|
@media screen and (prefers-reduced-motion: reduce) {
|
||||||
transition-duration: 0;
|
transition-duration: 0;
|
||||||
|
@ -234,29 +241,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-handle {
|
.collapser {
|
||||||
width: 35px;
|
padding: 0;
|
||||||
flex-shrink: 0;
|
background: none;
|
||||||
cursor: move;
|
border: none;
|
||||||
|
color: inherit;
|
||||||
&__handle {
|
|
||||||
margin-right: 4px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
|
|
||||||
:not(:hover) {
|
|
||||||
path {
|
|
||||||
fill: #555;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
padding-right: 3px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue