rename config.tag to config.coloredTags

2025-12-13 09:46:22 +00:00 · 2018-12-28 11:13:05 +08:00
parent 3e645db324
commit 6367be213f
9 changed files with 37 additions and 33 deletions
--- a/browser/components/ColorPicker.styl
+++ b/browser/components/ColorPicker.styl
@@ -17,9 +17,9 @@
  height 1.6em
  border 1px solid #888888
  background-color #fff
-  font-size 16px
-  border-radius 4px
+  font-size 15px
+  border-radius 2px
 .btn-confirm
-  background-color $ui-button-default--active-backgroundColor
+  background-color #1EC38B


--- a/browser/components/NoteItem.js
+++ b/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,
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/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>
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/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'>
--- a/browser/main/Detail/TagSelect.js
+++ b/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)
--- a/browser/main/NoteList/index.js
+++ b/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}
            />
          )
        }
--- a/browser/main/SideNav/index.js
+++ b/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

--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -87,7 +87,7 @@ export const DEFAULT_CONFIG = {
    username: '',
    password: ''
  },
-  tag: {}
+  coloredTags: {}
 }

 function validate (config) {
--- a/package.json
+++ b/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",