From 1f81449e3cae0d4e3f2d31cc27c103e8bc8409f1 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 30 Oct 2018 19:32:20 +0000 Subject: [PATCH 1/3] Added a visible drag handle. --- src/components/layers/LayerListItem.jsx | 20 ++++++++-------- src/styles/_layer.scss | 31 +++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index 91fb044..88834eb 100644 --- a/src/components/layers/LayerListItem.jsx +++ b/src/components/layers/LayerListItem.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md' +import {MdMenu, MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md' import LayerIcon from '../icons/LayerIcon' import {SortableElement, SortableHandle} from 'react-sortable-hoc' @@ -11,15 +11,15 @@ class LayerTypeDragHandle extends React.Component { static propTypes = LayerIcon.propTypes render() { - return + return
+
+ +
+ +
} } diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss index 45af9ac..cb9b5c8 100644 --- a/src/styles/_layer.scss +++ b/src/styles/_layer.scss @@ -42,6 +42,8 @@ opacity: 1; -webkit-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms; + padding-left: 0; + margin-left: -4px; @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0; @@ -111,6 +113,8 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + color: inherit; + text-decoration: none; } &-group-header { @@ -229,3 +233,30 @@ min-width: 28px; } } + +.layer-handle { + width: 35px; + flex-shrink: 0; + cursor: move; + + &__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; + } +} + From deec7894dd46558d9b376af1bcf306f927bd87ca Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 1 Nov 2018 08:12:40 +0000 Subject: [PATCH 2/3] Make the whole layer label draggable --- src/components/layers/LayerListItem.jsx | 28 ++++++---------- src/styles/_layer.scss | 43 +++++++++---------------- 2 files changed, 25 insertions(+), 46 deletions(-) diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index 88834eb..fa0fc45 100644 --- a/src/components/layers/LayerListItem.jsx +++ b/src/components/layers/LayerListItem.jsx @@ -7,23 +7,16 @@ import {MdMenu, MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 're import LayerIcon from '../icons/LayerIcon' import {SortableElement, SortableHandle} from 'react-sortable-hoc' -class LayerTypeDragHandle extends React.Component { - static propTypes = LayerIcon.propTypes - render() { - return
-
- -
- -
- } -} - -const LayerTypeDragHandleSortable = SortableHandle((props) => ) +const DraggableLabel = SortableHandle((props) => { + return
+ + {props.layerId} +
+}); class IconAction extends React.Component { static propTypes = { @@ -111,8 +104,7 @@ class LayerListItem extends React.Component { "maputnik-layer-list-item-selected": this.props.isSelected, [this.props.className]: true, })}> - - {this.props.layerId} + Date: Fri, 2 Nov 2018 08:34:56 +0000 Subject: [PATCH 3/3] Remove old code. --- src/components/layers/LayerListItem.jsx | 2 +- src/styles/_layer.scss | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index fa0fc45..0e9a238 100644 --- a/src/components/layers/LayerListItem.jsx +++ b/src/components/layers/LayerListItem.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import {MdMenu, MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md' +import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md' import LayerIcon from '../icons/LayerIcon' import {SortableElement, SortableHandle} from 'react-sortable-hoc' diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss index a4d0a9a..e3b396b 100644 --- a/src/styles/_layer.scss +++ b/src/styles/_layer.scss @@ -241,9 +241,3 @@ } } -.collapser { - padding: 0; - background: none; - border: none; - color: inherit; -}