rename config.tag to config.coloredTags

browser/components/ColorPicker.styl

@@ -17,9 +17,9 @@
   height 1.6em
   border 1px solid #888888
   background-color #fff
-  font-size 16px
+  font-size 15px
-  border-radius 4px
+  border-radius 2px
 .btn-confirm
-  background-color $ui-button-default--active-backgroundColor
+  background-color #1EC38B
 
 

browser/components/NoteItem.js

@@ -13,6 +13,7 @@ import i18n from 'browser/lib/i18n'
 /**
  * @description Tag element component.
  * @param {string} tagName
+ * @param {string} color
  * @return {React.Component}
  */
 const TagElement = ({ tagName, color }) => (
@@ -25,9 +26,10 @@ const TagElement = ({ tagName, color }) => (
  * @description Tag element list component.
  * @param {Array|null} tags
  * @param {boolean} showTagsAlphabetically
+ * @param {Object} coloredTags
  * @return {React.Component}
  */
-const TagElementList = (tags, showTagsAlphabetically, tagConfig) => {
+const TagElementList = (tags, showTagsAlphabetically, coloredTags) => {
   if (!isArray(tags)) {
     return []
   }
@@ -35,7 +37,7 @@ const TagElementList = (tags, showTagsAlphabetically, tagConfig) => {
   if (showTagsAlphabetically) {
     return _.sortBy(tags).map(tag => TagElement({ tagName: tag }))
   } else {
-    return tags.map(tag => TagElement({ tagName: tag, color: tagConfig[tag] }))
+    return tags.map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
   }
 }
 
@@ -46,6 +48,7 @@ const TagElementList = (tags, showTagsAlphabetically, tagConfig) => {
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
  * @param {Function} handleDragStart
+ * @param {Object} coloredTags
  * @param {string} dateDisplay
  */
 const NoteItem = ({
@@ -60,7 +63,7 @@ const NoteItem = ({
   folderName,
   viewType,
   showTagsAlphabetically,
-  tagConfig
+  coloredTags
 }) => (
   <div
     styleName={isActive ? 'item--active' : 'item'}
@@ -98,7 +101,7 @@ const NoteItem = ({
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
-            ? TagElementList(note.tags, showTagsAlphabetically, tagConfig)
+            ? TagElementList(note.tags, showTagsAlphabetically, coloredTags)
             : <span
               style={{ fontStyle: 'italic', opacity: 0.5 }}
               styleName='item-bottom-tagList-empty'
@@ -128,7 +131,7 @@ const NoteItem = ({
 NoteItem.propTypes = {
   isActive: PropTypes.bool.isRequired,
   dateDisplay: PropTypes.string.isRequired,
-  tagConfig: PropTypes.object,
+  coloredTags: PropTypes.object,
   note: PropTypes.shape({
     storage: PropTypes.string.isRequired,
     key: PropTypes.string.isRequired,

browser/main/Detail/MarkdownNoteDetail.js

@@ -437,7 +437,7 @@ class MarkdownNoteDetail extends React.Component {
           showTagsAlphabetically={config.ui.showTagsAlphabetically}
           data={data}
           onChange={this.handleUpdateTag.bind(this)}
-          tagConfig={config.tag}
+          coloredTags={config.coloredTags}
         />
         <TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>

browser/main/Detail/SnippetNoteDetail.js

@@ -788,7 +788,7 @@ class SnippetNoteDetail extends React.Component {
           showTagsAlphabetically={config.ui.showTagsAlphabetically}
           data={data}
           onChange={(e) => this.handleChange(e)}
-          tagConfig={config.tag}
+          coloredTags={config.coloredTags}
         />
       </div>
       <div styleName='info-right'>

browser/main/Detail/TagSelect.js

@@ -179,14 +179,14 @@ class TagSelect extends React.Component {
   }
 
   render () {
-    const { value, className, showTagsAlphabetically, tagConfig } = this.props
+    const { value, className, showTagsAlphabetically, coloredTags } = this.props
 
     const tagList = _.isArray(value)
       ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
         return (
           <span styleName='tag'
             key={tag}
-            style={{backgroundColor: tagConfig[tag]}}
+            style={{backgroundColor: coloredTags[tag]}}
           >
             <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
             <button styleName='tag-removeButton'
@@ -242,7 +242,7 @@ TagSelect.propTypes = {
   className: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func,
-  tagConfig: PropTypes.object
+  coloredTags: PropTypes.object
 }
 
 export default CSSModules(TagSelect, styles)

browser/main/NoteList/index.js

@@ -1047,7 +1047,7 @@ class NoteList extends React.Component {
               storageName={this.getNoteStorage(note).name}
               viewType={viewType}
               showTagsAlphabetically={config.ui.showTagsAlphabetically}
-              tagConfig={config.tag}
+              coloredTags={config.coloredTags}
             />
           )
         }

browser/main/SideNav/index.js

@@ -32,7 +32,7 @@ class SideNav extends React.Component {
     super(props)
 
     this.state = {
-      colorPickerState: {
+      colorPicker: {
         show: false,
         color: null,
         tagName: null,
@@ -131,7 +131,7 @@ class SideNav extends React.Component {
 
   dismissColorPicker () {
     this.setState({
-      colorPickerState: {
+      colorPicker: {
         show: false
       }
     })
@@ -140,9 +140,9 @@ class SideNav extends React.Component {
   displayColorPicker (tagName, rect) {
     const { config } = this.props
     this.setState({
-      colorPickerState: {
+      colorPicker: {
         show: true,
-        color: config.tag && config.tag[tagName],
+        color: config.coloredTags[tagName],
         tagName,
         targetRect: rect
       }
@@ -150,11 +150,11 @@ class SideNav extends React.Component {
   }
 
   handleColorPickerConfirm (color) {
-    const { dispatch, config: {tag} } = this.props
+    const { dispatch, config: {coloredTags} } = this.props
-    const { colorPickerState: { tagName } } = this.state
+    const { colorPicker: { tagName } } = this.state
-    const tagConfig = Object.assign({}, tag, {[tagName]: color.hex})
+    const newColoredTags = Object.assign({}, coloredTags, {[tagName]: color.hex})
 
-    const config = {tag: tagConfig}
+    const config = { coloredTags: newColoredTags }
     ConfigManager.set(config)
     dispatch({
       type: 'SET_CONFIG',
@@ -164,12 +164,13 @@ class SideNav extends React.Component {
   }
 
   handleColorPickerReset () {
-    const { dispatch, config: {tag} } = this.props
+    const { dispatch, config: {coloredTags} } = this.props
-    const { colorPickerState: { tagName } } = this.state
+    const { colorPicker: { tagName } } = this.state
-    const tagConfig = Object.assign({}, tag)
+    const newColoredTags = Object.assign({}, coloredTags)
-    delete tagConfig[tagName]
 
-    const config = {tag: tagConfig}
+    delete newColoredTags[tagName]
+
+    const config = { coloredTags: newColoredTags }
     ConfigManager.set(config)
     dispatch({
       type: 'SET_CONFIG',
@@ -278,6 +279,7 @@ class SideNav extends React.Component {
 
   tagListComponent () {
     const { data, location, config } = this.props
+    const { colorPicker } = this.state
     const activeTags = this.getActiveTags(location.pathname)
     const relatedTags = this.getRelatedTags(activeTags, data.noteMap)
     let tagList = _.sortBy(data.tagNoteMap.map(
@@ -308,11 +310,11 @@ class SideNav extends React.Component {
             handleClickTagListItem={this.handleClickTagListItem.bind(this)}
             handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
             handleContextMenu={this.handleTagContextMenu.bind(this)}
-            isActive={this.getTagActive(location.pathname, tag.name)}
+            isActive={this.getTagActive(location.pathname, tag.name) || (colorPicker.tagName === tag.name)}
             isRelated={tag.related}
             key={tag.name}
             count={tag.size}
-            color={config.tag[tag.name]}
+            color={config.coloredTags[tag.name]}
           />
         )
       })
@@ -405,7 +407,7 @@ class SideNav extends React.Component {
 
   render () {
     const { data, location, config, dispatch } = this.props
-    const { colorPickerState } = this.state
+    const { colorPicker: colorPickerState } = this.state
 
     const isFolded = config.isSideNavFolded
 

browser/main/lib/ConfigManager.js

@@ -87,7 +87,7 @@ export const DEFAULT_CONFIG = {
     username: '',
     password: ''
   },
-  tag: {}
+  coloredTags: {}
 }
 
 function validate (config) {

package.json

@@ -97,7 +97,7 @@
     "react": "^15.5.4",
     "react-autosuggest": "^9.4.0",
     "react-codemirror": "^0.3.0",
-    "react-color": "^2.17.0",
+    "react-color": "^2.2.2",
     "react-debounce-render": "^4.0.1",
     "react-dom": "^15.0.2",
     "react-image-carousel": "^2.0.18",
@@ -154,7 +154,6 @@
     "merge-stream": "^1.0.0",
     "mock-require": "^3.0.1",
     "nib": "^1.1.0",
-    "react-color": "^2.2.2",
     "react-css-modules": "^3.7.6",
     "react-input-autosize": "^1.1.0",
     "react-router": "^2.4.0",