diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js index 2625412a..ebef7df4 100644 --- a/browser/components/TagListItem.js +++ b/browser/components/TagListItem.js @@ -12,10 +12,11 @@ import CSSModules from 'browser/lib/CSSModules' * @param {bool} isActive */ -const TagListItem = ({name, handleClickTagListItem, isActive}) => ( +const TagListItem = ({name, handleClickTagListItem, isActive, count}) => ( ) diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl index cd3a5387..b35b30cf 100644 --- a/browser/components/TagListItem.styl +++ b/browser/components/TagListItem.styl @@ -48,6 +48,9 @@ overflow hidden text-overflow ellipsis +.tagList-item-count + padding 0 3px + body[data-theme="white"] .tagList-item color $ui-inactive-text-color @@ -63,6 +66,8 @@ body[data-theme="white"] color $ui-text-color &:hover background-color alpha($ui-button--active-backgroundColor, 60%) + .tagList-item-count + color $ui-text-color body[data-theme="dark"] .tagList-item @@ -81,4 +86,6 @@ body[data-theme="dark"] background-color alpha($ui-dark-button--active-backgroundColor, 50%) &:hover color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 50%) \ No newline at end of file + background-color alpha($ui-dark-button--active-backgroundColor, 50%) + .tagList-item-count + color $ui-dark-button--active-color diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 2120220b..6d05e37b 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -117,18 +117,21 @@ class SideNav extends React.Component { tagListComponent () { const { data, location } = this.props - const tagList = data.tagNoteMap.map((tag, key) => { - return key + const tagList = data.tagNoteMap.map((tag, name) => { + return { name, size: tag.size } }) return ( - tagList.map(tag => ( - - )) + tagList.map(tag => { + return ( + + ) + }) ) }