mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 01:36:22 +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:
@@ -12,11 +12,14 @@ import CSSModules from 'browser/lib/CSSModules'
|
||||
* @param {bool} isActive
|
||||
*/
|
||||
|
||||
const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, count}) => (
|
||||
const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
|
||||
<div styleName='tagList-itemContainer'>
|
||||
<button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
|
||||
<i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
|
||||
</button>
|
||||
{isRelated
|
||||
? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
|
||||
<i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
|
||||
</button>
|
||||
: <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'}></div>
|
||||
}
|
||||
<button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
|
||||
<span styleName='tagList-item-name'>
|
||||
{`# ${name}`}
|
||||
|
||||
@@ -147,10 +147,8 @@ class SideNav extends React.Component {
|
||||
const { data, location, config } = this.props
|
||||
const relatedTags = this.getRelatedTags(this.getActiveTags(location.pathname), data.noteMap)
|
||||
let tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
|
||||
return { name, size: tag.size }
|
||||
}), ['name']).filter(tag => {
|
||||
return (relatedTags.size === 0) ? true : relatedTags.has(tag.name)
|
||||
})
|
||||
return { name, size: tag.size, related: relatedTags.has(name) }
|
||||
}), ['name'])
|
||||
if (config.sortTagsBy === 'COUNTER') {
|
||||
tagList = _.sortBy(tagList, item => (0 - item.size))
|
||||
}
|
||||
@@ -162,6 +160,7 @@ class SideNav extends React.Component {
|
||||
handleClickTagListItem={this.handleClickTagListItem.bind(this)}
|
||||
handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
|
||||
isActive={this.getTagActive(location.pathname, tag.name)}
|
||||
isRelated={tag.related}
|
||||
key={tag.name}
|
||||
count={tag.size}
|
||||
/>
|
||||
@@ -171,6 +170,9 @@ class SideNav extends React.Component {
|
||||
}
|
||||
|
||||
getRelatedTags (activeTags, noteMap) {
|
||||
if (activeTags.length == 0) {
|
||||
return new Set()
|
||||
}
|
||||
const relatedNotes = noteMap.map(note => {
|
||||
return {key: note.key, tags: note.tags}
|
||||
}).filter((note) => {
|
||||
|
||||
Reference in New Issue
Block a user