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:
@@ -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
|
||||||
<i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
|
? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
|
||||||
</button>
|
<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)}>
|
<button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
|
||||||
<span styleName='tagList-item-name'>
|
<span styleName='tagList-item-name'>
|
||||||
{`# ${name}`}
|
{`# ${name}`}
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user