From 1fe15bc6a5f5a1b9807a5ed6037ad6f6c7c7566f Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Mon, 16 Nov 2015 02:38:36 +0900 Subject: [PATCH] =?UTF-8?q?Folder=E3=81=AE=E4=BD=8D=E7=BD=AE=E3=82=92?= =?UTF-8?q?=E5=A4=89=E3=81=88=E3=82=8B=E3=81=93=E3=81=A8=E3=81=8C=E3=81=A7?= =?UTF-8?q?=E3=81=8D=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/HomeContainer/lib/Preferences.styl | 31 +++++++++++++++++-- lib/actions.js | 11 +++++++ lib/components/modal/Preference/FolderRow.js | 22 ++++++++++++- .../modal/Preference/FolderSettingTab.js | 13 +++++--- lib/reducer.js | 11 ++++++- 5 files changed, 80 insertions(+), 8 deletions(-) diff --git a/browser/styles/main/HomeContainer/lib/Preferences.styl b/browser/styles/main/HomeContainer/lib/Preferences.styl index 104948d8..cb74597a 100644 --- a/browser/styles/main/HomeContainer/lib/Preferences.styl +++ b/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 diff --git a/lib/actions.js b/lib/actions.js index d99aa2e4..ebbc47ac 100644 --- a/lib/actions.js +++ b/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, diff --git a/lib/components/modal/Preference/FolderRow.js b/lib/components/modal/Preference/FolderRow.js index d19388d5..8fba0d37 100644 --- a/lib/components/modal/Preference/FolderRow.js +++ b/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 (
+
+ + +
{folder.name}
@@ -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 } diff --git a/lib/components/modal/Preference/FolderSettingTab.js b/lib/components/modal/Preference/FolderSettingTab.js index b75e368a..0072b0ed 100644 --- a/lib/components/modal/Preference/FolderSettingTab.js +++ b/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 ( - this.setAlert(alert, cb)}/> - ) + this.setAlert(alert, cb)} + /> + ) }) let alert = this.state.alert @@ -59,7 +65,6 @@ export default class FolderSettingTab extends React.Component {
Manage folder
-
Folder
Edit/Delete
diff --git a/lib/reducer.js b/lib/reducer.js index cba759ce..5b091872 100644 --- a/lib/reducer.js +++ b/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 }