rename config.tag to config.coloredTags

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 { colorPickerState: { tagName } } = this.state
-    const tagConfig = Object.assign({}, tag, {[tagName]: color.hex})
+    const { dispatch, config: {coloredTags} } = this.props
+    const { colorPicker: { tagName } } = this.state
+    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 { colorPickerState: { tagName } } = this.state
-    const tagConfig = Object.assign({}, tag)
-    delete tagConfig[tagName]
+    const { dispatch, config: {coloredTags} } = this.props
+    const { colorPicker: { tagName } } = this.state
+    const newColoredTags = Object.assign({}, coloredTags)
 
-    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) {