From 26a08fac06ba7349f230aa65632ad4eb12167896 Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Sun, 15 Nov 2015 20:32:02 +0900 Subject: [PATCH] =?UTF-8?q?new=20folder=20modal=E3=81=ABcolor=20select?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ArticleNavigator.styl | 2 +- .../HomeContainer/lib/CreateNewFolder.styl | 24 +++++++++++-- lib/components/FolderMark.js | 25 ++++++++------ lib/components/modal/CreateNewFolder.js | 34 +++++++++++++++++-- lib/reducer.js | 4 +-- 5 files changed, 71 insertions(+), 18 deletions(-) diff --git a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl b/browser/styles/main/HomeContainer/components/ArticleNavigator.styl index 68c798cf..af61cf3d 100644 --- a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl +++ b/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 diff --git a/browser/styles/main/HomeContainer/lib/CreateNewFolder.styl b/browser/styles/main/HomeContainer/lib/CreateNewFolder.styl index 2e1c6507..b813f983 100644 --- a/browser/styles/main/HomeContainer/lib/CreateNewFolder.styl +++ b/browser/styles/main/HomeContainer/lib/CreateNewFolder.styl @@ -34,9 +34,29 @@ 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 @@ -44,7 +64,7 @@ iptFocusBorderColor = #369DCD padding 15px 15px width 330px border-radius 5px - margin 0 auto + margin 15px auto 0 &.error color errorTextColor background-color errorBackgroundColor diff --git a/lib/components/FolderMark.js b/lib/components/FolderMark.js index ef258bb1..dd6708b9 100644 --- a/lib/components/FolderMark.js +++ b/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 ( - + ) } } FolderMark.propTypes = { - color: PropTypes.number + color: PropTypes.number, + className: PropTypes.string } diff --git a/lib/components/modal/CreateNewFolder.js b/lib/components/modal/CreateNewFolder.js index 0934e219..de064b5a 100644 --- a/lib/components/modal/CreateNewFolder.js +++ b/lib/components/modal/CreateNewFolder.js @@ -2,6 +2,7 @@ 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) { @@ -9,6 +10,7 @@ export default class CreateNewFolder extends React.Component { 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,6 +42,14 @@ 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 ? ( @@ -45,6 +57,21 @@ export default class CreateNewFolder extends React.Component { {alert.message}

) : 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 ( + this.handleColorClick(index)(e)}> + + + ) + }) return (
@@ -53,6 +80,9 @@ export default class CreateNewFolder extends React.Component {
Create new folder
+
+ {colorElements} +
{alertElement} diff --git a/lib/reducer.js b/lib/reducer.js index 0d28efb1..1c937100 100644 --- a/lib/reducer.js +++ b/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')