Merge pull request #1670 from rayou/fix-1661-move-folder-cursor-style

Added draggable folder handle #1661

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 }) => (
+  <i className={`fa ${className}`} />
+))
+
+const FolderIcon = ({ className, color, isActive }) => {
+  const iconStyle = isActive ? 'fa-folder-open-o' : 'fa-folder-o'
+  return (
+    <i className={`fa ${iconStyle} ${className}`} style={{ color: color }} />
+  )
+}
+
 /**
  * @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 }) => <i className={className} />)
   return (
-    <button styleName={isActive
-      ? 'folderList-item--active'
-      : 'folderList-item'
-    }
+    <button
+      styleName={isActive ? 'folderList-item--active' : 'folderList-item'}
       onClick={handleButtonClick}
       onContextMenu={handleContextMenu}
       onDrop={handleDrop}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
     >
-      <span styleName={isFolded
-        ? 'folderList-item-name--folded' : 'folderList-item-name'
-      }>
-        <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <FolderDragger className='fa fa-folder-open-o' /> : <FolderDragger className='fa fa-folder-o' />}</text>{isFolded ? _.truncate(folderName, {length: 1, omission: ''}) : folderName}
+      {!isFolded && (
+        <DraggableIcon className={styles['folderList-item-reorder']} />
+      )}
+      <span
+        styleName={
+          isFolded ? 'folderList-item-name--folded' : 'folderList-item-name'
+        }
+      >
+        <FolderIcon
+          styleName='folderList-item-icon'
+          color={folderColor}
+          isActive={isActive}
+        />
+        {isFolded
+          ? _.truncate(folderName, { length: 1, omission: '' })
+          : folderName}
       </span>
-      {(!isFolded && _.isNumber(noteCount)) &&
-        <span styleName='folderList-item-noteCount'>{noteCount}</span>
-      }
-      {isFolded &&
-        <span styleName='folderList-item-tooltip'>
-          {folderName}
-        </span>
-      }
+      {!isFolded &&
+        _.isNumber(noteCount) && (
+          <span styleName='folderList-item-noteCount'>{noteCount}</span>
+        )}
+      {isFolded && (
+        <span styleName='folderList-item-tooltip'>{folderName}</span>
+      )}
     </button>
   )
 }

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
+      background-color $ui-solarized-dark-button-backgroundColor