1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 02:06:29 +00:00

Don't narrow list, add plus sign only for related tags

It's easier to understand by most of the users.

Later I like to add a setting to enable narrowing of tag list to show
only the related ones.
This commit is contained in:
bimlas
2018-04-10 14:13:58 +02:00
parent 68c0f210cc
commit 61ed47dda0
2 changed files with 13 additions and 8 deletions

View File

@@ -12,11 +12,14 @@ import CSSModules from 'browser/lib/CSSModules'
* @param {bool} isActive * @param {bool} isActive
*/ */
const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, count}) => ( const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
<div styleName='tagList-itemContainer'> <div styleName='tagList-itemContainer'>
<button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}> {isRelated
? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
<i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} /> <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
</button> </button>
: <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'}></div>
}
<button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}> <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
<span styleName='tagList-item-name'> <span styleName='tagList-item-name'>
{`# ${name}`} {`# ${name}`}

View File

@@ -147,10 +147,8 @@ class SideNav extends React.Component {
const { data, location, config } = this.props const { data, location, config } = this.props
const relatedTags = this.getRelatedTags(this.getActiveTags(location.pathname), data.noteMap) const relatedTags = this.getRelatedTags(this.getActiveTags(location.pathname), data.noteMap)
let tagList = _.sortBy(data.tagNoteMap.map((tag, name) => { let tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
return { name, size: tag.size } return { name, size: tag.size, related: relatedTags.has(name) }
}), ['name']).filter(tag => { }), ['name'])
return (relatedTags.size === 0) ? true : relatedTags.has(tag.name)
})
if (config.sortTagsBy === 'COUNTER') { if (config.sortTagsBy === 'COUNTER') {
tagList = _.sortBy(tagList, item => (0 - item.size)) tagList = _.sortBy(tagList, item => (0 - item.size))
} }
@@ -162,6 +160,7 @@ class SideNav extends React.Component {
handleClickTagListItem={this.handleClickTagListItem.bind(this)} handleClickTagListItem={this.handleClickTagListItem.bind(this)}
handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)} handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
isActive={this.getTagActive(location.pathname, tag.name)} isActive={this.getTagActive(location.pathname, tag.name)}
isRelated={tag.related}
key={tag.name} key={tag.name}
count={tag.size} count={tag.size}
/> />
@@ -171,6 +170,9 @@ class SideNav extends React.Component {
} }
getRelatedTags (activeTags, noteMap) { getRelatedTags (activeTags, noteMap) {
if (activeTags.length == 0) {
return new Set()
}
const relatedNotes = noteMap.map(note => { const relatedNotes = noteMap.map(note => {
return {key: note.key, tags: note.tags} return {key: note.key, tags: note.tags}
}).filter((note) => { }).filter((note) => {