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 (
-
+
)
}
}