diff --git a/browser/components/StorageItem.js b/browser/components/StorageItem.js
index c92579da..87696a57 100644
--- a/browser/components/StorageItem.js
+++ b/browser/components/StorageItem.js
@@ -8,6 +8,17 @@ import CSSModules from 'browser/lib/CSSModules'
import _ from 'lodash'
import { SortableHandle } from 'react-sortable-hoc'
+const DraggableIcon = SortableHandle(({ className }) => (
+
+))
+
+const FolderIcon = ({ className, color, isActive }) => {
+ const iconStyle = isActive ? 'fa-folder-open-o' : 'fa-folder-o'
+ return (
+
+ )
+}
+
/**
* @param {boolean} isActive
* @param {Function} handleButtonClick
@@ -22,34 +33,51 @@ import { SortableHandle } from 'react-sortable-hoc'
* @return {React.Component}
*/
const StorageItem = ({
- isActive, handleButtonClick, handleContextMenu, folderName,
- folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
+ styles,
+ isActive,
+ handleButtonClick,
+ handleContextMenu,
+ folderName,
+ folderColor,
+ isFolded,
+ noteCount,
+ handleDrop,
+ handleDragEnter,
+ handleDragLeave
}) => {
- const FolderDragger = SortableHandle(({ className }) => )
return (
-
)
}
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index c89d195f..842f8d66 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -13,6 +13,7 @@
border none
overflow ellipsis
font-size 14px
+ align-items: center
&:first-child
margin-top 0
&:hover
@@ -22,7 +23,7 @@
&:active
color $$ui-button-default-color
background-color alpha($ui-button-default--active-backgroundColor, 20%)
-
+
.folderList-item--active
@extend .folderList-item
color #1EC38B
@@ -34,9 +35,7 @@
.folderList-item-name
display block
flex 1
- padding 0 12px
- height 26px
- line-height 26px
+ padding-right: 10px
border-width 0 0 0 2px
border-style solid
border-color transparent
@@ -69,9 +68,20 @@
.folderList-item-name--folded
@extend .folderList-item-name
padding-left 7px
- text
+ .folderList-item-icon
font-size 9px
+.folderList-item-icon
+ padding-right: 10px
+
+.folderList-item-reorder
+ font-size: 9px
+ padding: 10px 8px 10px 9px;
+ color: rgba(147, 147, 149, 0.3)
+ cursor: ns-resize
+ &:before
+ content: "\f142 \f142"
+
body[data-theme="white"]
.folderList-item
color $ui-inactive-text-color
@@ -127,4 +137,4 @@ body[data-theme="solarized-dark"]
background-color $ui-solarized-dark-button-backgroundColor
&:hover
color $ui-solarized-dark-text-color
- background-color $ui-solarized-dark-button-backgroundColor
\ No newline at end of file
+ background-color $ui-solarized-dark-button-backgroundColor