schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 18:21:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #459 from orangemug/feature/layer-list-ui-handle

Browse source 
Make whole layer label draggable
This commit is contained in:
Orange Mug 2018-11-02 20:48:14 +00:00 committed by GitHub
commit c94f536e5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,23 +7,16 @@ import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icon
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 <LayerIcon return <div className="maputnik-layer-list-item-handle">
{...this.props} <LayerIcon
style={{ className="layer-handle__icon"
cursor: 'move', type={props.layerType}
width: 14,
height: 14,
paddingRight: 3,
}}
/> />
} <span className="maputnik-layer-list-item-id">{props.layerId}</span>
} </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"}

13
src/styles/_layer.scss
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,7 +45,7 @@
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;
@ -111,6 +120,8 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: inherit;
text-decoration: none;
} }
&-group-header { &-group-header {