Folderの位置を変えることができる

Author: Rokt33r

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

@@ -451,8 +451,11 @@ iptFocusBorderColor = #369DCD
               overflow ellipsis
             .folderControl
               float right
-              width 145px
+              width 125px
               text-align center
+            &.folderHeader
+              .folderName
+                padding-left 25px
             &.newFolder
               .alert
                 display block
@@ -502,6 +505,30 @@ iptFocusBorderColor = #369DCD
                   &:hover
                     color lighten(brandColor, 10%)
             &.FolderRow
+              .sortBtns
+                float left
+                display block
+                height 30px
+                width 30px
+                margin-top 1.5px
+                position absolute
+                button
+                  absolute left
+                  background-color transparent
+                  border none
+                  height 15px
+                  padding 0
+                  margin 0
+                  color stripBtnColor
+                  &:first-child
+                    top 0
+                  &:last-child
+                    top 15px
+                  &:hover
+                    color stripHoverBtnColor
+                  &:disabled
+                    color lighten(stripBtnColor, 10%)
+                    cursor not-allowed
               .folderName input
                 height 33px
                 border 1px solid borderColor
@@ -555,9 +582,9 @@ iptFocusBorderColor = #369DCD
                     &:hover
                       border-color borderColor
                     &.active
+                      border-color iptFocusBorderColor
                       .FolderMark
                         transform scale(1.4)
-                      border-color iptFocusBorderColor
               .folderControl
                 button
                   border none

lib/actions.js

@@ -4,6 +4,7 @@ export const ARTICLE_DESTROY = 'ARTICLE_DESTROY'
 export const FOLDER_CREATE = 'FOLDER_CREATE'
 export const FOLDER_UPDATE = 'FOLDER_UPDATE'
 export const FOLDER_DESTROY = 'FOLDER_DESTROY'
+export const FOLDER_REPLACE = 'FOLDER_REPLACE'
 
 export const SWITCH_FOLDER = 'SWITCH_FOLDER'
 export const SWITCH_MODE = 'SWITCH_MODE'
@@ -57,6 +58,16 @@ export function destroyFolder (key) {
   }
 }
 
+export function replaceFolder (a, b) {
+  return {
+    type: FOLDER_REPLACE,
+    data: {
+      a,
+      b
+    }
+  }
+}
+
 export function switchFolder (folderName) {
   return {
     type: SWITCH_FOLDER,

lib/components/modal/Preference/FolderRow.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import linkState from 'boost/linkState'
 import FolderMark from 'boost/components/FolderMark'
 import store from 'boost/store'
-import { updateFolder, destroyFolder } from 'boost/actions'
+import { updateFolder, destroyFolder, replaceFolder } from 'boost/actions'
 
 const IDLE = 'IDLE'
 const EDIT = 'EDIT'
@@ -17,6 +17,20 @@ export default class FolderRow extends React.Component {
     }
   }
 
+  handleUpClick (e) {
+    let { index } = this.props
+    if (index > 0) {
+      store.dispatch(replaceFolder(index, index - 1))
+    }
+  }
+
+  handleDownClick (e) {
+    let { index, count } = this.props
+    if (index < count - 1) {
+      store.dispatch(replaceFolder(index, index + 1))
+    }
+  }
+
   handleCancelButtonClick (e) {
     this.setState({
       mode: IDLE
@@ -141,6 +155,10 @@ export default class FolderRow extends React.Component {
       default:
         return (
           <div className='FolderRow'>
+            <div className='sortBtns'>
+              <button onClick={e => this.handleUpClick(e)}><i className='fa fa-sort-up fa-fw'/></button>
+              <button onClick={e => this.handleDownClick(e)}><i className='fa fa-sort-down fa-fw'/></button>
+            </div>
             <div className='folderColor'><FolderMark color={folder.color}/></div>
             <div className='folderName'>{folder.name}</div>
             <div className='folderControl'>
@@ -155,6 +173,8 @@ export default class FolderRow extends React.Component {
 
 FolderRow.propTypes = {
   folder: PropTypes.shape(),
+  index: PropTypes.number,
+  count: PropTypes.number,
   setAlert: PropTypes.func
 }
 

lib/components/modal/Preference/FolderSettingTab.js

@@ -40,10 +40,16 @@ export default class FolderSettingTab extends React.Component {
 
   render () {
     let { folders } = this.props
-    let folderElements = folders.map(folder => {
+    let folderElements = folders.map((folder, index) => {
       return (
-        <FolderRow key={'folder-' + folder.key} folder={folder} setAlert={(alert, cb) => this.setAlert(alert, cb)}/>
-        )
+        <FolderRow
+          key={'folder-' + folder.key}
+          folder={folder}
+          index={index}
+          count={folders.length}
+          setAlert={(alert, cb) => this.setAlert(alert, cb)}
+        />
+      )
     })
 
     let alert = this.state.alert
@@ -59,7 +65,6 @@ export default class FolderSettingTab extends React.Component {
           <div className='sectionTitle'>Manage folder</div>
           <div className='folderTable'>
             <div className='folderHeader'>
-              <div className='folderColor'></div>
               <div className='folderName'>Folder</div>
               <div className='folderControl'>Edit/Delete</div>
             </div>

lib/reducer.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux'
 import _ from 'lodash'
-import { SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, CLEAR_SEARCH, TOGGLE_TUTORIAL, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_CREATE, FOLDER_UPDATE, FOLDER_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
+import { SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, CLEAR_SEARCH, TOGGLE_TUTORIAL, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_CREATE, FOLDER_UPDATE, FOLDER_DESTROY, FOLDER_REPLACE, IDLE_MODE, CREATE_MODE } from './actions'
 import dataStore from 'boost/dataStore'
 import keygen from 'boost/keygen'
 import activityRecord from 'boost/activityRecord'
@@ -80,6 +80,15 @@ function folders (state = initialFolders, action) {
         activityRecord.emit('FOLDER_DESTROY')
         return state
       }
+    case FOLDER_REPLACE:
+      {
+        let { a, b } = action.data
+        let folderA = state[a]
+        let folderB = state[b]
+        state.splice(a, 1, folderB)
+        state.splice(b, 1, folderA)
+      }
+      return state
     default:
       return state
   }