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

Give search box more space on mobile

Browse source
This commit is contained in:
Jackson Harper 2024-02-29 15:45:41 +08:00
parent 39f8d5767a
commit 69113e429c
1 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -134,18 +134,26 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
}
const HeaderControls = (props: LibraryHeaderProps): JSX.Element => {
const [searchBoxFocused, setSearchBoxFocused] = useState(false)
return (
<>
<SpanBox
css={{
display: 'none',
'@mdDown': { display: 'flex' },
}}
>
<MenuHeaderButton {...props} />
</SpanBox>
{!searchBoxFocused && (
<SpanBox
css={{
display: 'none',
'@mdDown': { display: 'flex' },
}}
>
<MenuHeaderButton {...props} />
</SpanBox>
)}
<SearchBox {...props} />
<SearchBox
{...props}
searchBoxFocused={searchBoxFocused}
setSearchBoxFocused={setSearchBoxFocused}
/>
<SpanBox css={{ display: 'flex', ml: 'auto', gap: '10px' }}>
{userHasFeature(props.viewer, 'ai-summaries') && (
@ -242,9 +250,13 @@ export function MenuHeaderButton(props: MenuHeaderButtonProps): JSX.Element {
)
}
export function SearchBox(props: LibraryHeaderProps): JSX.Element {
type SearchBoxProps = LibraryHeaderProps & {
searchBoxFocused: boolean
setSearchBoxFocused: (show: boolean) => void
}
export function SearchBox(props: SearchBoxProps): JSX.Element {
const inputRef = useRef<HTMLInputElement | null>(null)
const [focused, setFocused] = useState(false)
const [searchTerm, setSearchTerm] = useState(props.searchTerm ?? '')
useEffect(() => {
@ -271,7 +283,7 @@ export function SearchBox(props: LibraryHeaderProps): JSX.Element {
maxWidth: '521px',
bg: '$thLibrarySearchbox',
borderRadius: '6px',
boxShadow: focused
boxShadow: props.searchBoxFocused
? 'none'
: '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);',
}}
@ -305,7 +317,7 @@ export function SearchBox(props: LibraryHeaderProps): JSX.Element {
alignment="center"
distribution="start"
css={{
border: focused
border: props.searchBoxFocused
? '2px solid $searchActiveOutline'
: '2px solid transparent',
borderTopRightRadius: '6px',
@ -330,10 +342,10 @@ export function SearchBox(props: LibraryHeaderProps): JSX.Element {
placeholder="Search keywords or labels"
onFocus={(event) => {
event.target.select()
setFocused(true)
props.setSearchBoxFocused(true)
}}
onBlur={() => {
setFocused(false)
props.setSearchBoxFocused(false)
}}
onChange={(event) => {
setSearchTerm(event.target.value)