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