feat: move search bar back to notes column (#1408)

This commit is contained in:
Aman Harwara
2022-08-17 19:12:40 +05:30
committed by GitHub
parent 163cc8ce8a
commit 3d1dc8f38a
4 changed files with 9 additions and 11 deletions

View File

@@ -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>

View File

@@ -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}

View File

@@ -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">

View File

@@ -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}