add feature: colored tags

browser/components/ColorPicker.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { SketchPicker } from 'react-color'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ColorPicker.styl'
+
+const componentHeight = 333
+
+class ColorPicker extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      color: this.props.color || '#888888'
+    }
+
+    this.onColorChange = this.onColorChange.bind(this)
+    this.handleConfirm = this.handleConfirm.bind(this)
+  }
+
+  onColorChange (color) {
+    this.setState({
+      color
+    })
+  }
+
+  handleConfirm () {
+    this.props.onConfirm(this.state.color)
+  }
+
+  render () {
+    const { onReset, onCancel, targetRect } = this.props
+    const { color } = this.state
+
+    const clientHeight = document.body.clientHeight
+    const alignX = targetRect.right + 4
+    let alignY = targetRect.top
+    if (targetRect.top + componentHeight > clientHeight) {
+      alignY = targetRect.bottom - componentHeight
+    }
+
+    return (
+      <div styleName='colorPicker' style={{top: `${alignY}px`, left: `${alignX}px`}}>
+        <SketchPicker color={color} onChange={this.onColorChange} />
+        <div styleName='footer'>
+          <button styleName='btn-reset' onClick={onReset}>Reset</button>
+          <button styleName='btn-cancel' onClick={onCancel}>Cancel</button>
+          <button styleName='btn-confirm' onClick={this.handleConfirm}>Confirm</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+ColorPicker.propTypes = {
+  color: PropTypes.string,
+  targetRect: PropTypes.object,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onReset: PropTypes.func.isRequired
+}
+
+export default CSSModules(ColorPicker, styles)

browser/components/ColorPicker.styl

@@ -0,0 +1,25 @@
+.colorPicker
+  position fixed
+  z-index 10000
+  display flex
+  flex-direction column
+.footer
+  display flex
+  justify-content center
+  align-items center
+  padding 5px
+  & > button + button
+    margin-left 10px
+
+.btn-cancel,
+.btn-confirm,
+.btn-reset
+  height 1.6em
+  border 1px solid #888888
+  background-color #fff
+  font-size 16px
+  border-radius 4px
+.btn-confirm
+  background-color $ui-button-default--active-backgroundColor
+
+

browser/components/NoteItem.js

@@ -15,8 +15,8 @@ import i18n from 'browser/lib/i18n'
  * @param {string} tagName
  * @return {React.Component}
  */
-const TagElement = ({ tagName }) => (
-  <span styleName='item-bottom-tagList-item' key={tagName}>
+const TagElement = ({ tagName, color }) => (
+  <span styleName='item-bottom-tagList-item' key={tagName} style={{backgroundColor: color}}>
     #{tagName}
   </span>
 )
@@ -27,7 +27,7 @@ const TagElement = ({ tagName }) => (
  * @param {boolean} showTagsAlphabetically
  * @return {React.Component}
  */
-const TagElementList = (tags, showTagsAlphabetically) => {
+const TagElementList = (tags, showTagsAlphabetically, tagConfig) => {
   if (!isArray(tags)) {
     return []
   }
@@ -35,7 +35,7 @@ const TagElementList = (tags, showTagsAlphabetically) => {
   if (showTagsAlphabetically) {
     return _.sortBy(tags).map(tag => TagElement({ tagName: tag }))
   } else {
-    return tags.map(tag => TagElement({ tagName: tag }))
+    return tags.map(tag => TagElement({ tagName: tag, color: tagConfig[tag] }))
   }
 }
 
@@ -59,7 +59,8 @@ const NoteItem = ({
   storageName,
   folderName,
   viewType,
-  showTagsAlphabetically
+  showTagsAlphabetically,
+  tagConfig
 }) => (
   <div
     styleName={isActive ? 'item--active' : 'item'}
@@ -97,7 +98,7 @@ const NoteItem = ({
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
-            ? TagElementList(note.tags, showTagsAlphabetically)
+            ? TagElementList(note.tags, showTagsAlphabetically, tagConfig)
             : <span
               style={{ fontStyle: 'italic', opacity: 0.5 }}
               styleName='item-bottom-tagList-empty'
@@ -127,6 +128,7 @@ const NoteItem = ({
 NoteItem.propTypes = {
   isActive: PropTypes.bool.isRequired,
   dateDisplay: PropTypes.string.isRequired,
+  tagConfig: PropTypes.object,
   note: PropTypes.shape({
     storage: PropTypes.string.isRequired,
     key: PropTypes.string.isRequired,

browser/components/TagListItem.js

@@ -12,9 +12,10 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {Function} handleClickNarrowToTag
 * @param {bool} isActive
 * @param {bool} isRelated
+* @param {string} bgColor tab backgroundColor
 */
 
-const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count}) => (
+const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count, color}) => (
   <div styleName='tagList-itemContainer' onContextMenu={e => handleContextMenu(e, name)}>
     {isRelated
       ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
@@ -23,7 +24,7 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, hand
       : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} />
     }
     <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
-      <span styleName='tagList-item-name'>
+      <span styleName='tagList-item-name' style={{color}}>
         {`# ${name}`}
         <span styleName='tagList-item-count'>{count !== 0 ? count : ''}</span>
       </span>
@@ -33,7 +34,8 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, hand
 
 TagListItem.propTypes = {
   name: PropTypes.string.isRequired,
-  handleClickTagListItem: PropTypes.func.isRequired
+  handleClickTagListItem: PropTypes.func.isRequired,
+  color: PropTypes.string
 }
 
 export default CSSModules(TagListItem, styles)