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

Merge pull request #1559 from pfftdammitchris/tags-note-count

Browse Source 
Added note counts to tags view in side nav
This commit is contained in:
Junyoung Choi (Sai)
2018-02-24 16:19:53 +09:00
committed by GitHub
parent 2750a3ef30 74af199afc
commit 3b7c36b1c9
3 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
browser/components/TagListItem.js
View File

@@ -12,10 +12,11 @@ import CSSModules from 'browser/lib/CSSModules'
* @param {bool} isActive * @param {bool} isActive
*/ */
const TagListItem = ({name, handleClickTagListItem, isActive}) => ( const TagListItem = ({name, handleClickTagListItem, isActive, count}) => (
<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}`}
<span styleName='tagList-item-count'> {count}</span>
</span> </span>
</button> </button>
) )

9
browser/components/TagListItem.styl
View File

@@ -48,6 +48,9 @@
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
.tagList-item-count
padding 0 3px
body[data-theme="white"] body[data-theme="white"]
.tagList-item .tagList-item
color $ui-inactive-text-color color $ui-inactive-text-color
@@ -63,6 +66,8 @@ body[data-theme="white"]
color $ui-text-color color $ui-text-color
&:hover &:hover
background-color alpha($ui-button--active-backgroundColor, 60%) background-color alpha($ui-button--active-backgroundColor, 60%)
.tagList-item-count
color $ui-text-color
body[data-theme="dark"] body[data-theme="dark"]
.tagList-item .tagList-item
@@ -81,4 +86,6 @@ body[data-theme="dark"]
background-color alpha($ui-dark-button--active-backgroundColor, 50%) background-color alpha($ui-dark-button--active-backgroundColor, 50%)
&:hover &:hover
color $ui-dark-text-color color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 50%) background-color alpha($ui-dark-button--active-backgroundColor, 50%)
.tagList-item-count
color $ui-dark-button--active-color

23
browser/main/SideNav/index.js
View File

@@ -117,18 +117,21 @@ class SideNav extends React.Component {
tagListComponent () { tagListComponent () {
const { data, location } = this.props const { data, location } = this.props
const tagList = data.tagNoteMap.map((tag, key) => { const tagList = data.tagNoteMap.map((tag, name) => {
return key return { name, size: tag.size }
}) })
return ( return (
tagList.map(tag => ( tagList.map(tag => {
<TagListItem return (
name={tag} <TagListItem
handleClickTagListItem={this.handleClickTagListItem.bind(this)} name={tag.name}
isActive={this.getTagActive(location.pathname, tag)} handleClickTagListItem={this.handleClickTagListItem.bind(this)}
key={tag} isActive={this.getTagActive(location.pathname, tag)}
/> key={tag.name}
)) count={tag.size}
/>
)
})
) )
} }