public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

invert text color in colored tags

Browse Source
This commit is contained in:
HarlanLuo
2018-12-28 22:12:51 +08:00
parent 699006a3e9
commit 0cf6487cad
3 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
browser/components/NoteItem.js
View File

@@ -4,6 +4,7 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import { isArray } from 'lodash' import { isArray } from 'lodash'
import invertColor from 'invert-color'
import CSSModules from 'browser/lib/CSSModules' import CSSModules from 'browser/lib/CSSModules'
import { getTodoStatus } from 'browser/lib/getTodoStatus' import { getTodoStatus } from 'browser/lib/getTodoStatus'
import styles from './NoteItem.styl' import styles from './NoteItem.styl'
@@ -16,11 +17,18 @@ import i18n from 'browser/lib/i18n'
* @param {string} color * @param {string} color
* @return {React.Component} * @return {React.Component}
*/ */
const TagElement = ({ tagName, color }) => ( const TagElement = ({ tagName, color }) => {
<span styleName='item-bottom-tagList-item' key={tagName} style={{backgroundColor: color}}> const style = {}
#{tagName} if (color) {
</span> style.backgroundColor = color
) style.color = invertColor(color, { black: '#222', white: '#f1f1f1', threshold: 0.3 })
}
return (
<span styleName='item-bottom-tagList-item' key={tagName} style={style}>
#{tagName}
</span>
)
}
/** /**
* @description Tag element list component. * @description Tag element list component.

12
browser/main/Detail/TagSelect.js
View File

@@ -1,5 +1,6 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import invertColor from 'invert-color'
import CSSModules from 'browser/lib/CSSModules' import CSSModules from 'browser/lib/CSSModules'
import styles from './TagSelect.styl' import styles from './TagSelect.styl'
import _ from 'lodash' import _ from 'lodash'
@@ -183,12 +184,19 @@ class TagSelect extends React.Component {
const tagList = _.isArray(value) const tagList = _.isArray(value)
? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => { ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
const wrapperStyle = {}
const textStyle = {}
const color = coloredTags[tag]
if (color) {
wrapperStyle.backgroundColor = color
textStyle.color = invertColor(color, { black: '#222', white: '#f1f1f1' })
}
return ( return (
<span styleName='tag' <span styleName='tag'
key={tag} key={tag}
style={{backgroundColor: coloredTags[tag]}} style={wrapperStyle}
> >
<span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span> <span styleName='tag-label' style={textStyle} onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
<button styleName='tag-removeButton' <button styleName='tag-removeButton'
onClick={(e) => this.handleTagRemoveButtonClick(tag)} onClick={(e) => this.handleTagRemoveButtonClick(tag)}
> >

1
package.json
View File

@@ -69,6 +69,7 @@
"i18n-2": "^0.7.2", "i18n-2": "^0.7.2",
"iconv-lite": "^0.4.19", "iconv-lite": "^0.4.19",
"immutable": "^3.8.1", "immutable": "^3.8.1",
"invert-color": "^2.0.0",
"js-sequence-diagrams": "^1000000.0.6", "js-sequence-diagrams": "^1000000.0.6",
"js-yaml": "^3.12.0", "js-yaml": "^3.12.0",
"katex": "^0.9.0", "katex": "^0.9.0",