new folder modalにcolor select追加

Author: Rokt33r

browser/styles/main/HomeContainer/components/ArticleNavigator.styl

@@ -150,7 +150,7 @@ articleCount = #999
       &:hover
         background-color transparentify(white, 5%)
       &.active, &:active
-        background-color brandColor
+        background-color transparentify(lighten(brandColor, 25%), 70%)
       .articleCount
         color articleCount
         font-size 12px

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

@@ -34,17 +34,37 @@ iptFocusBorderColor = #369DCD
     border-radius 5px
     border solid 1px borderColor
     outline none
-    margin 100px auto 25px
+    margin 100px auto 15px
     &:focus
       border-color iptFocusBorderColor
+  .colorSelect
+    text-align center
+    .option
+      cursor pointer
+      .FolderMark
+        padding 5px
+        font-size 22px
+        height 33px
+        width 33px
+        overflow hidden
+        line-height 33px
+        transition 0.1s
+        border 1px solid transparent
+        border-radius 5px
+        margin 0 2px
+        &:hover
+          border-color borderColor
+        &.active
+          font-size 28px
+          border-color iptFocusBorderColor
   .alert
     color infoTextColor
     background-color infoBackgroundColor
     font-size 14px
     padding 15px 15px
     width 330px
     border-radius 5px
-    margin 0 auto
+    margin 15px auto 0
     &.error
       color errorTextColor
       background-color errorBackgroundColor

lib/components/FolderMark.js

@@ -3,45 +3,50 @@ import React, { PropTypes } from 'react'
 const BLUE = '#3460C7'
 const LIGHTBLUE = '#2BA5F7'
 const ORANGE = '#FF8E00'
-const YELLOW = '#EAEF31'
-const GREEN = '#02FF26'
-const DARKGREEN = '#008A59'
+const YELLOW = '#E8D252'
+const GREEN = '#3FD941'
+const DARKGREEN = '#1FAD85'
 const RED = '#E10051'
 const PURPLE = '#B013A4'
-const BRAND_COLOR = '#2BAC8F'
 
 function getColorByIndex (index) {
   switch (index % 8) {
     case 0:
-      return LIGHTBLUE
+      return RED
     case 1:
       return ORANGE
     case 2:
-      return RED
+      return YELLOW
     case 3:
       return GREEN
     case 4:
       return DARKGREEN
     case 5:
-      return YELLOW
+      return LIGHTBLUE
     case 6:
       return BLUE
     case 7:
       return PURPLE
     default:
-      return BRAND_COLOR
+      return DARKGREEN
   }
 }
 
 export default class FolderMark extends React.Component {
   render () {
     let color = getColorByIndex(this.props.color)
+    let className = 'FolderMark fa fa-square fa-fw'
+    if (this.props.className != null) {
+      className += ' active'
+    }
+
     return (
-      <i className='fa fa-square fa-fw' style={{color: color}}/>
+      <i className={className} style={{color: color}}/>
     )
   }
 }
 
 FolderMark.propTypes = {
-  color: PropTypes.number
+  color: PropTypes.number,
+  className: PropTypes.string
 }

lib/components/modal/CreateNewFolder.js

@@ -2,13 +2,15 @@ import React, { PropTypes } from 'react'
 import linkState from 'boost/linkState'
 import { createFolder } from 'boost/actions'
 import store from 'boost/store'
+import FolderMark from 'boost/components/FolderMark'
 
 export default class CreateNewFolder extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
       name: '',
+      color: Math.round(Math.random() * 7),
       alert: null
     }
   }
@@ -20,9 +22,11 @@ export default class CreateNewFolder extends React.Component {
   handleConfirmButton (e) {
     this.setState({alert: null}, () => {
       let { close } = this.props
-      let name = this.state.name
+      let { name, color } = this.state
+
       let input = {
-        name
+        name,
+        color
       }
 
       try {
@@ -38,13 +42,36 @@ export default class CreateNewFolder extends React.Component {
     })
   }
 
+  handleColorClick (colorIndex) {
+    return e => {
+      this.setState({
+        color: colorIndex
+      })
+    }
+  }
+
   render () {
     let alert = this.state.alert
     let alertElement = alert != null ? (
         <p className={`alert ${alert.type}`}>
           {alert.message}
         </p>
       ) : null
+    let colorIndexes = []
+    for (let i = 0; i < 8; i++) {
+      colorIndexes.push(i)
+    }
+    let colorElements = colorIndexes.map(index => {
+      let className = index === this.state.color
+        ? 'active'
+        : null
+
+      return (
+        <span className='option' key={index} onClick={e => this.handleColorClick(index)(e)}>
+          <FolderMark className={className} color={index}/>
+        </span>
+      )
+    })
 
     return (
       <div className='CreateNewFolder modal'>
@@ -53,6 +80,9 @@ export default class CreateNewFolder extends React.Component {
         <div className='title'>Create new folder</div>
 
         <input className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
+        <div className='colorSelect'>
+          {colorElements}
+        </div>
         {alertElement}
 
         <button onClick={e => this.handleConfirmButton(e)} className='confirmBtn'>Create</button>

lib/reducer.js

@@ -26,9 +26,7 @@ function folders (state = initialFolders, action) {
         Object.assign(newFolder, {
           key: keygen(),
           createdAt: new Date(),
-          updatedAt: new Date(),
-          // random number (0-7)
-          color: Math.round(Math.random() * 7)
+          updatedAt: new Date()
         })
 
         if (newFolder.length === 0) throw new Error('Folder name is required')