diff --git a/browser/components/NavToggleButton.js b/browser/components/NavToggleButton.js new file mode 100644 index 00000000..bf50fe90 --- /dev/null +++ b/browser/components/NavToggleButton.js @@ -0,0 +1,29 @@ +/** +* @fileoverview Micro component for toggle SideNav +*/ +import React, { PropTypes } from 'react' +import styles from './NavToggleButton.styl' +import CSSModules from 'browser/lib/CSSModules' + +/** +* @param {boolean} isFolded +* @param {Function} handleToggleButtonClick +*/ + +const NavToggleButton = ({isFolded, handleToggleButtonClick}) => ( + +) + +NavToggleButton.propTypes = { + isFolded: PropTypes.bool.isRequired, + handleToggleButtonClick: PropTypes.func.isRequired +} + +export default CSSModules(NavToggleButton, styles) diff --git a/browser/components/NavToggleButton.styl b/browser/components/NavToggleButton.styl new file mode 100644 index 00000000..447f492b --- /dev/null +++ b/browser/components/NavToggleButton.styl @@ -0,0 +1,19 @@ +.navToggle + navButtonColor() + display block + position absolute + right 5px + bottom 5px + border-radius 16.5px + height 34px + width 34px + line-height 32px + padding 0 + +body[data-theme="dark"] + .navToggle + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + transition 0.15s + color $ui-dark-text-color + diff --git a/browser/components/StorageList.js b/browser/components/StorageList.js new file mode 100644 index 00000000..f3620b49 --- /dev/null +++ b/browser/components/StorageList.js @@ -0,0 +1,23 @@ +/** +* @fileoverview Micro component for showing StorageList +*/ +import React, { PropTypes } from 'react' +import styles from './StorgaeList.styl' +import CSSModules from 'browser/lib/CSSModules' + +/** +* @param {Array} storgaeList +*/ + +const StorageList = ({storageList}) => ( +
+ {storageList.length > 0 ? storageList : ( +
No storage mount.
+ )} +
+) + +StorageList.propTypes = { + storgaeList: PropTypes.arrayOf(PropTypes.element).isRequired +} +export default CSSModules(StorageList, styles) diff --git a/browser/components/StorgaeList.styl b/browser/components/StorgaeList.styl new file mode 100644 index 00000000..622905b1 --- /dev/null +++ b/browser/components/StorgaeList.styl @@ -0,0 +1,20 @@ +.storageList + absolute left right + bottom 37px + top 160px + overflow-y auto + +.storageList-empty + padding 0 10px + margin-top 15px + line-height 24px + color $ui-inactive-text-color + +body[data-theme="dark"] + .storageList-empty + color $ui-dark-inactive-text-color + +.root-folded + .storageList-empty + white-space nowrap + transform rotate(90deg) diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js new file mode 100644 index 00000000..206fcf24 --- /dev/null +++ b/browser/components/TagListItem.js @@ -0,0 +1,27 @@ +/** +* @fileoverview Micro component for showing TagList. +*/ +import React, { PropTypes } from 'react' +import styles from './TagListItem.styl' +import CSSModules from 'browser/lib/CSSModules' + +/** +* @param {string} name +* @param {Function} handleClickTagListItem +* @param {bool} isActive +*/ + +const TagListItem = ({name, handleClickTagListItem, isActive}) => ( + +) + +TagListItem.propTypes = { + name: PropTypes.string.isRequired, + handleClickTagListItem: PropTypes.func.isRequired +} + +export default CSSModules(TagListItem, styles) diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl new file mode 100644 index 00000000..e3ee4f10 --- /dev/null +++ b/browser/components/TagListItem.styl @@ -0,0 +1,45 @@ +.tagList-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 12px + &:first-child + margin-top 0 + &:hover + color $ui-text-color + background-color alpha($ui-button--active-backgroundColor, 20%) + transition background-color 0.15s + &:active + color $ui-text-color + background-color $ui-button--active-backgroundColor + +.tagList-item-active + background-color $ui-button--active-backgroundColor + display flex + width 100% + height 26px + padding 0 + margin-bottom 5px + text-align left + border none + overflow ellipsis + font-size 12px + +.tagList-item-name + display block + flex 1 + padding 0 25px + height 26px + line-height 26px + border-width 0 0 0 2px + border-style solid + border-color transparent + overflow hidden + text-overflow ellipsis diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index 7464ef1f..feee7343 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -229,7 +229,7 @@ class NoteList extends React.Component { let { data, params, location } = this.props let { router } = this.context - if (location.pathname.match(/\/home/)) { + if (location.pathname.match(/\/home/) || location.pathname.match(/\alltags/)) { const allNotes = data.noteMap.map((note) => note) this.contextNotes = allNotes return allNotes @@ -255,6 +255,14 @@ class NoteList extends React.Component { return trashedNotes } + if (location.pathname.match(/\/tags/)) { + return data.noteMap.map(note => { + return note + }).filter(note => { + return note.tags.includes(params.tagname) + }) + } + return this.getContextNotes() } diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 752b85cc..9422b2e7 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -13,48 +13,33 @@ height $topBar-height padding 0 15px font-size 12px - width 100% - text-align left + width 33% + text-align center &:hover color $ui-text-color &:active, &:active:hover color $ui-text-color background-color alpha($ui-button--active-backgroundColor, 20%) +.active-button + background-color $ui-button--active-color + +.non-active-button + background-color $ui-button-color + .top-menu-label margin-left 5px overflow ellipsis -.storageList +.tagList absolute left right bottom 37px - top 160px + top 80px overflow-y auto -.storageList-empty - padding 0 10px - margin-top 15px - line-height 24px - color $ui-inactive-text-color - -.navToggle - navButtonColor() - display block - position absolute - right 5px - bottom 5px - border-radius 16.5px - height 34px - width 34px - line-height 32px - padding 0 - .root--folded @extend .root width 44px - .storageList-empty - white-space nowrap - transform rotate(90deg) .top-menu width 44px - 1 text-align center @@ -119,12 +104,3 @@ body[data-theme="dark"] background-color alpha($ui-dark-button--active-backgroundColor, 20%) &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) - - .storageList-empty - color $ui-dark-inactive-text-color - - .navToggle - &:hover - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - transition 0.15s - color $ui-dark-text-color \ No newline at end of file diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 909c6777..f9253ec3 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -5,7 +5,10 @@ import { openModal } from 'browser/main/lib/modal' import PreferencesModal from '../modals/PreferencesModal' import ConfigManager from 'browser/main/lib/ConfigManager' import StorageItem from './StorageItem' +import TagListItem from 'browser/components/TagListItem' import SideNavFilter from 'browser/components/SideNavFilter' +import StorageList from 'browser/components/StorageList' +import NavToggleButton from 'browser/components/NavToggleButton' class SideNav extends React.Component { // TODO: should not use electron stuff v0.7 @@ -38,13 +41,85 @@ class SideNav extends React.Component { router.push('/trashed') } + handleSwitchFoldersButtonClick () { + const { router } = this.context + router.push('/home') + } + + handleSwitchTagsButtonClick () { + const { router } = this.context + router.push('/alltags') + } + + SideNavComponent (isFolded, storageList) { + let { location, data } = this.props + + const isHomeActive = !!location.pathname.match(/^\/home$/) + const isStarredActive = !!location.pathname.match(/^\/starred$/) + const isTrashedActive = !!location.pathname.match(/^\/trashed$/) + + let component + + // TagsMode is not selected + if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) { + component = ( +
+ this.handleHomeButtonClick(e)} + isStarredActive={isStarredActive} + isTrashedActive={isTrashedActive} + handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)} + handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)} + /> + + + +
+ ) + } else { + component = ( +
+
+

Tags

+
+
+ {this.tagListComponent(data)} +
+
+ ) + } + + return component + } + + tagListComponent () { + const { data, location } = this.props + let tagList = data.tagNoteMap.map((tag, key) => { + return key + }) + return ( + tagList.map(tag => ( + + )) + ) + } + + handleClickTagListItem (name) { + const { router } = this.context + router.push(`/tags/${name}`) + } + render () { let { data, location, config, dispatch } = this.props let isFolded = config.isSideNavFolded - let isHomeActive = !!location.pathname.match(/^\/home$/) - let isStarredActive = !!location.pathname.match(/^\/starred$/) - let isTrashedActive = !!location.pathname.match(/^\/trashed$/) let storageList = data.storageMap.map((storage, key) => { return
+
+ + +
- - this.handleHomeButtonClick(e)} - isStarredActive={isStarredActive} - isTrashedActive={isTrashedActive} - handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)} - handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)} - /> - -
- {storageList.length > 0 ? storageList : ( -
No storage mount.
- )} -
- + {this.SideNavComponent(isFolded, storageList)} ) } diff --git a/browser/main/index.js b/browser/main/index.js index 00c32d36..35e81177 100644 --- a/browser/main/index.js +++ b/browser/main/index.js @@ -65,6 +65,11 @@ ReactDOM.render(( + + + + +