diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index 41e679ca9..b028c90df 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -1,5 +1,5 @@ .menu - margin-bottom 30px + margin-bottom 20px .menu-button navButtonColor() diff --git a/browser/components/StorageList.styl b/browser/components/StorageList.styl index 474f896b4..61fe195c7 100644 --- a/browser/components/StorageList.styl +++ b/browser/components/StorageList.styl @@ -1,7 +1,5 @@ .storageList - absolute left right - bottom 37px - top 180px + margin-bottom 37px overflow-y auto .storageList-folded diff --git a/browser/main/SideNav/PreferenceButton.styl b/browser/main/SideNav/PreferenceButton.styl index 33422b4f6..c404a6045 100644 --- a/browser/main/SideNav/PreferenceButton.styl +++ b/browser/main/SideNav/PreferenceButton.styl @@ -1,8 +1,5 @@ .top-menu-preference navButtonColor() - position absolute - top 22px - right 10px width 2em background-color transparent &:hover diff --git a/browser/main/SideNav/SearchButton.js b/browser/main/SideNav/SearchButton.js new file mode 100644 index 000000000..72d3cc780 --- /dev/null +++ b/browser/main/SideNav/SearchButton.js @@ -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 }) => ( + +) + +SearchButton.propTypes = { + onClick: PropTypes.func.isRequired, + isActive: PropTypes.bool +} + +export default CSSModules(SearchButton, styles) diff --git a/browser/main/SideNav/SearchButton.styl b/browser/main/SideNav/SearchButton.styl new file mode 100644 index 000000000..76d4b806b --- /dev/null +++ b/browser/main/SideNav/SearchButton.styl @@ -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 diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 86b6caebc..b2a8a0d24 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -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,17 +136,35 @@ .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 @@ -119,8 +175,13 @@ apply-theme(theme) background-color get-theme-var(theme, 'backgroundColor') border-right 1px solid get-theme-var(theme, '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') + for theme in 'solarized-dark' 'dracula' apply-theme(theme) for theme in $themes - apply-theme(theme) \ No newline at end of file + apply-theme(theme) diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index dcda9a272..5fd7b93cd 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -14,6 +14,7 @@ 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' @@ -38,13 +39,18 @@ class SideNav extends React.Component { show: false, color: null, tagName: null, - targetRect: 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() { @@ -117,6 +123,26 @@ class SideNav extends React.Component { openModal(PreferencesModal) } + handleSearchButtonClick(e) { + const { showSearch } = this.state + this.setState({ + showSearch: !showSearch, + searchText: '' + }) + } + + handleSearchInputClear(e) { + this.setState({ + searchText: '' + }) + } + + handleSearchInputChange(e) { + this.setState({ + searchText: e.target.value + }) + } + handleHomeButtonClick(e) { const { dispatch } = this.props dispatch(push('/home')) @@ -211,12 +237,19 @@ class SideNav extends React.Component { 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 }) + + if (showSearch && searchText.length === 0) { + this.setState({ + showSearch: false + }) + } } handleTrashedButtonClick(e) { @@ -243,8 +276,9 @@ class SideNav extends React.Component { } } - SideNavComponent(isFolded, storageList) { - const { location, data, config } = this.props + 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$/) @@ -257,6 +291,33 @@ class SideNav extends React.Component { !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 ( + + ) + }) + component = (
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 => { @@ -455,26 +521,8 @@ class SideNav extends React.Component { } render() { - const { data, location, config, dispatch } = this.props - const { colorPicker: colorPickerState } = this.state - - const isFolded = config.isSideNavFolded - - const storageList = data.storageMap.map((storage, key) => { - const SortableStorageItem = SortableContainer(StorageItem) - return ( - - ) - }) + const { location, config } = this.props + const { showSearch, searchText, colorPicker: colorPickerState } = this.state let colorPicker if (colorPickerState.show) { @@ -489,9 +537,35 @@ class SideNav extends React.Component { ) } + const isFolded = config.isSideNavFolded const style = {} if (!isFolded) style.width = this.props.width const isTagActive = /tag/.test(location.pathname) + + const navSearch = ( +
+ + + {isFolded && ( + + )} +
+ ) + return (
-
- +
+ +
- {this.SideNavComponent(isFolded, storageList)} + {navSearch} + {this.SideNavComponent(isFolded)} {colorPicker}
) diff --git a/locales/da.json b/locales/da.json index f2459fd53..932b19394 100644 --- a/locales/da.json +++ b/locales/da.json @@ -159,6 +159,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/de.json b/locales/de.json index d440dd97e..22f159572 100644 --- a/locales/de.json +++ b/locales/de.json @@ -215,6 +215,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/ordner...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/en.json b/locales/en.json index 823e901c9..dcc9dd5bf 100644 --- a/locales/en.json +++ b/locales/en.json @@ -190,6 +190,7 @@ "New notes are tagged with the filtering tags": "New notes are tagged with the filtering tags", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note", "Enable Auto Update": "Enable Auto Update" diff --git a/locales/es-ES.json b/locales/es-ES.json index 7e569a157..1495b6be9 100644 --- a/locales/es-ES.json +++ b/locales/es-ES.json @@ -161,6 +161,7 @@ "Show menu bar": "Mostrar barra del menú", "Auto Detect": "Detección automática", "Snippet Default Language": "Lenguaje por defecto de los fragmentos de código", + "Filter tags/folders...": "filter etiquetas/carpeta...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/fa.json b/locales/fa.json index 07f8f6f04..1ebd8789d 100644 --- a/locales/fa.json +++ b/locales/fa.json @@ -163,6 +163,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/fr.json b/locales/fr.json index ebbdcae36..122b69063 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -175,6 +175,7 @@ "Snippet prefix": "Préfixe du snippet", "Delete Note": "Supprimer la note", "New notes are tagged with the filtering tags": "Les nouvelles notes sont taggées avec les tags de filtrage", + "Filter tags/folders...": "filtrage tags/dossier...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/hu.json b/locales/hu.json index bc57e27c5..3fa49b714 100644 --- a/locales/hu.json +++ b/locales/hu.json @@ -183,6 +183,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/it.json b/locales/it.json index 069470804..6998fb177 100644 --- a/locales/it.json +++ b/locales/it.json @@ -163,6 +163,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/ja.json b/locales/ja.json index 036bfe065..53abf7b01 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -222,6 +222,7 @@ "Spellcheck disabled": "スペルチェック無効", "Show menu bar": "メニューバーを表示", "Auto Detect": "自動検出", + "Filter tags/folders...": "タグ/フォルダをフィルタ...", "Enable HTML label in mermaid flowcharts": "mermaid flowchartでHTMLラベルを有効にする ⚠ このオプションには潜在的なXSSの危険性があります。", "Wrap line in Snippet Note": "行を右端で折り返す（Snippet Note）" } diff --git a/locales/ko.json b/locales/ko.json index 2ccbad72e..1bb8c93d9 100644 --- a/locales/ko.json +++ b/locales/ko.json @@ -166,6 +166,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/no.json b/locales/no.json index b7c46089e..1ed7fa490 100644 --- a/locales/no.json +++ b/locales/no.json @@ -158,6 +158,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/pl.json b/locales/pl.json index 4a1bdac69..44d338314 100644 --- a/locales/pl.json +++ b/locales/pl.json @@ -168,6 +168,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/pt-BR.json b/locales/pt-BR.json index 06dd442fd..ace5dfcc8 100644 --- a/locales/pt-BR.json +++ b/locales/pt-BR.json @@ -159,6 +159,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/pt-PT.json b/locales/pt-PT.json index c514ba4e8..a9e91bf89 100644 --- a/locales/pt-PT.json +++ b/locales/pt-PT.json @@ -158,6 +158,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/ru.json b/locales/ru.json index 791bd228f..2a350f0e5 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -156,6 +156,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/sq.json b/locales/sq.json index d217600d8..fac4a6a6a 100644 --- a/locales/sq.json +++ b/locales/sq.json @@ -158,6 +158,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/th.json b/locales/th.json index a62dcf537..721493f9e 100644 --- a/locales/th.json +++ b/locales/th.json @@ -185,6 +185,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/tr.json b/locales/tr.json index 5cd43426a..ddb726094 100644 --- a/locales/tr.json +++ b/locales/tr.json @@ -158,6 +158,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/locales/zh-CN.json b/locales/zh-CN.json old mode 100644 new mode 100755 index 4ac38cf39..070b66338 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -223,6 +223,7 @@ "Spellcheck disabled": "拼写检查已禁用", "Show menu bar": "显示菜单栏", "Auto Detect": "自动检测", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "在 mermaid flowcharts 中启用 HTML 标签 ⚠ 这个选项可能会产生 XSS", "Wrap line in Snippet Note": "在 Snippet Note 里换行", "Toggle Editor Mode": "切换编辑模式", diff --git a/locales/zh-TW.json b/locales/zh-TW.json old mode 100644 new mode 100755 index 6ae9f3687..f2e208dca --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -167,6 +167,7 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders...", "Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.", "Wrap line in Snippet Note": "Wrap line in Snippet Note" } diff --git a/resources/icon/icon-search-active.svg b/resources/icon/icon-search-active.svg new file mode 100644 index 000000000..f8cace738 --- /dev/null +++ b/resources/icon/icon-search-active.svg @@ -0,0 +1,14 @@ + + + + + + + + \ No newline at end of file diff --git a/resources/icon/icon-search.svg b/resources/icon/icon-search.svg new file mode 100644 index 000000000..d2181a34b --- /dev/null +++ b/resources/icon/icon-search.svg @@ -0,0 +1,14 @@ + + + + + + + + \ No newline at end of file