diff --git a/browser/main/modals/PreferencesModal/FolderItem.js b/browser/main/modals/PreferencesModal/FolderItem.js index aa4f8ecd..87f4828b 100644 --- a/browser/main/modals/PreferencesModal/FolderItem.js +++ b/browser/main/modals/PreferencesModal/FolderItem.js @@ -5,7 +5,7 @@ import styles from './FolderItem.styl' import dataApi from 'browser/main/lib/dataApi' import store from 'browser/main/store' import { SketchPicker } from 'react-color' -import { SortableElement } from 'react-sortable-hoc' +import { SortableElement, SortableHandle } from 'react-sortable-hoc' class FolderItem extends React.Component { constructor (props) { @@ -274,6 +274,30 @@ FolderItem.propTypes = { }) } -const StyledFolderItem = CSSModules(FolderItem, styles) +class Handle extends React.Component { + render() { + return ( +
+ +
+ ) + } +} -export default SortableElement(StyledFolderItem) +class SortableFolderItemComponent extends React.Component { + render() { + const StyledHandle = CSSModules(Handle, this.props.styles) + const DragHandle = SortableHandle(StyledHandle) + + const StyledFolderItem = CSSModules(FolderItem, this.props.styles) + + return ( +
+ + +
+ ) + } +} + +export default CSSModules(SortableElement(SortableFolderItemComponent), styles) diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl index 010e5ebb..e3b09582 100644 --- a/browser/main/modals/PreferencesModal/FolderItem.styl +++ b/browser/main/modals/PreferencesModal/FolderItem.styl @@ -4,6 +4,15 @@ padding 2.5px 15px &:hover background-color darken(white, 3%) + +.folderItem-drag-handle + height 35px + border none + padding 0 10px + line-height 35px + float left + cursor row-resize + .folderItem-left height 30px border-left solid 2px transparent diff --git a/browser/main/modals/PreferencesModal/FolderList.js b/browser/main/modals/PreferencesModal/FolderList.js index 2ad72f16..fa4beb66 100644 --- a/browser/main/modals/PreferencesModal/FolderList.js +++ b/browser/main/modals/PreferencesModal/FolderList.js @@ -64,7 +64,7 @@ class SortableFolderListComponent extends React.Component { render() { return ( - + ) } }