prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Search improvements

Browse source
This commit is contained in:
Jackson Harper 2023-03-03 19:15:03 +08:00
parent ac5c3e0176
commit cfc538ff99
1 changed files with 10 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View file

@ -256,7 +256,8 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
ref={inputRef}
type="text"
value={searchTerm}
placeholder="Search"
autoFocus={!!props.compact}
placeholder="Search keywords or labels"
onFocus={(event) => {
event.target.select()
setFocused(true)
@ -269,52 +270,7 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
}}
/>
</form>
{searchTerm && searchTerm.length && props.compact && (
<Button
style="plainIcon"
onClick={(event) => {
event.preventDefault()
setSearchTerm('')
props.applySearchQuery('')
inputRef.current?.blur()
}}
css={{
display: 'flex',
flexDirection: 'row',
p: '4px',
mx: '4px',
fontSize: '12px',
alignItems: 'center',
// bg: '#E1E1E1',
}}
>
clear
</Button>
)}
{focused || props.compact ? (
// <Button
// style="plainIcon"
// onClick={(event) => {
// event.preventDefault()
// setSearchTerm('')
// props.applySearchQuery('')
// inputRef.current?.blur()
// }}
// css={{
// display: 'flex',
// flexDirection: 'row',
// mr: '8px',
// height: '100%',
// alignItems: 'center',
// minWidth: '28px',
// }}
// >
// <X
// width={16}
// height={16}
// color={theme.colors.grayTextContrast.toString()}
// />
// </Button>
{searchTerm && searchTerm.length ? (
<Box
css={{
py: '15px',
@ -330,15 +286,10 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
color: '#898989',
}}
onClick={(event) => {
// In compact mode this closes the search, in fullscreen mode it clears the search
if (props.compact) {
props.onClose && props.onClose()
} else {
event.preventDefault()
setSearchTerm('')
props.applySearchQuery('')
inputRef.current?.blur()
}
event.preventDefault()
setSearchTerm('')
props.applySearchQuery('')
inputRef.current?.blur()
}}
tabIndex={-1}
>
@ -363,10 +314,9 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
height: '28px',
color: '#898989',
}}
// onClick={() =>
// requestAnimationFrame(() => inputRef?.current?.focus())
// }
// we can make it unreachable via keyboard as we have the same message for the SR label
onClick={() =>
requestAnimationFrame(() => inputRef?.current?.focus())
}
tabIndex={-1}
>
<kbd aria-hidden>/</kbd>