Add color picker dependency; use color picker in storage dialog

browser/main/modals/PreferencesModal/StorageItem.js

@@ -8,6 +8,7 @@ import store from 'browser/main/store'
 const electron = require('electron')
 const { shell, remote } = electron
 const { Menu, MenuItem } = remote
+import { SketchPicker } from 'react-color'
 
 class UnstyledFolderItem extends React.Component {
   constructor (props) {
@@ -16,6 +17,7 @@ class UnstyledFolderItem extends React.Component {
     this.state = {
       status: 'IDLE',
       folder: {
+        showColumnPicker: false,
         color: props.color,
         name: props.name
       }
@@ -50,22 +52,18 @@ class UnstyledFolderItem extends React.Component {
   }
 
   handleColorButtonClick (e) {
-    var menu = new Menu()
+    const folder = Object.assign({}, this.state.folder, { showColumnPicker: true })
+    this.setState({ folder })
+  }
 
-    consts.FOLDER_COLORS.forEach((color, index) => {
+  handleColorChange (color) {
-      menu.append(new MenuItem({
+    const folder = Object.assign({}, this.state.folder, { color: color.hex })
-        label: consts.FOLDER_COLOR_NAMES[index],
+    this.setState({ folder })
-        click: (e) => {
+  }
-          let { folder } = this.state
-          folder.color = color
-          this.setState({
-            folder
-          })
-        }
-      }))
-    })
 
-    menu.popup(remote.getCurrentWindow())
+  handleColorPickerClose (event) {
+    const folder = Object.assign({}, this.state.folder, { showColumnPicker: false })
+    this.setState({ folder })
   }
 
   handleCancelButtonClick (e) {
@@ -75,12 +73,27 @@ class UnstyledFolderItem extends React.Component {
   }
 
   renderEdit (e) {
+    const popover = { position: 'absolute', zIndex: 2 }
+    const cover = {
+      position: 'fixed',
+      top: 0, right: 0, bottom: 0, left: 0
+    }
     return (
       <div styleName='folderList-item'>
         <div styleName='folderList-item-left'>
           <button styleName='folderList-item-left-colorButton' style={{color: this.state.folder.color}}
-            onClick={(e) => this.handleColorButtonClick(e)}
+            onClick={(e) => !this.state.folder.showColumnPicker && this.handleColorButtonClick(e)}
           >
+          { this.state.folder.showColumnPicker ?
+            <div style={ popover }>
+              <div style={ cover }
+                onClick={ () => this.handleColorPickerClose() } />
+                <SketchPicker
+                  color={this.state.folder.color}
+                  onChange={ (color) => this.handleColorChange(color) }
+                  onChangeComplete={ (color) => this.handleColorChange(color) } />
+              </div>
+          : null }
             <i className='fa fa-square'/>
           </button>
           <input styleName='folderList-item-left-nameInput'

package.json

@@ -51,6 +51,8 @@
     "markdown-it-footnote": "^3.0.0",
     "md5": "^2.0.0",
     "moment": "^2.10.3",
+    "react-color": "^2.2.2",
+    "react-dom": "^15.3.0",
     "sander": "^0.5.1",
     "season": "^5.3.0",
     "superagent": "^1.2.0",