diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index 91fb0443..88834eb6 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 45af9ac1..cb9b5c89 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; + } +} +