Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-02-07 07:09:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: icon picker keyboard interactions (#1666)

Browse Source
This commit is contained in:
Meier Lukas
2024-12-15 15:31:45 +01:00
committed by GitHub
parent 8ca00161fa
commit 82ec77d2da
2 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/nextjs/src/components/icons/picker/icon-picker.module.css Normal file
View File

@@ -0,0 +1,3 @@
[data-combobox-selected="true"] .iconCard {
border-color: var(--mantine-primary-color-6);
}

64
apps/nextjs/src/components/icons/picker/icon-picker.tsx
View File

@@ -20,6 +20,8 @@ import { useDebouncedValue } from "@mantine/hooks";
import { clientApi } from "@homarr/api/client";
import { useScopedI18n } from "@homarr/translation/client";
import classes from "./icon-picker.module.css";
interface IconPickerProps {
initialValue?: string;
onChange: (iconUrl: string) => void;
@@ -49,35 +51,43 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
const totalOptions = data?.icons.reduce((acc, group) => acc + group.icons.length, 0) ?? 0;
const groups = data?.icons.map((group) => {
const options = group.icons.map((item) => (
<UnstyledButton
onClick={() => {
const value = item.url;
startTransition(() => {
setValue(value);
setPreviewUrl(value);
setSearch(value);
onChange(value);
combobox.closeDropdown();
});
}}
<Combobox.Option
key={item.id}
value={item.url}
p={0}
h="calc(2*var(--mantine-spacing-sm)+25px)"
w="calc(2*var(--mantine-spacing-sm)+25px)"
>
<Indicator label="SVG" disabled={!item.url.endsWith(".svg")} size={16}>
<Card
p="sm"
pos="relative"
style={{
overflow: "visible",
cursor: "pointer",
}}
withBorder
>
<Box w={25} h={25}>
<Image src={item.url} w={25} h={25} radius="md" />
</Box>
</Card>
</Indicator>
</UnstyledButton>
<UnstyledButton
onClick={() => {
const value = item.url;
startTransition(() => {
setValue(value);
setPreviewUrl(value);
setSearch(value);
onChange(value);
combobox.closeDropdown();
});
}}
>
<Indicator label="SVG" disabled={!item.url.endsWith(".svg")} size={16}>
<Card
p="sm"
pos="relative"
style={{
overflow: "visible",
cursor: "pointer",
}}
className={classes.iconCard}
withBorder
>
<Box w={25} h={25}>
<Image src={item.url} w={25} h={25} radius="md" />
</Box>
</Card>
</Indicator>
</UnstyledButton>
</Combobox.Option>
));
return (