rename, recolor, remove folder

browser/main/HomePage/SideNav/FolderItem.js

@@ -0,0 +1,212 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FolderItem.styl'
+import store from 'browser/main/store'
+import Repository from 'browser/lib/Repository'
+import consts from 'browser/lib/consts'
+
+const electron = require('electron')
+const { remote } = electron
+const { Menu, MenuItem } = remote
+
+class FolderItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isEditing: false,
+      isUpdating: false,
+      name: props.folder.name
+    }
+  }
+
+  handleColorButtonClick (color) {
+    return (e) => {
+      let { repository, folder } = this.props
+      this.setState({
+        isUpdating: true
+      }, () => {
+        Repository.find(repository.key)
+          .then((repository) => {
+            console.log(repository)
+            return repository.updateFolder(folder.key, {color: color})
+          })
+          .then((folder) => {
+            store.dispatch({
+              type: 'EDIT_FOLDER',
+              key: repository.key,
+              folder: folder
+            })
+            this.setState({
+              isEditing: false,
+              isUpdating: false
+            })
+          })
+          .catch((err) => {
+            console.error(err)
+            this.setState({
+              isEditing: false,
+              isUpdating: false
+            })
+          })
+      })
+    }
+  }
+
+  handleContextButtonClick (e) {
+    if (this.state.isUpdating) {
+      return
+    }
+
+    var menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Rename',
+      click: () => this.handleRenameButtonClick(e)
+    }))
+    var colorMenu = new Menu()
+    consts.FOLDER_COLORS.forEach((color, index) => {
+      colorMenu.append(new MenuItem({
+        label: consts.FOLDER_COLOR_NAMES[index],
+        click: (e) => this.handleColorButtonClick(color)(e)
+      }))
+    })
+    menu.append(new MenuItem({
+      label: 'Recolor',
+      submenu: colorMenu
+    }))
+    menu.append(new MenuItem({ type: 'separator' }))
+    menu.append(new MenuItem({
+      label: 'Delete',
+      click: () => this.handleDeleteButtonClick(e)
+    }))
+
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleRenameButtonClick (e) {
+    this.setState({
+      isEditing: true,
+      name: this.props.folder.name
+    }, () => {
+      this.refs.nameInput.focus()
+    })
+  }
+
+  handleDeleteButtonClick (e) {
+    let { repository, folder } = this.props
+
+    this.setState({
+      isUpdating: true
+    }, () => {
+      Repository.find(repository.key)
+        .then((repository) => {
+          console.log(repository)
+          return repository.removeFolder(folder.key)
+        })
+        .then(() => {
+          store.dispatch({
+            type: 'REMOVE_FOLDER',
+            repository: repository.key,
+            folder: folder.key
+          })
+        })
+        .catch((err) => {
+          console.error(err)
+          this.setState({
+            isUpdating: false
+          })
+        })
+    })
+  }
+
+  renderIdle () {
+    let { folder } = this.props
+
+    return (
+      <div className='FolderItem'
+        styleName='root'>
+        <div styleName='label'>
+          <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
+        </div>
+        <div styleName='control'>
+          <button styleName='control-button'
+            onClick={(e) => this.handleContextButtonClick(e)}
+          >
+            <i className='fa fa-ellipsis-v'/>
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  handleNameInputChange (e) {
+    this.setState({
+      name: e.target.value
+    })
+  }
+
+  handleNameInputBlur (e) {
+    let { folder, repository } = this.props
+
+    this.setState({
+      isUpdating: true
+    }, () => {
+      Repository.find(repository.key)
+        .then((repository) => {
+          console.log(repository)
+          return repository.updateFolder(folder.key, {name: this.state.name})
+        })
+        .then((folder) => {
+          store.dispatch({
+            type: 'EDIT_FOLDER',
+            key: repository.key,
+            folder: folder
+          })
+          this.setState({
+            isEditing: false,
+            isUpdating: false
+          })
+        })
+        .catch((err) => {
+          console.error(err)
+          this.setState({
+            isEditing: false,
+            isUpdating: false
+          })
+        })
+    })
+  }
+
+  renderEdit () {
+    return (
+      <div className='FolderItem'
+        styleName='root'
+        onContextMenu={(e) => this.handleContextButtonClick(e)}
+      >
+        <input styleName='nameInput'
+          ref='nameInput'
+          value={this.state.name}
+          onChange={(e) => this.handleNameInputChange(e)}
+          onBlur={(e) => this.handleNameInputBlur(e)}
+          disabled={this.state.isUpdating}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    return this.state.isEditing ? this.renderEdit() : this.renderIdle()
+  }
+}
+
+FolderItem.propTypes = {
+  folder: PropTypes.shape({
+    name: PropTypes.string,
+    color: PropTypes.string
+  }),
+  repository: PropTypes.shape({
+    key: PropTypes.string
+  })
+}
+
+export default CSSModules(FolderItem, styles)

browser/main/HomePage/SideNav/FolderItem.styl

@@ -0,0 +1,56 @@
+.root
+  height 33px
+  width 100%
+  position relative
+  cursor pointer
+  &:hover
+    background-color alpha(white, 0.1)
+    .control
+      opacity 1
+
+.label
+  position absolute
+  left 0
+  top 0
+  bottom 0
+  right 48px
+  padding-left 20px
+  line-height 33px
+  color white
+
+.control
+  opacity 0
+  position absolute
+  top 0
+  bottom 0
+  right 5px
+  width 24px
+
+.control-button
+  width 24px
+  height 24px
+  margin-top 4.5px
+  border none
+  border-radius 5px
+  background-color transparent
+  color $nav-inactive-color
+  &:hover
+    color white
+    background-color alpha(white, 0.1)
+  &:active
+    color white
+    background-color $brand-color
+
+.nameInput
+  absolute top bottom
+  left 10px
+  right 10px
+  height 33px
+  padding 0 10px
+  border-radius 5px
+  border solid 1px $nav-border-color
+  outline none
+  &:focus
+    border-color $focus-border-color
+  &:disabled
+    background-color $disabled-input-background

browser/main/HomePage/SideNav/RepositorySection.js

@@ -2,11 +2,11 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RepositorySection.styl'
 import Repository from 'browser/lib/Repository'
+import FolderItem from './FolderItem'
 
 const electron = require('electron')
 const { remote } = electron
-const Menu = remote.Menu
-const MenuItem = remote.MenuItem
+const { Menu, MenuItem } = remote
 
 class RepositorySection extends React.Component {
   constructor (props) {
@@ -124,19 +124,11 @@ class RepositorySection extends React.Component {
 
     let folderElements = repository.folders.map((folder) => {
       return (
-        <div
+        <FolderItem
           key={folder.key}
-          styleName='folder'
-        >
-          <div styleName='folder-label'>
-            <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
-          </div>
-          <div styleName='folder-control'>
-            <button styleName='folder-control-button'>
-              <i className='fa fa-ellipsis-v'/>
-            </button>
-          </div>
-        </div>
+          folder={folder}
+          repository={repository}
+        />
       )
     })
 

browser/main/HomePage/SideNav/RepositorySection.styl

@@ -50,49 +50,6 @@
   @extend .header-control-button
   opacity 1
 
-.folder
-  height 33px
-  width 100%
-  position relative
-  cursor pointer
-  &:hover
-    background-color alpha(white, 0.1)
-    .folder-control
-      opacity 1
-
-.folder-label
-  position absolute
-  left 0
-  top 0
-  bottom 0
-  right 48px
-  padding-left 20px
-  line-height 33px
-  color white
-
-.folder-control
-  opacity 0
-  position absolute
-  top 0
-  bottom 0
-  right 5px
-  width 24px
-
-.folder-control-button
-  width 24px
-  height 24px
-  margin-top 4.5px
-  border none
-  border-radius 5px
-  background-color transparent
-  color $nav-inactive-color
-  &:hover
-    color white
-    background-color alpha(white, 0.1)
-  &:active
-    color white
-    background-color $brand-color
-
 .newFolderForm
   width 100%
   padding 0 15px

browser/main/HomePage/SideNav/SideNav.styl

@@ -47,8 +47,8 @@
 
 .repositoryList-empty
   padding 0 10px
-  height 44px
-  line-height 44px
+  margin-top 15px
+  line-height 24px
   color $nav-inactive-color
 
 .navToggle

browser/main/HomePage/SideNav/index.js

@@ -72,7 +72,7 @@ class SideNav extends React.Component {
 
         <div styleName='repositoryList'>
           {repositories.length > 0 ? repositorieElements : (
-            <div styleName='repositoryList-empty'>No repository mount</div>
+            <div styleName='repositoryList-empty'>No repository mount.</div>
           )}
         </div>