mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-20 13:11:44 +00:00
Merge branch 'master' into export-yfm
This commit is contained in:
Baptiste Augrain
@@ -4,14 +4,17 @@ import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './SwitchButton.styl'
|
||||
import i18n from 'browser/lib/i18n'
|
||||
|
||||
const ListButton = ({
|
||||
onClick, isTagActive
|
||||
}) => (
|
||||
<button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={onClick}>
|
||||
<img src={isTagActive
|
||||
? '../resources/icon/icon-list.svg'
|
||||
: '../resources/icon/icon-list-active.svg'
|
||||
}
|
||||
const ListButton = ({ onClick, isTagActive }) => (
|
||||
<button
|
||||
styleName={isTagActive ? 'non-active-button' : 'active-button'}
|
||||
onClick={onClick}
|
||||
>
|
||||
<img
|
||||
src={
|
||||
isTagActive
|
||||
? '../resources/icon/icon-list.svg'
|
||||
: '../resources/icon/icon-list-active.svg'
|
||||
}
|
||||
/>
|
||||
<span styleName='tooltip'>{i18n.__('Notes')}</span>
|
||||
</button>
|
||||
|
||||
@@ -4,11 +4,9 @@ import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './PreferenceButton.styl'
|
||||
import i18n from 'browser/lib/i18n'
|
||||
|
||||
const PreferenceButton = ({
|
||||
onClick
|
||||
}) => (
|
||||
<button styleName='top-menu-preference' onClick={(e) => onClick(e)}>
|
||||
<img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
|
||||
const PreferenceButton = ({ onClick }) => (
|
||||
<button styleName='top-menu-preference' onClick={e => onClick(e)}>
|
||||
<img src='../resources/icon/icon-setting.svg' />
|
||||
<span styleName='tooltip'>{i18n.__('Preferences')}</span>
|
||||
</button>
|
||||
)
|
||||
|
||||
@@ -1,52 +1,47 @@
|
||||
.top-menu-preference
|
||||
navButtonColor()
|
||||
position absolute
|
||||
top 22px
|
||||
right 10px
|
||||
width 2em
|
||||
background-color transparent
|
||||
&:hover
|
||||
color $ui-button-default--active-backgroundColor
|
||||
background-color transparent
|
||||
.tooltip
|
||||
opacity 1
|
||||
&:active, &:active:hover
|
||||
color $ui-button-default--active-backgroundColor
|
||||
|
||||
body[data-theme="white"]
|
||||
.top-menu-preference
|
||||
navWhiteButtonColor()
|
||||
background-color transparent
|
||||
&:hover
|
||||
color #0B99F1
|
||||
background-color transparent
|
||||
&:active, &:active:hover
|
||||
color #0B99F1
|
||||
background-color transparent
|
||||
|
||||
body[data-theme="dark"]
|
||||
.top-menu-preference
|
||||
navDarkButtonColor()
|
||||
background-color transparent
|
||||
&:active
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
background-color transparent
|
||||
&:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
background-color transparent
|
||||
|
||||
|
||||
|
||||
.tooltip
|
||||
tooltip()
|
||||
position absolute
|
||||
pointer-events none
|
||||
top 26px
|
||||
left -20px
|
||||
z-index 200
|
||||
padding 5px
|
||||
line-height normal
|
||||
border-radius 2px
|
||||
opacity 0
|
||||
transition 0.1s
|
||||
white-space nowrap
|
||||
.top-menu-preference
|
||||
navButtonColor()
|
||||
width 2em
|
||||
background-color transparent
|
||||
&:hover
|
||||
color $ui-button-default--active-backgroundColor
|
||||
background-color transparent
|
||||
.tooltip
|
||||
opacity 1
|
||||
&:active, &:active:hover
|
||||
color $ui-button-default--active-backgroundColor
|
||||
|
||||
body[data-theme="white"]
|
||||
.top-menu-preference
|
||||
navWhiteButtonColor()
|
||||
background-color transparent
|
||||
&:hover
|
||||
color #0B99F1
|
||||
background-color transparent
|
||||
&:active, &:active:hover
|
||||
color #0B99F1
|
||||
background-color transparent
|
||||
|
||||
body[data-theme="dark"]
|
||||
.top-menu-preference
|
||||
navDarkButtonColor()
|
||||
background-color transparent
|
||||
&:active
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
background-color transparent
|
||||
&:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
background-color transparent
|
||||
|
||||
.tooltip
|
||||
tooltip()
|
||||
position absolute
|
||||
pointer-events none
|
||||
top 26px
|
||||
left -20px
|
||||
z-index 200
|
||||
padding 5px
|
||||
line-height normal
|
||||
border-radius 2px
|
||||
opacity 0
|
||||
transition 0.1s
|
||||
white-space nowrap
|
||||
|
||||
26
browser/main/SideNav/SearchButton.js
Normal file
26
browser/main/SideNav/SearchButton.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './SearchButton.styl'
|
||||
import i18n from 'browser/lib/i18n'
|
||||
|
||||
const SearchButton = ({ onClick, isActive }) => (
|
||||
<button styleName='top-menu-search' onClick={e => onClick(e)}>
|
||||
<img
|
||||
styleName='icon-search'
|
||||
src={
|
||||
isActive
|
||||
? '../resources/icon/icon-search-active.svg'
|
||||
: '../resources/icon/icon-search.svg'
|
||||
}
|
||||
/>
|
||||
<span styleName='tooltip'>{i18n.__('Search')}</span>
|
||||
</button>
|
||||
)
|
||||
|
||||
SearchButton.propTypes = {
|
||||
onClick: PropTypes.func.isRequired,
|
||||
isActive: PropTypes.bool
|
||||
}
|
||||
|
||||
export default CSSModules(SearchButton, styles)
|
||||
55
browser/main/SideNav/SearchButton.styl
Normal file
55
browser/main/SideNav/SearchButton.styl
Normal file
@@ -0,0 +1,55 @@
|
||||
.top-menu-search
|
||||
navButtonColor()
|
||||
position relative
|
||||
margin-right 6px
|
||||
top 3px
|
||||
width 2em
|
||||
background-color transparent
|
||||
&:hover
|
||||
color $ui-button-default--active-backgroundColor
|
||||
background-color transparent
|
||||
.tooltip
|
||||
opacity 1
|
||||
&:active, &:active:hover
|
||||
color $ui-button-default--active-backgroundColor
|
||||
|
||||
.icon-search
|
||||
width 16px
|
||||
|
||||
body[data-theme="white"]
|
||||
.top-menu-search
|
||||
navWhiteButtonColor()
|
||||
background-color transparent
|
||||
&:hover
|
||||
color #0B99F1
|
||||
background-color transparent
|
||||
&:active, &:active:hover
|
||||
color #0B99F1
|
||||
background-color transparent
|
||||
|
||||
body[data-theme="dark"]
|
||||
.top-menu-search
|
||||
navDarkButtonColor()
|
||||
background-color transparent
|
||||
&:active
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
background-color transparent
|
||||
&:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
background-color transparent
|
||||
|
||||
|
||||
|
||||
.tooltip
|
||||
tooltip()
|
||||
position absolute
|
||||
pointer-events none
|
||||
top 26px
|
||||
left -20px
|
||||
z-index 200
|
||||
padding 5px
|
||||
line-height normal
|
||||
border-radius 2px
|
||||
opacity 0
|
||||
transition 0.1s
|
||||
white-space nowrap
|
||||
@@ -9,16 +9,47 @@
|
||||
flex-direction column
|
||||
|
||||
.top
|
||||
padding-bottom 15px
|
||||
display flex
|
||||
align-items top
|
||||
justify-content space-between
|
||||
padding-bottom 10px
|
||||
margin 14px 14px 4px
|
||||
|
||||
.switch-buttons
|
||||
background-color transparent
|
||||
border 0
|
||||
margin 24px auto 4px 14px
|
||||
display flex
|
||||
align-items center
|
||||
text-align center
|
||||
|
||||
.extra-buttons
|
||||
position relative
|
||||
display flex
|
||||
align-items center
|
||||
|
||||
.search
|
||||
position relative
|
||||
flex 1
|
||||
display flex
|
||||
max-height 0
|
||||
overflow hidden
|
||||
transition max-height .4s
|
||||
margin -5px 10px 0
|
||||
.search-input
|
||||
flex 1
|
||||
height 2em
|
||||
vertical-align middle
|
||||
font-size 14px
|
||||
border solid 1px $border-color
|
||||
border-radius 2px
|
||||
padding 2px 6px
|
||||
outline none
|
||||
.search-clear
|
||||
width 10px
|
||||
position absolute
|
||||
right 8px
|
||||
top 9px
|
||||
cursor pointer
|
||||
|
||||
.top-menu-label
|
||||
margin-left 5px
|
||||
@@ -68,8 +99,15 @@
|
||||
background-color #2E3235
|
||||
.switch-buttons
|
||||
display none
|
||||
.extra-buttons > button:first-of-type // hide search icon
|
||||
display none
|
||||
.top
|
||||
height 60px
|
||||
align-items center
|
||||
margin 0
|
||||
justify-content center
|
||||
position relative
|
||||
left -4px
|
||||
.top-menu
|
||||
position static
|
||||
width $sideNav--folded-width
|
||||
@@ -98,32 +136,52 @@
|
||||
.top-menu-preference
|
||||
position absolute
|
||||
left 7px
|
||||
.search
|
||||
height 28px
|
||||
.search-input
|
||||
display none
|
||||
.search-clear
|
||||
display none
|
||||
.search-folded
|
||||
width 16px
|
||||
padding-left 4px
|
||||
margin-bottom 8px
|
||||
cursor pointer
|
||||
|
||||
body[data-theme="white"]
|
||||
.root, .root--folded
|
||||
background-color #f9f9f9
|
||||
color $ui-text-color
|
||||
.search .search-input
|
||||
background-color #f9f9f9
|
||||
color $ui-text-color
|
||||
|
||||
body[data-theme="dark"]
|
||||
.root, .root--folded
|
||||
border-right 1px solid $ui-dark-borderColor
|
||||
background-color $ui-dark-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
.search .search-input
|
||||
background-color $ui-dark-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
.top
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.root, .root--folded
|
||||
background-color $ui-solarized-dark-backgroundColor
|
||||
border-right 1px solid $ui-solarized-dark-borderColor
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.root, .root--folded
|
||||
background-color get-theme-var(theme, 'backgroundColor')
|
||||
border-right 1px solid get-theme-var(theme, 'borderColor')
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.root, .root--folded
|
||||
background-color $ui-monokai-backgroundColor
|
||||
border-right 1px solid $ui-monokai-borderColor
|
||||
.search .search-input
|
||||
background-color get-theme-var(theme, 'backgroundColor')
|
||||
color get-theme-var(theme, 'text-color')
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
|
||||
body[data-theme="dracula"]
|
||||
.root, .root--folded
|
||||
background-color $ui-dracula-backgroundColor
|
||||
border-right 1px solid $ui-dracula-borderColor
|
||||
for theme in 'solarized-dark' 'dracula'
|
||||
apply-theme(theme)
|
||||
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
|
||||
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types'
|
||||
import React from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './StorageItem.styl'
|
||||
import { hashHistory } from 'react-router'
|
||||
import modal from 'browser/main/lib/modal'
|
||||
import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
|
||||
import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
|
||||
@@ -12,6 +11,7 @@ import _ from 'lodash'
|
||||
import { SortableElement } from 'react-sortable-hoc'
|
||||
import i18n from 'browser/lib/i18n'
|
||||
import context from 'browser/lib/context'
|
||||
import { push } from 'connected-react-router'
|
||||
|
||||
const { remote } = require('electron')
|
||||
const { dialog } = remote
|
||||
@@ -19,7 +19,7 @@ const escapeStringRegexp = require('escape-string-regexp')
|
||||
const path = require('path')
|
||||
|
||||
class StorageItem extends React.Component {
|
||||
constructor (props) {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
const { storage } = this.props
|
||||
@@ -30,11 +30,11 @@ class StorageItem extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
handleHeaderContextMenu (e) {
|
||||
handleHeaderContextMenu(e) {
|
||||
context.popup([
|
||||
{
|
||||
label: i18n.__('Add Folder'),
|
||||
click: (e) => this.handleAddFolderButtonClick(e)
|
||||
click: e => this.handleAddFolderButtonClick(e)
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
@@ -44,15 +44,19 @@ class StorageItem extends React.Component {
|
||||
submenu: [
|
||||
{
|
||||
label: i18n.__('Export as Plain Text (.txt)'),
|
||||
click: (e) => this.handleExportStorageClick(e, 'txt')
|
||||
click: e => this.handleExportStorageClick(e, 'txt')
|
||||
},
|
||||
{
|
||||
label: i18n.__('Export as Markdown (.md)'),
|
||||
click: (e) => this.handleExportStorageClick(e, 'md')
|
||||
click: e => this.handleExportStorageClick(e, 'md')
|
||||
},
|
||||
{
|
||||
label: i18n.__('Export as HTML (.html)'),
|
||||
click: (e) => this.handleExportStorageClick(e, 'html')
|
||||
click: e => this.handleExportStorageClick(e, 'html')
|
||||
},
|
||||
{
|
||||
label: i18n.__('Export as PDF (.pdf)'),
|
||||
click: e => this.handleExportStorageClick(e, 'pdf')
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -61,87 +65,88 @@ class StorageItem extends React.Component {
|
||||
},
|
||||
{
|
||||
label: i18n.__('Unlink Storage'),
|
||||
click: (e) => this.handleUnlinkStorageClick(e)
|
||||
click: e => this.handleUnlinkStorageClick(e)
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
handleUnlinkStorageClick (e) {
|
||||
handleUnlinkStorageClick(e) {
|
||||
const index = dialog.showMessageBox(remote.getCurrentWindow(), {
|
||||
type: 'warning',
|
||||
message: i18n.__('Unlink Storage'),
|
||||
detail: i18n.__('This work will just detatches a storage from Boostnote. (Any data won\'t be deleted.)'),
|
||||
detail: i18n.__(
|
||||
"This work will just detatches a storage from Boostnote. (Any data won't be deleted.)"
|
||||
),
|
||||
buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
|
||||
})
|
||||
|
||||
if (index === 0) {
|
||||
const { storage, dispatch } = this.props
|
||||
dataApi.removeStorage(storage.key)
|
||||
dataApi
|
||||
.removeStorage(storage.key)
|
||||
.then(() => {
|
||||
dispatch({
|
||||
type: 'REMOVE_STORAGE',
|
||||
storageKey: storage.key
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch(err => {
|
||||
throw err
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleExportStorageClick (e, fileType) {
|
||||
handleExportStorageClick(e, fileType) {
|
||||
const options = {
|
||||
properties: ['openDirectory', 'createDirectory'],
|
||||
buttonLabel: i18n.__('Select directory'),
|
||||
title: i18n.__('Select a folder to export the files to'),
|
||||
multiSelections: false
|
||||
}
|
||||
dialog.showOpenDialog(remote.getCurrentWindow(), options,
|
||||
(paths) => {
|
||||
if (paths && paths.length === 1) {
|
||||
const { storage, dispatch, config } = this.props
|
||||
dataApi
|
||||
.exportStorage(storage.key, fileType, paths[0], config)
|
||||
.then(data => {
|
||||
dialog.showMessageBox(remote.getCurrentWindow(), {
|
||||
type: 'info',
|
||||
message: `Exported to ${paths[0]}`
|
||||
})
|
||||
dialog.showOpenDialog(remote.getCurrentWindow(), options, paths => {
|
||||
if (paths && paths.length === 1) {
|
||||
const { storage, dispatch, config } = this.props
|
||||
dataApi
|
||||
.exportStorage(storage.key, fileType, paths[0], config)
|
||||
.then(data => {
|
||||
dialog.showMessageBox(remote.getCurrentWindow(), {
|
||||
type: 'info',
|
||||
message: `Exported to ${paths[0]}`
|
||||
})
|
||||
|
||||
dispatch({
|
||||
type: 'EXPORT_STORAGE',
|
||||
storage: data.storage,
|
||||
fileType: data.fileType
|
||||
})
|
||||
dispatch({
|
||||
type: 'EXPORT_STORAGE',
|
||||
storage: data.storage,
|
||||
fileType: data.fileType
|
||||
})
|
||||
.catch(error => {
|
||||
dialog.showErrorBox(
|
||||
'Export error',
|
||||
error ? error.message || error : 'Unexpected error during export'
|
||||
)
|
||||
throw error
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
dialog.showErrorBox(
|
||||
'Export error',
|
||||
error ? error.message || error : 'Unexpected error during export'
|
||||
)
|
||||
throw error
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
handleToggleButtonClick (e) {
|
||||
handleToggleButtonClick(e) {
|
||||
const { storage, dispatch } = this.props
|
||||
const isOpen = !this.state.isOpen
|
||||
dataApi.toggleStorage(storage.key, isOpen)
|
||||
.then((storage) => {
|
||||
dispatch({
|
||||
type: 'EXPAND_STORAGE',
|
||||
storage,
|
||||
isOpen
|
||||
})
|
||||
dataApi.toggleStorage(storage.key, isOpen).then(storage => {
|
||||
dispatch({
|
||||
type: 'EXPAND_STORAGE',
|
||||
storage,
|
||||
isOpen
|
||||
})
|
||||
})
|
||||
this.setState({
|
||||
isOpen: isOpen
|
||||
})
|
||||
}
|
||||
|
||||
handleAddFolderButtonClick (e) {
|
||||
handleAddFolderButtonClick(e) {
|
||||
const { storage } = this.props
|
||||
|
||||
modal.open(CreateFolderModal, {
|
||||
@@ -149,23 +154,32 @@ class StorageItem extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
handleHeaderInfoClick (e) {
|
||||
const { storage } = this.props
|
||||
hashHistory.push('/storages/' + storage.key)
|
||||
handleHeaderInfoClick(e) {
|
||||
const { storage, dispatch } = this.props
|
||||
dispatch(push('/storages/' + storage.key))
|
||||
}
|
||||
|
||||
handleFolderButtonClick (folderKey) {
|
||||
return (e) => {
|
||||
const { storage } = this.props
|
||||
hashHistory.push('/storages/' + storage.key + '/folders/' + folderKey)
|
||||
handleFolderButtonClick(folderKey) {
|
||||
return e => {
|
||||
const { storage, dispatch } = this.props
|
||||
dispatch(push('/storages/' + storage.key + '/folders/' + folderKey))
|
||||
}
|
||||
}
|
||||
|
||||
handleFolderButtonContextMenu (e, folder) {
|
||||
handleFolderMouseEnter(e, tooltipRef, isFolded) {
|
||||
if (isFolded) {
|
||||
const buttonEl = e.currentTarget
|
||||
const tooltipEl = tooltipRef.current
|
||||
|
||||
tooltipEl.style.top = buttonEl.getBoundingClientRect().y + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
handleFolderButtonContextMenu(e, folder) {
|
||||
context.popup([
|
||||
{
|
||||
label: i18n.__('Rename Folder'),
|
||||
click: (e) => this.handleRenameFolderClick(e, folder)
|
||||
click: e => this.handleRenameFolderClick(e, folder)
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
@@ -175,15 +189,19 @@ class StorageItem extends React.Component {
|
||||
submenu: [
|
||||
{
|
||||
label: i18n.__('Export as Plain Text (.txt)'),
|
||||
click: (e) => this.handleExportFolderClick(e, folder, 'txt')
|
||||
click: e => this.handleExportFolderClick(e, folder, 'txt')
|
||||
},
|
||||
{
|
||||
label: i18n.__('Export as Markdown (.md)'),
|
||||
click: (e) => this.handleExportFolderClick(e, folder, 'md')
|
||||
click: e => this.handleExportFolderClick(e, folder, 'md')
|
||||
},
|
||||
{
|
||||
label: i18n.__('Export as HTML (.html)'),
|
||||
click: (e) => this.handleExportFolderClick(e, folder, 'html')
|
||||
click: e => this.handleExportFolderClick(e, folder, 'html')
|
||||
},
|
||||
{
|
||||
label: i18n.__('Export as PDF (.pdf)'),
|
||||
click: e => this.handleExportFolderClick(e, folder, 'pdf')
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -192,12 +210,12 @@ class StorageItem extends React.Component {
|
||||
},
|
||||
{
|
||||
label: i18n.__('Delete Folder'),
|
||||
click: (e) => this.handleFolderDeleteClick(e, folder)
|
||||
click: e => this.handleFolderDeleteClick(e, folder)
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
handleRenameFolderClick (e, folder) {
|
||||
handleRenameFolderClick(e, folder) {
|
||||
const { storage } = this.props
|
||||
modal.open(RenameFolderModal, {
|
||||
storage,
|
||||
@@ -205,15 +223,14 @@ class StorageItem extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
handleExportFolderClick (e, folder, fileType) {
|
||||
handleExportFolderClick(e, folder, fileType) {
|
||||
const options = {
|
||||
properties: ['openDirectory', 'createDirectory'],
|
||||
buttonLabel: i18n.__('Select directory'),
|
||||
title: i18n.__('Select a folder to export the files to'),
|
||||
multiSelections: false
|
||||
}
|
||||
dialog.showOpenDialog(remote.getCurrentWindow(), options,
|
||||
(paths) => {
|
||||
dialog.showOpenDialog(remote.getCurrentWindow(), options, paths => {
|
||||
if (paths && paths.length === 1) {
|
||||
const { storage, dispatch, config } = this.props
|
||||
dataApi
|
||||
@@ -242,66 +259,74 @@ class StorageItem extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
handleFolderDeleteClick (e, folder) {
|
||||
handleFolderDeleteClick(e, folder) {
|
||||
const index = dialog.showMessageBox(remote.getCurrentWindow(), {
|
||||
type: 'warning',
|
||||
message: i18n.__('Delete Folder'),
|
||||
detail: i18n.__('This will delete all notes in the folder and can not be undone.'),
|
||||
detail: i18n.__(
|
||||
'This will delete all notes in the folder and can not be undone.'
|
||||
),
|
||||
buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
|
||||
})
|
||||
|
||||
if (index === 0) {
|
||||
const { storage, dispatch } = this.props
|
||||
dataApi
|
||||
.deleteFolder(storage.key, folder.key)
|
||||
.then((data) => {
|
||||
dispatch({
|
||||
type: 'DELETE_FOLDER',
|
||||
storage: data.storage,
|
||||
folderKey: data.folderKey
|
||||
})
|
||||
dataApi.deleteFolder(storage.key, folder.key).then(data => {
|
||||
dispatch({
|
||||
type: 'DELETE_FOLDER',
|
||||
storage: data.storage,
|
||||
folderKey: data.folderKey
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleDragEnter (e, key) {
|
||||
handleDragEnter(e, key) {
|
||||
e.preventDefault()
|
||||
if (this.state.draggedOver === key) { return }
|
||||
if (this.state.draggedOver === key) {
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
draggedOver: key
|
||||
})
|
||||
}
|
||||
|
||||
handleDragLeave (e) {
|
||||
handleDragLeave(e) {
|
||||
e.preventDefault()
|
||||
if (this.state.draggedOver === null) { return }
|
||||
if (this.state.draggedOver === null) {
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
draggedOver: null
|
||||
})
|
||||
}
|
||||
|
||||
dropNote (storage, folder, dispatch, location, noteData) {
|
||||
noteData = noteData.filter((note) => folder.key !== note.folder)
|
||||
dropNote(storage, folder, dispatch, location, noteData) {
|
||||
noteData = noteData.filter(note => folder.key !== note.folder)
|
||||
if (noteData.length === 0) return
|
||||
|
||||
Promise.all(
|
||||
noteData.map((note) => dataApi.moveNote(note.storage, note.key, storage.key, folder.key))
|
||||
noteData.map(note =>
|
||||
dataApi.moveNote(note.storage, note.key, storage.key, folder.key)
|
||||
)
|
||||
)
|
||||
.then((createdNoteData) => {
|
||||
createdNoteData.forEach((newNote) => {
|
||||
dispatch({
|
||||
type: 'MOVE_NOTE',
|
||||
originNote: noteData.find((note) => note.content === newNote.oldContent),
|
||||
note: newNote
|
||||
.then(createdNoteData => {
|
||||
createdNoteData.forEach(newNote => {
|
||||
dispatch({
|
||||
type: 'MOVE_NOTE',
|
||||
originNote: noteData.find(
|
||||
note => note.content === newNote.oldContent
|
||||
),
|
||||
note: newNote
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(`error on delete notes: ${err}`)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(`error on delete notes: ${err}`)
|
||||
})
|
||||
}
|
||||
|
||||
handleDrop (e, storage, folder, dispatch, location) {
|
||||
handleDrop(e, storage, folder, dispatch, location) {
|
||||
e.preventDefault()
|
||||
if (this.state.draggedOver !== null) {
|
||||
this.setState({
|
||||
@@ -312,21 +337,38 @@ class StorageItem extends React.Component {
|
||||
this.dropNote(storage, folder, dispatch, location, noteData)
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
const { storage, location, isFolded, data, dispatch } = this.props
|
||||
const { folderNoteMap, trashedSet } = data
|
||||
const SortableStorageItemChild = SortableElement(StorageItemChild)
|
||||
const folderList = storage.folders.map((folder, index) => {
|
||||
const folderRegex = new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + escapeStringRegexp(path.sep) + 'folders' + escapeStringRegexp(path.sep) + folder.key)
|
||||
const isActive = !!(location.pathname.match(folderRegex))
|
||||
const folderRegex = new RegExp(
|
||||
escapeStringRegexp(path.sep) +
|
||||
'storages' +
|
||||
escapeStringRegexp(path.sep) +
|
||||
storage.key +
|
||||
escapeStringRegexp(path.sep) +
|
||||
'folders' +
|
||||
escapeStringRegexp(path.sep) +
|
||||
folder.key
|
||||
)
|
||||
const isActive = !!location.pathname.match(folderRegex)
|
||||
const tooltipRef = React.createRef(null)
|
||||
const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
|
||||
|
||||
let noteCount = 0
|
||||
if (noteSet) {
|
||||
let trashedNoteCount = 0
|
||||
const noteKeys = noteSet.map(noteKey => { return noteKey })
|
||||
const noteKeys = noteSet.map(noteKey => {
|
||||
return noteKey
|
||||
})
|
||||
trashedSet.toJS().forEach(trashedKey => {
|
||||
if (noteKeys.some(noteKey => { return noteKey === trashedKey })) trashedNoteCount++
|
||||
if (
|
||||
noteKeys.some(noteKey => {
|
||||
return noteKey === trashedKey
|
||||
})
|
||||
)
|
||||
trashedNoteCount++
|
||||
})
|
||||
noteCount = noteSet.size - trashedNoteCount
|
||||
}
|
||||
@@ -335,73 +377,84 @@ class StorageItem extends React.Component {
|
||||
key={folder.key}
|
||||
index={index}
|
||||
isActive={isActive || folder.key === this.state.draggedOver}
|
||||
handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
|
||||
handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
|
||||
tooltipRef={tooltipRef}
|
||||
handleButtonClick={e => this.handleFolderButtonClick(folder.key)(e)}
|
||||
handleMouseEnter={e =>
|
||||
this.handleFolderMouseEnter(e, tooltipRef, isFolded)
|
||||
}
|
||||
handleContextMenu={e => this.handleFolderButtonContextMenu(e, folder)}
|
||||
folderName={folder.name}
|
||||
folderColor={folder.color}
|
||||
isFolded={isFolded}
|
||||
noteCount={noteCount}
|
||||
handleDrop={(e) => {
|
||||
handleDrop={e => {
|
||||
this.handleDrop(e, storage, folder, dispatch, location)
|
||||
}}
|
||||
handleDragEnter={(e) => {
|
||||
handleDragEnter={e => {
|
||||
this.handleDragEnter(e, folder.key)
|
||||
}}
|
||||
handleDragLeave={(e) => {
|
||||
handleDragLeave={e => {
|
||||
this.handleDragLeave(e, folder)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
const isActive = location.pathname.match(new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + '$'))
|
||||
const isActive = location.pathname.match(
|
||||
new RegExp(
|
||||
escapeStringRegexp(path.sep) +
|
||||
'storages' +
|
||||
escapeStringRegexp(path.sep) +
|
||||
storage.key +
|
||||
'$'
|
||||
)
|
||||
)
|
||||
|
||||
return (
|
||||
<div styleName={isFolded ? 'root--folded' : 'root'}
|
||||
key={storage.key}
|
||||
>
|
||||
<div styleName={isActive
|
||||
? 'header--active'
|
||||
: 'header'
|
||||
}
|
||||
onContextMenu={(e) => this.handleHeaderContextMenu(e)}
|
||||
<div styleName={isFolded ? 'root--folded' : 'root'} key={storage.key}>
|
||||
<div
|
||||
styleName={isActive ? 'header--active' : 'header'}
|
||||
onContextMenu={e => this.handleHeaderContextMenu(e)}
|
||||
>
|
||||
<button styleName='header-toggleButton'
|
||||
onMouseDown={(e) => this.handleToggleButtonClick(e)}
|
||||
<button
|
||||
styleName='header-toggleButton'
|
||||
onMouseDown={e => this.handleToggleButtonClick(e)}
|
||||
>
|
||||
<img src={this.state.isOpen
|
||||
? '../resources/icon/icon-down.svg'
|
||||
: '../resources/icon/icon-right.svg'
|
||||
}
|
||||
<img
|
||||
src={
|
||||
this.state.isOpen
|
||||
? '../resources/icon/icon-down.svg'
|
||||
: '../resources/icon/icon-right.svg'
|
||||
}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{!isFolded &&
|
||||
<button styleName='header-addFolderButton'
|
||||
onClick={(e) => this.handleAddFolderButtonClick(e)}
|
||||
{!isFolded && (
|
||||
<button
|
||||
styleName='header-addFolderButton'
|
||||
onClick={e => this.handleAddFolderButtonClick(e)}
|
||||
>
|
||||
<img styleName='iconTag' src='../resources/icon/icon-plus.svg' />
|
||||
<img src='../resources/icon/icon-plus.svg' />
|
||||
</button>
|
||||
}
|
||||
)}
|
||||
|
||||
<button styleName='header-info'
|
||||
onClick={(e) => this.handleHeaderInfoClick(e)}
|
||||
<button
|
||||
styleName='header-info'
|
||||
onClick={e => this.handleHeaderInfoClick(e)}
|
||||
>
|
||||
<span styleName='header-info-name'>
|
||||
{isFolded ? _.truncate(storage.name, {length: 1, omission: ''}) : storage.name}
|
||||
<span>
|
||||
{isFolded
|
||||
? _.truncate(storage.name, { length: 1, omission: '' })
|
||||
: storage.name}
|
||||
</span>
|
||||
{isFolded &&
|
||||
{isFolded && (
|
||||
<span styleName='header-info--folded-tooltip'>
|
||||
{storage.name}
|
||||
</span>
|
||||
}
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{this.state.isOpen &&
|
||||
<div styleName='folderList' >
|
||||
{folderList}
|
||||
</div>
|
||||
}
|
||||
{this.state.isOpen && <div>{folderList}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -132,55 +132,57 @@ body[data-theme="white"]
|
||||
background-color alpha($ui-button--active-backgroundColor, 40%)
|
||||
color $ui-text-color
|
||||
|
||||
body[data-theme="dark"]
|
||||
.header--active
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
transition color background-color 0.15s
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.header--active
|
||||
background-color get-theme-var(theme, 'button--active-backgroundColor')
|
||||
transition color background-color 0.15s
|
||||
|
||||
.header--active
|
||||
.header-toggleButton
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
.header--active
|
||||
.header-info
|
||||
color get-theme-var(theme, 'text-color')
|
||||
background-color get-theme-var(theme, 'button--active-backgroundColor')
|
||||
&:active
|
||||
color get-theme-var(theme, 'text-color')
|
||||
background-color get-theme-var(theme, 'button--active-backgroundColor')
|
||||
|
||||
.header--active
|
||||
.header-addFolderButton
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
.header--active
|
||||
.header-toggleButton
|
||||
color $ui-dark-text-color
|
||||
&:hover
|
||||
transition 0.2s
|
||||
color get-theme-var(theme, 'text-color')
|
||||
background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
|
||||
&:active, &:active:hover
|
||||
color get-theme-var(theme, 'text-color')
|
||||
background-color get-theme-var(theme, 'button--active-backgroundColor')
|
||||
|
||||
.header--active
|
||||
.header-info
|
||||
color $ui-dark-text-color
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
&:active
|
||||
color $ui-dark-text-color
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
|
||||
&:hover
|
||||
transition 0.2s
|
||||
color get-theme-var(theme, 'text-color')
|
||||
background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
|
||||
&:active, &:active:hover
|
||||
color get-theme-var(theme, 'text-color')
|
||||
background-color get-theme-var(theme, 'button--active-backgroundColor')
|
||||
|
||||
.header--active
|
||||
.header-addFolderButton
|
||||
color $ui-dark-text-color
|
||||
|
||||
.header-toggleButton
|
||||
&:hover
|
||||
transition 0.2s
|
||||
color $ui-dark-text-color
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
|
||||
&:active, &:active:hover
|
||||
color $ui-dark-text-color
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
|
||||
.header-info
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
&:hover
|
||||
transition 0.2s
|
||||
color $ui-dark-text-color
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
&:active, &:active:hover
|
||||
color $ui-dark-text-color
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
|
||||
.header-addFolderButton
|
||||
&:hover
|
||||
transition 0.2s
|
||||
color $ui-dark-text-color
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
|
||||
&:active, &:active:hover
|
||||
color $ui-dark-text-color
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
|
||||
|
||||
&:hover
|
||||
transition 0.2s
|
||||
color get-theme-var(theme, 'text-color')
|
||||
background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
|
||||
&:active, &:active:hover
|
||||
color get-theme-var(theme, 'text-color')
|
||||
background-color get-theme-var(theme, 'button--active-backgroundColor')
|
||||
|
||||
apply-theme('dark')
|
||||
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
@@ -1,60 +1,60 @@
|
||||
.non-active-button
|
||||
color $ui-inactive-text-color
|
||||
font-size 16px
|
||||
border 0
|
||||
background-color transparent
|
||||
transition 0.2s
|
||||
display flex
|
||||
text-align center
|
||||
margin-right 4px
|
||||
position relative
|
||||
&:hover
|
||||
color alpha(#239F86, 60%)
|
||||
.tooltip
|
||||
opacity 1
|
||||
|
||||
.active-button
|
||||
@extend .non-active-button
|
||||
color $ui-button-default--active-backgroundColor
|
||||
|
||||
.tooltip
|
||||
tooltip()
|
||||
position absolute
|
||||
pointer-events none
|
||||
top 22px
|
||||
left -2px
|
||||
z-index 200
|
||||
padding 5px
|
||||
line-height normal
|
||||
border-radius 2px
|
||||
opacity 0
|
||||
transition 0.1s
|
||||
white-space nowrap
|
||||
|
||||
body[data-theme="white"]
|
||||
.non-active-button
|
||||
color $ui-inactive-text-color
|
||||
&:hover
|
||||
color alpha(#0B99F1, 60%)
|
||||
|
||||
.tag-title
|
||||
p
|
||||
color $ui-text-color
|
||||
|
||||
.non-active-button
|
||||
&:hover
|
||||
color alpha(#0B99F1, 60%)
|
||||
|
||||
.active-button
|
||||
@extend .non-active-button
|
||||
color #0B99F1
|
||||
|
||||
body[data-theme="dark"]
|
||||
.non-active-button
|
||||
color alpha($ui-dark-text-color, 60%)
|
||||
&:hover
|
||||
color alpha(#0B99F1, 60%)
|
||||
|
||||
.tag-title
|
||||
p
|
||||
.non-active-button
|
||||
color $ui-inactive-text-color
|
||||
font-size 16px
|
||||
border 0
|
||||
background-color transparent
|
||||
transition 0.2s
|
||||
display flex
|
||||
text-align center
|
||||
margin-right 4px
|
||||
position relative
|
||||
&:hover
|
||||
color alpha(#239F86, 60%)
|
||||
.tooltip
|
||||
opacity 1
|
||||
|
||||
.active-button
|
||||
@extend .non-active-button
|
||||
color $ui-button-default--active-backgroundColor
|
||||
|
||||
.tooltip
|
||||
tooltip()
|
||||
position absolute
|
||||
pointer-events none
|
||||
top 22px
|
||||
left -2px
|
||||
z-index 200
|
||||
padding 5px
|
||||
line-height normal
|
||||
border-radius 2px
|
||||
opacity 0
|
||||
transition 0.1s
|
||||
white-space nowrap
|
||||
|
||||
body[data-theme="white"]
|
||||
.non-active-button
|
||||
color $ui-inactive-text-color
|
||||
&:hover
|
||||
color alpha(#0B99F1, 60%)
|
||||
|
||||
.tag-title
|
||||
p
|
||||
color $ui-text-color
|
||||
|
||||
.non-active-button
|
||||
&:hover
|
||||
color alpha(#0B99F1, 60%)
|
||||
|
||||
.active-button
|
||||
@extend .non-active-button
|
||||
color #0B99F1
|
||||
|
||||
body[data-theme="dark"]
|
||||
.non-active-button
|
||||
color alpha($ui-dark-text-color, 60%)
|
||||
&:hover
|
||||
color alpha(#0B99F1, 60%)
|
||||
|
||||
.tag-title
|
||||
p
|
||||
color alpha($ui-dark-text-color, 60%)
|
||||
@@ -4,14 +4,17 @@ import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './SwitchButton.styl'
|
||||
import i18n from 'browser/lib/i18n'
|
||||
|
||||
const TagButton = ({
|
||||
onClick, isTagActive
|
||||
}) => (
|
||||
<button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={onClick}>
|
||||
<img src={isTagActive
|
||||
? '../resources/icon/icon-tag-active.svg'
|
||||
: '../resources/icon/icon-tag.svg'
|
||||
}
|
||||
const TagButton = ({ onClick, isTagActive }) => (
|
||||
<button
|
||||
styleName={isTagActive ? 'active-button' : 'non-active-button'}
|
||||
onClick={onClick}
|
||||
>
|
||||
<img
|
||||
src={
|
||||
isTagActive
|
||||
? '../resources/icon/icon-tag-active.svg'
|
||||
: '../resources/icon/icon-tag.svg'
|
||||
}
|
||||
/>
|
||||
<span styleName='tooltip'>{i18n.__('Tags')}</span>
|
||||
</button>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React from 'react'
|
||||
import { push } from 'connected-react-router'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import dataApi from 'browser/main/lib/dataApi'
|
||||
import styles from './SideNav.styl'
|
||||
import { openModal } from 'browser/main/lib/modal'
|
||||
import PreferencesModal from '../modals/PreferencesModal'
|
||||
import RenameTagModal from 'browser/main/modals/RenameTagModal'
|
||||
import ConfigManager from 'browser/main/lib/ConfigManager'
|
||||
import StorageItem from './StorageItem'
|
||||
import TagListItem from 'browser/components/TagListItem'
|
||||
@@ -13,39 +15,71 @@ import StorageList from 'browser/components/StorageList'
|
||||
import NavToggleButton from 'browser/components/NavToggleButton'
|
||||
import EventEmitter from 'browser/main/lib/eventEmitter'
|
||||
import PreferenceButton from './PreferenceButton'
|
||||
import SearchButton from './SearchButton'
|
||||
import ListButton from './ListButton'
|
||||
import TagButton from './TagButton'
|
||||
import {SortableContainer} from 'react-sortable-hoc'
|
||||
import { SortableContainer } from 'react-sortable-hoc'
|
||||
import i18n from 'browser/lib/i18n'
|
||||
import context from 'browser/lib/context'
|
||||
import { remote } from 'electron'
|
||||
import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
|
||||
import ColorPicker from 'browser/components/ColorPicker'
|
||||
import { every, sortBy } from 'lodash'
|
||||
|
||||
function matchActiveTags (tags, activeTags) {
|
||||
return _.every(activeTags, v => tags.indexOf(v) >= 0)
|
||||
function matchActiveTags(tags, activeTags) {
|
||||
return every(activeTags, v => tags.indexOf(v) >= 0)
|
||||
}
|
||||
|
||||
class SideNav extends React.Component {
|
||||
// TODO: should not use electron stuff v0.7
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
componentDidMount () {
|
||||
this.state = {
|
||||
colorPicker: {
|
||||
show: false,
|
||||
color: null,
|
||||
tagName: null,
|
||||
targetRect: null,
|
||||
showSearch: false,
|
||||
searchText: ''
|
||||
}
|
||||
}
|
||||
|
||||
this.dismissColorPicker = this.dismissColorPicker.bind(this)
|
||||
this.handleColorPickerConfirm = this.handleColorPickerConfirm.bind(this)
|
||||
this.handleColorPickerReset = this.handleColorPickerReset.bind(this)
|
||||
this.handleSearchButtonClick = this.handleSearchButtonClick.bind(this)
|
||||
this.handleSearchInputChange = this.handleSearchInputChange.bind(this)
|
||||
this.handleSearchInputClear = this.handleSearchInputClear.bind(this)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
EventEmitter.on('side:preferences', this.handleMenuButtonClick)
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
componentWillUnmount() {
|
||||
EventEmitter.off('side:preferences', this.handleMenuButtonClick)
|
||||
}
|
||||
|
||||
deleteTag (tag) {
|
||||
const selectedButton = remote.dialog.showMessageBox(remote.getCurrentWindow(), {
|
||||
ype: 'warning',
|
||||
message: i18n.__('Confirm tag deletion'),
|
||||
detail: i18n.__('This will permanently remove this tag.'),
|
||||
buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
|
||||
})
|
||||
deleteTag(tag) {
|
||||
const selectedButton = remote.dialog.showMessageBox(
|
||||
remote.getCurrentWindow(),
|
||||
{
|
||||
type: 'warning',
|
||||
message: i18n.__('Confirm tag deletion'),
|
||||
detail: i18n.__('This will permanently remove this tag.'),
|
||||
buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
|
||||
}
|
||||
)
|
||||
|
||||
if (selectedButton === 0) {
|
||||
const { data, dispatch, location, params } = this.props
|
||||
const {
|
||||
data,
|
||||
dispatch,
|
||||
location,
|
||||
match: { params }
|
||||
} = this.props
|
||||
|
||||
const notes = data.noteMap
|
||||
.map(note => note)
|
||||
@@ -59,44 +93,68 @@ class SideNav extends React.Component {
|
||||
return note
|
||||
})
|
||||
|
||||
Promise
|
||||
.all(notes.map(note => dataApi.updateNote(note.storage, note.key, note)))
|
||||
.then(updatedNotes => {
|
||||
updatedNotes.forEach(note => {
|
||||
dispatch({
|
||||
type: 'UPDATE_NOTE',
|
||||
note
|
||||
})
|
||||
Promise.all(
|
||||
notes.map(note => dataApi.updateNote(note.storage, note.key, note))
|
||||
).then(updatedNotes => {
|
||||
updatedNotes.forEach(note => {
|
||||
dispatch({
|
||||
type: 'UPDATE_NOTE',
|
||||
note
|
||||
})
|
||||
|
||||
if (location.pathname.match('/tags')) {
|
||||
const tags = params.tagname.split(' ')
|
||||
const index = tags.indexOf(tag)
|
||||
if (index !== -1) {
|
||||
tags.splice(index, 1)
|
||||
|
||||
this.context.router.push(`/tags/${tags.map(tag => encodeURIComponent(tag)).join(' ')}`)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (location.pathname.match('/tags')) {
|
||||
const tags = params.tagname.split(' ')
|
||||
const index = tags.indexOf(tag)
|
||||
if (index !== -1) {
|
||||
tags.splice(index, 1)
|
||||
|
||||
dispatch(
|
||||
push(
|
||||
`/tags/${tags.map(tag => encodeURIComponent(tag)).join(' ')}`
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleMenuButtonClick (e) {
|
||||
handleMenuButtonClick(e) {
|
||||
openModal(PreferencesModal)
|
||||
}
|
||||
|
||||
handleHomeButtonClick (e) {
|
||||
const { router } = this.context
|
||||
router.push('/home')
|
||||
handleSearchButtonClick(e) {
|
||||
const { showSearch } = this.state
|
||||
this.setState({
|
||||
showSearch: !showSearch,
|
||||
searchText: ''
|
||||
})
|
||||
}
|
||||
|
||||
handleStarredButtonClick (e) {
|
||||
const { router } = this.context
|
||||
router.push('/starred')
|
||||
handleSearchInputClear(e) {
|
||||
this.setState({
|
||||
searchText: ''
|
||||
})
|
||||
}
|
||||
|
||||
handleTagContextMenu (e, tag) {
|
||||
handleSearchInputChange(e) {
|
||||
this.setState({
|
||||
searchText: e.target.value
|
||||
})
|
||||
}
|
||||
|
||||
handleHomeButtonClick(e) {
|
||||
const { dispatch } = this.props
|
||||
dispatch(push('/home'))
|
||||
}
|
||||
|
||||
handleStarredButtonClick(e) {
|
||||
const { dispatch } = this.props
|
||||
dispatch(push('/starred'))
|
||||
}
|
||||
|
||||
handleTagContextMenu(e, tag) {
|
||||
const menu = []
|
||||
|
||||
menu.push({
|
||||
@@ -104,47 +162,139 @@ class SideNav extends React.Component {
|
||||
click: this.deleteTag.bind(this, tag)
|
||||
})
|
||||
|
||||
menu.push({
|
||||
label: i18n.__('Customize Color'),
|
||||
click: this.displayColorPicker.bind(
|
||||
this,
|
||||
tag,
|
||||
e.target.getBoundingClientRect()
|
||||
)
|
||||
})
|
||||
|
||||
menu.push({
|
||||
label: i18n.__('Rename Tag'),
|
||||
click: this.handleRenameTagClick.bind(this, tag)
|
||||
})
|
||||
|
||||
context.popup(menu)
|
||||
}
|
||||
|
||||
handleToggleButtonClick (e) {
|
||||
const { dispatch, config } = this.props
|
||||
dismissColorPicker() {
|
||||
this.setState({
|
||||
colorPicker: {
|
||||
show: false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
ConfigManager.set({isSideNavFolded: !config.isSideNavFolded})
|
||||
displayColorPicker(tagName, rect) {
|
||||
const { config } = this.props
|
||||
this.setState({
|
||||
colorPicker: {
|
||||
show: true,
|
||||
color: config.coloredTags[tagName],
|
||||
tagName,
|
||||
targetRect: rect
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
handleRenameTagClick(tagName) {
|
||||
const { data, dispatch } = this.props
|
||||
|
||||
openModal(RenameTagModal, {
|
||||
tagName,
|
||||
data,
|
||||
dispatch
|
||||
})
|
||||
}
|
||||
|
||||
handleColorPickerConfirm(color) {
|
||||
const {
|
||||
dispatch,
|
||||
config: { coloredTags }
|
||||
} = this.props
|
||||
const {
|
||||
colorPicker: { tagName }
|
||||
} = this.state
|
||||
const newColoredTags = Object.assign({}, coloredTags, {
|
||||
[tagName]: color.hex
|
||||
})
|
||||
|
||||
const config = { coloredTags: newColoredTags }
|
||||
ConfigManager.set(config)
|
||||
dispatch({
|
||||
type: 'SET_CONFIG',
|
||||
config
|
||||
})
|
||||
this.dismissColorPicker()
|
||||
}
|
||||
|
||||
handleColorPickerReset() {
|
||||
const {
|
||||
dispatch,
|
||||
config: { coloredTags }
|
||||
} = this.props
|
||||
const {
|
||||
colorPicker: { tagName }
|
||||
} = this.state
|
||||
const newColoredTags = Object.assign({}, coloredTags)
|
||||
|
||||
delete newColoredTags[tagName]
|
||||
|
||||
const config = { coloredTags: newColoredTags }
|
||||
ConfigManager.set(config)
|
||||
dispatch({
|
||||
type: 'SET_CONFIG',
|
||||
config
|
||||
})
|
||||
this.dismissColorPicker()
|
||||
}
|
||||
|
||||
handleToggleButtonClick(e) {
|
||||
const { dispatch, config } = this.props
|
||||
const { showSearch, searchText } = this.state
|
||||
|
||||
ConfigManager.set({ isSideNavFolded: !config.isSideNavFolded })
|
||||
dispatch({
|
||||
type: 'SET_IS_SIDENAV_FOLDED',
|
||||
isFolded: !config.isSideNavFolded
|
||||
})
|
||||
}
|
||||
|
||||
handleTrashedButtonClick (e) {
|
||||
const { router } = this.context
|
||||
router.push('/trashed')
|
||||
}
|
||||
|
||||
handleSwitchFoldersButtonClick () {
|
||||
const { router } = this.context
|
||||
router.push('/home')
|
||||
}
|
||||
|
||||
handleSwitchTagsButtonClick () {
|
||||
const { router } = this.context
|
||||
router.push('/alltags')
|
||||
}
|
||||
|
||||
onSortEnd (storage) {
|
||||
return ({oldIndex, newIndex}) => {
|
||||
const { dispatch } = this.props
|
||||
dataApi
|
||||
.reorderFolder(storage.key, oldIndex, newIndex)
|
||||
.then((data) => {
|
||||
dispatch({ type: 'REORDER_FOLDER', storage: data.storage })
|
||||
})
|
||||
if (showSearch && searchText.length === 0) {
|
||||
this.setState({
|
||||
showSearch: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
SideNavComponent (isFolded, storageList) {
|
||||
const { location, data, config } = this.props
|
||||
handleTrashedButtonClick(e) {
|
||||
const { dispatch } = this.props
|
||||
dispatch(push('/trashed'))
|
||||
}
|
||||
|
||||
handleSwitchFoldersButtonClick() {
|
||||
const { dispatch } = this.props
|
||||
dispatch(push('/home'))
|
||||
}
|
||||
|
||||
handleSwitchTagsButtonClick() {
|
||||
const { dispatch } = this.props
|
||||
dispatch(push('/alltags'))
|
||||
}
|
||||
|
||||
onSortEnd(storage) {
|
||||
return ({ oldIndex, newIndex }) => {
|
||||
const { dispatch } = this.props
|
||||
dataApi.reorderFolder(storage.key, oldIndex, newIndex).then(data => {
|
||||
dispatch({ type: 'REORDER_FOLDER', storage: data.storage })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
SideNavComponent(isFolded) {
|
||||
const { location, data, config, dispatch } = this.props
|
||||
const { showSearch, searchText } = this.state
|
||||
|
||||
const isHomeActive = !!location.pathname.match(/^\/home$/)
|
||||
const isStarredActive = !!location.pathname.match(/^\/starred$/)
|
||||
@@ -153,25 +303,63 @@ class SideNav extends React.Component {
|
||||
let component
|
||||
|
||||
// TagsMode is not selected
|
||||
if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) {
|
||||
if (
|
||||
!location.pathname.match('/tags') &&
|
||||
!location.pathname.match('/alltags')
|
||||
) {
|
||||
let storageMap = data.storageMap
|
||||
if (showSearch && searchText.length > 0) {
|
||||
storageMap = storageMap.map(storage => {
|
||||
const folders = storage.folders.filter(
|
||||
folder =>
|
||||
folder.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1
|
||||
)
|
||||
return Object.assign({}, storage, { folders })
|
||||
})
|
||||
}
|
||||
|
||||
const storageList = storageMap.map((storage, key) => {
|
||||
const SortableStorageItem = SortableContainer(StorageItem)
|
||||
return (
|
||||
<SortableStorageItem
|
||||
key={storage.key}
|
||||
storage={storage}
|
||||
data={data}
|
||||
location={location}
|
||||
isFolded={isFolded}
|
||||
dispatch={dispatch}
|
||||
onSortEnd={this.onSortEnd.bind(this)(storage)}
|
||||
useDragHandle
|
||||
config={config}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
component = (
|
||||
<div>
|
||||
<SideNavFilter
|
||||
isFolded={isFolded}
|
||||
isHomeActive={isHomeActive}
|
||||
handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
|
||||
handleAllNotesButtonClick={e => this.handleHomeButtonClick(e)}
|
||||
isStarredActive={isStarredActive}
|
||||
isTrashedActive={isTrashedActive}
|
||||
handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
|
||||
handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
|
||||
counterTotalNote={data.noteMap._map.size - data.trashedSet._set.size}
|
||||
handleStarredButtonClick={e => this.handleStarredButtonClick(e)}
|
||||
handleTrashedButtonClick={e => this.handleTrashedButtonClick(e)}
|
||||
counterTotalNote={
|
||||
data.noteMap._map.size - data.trashedSet._set.size
|
||||
}
|
||||
counterStarredNote={data.starredSet._set.size}
|
||||
counterDelNote={data.trashedSet._set.size}
|
||||
handleFilterButtonContextMenu={this.handleFilterButtonContextMenu.bind(this)}
|
||||
handleFilterButtonContextMenu={this.handleFilterButtonContextMenu.bind(
|
||||
this
|
||||
)}
|
||||
/>
|
||||
|
||||
<StorageList storageList={storageList} isFolded={isFolded} />
|
||||
<NavToggleButton isFolded={isFolded} handleToggleButtonClick={this.handleToggleButtonClick.bind(this)} />
|
||||
<NavToggleButton
|
||||
isFolded={isFolded}
|
||||
handleToggleButtonClick={this.handleToggleButtonClick.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
@@ -183,21 +371,26 @@ class SideNav extends React.Component {
|
||||
</div>
|
||||
<div styleName='tag-control-sortTagsBy'>
|
||||
<i className='fa fa-angle-down' />
|
||||
<select styleName='tag-control-sortTagsBy-select'
|
||||
<select
|
||||
styleName='tag-control-sortTagsBy-select'
|
||||
title={i18n.__('Select filter mode')}
|
||||
value={config.sortTagsBy}
|
||||
onChange={(e) => this.handleSortTagsByChange(e)}
|
||||
onChange={e => this.handleSortTagsByChange(e)}
|
||||
>
|
||||
<option title='Sort alphabetically'
|
||||
value='ALPHABETICAL'>{i18n.__('Alphabetically')}</option>
|
||||
<option title='Sort by update time'
|
||||
value='COUNTER'>{i18n.__('Counter')}</option>
|
||||
<option title='Sort alphabetically' value='ALPHABETICAL'>
|
||||
{i18n.__('Alphabetically')}
|
||||
</option>
|
||||
<option title='Sort by update time' value='COUNTER'>
|
||||
{i18n.__('Counter')}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div styleName='tagList'>
|
||||
{this.tagListComponent(data)}
|
||||
</div>
|
||||
<div styleName='tagList'>{this.tagListComponent(data)}</div>
|
||||
<NavToggleButton
|
||||
isFolded={isFolded}
|
||||
handleToggleButtonClick={this.handleToggleButtonClick.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -205,80 +398,89 @@ class SideNav extends React.Component {
|
||||
return component
|
||||
}
|
||||
|
||||
tagListComponent () {
|
||||
tagListComponent() {
|
||||
const { data, location, config } = this.props
|
||||
const { colorPicker, showSearch, searchText } = this.state
|
||||
const activeTags = this.getActiveTags(location.pathname)
|
||||
const relatedTags = this.getRelatedTags(activeTags, data.noteMap)
|
||||
let tagList = _.sortBy(data.tagNoteMap.map(
|
||||
(tag, name) => ({ name, size: tag.size, related: relatedTags.has(name) })
|
||||
).filter(
|
||||
tag => tag.size > 0
|
||||
), ['name'])
|
||||
let tagList = sortBy(
|
||||
data.tagNoteMap
|
||||
.map((tag, name) => ({
|
||||
name,
|
||||
size: tag.size,
|
||||
related: relatedTags.has(name)
|
||||
}))
|
||||
.filter(tag => tag.size > 0),
|
||||
['name']
|
||||
)
|
||||
if (showSearch && searchText.length > 0) {
|
||||
tagList = tagList.filter(
|
||||
tag => tag.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1
|
||||
)
|
||||
}
|
||||
if (config.ui.enableLiveNoteCounts && activeTags.length !== 0) {
|
||||
const notesTags = data.noteMap.map(note => note.tags)
|
||||
tagList = tagList.map(tag => {
|
||||
tag.size = notesTags.filter(tags => tags.includes(tag.name) && matchActiveTags(tags, activeTags)).length
|
||||
tag.size = notesTags.filter(
|
||||
tags => tags.includes(tag.name) && matchActiveTags(tags, activeTags)
|
||||
).length
|
||||
return tag
|
||||
})
|
||||
}
|
||||
if (config.sortTagsBy === 'COUNTER') {
|
||||
tagList = _.sortBy(tagList, item => (0 - item.size))
|
||||
tagList = sortBy(tagList, item => 0 - item.size)
|
||||
}
|
||||
if (config.ui.showOnlyRelatedTags && (relatedTags.size > 0)) {
|
||||
tagList = tagList.filter(
|
||||
tag => tag.related
|
||||
if (config.ui.showOnlyRelatedTags && relatedTags.size > 0) {
|
||||
tagList = tagList.filter(tag => tag.related)
|
||||
}
|
||||
return tagList.map(tag => {
|
||||
return (
|
||||
<TagListItem
|
||||
name={tag.name}
|
||||
handleClickTagListItem={this.handleClickTagListItem.bind(this)}
|
||||
handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
|
||||
handleContextMenu={this.handleTagContextMenu.bind(this)}
|
||||
isActive={
|
||||
this.getTagActive(location.pathname, tag.name) ||
|
||||
colorPicker.tagName === tag.name
|
||||
}
|
||||
isRelated={tag.related}
|
||||
key={tag.name}
|
||||
count={tag.size}
|
||||
color={config.coloredTags[tag.name]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
tagList.map(tag => {
|
||||
return (
|
||||
<TagListItem
|
||||
name={tag.name}
|
||||
handleClickTagListItem={this.handleClickTagListItem.bind(this)}
|
||||
handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
|
||||
handleContextMenu={this.handleTagContextMenu.bind(this)}
|
||||
isActive={this.getTagActive(location.pathname, tag.name)}
|
||||
isRelated={tag.related}
|
||||
key={tag.name}
|
||||
count={tag.size}
|
||||
/>
|
||||
)
|
||||
})
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
getRelatedTags (activeTags, noteMap) {
|
||||
getRelatedTags(activeTags, noteMap) {
|
||||
if (activeTags.length === 0) {
|
||||
return new Set()
|
||||
}
|
||||
const relatedNotes = noteMap.map(
|
||||
note => ({key: note.key, tags: note.tags})
|
||||
).filter(
|
||||
note => activeTags.every(tag => note.tags.includes(tag))
|
||||
)
|
||||
const relatedNotes = noteMap
|
||||
.map(note => ({ key: note.key, tags: note.tags }))
|
||||
.filter(note => activeTags.every(tag => note.tags.includes(tag)))
|
||||
const relatedTags = new Set()
|
||||
relatedNotes.forEach(note => note.tags.map(tag => relatedTags.add(tag)))
|
||||
return relatedTags
|
||||
}
|
||||
|
||||
getTagActive (path, tag) {
|
||||
getTagActive(path, tag) {
|
||||
return this.getActiveTags(path).includes(tag)
|
||||
}
|
||||
|
||||
getActiveTags (path) {
|
||||
getActiveTags(path) {
|
||||
const pathSegments = path.split('/')
|
||||
const tags = pathSegments[pathSegments.length - 1]
|
||||
return (tags === 'alltags')
|
||||
? []
|
||||
: decodeURIComponent(tags).split(' ')
|
||||
return tags === 'alltags' ? [] : decodeURIComponent(tags).split(' ')
|
||||
}
|
||||
|
||||
handleClickTagListItem (name) {
|
||||
const { router } = this.context
|
||||
router.push(`/tags/${encodeURIComponent(name)}`)
|
||||
handleClickTagListItem(name) {
|
||||
const { dispatch } = this.props
|
||||
dispatch(push(`/tags/${encodeURIComponent(name)}`))
|
||||
}
|
||||
|
||||
handleSortTagsByChange (e) {
|
||||
handleSortTagsByChange(e) {
|
||||
const { dispatch } = this.props
|
||||
|
||||
const config = {
|
||||
@@ -292,9 +494,8 @@ class SideNav extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
handleClickNarrowToTag (tag) {
|
||||
const { router } = this.context
|
||||
const { location } = this.props
|
||||
handleClickNarrowToTag(tag) {
|
||||
const { dispatch, location } = this.props
|
||||
const listOfTags = this.getActiveTags(location.pathname)
|
||||
const indexOfTag = listOfTags.indexOf(tag)
|
||||
if (indexOfTag > -1) {
|
||||
@@ -302,73 +503,115 @@ class SideNav extends React.Component {
|
||||
} else {
|
||||
listOfTags.push(tag)
|
||||
}
|
||||
router.push(`/tags/${encodeURIComponent(listOfTags.join(' '))}`)
|
||||
dispatch(push(`/tags/${encodeURIComponent(listOfTags.join(' '))}`))
|
||||
}
|
||||
|
||||
emptyTrash (entries) {
|
||||
emptyTrash(entries) {
|
||||
const { dispatch } = this.props
|
||||
const deletionPromises = entries.map((note) => {
|
||||
const deletionPromises = entries.map(note => {
|
||||
return dataApi.deleteNote(note.storage, note.key)
|
||||
})
|
||||
const { confirmDeletion } = this.props.config.ui
|
||||
if (!confirmDeleteNote(confirmDeletion, true)) return
|
||||
Promise.all(deletionPromises)
|
||||
.then((arrayOfStorageAndNoteKeys) => {
|
||||
arrayOfStorageAndNoteKeys.forEach(({ storageKey, noteKey }) => {
|
||||
dispatch({ type: 'DELETE_NOTE', storageKey, noteKey })
|
||||
.then(arrayOfStorageAndNoteKeys => {
|
||||
arrayOfStorageAndNoteKeys.forEach(({ storageKey, noteKey }) => {
|
||||
dispatch({ type: 'DELETE_NOTE', storageKey, noteKey })
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Cannot Delete note: ' + err)
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Cannot Delete note: ' + err)
|
||||
})
|
||||
}
|
||||
|
||||
handleFilterButtonContextMenu (event) {
|
||||
handleFilterButtonContextMenu(event) {
|
||||
const { data } = this.props
|
||||
const trashedNotes = data.trashedSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
|
||||
const trashedNotes = data.trashedSet
|
||||
.toJS()
|
||||
.map(uniqueKey => data.noteMap.get(uniqueKey))
|
||||
context.popup([
|
||||
{ label: i18n.__('Empty Trash'), click: () => this.emptyTrash(trashedNotes) }
|
||||
{
|
||||
label: i18n.__('Empty Trash'),
|
||||
click: () => this.emptyTrash(trashedNotes)
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
render () {
|
||||
const { data, location, config, dispatch } = this.props
|
||||
render() {
|
||||
const { location, config } = this.props
|
||||
const { showSearch, searchText, colorPicker: colorPickerState } = this.state
|
||||
|
||||
let colorPicker
|
||||
if (colorPickerState.show) {
|
||||
colorPicker = (
|
||||
<ColorPicker
|
||||
color={colorPickerState.color}
|
||||
targetRect={colorPickerState.targetRect}
|
||||
onConfirm={this.handleColorPickerConfirm}
|
||||
onCancel={this.dismissColorPicker}
|
||||
onReset={this.handleColorPickerReset}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const isFolded = config.isSideNavFolded
|
||||
|
||||
const storageList = data.storageMap.map((storage, key) => {
|
||||
const SortableStorageItem = SortableContainer(StorageItem)
|
||||
return <SortableStorageItem
|
||||
key={storage.key}
|
||||
storage={storage}
|
||||
data={data}
|
||||
location={location}
|
||||
isFolded={isFolded}
|
||||
dispatch={dispatch}
|
||||
onSortEnd={this.onSortEnd.bind(this)(storage)}
|
||||
useDragHandle
|
||||
config={config}
|
||||
/>
|
||||
})
|
||||
const style = {}
|
||||
if (!isFolded) style.width = this.props.width
|
||||
const isTagActive = location.pathname.match(/tag/)
|
||||
const isTagActive = /tag/.test(location.pathname)
|
||||
|
||||
const navSearch = (
|
||||
<div styleName='search' style={{ maxHeight: showSearch ? '3em' : '0' }}>
|
||||
<input
|
||||
styleName='search-input'
|
||||
type='text'
|
||||
onChange={this.handleSearchInputChange}
|
||||
value={searchText}
|
||||
placeholder={i18n.__('Filter tags/folders...')}
|
||||
/>
|
||||
<img
|
||||
styleName='search-clear'
|
||||
src='../resources/icon/icon-x.svg'
|
||||
onClick={this.handleSearchInputClear}
|
||||
/>
|
||||
{isFolded && (
|
||||
<img
|
||||
styleName='search-folded'
|
||||
src='../resources/icon/icon-search-active.svg'
|
||||
onClick={this.handleSearchButtonClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className='SideNav'
|
||||
<div
|
||||
className='SideNav'
|
||||
styleName={isFolded ? 'root--folded' : 'root'}
|
||||
tabIndex='1'
|
||||
style={style}
|
||||
>
|
||||
<div styleName='top'>
|
||||
<div styleName='switch-buttons'>
|
||||
<ListButton onClick={this.handleSwitchFoldersButtonClick.bind(this)} isTagActive={isTagActive} />
|
||||
<TagButton onClick={this.handleSwitchTagsButtonClick.bind(this)} isTagActive={isTagActive} />
|
||||
<ListButton
|
||||
onClick={this.handleSwitchFoldersButtonClick.bind(this)}
|
||||
isTagActive={isTagActive}
|
||||
/>
|
||||
<TagButton
|
||||
onClick={this.handleSwitchTagsButtonClick.bind(this)}
|
||||
isTagActive={isTagActive}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div styleName='extra-buttons'>
|
||||
<SearchButton
|
||||
onClick={this.handleSearchButtonClick}
|
||||
isActive={showSearch}
|
||||
/>
|
||||
<PreferenceButton onClick={this.handleMenuButtonClick} />
|
||||
</div>
|
||||
</div>
|
||||
{this.SideNavComponent(isFolded, storageList)}
|
||||
{navSearch}
|
||||
{this.SideNavComponent(isFolded)}
|
||||
{colorPicker}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user