Preferenceからもフォルダーの色の選択ができる。

Author: Rokt33r

browser/styles/main/HomeContainer/lib/Preferences.styl

@@ -440,15 +440,15 @@ iptFocusBorderColor = #369DCD
             padding 5px 0
             &:last-child
               border-color transparent
+            .folderColor
+              float left
+              margin-left 10px
+              text-align center
+              width 44px
             .folderName
               float left
               width 175px
               overflow ellipsis
-              padding-left 15px
-            .folderPublic
-              float left
-              text-align center
-              width 100px
             .folderControl
               float right
               width 145px
@@ -512,16 +512,52 @@ iptFocusBorderColor = #369DCD
                 width 150px
                 &:focus
                   border-color iptFocusBorderColor
-              .folderPublic select
-                height 33px
-                border 1px solid borderColor
-                background-color white
-                outline none
-                display block
-                margin 0 auto
-                font-size 14px
-                &:focus
-                  border-color iptFocusBorderColor
+              .folderColor
+                .select
+                  height 33px
+                  width 33px
+                  border 1px solid borderColor
+                  background-color white
+                  outline none
+                  display block
+                  margin 0 auto
+                  font-size 14px
+                  border-radius 5px
+                  &:focus
+                    border-color iptFocusBorderColor
+                .options
+                  position absolute
+                  background-color white
+                  text-align left
+                  border 1px solid borderColor
+                  border-radius 5px
+                  padding 0 5px 5px
+                  margin-left 5px
+                  margin-top -34px
+                  clearfix()
+                  .label
+                    margin-left 5px
+                    line-height 22px
+                    font-size 12px
+                  button
+                    float left
+                    border none
+                    width 33px
+                    height 33px
+                    margin-right 5px
+                    border 1px solid transparent
+                    line-height 29px
+                    overflow hidden
+                    border-radius 5px
+                    background-color transparent
+                    outline none
+                    transition 0.1s
+                    &:hover
+                      border-color borderColor
+                    &.active
+                      .FolderMark
+                        transform scale(1.4)
+                      border-color iptFocusBorderColor
               .folderControl
                 button
                   border none

lib/components/modal/Preference/FolderRow.js

@@ -26,20 +26,38 @@ export default class FolderRow extends React.Component {
   handleEditButtonClick (e) {
     this.setState({
       mode: EDIT,
-      name: this.props.folder.name
+      name: this.props.folder.name,
+      color: this.props.folder.color,
+      isColorEditing: false
     })
   }
 
   handleDeleteButtonClick (e) {
     this.setState({mode: DELETE})
   }
 
+  handleColorSelectClick (e) {
+    this.setState({
+      isColorEditing: true
+    })
+  }
+
+  handleColorButtonClick (index) {
+    return e => {
+      this.setState({
+        color: index,
+        isColorEditing: false
+      })
+    }
+  }
+
   handleSaveButtonClick (e) {
     let { folder, setAlert } = this.props
 
     setAlert(null, () => {
       let input = {
-        name: this.state.name
+        name: this.state.name,
+        color: this.state.color
       }
       folder = Object.assign({}, folder, input)
 
@@ -68,8 +86,38 @@ export default class FolderRow extends React.Component {
 
     switch (this.state.mode) {
       case EDIT:
+        let colorIndexes = []
+        for (let i = 0; i < 8; i++) {
+          colorIndexes.push(i)
+        }
+
+        let colorOptions = colorIndexes.map(index => {
+          let className = this.state.color === index
+            ? 'active'
+            : null
+          return (
+            <button onClick={e => this.handleColorButtonClick(index)(e)} className={className} key={index}>
+              <FolderMark color={index}/>
+            </button>
+          )
+        })
+
         return (
           <div className='FolderRow edit'>
+            <div className='folderColor'>
+              <button onClick={e => this.handleColorSelectClick(e)} className='select'>
+                <FolderMark color={this.state.color}/>
+              </button>
+              {this.state.isColorEditing
+                ? (
+                  <div className='options'>
+                    <div className='label'>Color select</div>
+                    {colorOptions}
+                  </div>
+                )
+                : null
+              }
+            </div>
             <div className='folderName'>
               <input valueLink={this.linkState('name')} type='text'/>
             </div>
@@ -93,7 +141,8 @@ export default class FolderRow extends React.Component {
       default:
         return (
           <div className='FolderRow'>
-            <div className='folderName'><FolderMark color={folder.color}/> {folder.name}</div>
+            <div className='folderColor'><FolderMark color={folder.color}/></div>
+            <div className='folderName'>{folder.name}</div>
             <div className='folderControl'>
               <button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
               <button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-close'/></button>

lib/components/modal/Preference/FolderSettingTab.js

@@ -59,7 +59,8 @@ export default class FolderSettingTab extends React.Component {
           <div className='sectionTitle'>Manage folder</div>
           <div className='folderTable'>
             <div className='folderHeader'>
-              <div className='folderName'>Folder name</div>
+              <div className='folderColor'></div>
+              <div className='folderName'>Folder</div>
               <div className='folderControl'>Edit/Delete</div>
             </div>
             {folderElements}

lib/reducer.js

@@ -47,7 +47,8 @@ function folders (state = initialFolders, action) {
 
         if (!_.isString(folder.name)) throw new Error('Folder name must be a string')
         folder.name = folder.name.trim().replace(/\s/, '_')
-        if (folder.length === 0) throw new Error('Folder name is required')
+        if (folder.name.length === 0) throw new Error('Folder name is required')
+        if (folder.name.match(/\//)) throw new Error('`/` is not available for folder name')
 
         // Folder existence check
         if (targetFolder == null) throw new Error('Folder doesnt exist')