diff --git a/browser/components/StorageItem.js b/browser/components/StorageItem.js new file mode 100644 index 00000000..801b1d5d --- /dev/null +++ b/browser/components/StorageItem.js @@ -0,0 +1,57 @@ +/** + * @fileoverview Micro component for showing storage. + */ +import React, { PropTypes } from 'react' +import styles from './StorageItem.styl' +import CSSModules from 'browser/lib/CSSModules' + +/** + * @param {boolean} isActive + * @param {Function} handleButtonClick + * @param {Function} handleContextMenu + * @param {string} folderName + * @param {string} folderColor + * @param {boolean} isFolded + * @param {number} noteCount + * @return {React.Component} + */ +const StorageItem = ({ + isActive, handleButtonClick, handleContextMenu, folderName, + folderColor, isFolded, noteCount +}) => ( + +) + +StorageItem.propTypes = { + isActive: PropTypes.bool.isRequired, + handleButtonClick: PropTypes.func, + handleContextMenu: PropTypes.func, + folderName: PropTypes.string.isRequired, + folderColor: PropTypes.string, + isFolded: PropTypes.bool.isRequired, + noteCount: PropTypes.number.isRequired, +} + +export default CSSModules(StorageItem, styles) diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl new file mode 100644 index 00000000..6d589220 --- /dev/null +++ b/browser/components/StorageItem.styl @@ -0,0 +1,68 @@ +.root + width 100% + user-select none + +.folderList-item + display flex + width 100% + height 26px + background-color transparent + color $ui-inactive-text-color + padding 0 + margin-bottom 5px + text-align left + border none + overflow ellipsis + font-size 14px + &:first-child + margin-top 0 + &:hover + background-color $ui-button--hover-backgroundColor + &:active + color $ui-button--active-color + background-color $ui-button--active-backgroundColor + +.folderList-item--active + @extend .folderList-item + color $ui-button--active-color + background-color $ui-button--active-backgroundColor + &:hover + color $ui-button--active-color + background-color $ui-button--active-backgroundColor + +.folderList-item-name + display block + flex 1 + padding 0 30px + height 26px + line-height 26px + border-width 0 0 0 3px + border-style solid + border-color transparent + +.folderList-item-noteCount + float right + line-height 26px + padding-right 5px + font-size 12px + +.folderList-item-tooltip + tooltip() + position fixed + padding 0 10px + left 44px + z-index 10 + pointer-events none + opacity 0 + border-top-right-radius 2px + border-bottom-right-radius 2px + height 26px + line-height 26px + +.folderList-item:hover, .folderList-item--active:hover + .folderList-item-tooltip + opacity 1 + +.folderList-item-name--folded + @extend .folderList-item-name + padding-left 14px