feat: move search bar back to notes column (#1408)
This commit is contained in:
@@ -194,6 +194,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
|
|||||||
noteTagsController={viewControllerManager.noteTagsController}
|
noteTagsController={viewControllerManager.noteTagsController}
|
||||||
notesController={viewControllerManager.notesController}
|
notesController={viewControllerManager.notesController}
|
||||||
selectionController={viewControllerManager.selectionController}
|
selectionController={viewControllerManager.selectionController}
|
||||||
|
searchOptionsController={viewControllerManager.searchOptionsController}
|
||||||
/>
|
/>
|
||||||
<NoteGroupView application={application} />
|
<NoteGroupView application={application} />
|
||||||
</ResponsivePaneProvider>
|
</ResponsivePaneProvider>
|
||||||
|
|||||||
@@ -21,6 +21,8 @@ import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
|
|||||||
import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
|
import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
|
||||||
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
|
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
|
||||||
import { StreamingFileReader } from '@standardnotes/filepicker'
|
import { StreamingFileReader } from '@standardnotes/filepicker'
|
||||||
|
import SearchBar from '../SearchBar/SearchBar'
|
||||||
|
import { SearchOptionsController } from '@/Controllers/SearchOptionsController'
|
||||||
import { classNames } from '@/Utils/ConcatenateClassNames'
|
import { classNames } from '@/Utils/ConcatenateClassNames'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@@ -33,6 +35,7 @@ type Props = {
|
|||||||
noteTagsController: NoteTagsController
|
noteTagsController: NoteTagsController
|
||||||
notesController: NotesController
|
notesController: NotesController
|
||||||
selectionController: SelectedItemsController
|
selectionController: SelectedItemsController
|
||||||
|
searchOptionsController: SearchOptionsController
|
||||||
}
|
}
|
||||||
|
|
||||||
const ContentListView: FunctionComponent<Props> = ({
|
const ContentListView: FunctionComponent<Props> = ({
|
||||||
@@ -45,6 +48,7 @@ const ContentListView: FunctionComponent<Props> = ({
|
|||||||
noteTagsController,
|
noteTagsController,
|
||||||
notesController,
|
notesController,
|
||||||
selectionController,
|
selectionController,
|
||||||
|
searchOptionsController,
|
||||||
}) => {
|
}) => {
|
||||||
const { toggleAppPane } = useResponsiveAppPane()
|
const { toggleAppPane } = useResponsiveAppPane()
|
||||||
|
|
||||||
@@ -215,6 +219,7 @@ const ContentListView: FunctionComponent<Props> = ({
|
|||||||
isFilesSmartView={isFilesSmartView}
|
isFilesSmartView={isFilesSmartView}
|
||||||
optionsSubtitle={optionsSubtitle}
|
optionsSubtitle={optionsSubtitle}
|
||||||
/>
|
/>
|
||||||
|
<SearchBar itemListController={itemListController} searchOptionsController={searchOptionsController} />
|
||||||
<NoAccountWarning
|
<NoAccountWarning
|
||||||
accountMenuController={accountMenuController}
|
accountMenuController={accountMenuController}
|
||||||
noAccountWarningController={noAccountWarningController}
|
noAccountWarningController={noAccountWarningController}
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
|
|||||||
import { observer } from 'mobx-react-lite'
|
import { observer } from 'mobx-react-lite'
|
||||||
import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||||
import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
|
import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
|
||||||
import SearchBar from '@/Components/SearchBar/SearchBar'
|
|
||||||
import ResponsivePaneContent from '@/Components/ResponsivePane/ResponsivePaneContent'
|
import ResponsivePaneContent from '@/Components/ResponsivePane/ResponsivePaneContent'
|
||||||
import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
|
import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
|
||||||
import { classNames } from '@/Utils/ConcatenateClassNames'
|
import { classNames } from '@/Utils/ConcatenateClassNames'
|
||||||
@@ -53,11 +52,6 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
|
|||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
>
|
||||||
<ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content">
|
<ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content">
|
||||||
<SearchBar
|
|
||||||
itemListController={viewControllerManager.itemListController}
|
|
||||||
searchOptionsController={viewControllerManager.searchOptionsController}
|
|
||||||
selectedViewTitle={viewControllerManager.navigationController.selected?.title}
|
|
||||||
/>
|
|
||||||
<div className={'section-title-bar'}>
|
<div className={'section-title-bar'}>
|
||||||
<div className="section-title-bar-header">
|
<div className="section-title-bar-header">
|
||||||
<div className="title text-sm">
|
<div className="title text-sm">
|
||||||
|
|||||||
@@ -8,12 +8,11 @@ import DecoratedInput from '../Input/DecoratedInput'
|
|||||||
import { observer } from 'mobx-react-lite'
|
import { observer } from 'mobx-react-lite'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
selectedViewTitle?: string
|
|
||||||
itemListController: ItemListController
|
itemListController: ItemListController
|
||||||
searchOptionsController: SearchOptionsController
|
searchOptionsController: SearchOptionsController
|
||||||
}
|
}
|
||||||
|
|
||||||
const SearchBar = ({ itemListController, searchOptionsController, selectedViewTitle = 'Notes' }: Props) => {
|
const SearchBar = ({ itemListController, searchOptionsController }: Props) => {
|
||||||
const searchInputRef = useRef<HTMLInputElement>(null)
|
const searchInputRef = useRef<HTMLInputElement>(null)
|
||||||
|
|
||||||
const { noteFilterText, setNoteFilterText, clearFilterText, onFilterEnter } = itemListController
|
const { noteFilterText, setNoteFilterText, clearFilterText, onFilterEnter } = itemListController
|
||||||
@@ -45,15 +44,14 @@ const SearchBar = ({ itemListController, searchOptionsController, selectedViewTi
|
|||||||
}, [clearFilterText])
|
}, [clearFilterText])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="px-2.5 pt-4 pb-0.5" role="search">
|
<div className="pt-3 pb-0.5" role="search">
|
||||||
<DecoratedInput
|
<DecoratedInput
|
||||||
autocomplete={false}
|
autocomplete={false}
|
||||||
title="Searches notes and files in the currently selected tag"
|
|
||||||
className={{
|
className={{
|
||||||
container: 'px-1',
|
container: 'px-1',
|
||||||
input: 'placeholder:text-passive-0',
|
input: 'placeholder:text-passive-0',
|
||||||
}}
|
}}
|
||||||
placeholder={`Search in ${selectedViewTitle}`}
|
placeholder={'Search...'}
|
||||||
value={noteFilterText}
|
value={noteFilterText}
|
||||||
ref={searchInputRef}
|
ref={searchInputRef}
|
||||||
onBlur={onSearchBlur}
|
onBlur={onSearchBlur}
|
||||||
|
|||||||
Reference in New Issue
Block a user