Make the whole layer label draggable

This commit is contained in:
orangemug 2018-11-01 08:12:40 +00:00
parent 1f81449e3c
commit deec7894dd
2 changed files with 25 additions and 46 deletions
src
components/layers
styles

View file

@ -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"}

View file

@ -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;
}
} }