inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-05-03 13:58:47 +00:00
Code

[PUI] Search tweak (#8381)

Browse Source 
* Cleanup buttons and add Tooltip

* Clearer separation

* Link cleanup
This commit is contained in:
Oliver 2024-10-29 01:31:19 +11:00 committed by GitHub
parent 234ee2b40f
commit 89946aed15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/frontend/src/components/nav/SearchDrawer.tsx
View File

@ -14,7 +14,8 @@ import {
Space, Space,
Stack, Stack,
Text, Text,
TextInput TextInput,
Tooltip
} from '@mantine/core'; } from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks'; import { useDebouncedValue } from '@mantine/hooks';
import { import {
@ -69,8 +70,8 @@ function QueryResultGroup({
return ( return (
<Paper <Paper
withBorder
shadow="sm" shadow="sm"
radius="xs"
p="md" p="md"
key={`paper-${query.model}`} key={`paper-${query.model}`}
aria-label={`search-group-${query.model}`} aria-label={`search-group-${query.model}`}
@ -100,10 +101,11 @@ function QueryResultGroup({
<Stack aria-label={`search-group-results-${query.model}`}> <Stack aria-label={`search-group-results-${query.model}`}>
{query.results.results.map((result: any) => ( {query.results.results.map((result: any) => (
<Anchor <Anchor
underline="never"
onClick={(event: any) => onClick={(event: any) =>
onResultClick(query.model, result.pk, event) onResultClick(query.model, result.pk, event)
} }
key={result.pk} key={`result-${query.model}-${result.pk}`}
> >
<RenderInstance instance={result} model={query.model} /> <RenderInstance instance={result} model={query.model} />
</Anchor> </Anchor>
@ -376,7 +378,6 @@ export function SearchDrawer({
<TextInput <TextInput
aria-label="global-search-input" aria-label="global-search-input"
placeholder={t`Enter search text`} placeholder={t`Enter search text`}
radius="xs"
value={value} value={value}
onChange={(event) => setValue(event.currentTarget.value)} onChange={(event) => setValue(event.currentTarget.value)}
leftSection={<IconSearch size="0.8rem" />} leftSection={<IconSearch size="0.8rem" />}
@ -387,19 +388,22 @@ export function SearchDrawer({
} }
styles={{ root: { width: '100%' } }} styles={{ root: { width: '100%' } }}
/> />
<ActionIcon <Tooltip label={t`Refresh search results`} position="bottom-end">
size="lg" <ActionIcon
variant="outline" size="lg"
radius="xs" variant="transparent"
onClick={() => searchQuery.refetch()} onClick={() => searchQuery.refetch()}
> >
<IconRefresh /> <IconRefresh />
</ActionIcon> </ActionIcon>
</Tooltip>
<Menu> <Menu>
<Menu.Target> <Menu.Target>
<ActionIcon size="lg" variant="outline" radius="xs"> <Tooltip label={t`Search Options`} position="bottom-end">
<IconSettings /> <ActionIcon size="lg" variant="transparent">
</ActionIcon> <IconSettings />
</ActionIcon>
</Tooltip>
</Menu.Target> </Menu.Target>
<Menu.Dropdown> <Menu.Dropdown>
<Menu.Label>{t`Search Options`}</Menu.Label> <Menu.Label>{t`Search Options`}</Menu.Label>
@ -410,7 +414,6 @@ export function SearchDrawer({
onChange={(event) => onChange={(event) =>
setSearchRegex(event.currentTarget.checked) setSearchRegex(event.currentTarget.checked)
} }
radius="sm"
/> />
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>
@ -420,7 +423,6 @@ export function SearchDrawer({
onChange={(event) => onChange={(event) =>
setSearchWhole(event.currentTarget.checked) setSearchWhole(event.currentTarget.checked)
} }
radius="sm"
/> />
</Menu.Item> </Menu.Item>
</Menu.Dropdown> </Menu.Dropdown>