Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixing console errors and adding category modal

Browse Source
This commit is contained in:
ajnart
2023-01-02 01:44:24 +09:00
parent 8a1b44fd27
commit 38815d754f
7 changed files with 94 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
View File

@@ -59,14 +59,14 @@ export const ToggleEditModeAction = () => {
);
return (
<Tooltip label={t('tooltip')} withinPortal>
<Popover
opened={enabled && !smallerThanSm && !popoverManuallyHidden}
width={250}
zIndex={199}
withArrow
>
<Popover.Target>
<Popover
opened={enabled && !smallerThanSm && !popoverManuallyHidden}
width={250}
zIndex={199}
withArrow
>
<Popover.Target>
<Tooltip label={t('tooltip')} withinPortal>
{smallerThanSm ? (
enabled ? (
<Group style={{ flexWrap: 'nowrap' }}>
@@ -84,22 +84,22 @@ export const ToggleEditModeAction = () => {
) : (
<ToggleButtonDesktop />
)}
</Popover.Target>
</Tooltip>
</Popover.Target>
<Popover.Dropdown p={4} px={6}>
<div style={{ position: 'absolute', top: 2, right: 2 }}>
<ActionIcon onClick={() => setPopoverManuallyHidden(true)}>
<IconX size={18} />
</ActionIcon>
</div>
<Text align="center" size="sm">
<Text weight="bold">{t('popover.title')}</Text>
<Text>
<Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />
</Text>
<Popover.Dropdown p={4} px={6}>
<div style={{ position: 'absolute', top: 2, right: 2 }}>
<ActionIcon onClick={() => setPopoverManuallyHidden(true)}>
<IconX size={18} />
</ActionIcon>
</div>
<Text align="center" size="sm">
<Text weight="bold">{t('popover.title')}</Text>
<Text>
<Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />
</Text>
</Popover.Dropdown>
</Popover>
</Tooltip>
</Text>
</Popover.Dropdown>
</Popover>
);
};

56
src/components/layout/header/SettingsMenu.tsx
View File

@@ -13,35 +13,33 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
return (
<>
<Tooltip label="Open Menu">
<Menu width={250}>
<Menu.Target>
<ActionIcon variant="default" radius="md" size="xl" color="blue">
<IconMenu2 />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<ColorSchemeSwitch />
<Menu.Divider />
<Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
{t('sections.settings')}
</Menu.Item>
<Menu.Item
icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
rightSection={
newVersionAvailable && (
<Badge variant="light" color="blue">
New
</Badge>
)
}
onClick={() => aboutModal.open()}
>
{t('about')}
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Tooltip>
<Menu width={250}>
<Menu.Target>
<ActionIcon variant="default" radius="md" size="xl" color="blue">
<IconMenu2 />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<ColorSchemeSwitch />
<Menu.Divider />
<Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
{t('sections.settings')}
</Menu.Item>
<Menu.Item
icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
rightSection={
newVersionAvailable && (
<Badge variant="light" color="blue">
New
</Badge>
)
}
onClick={() => aboutModal.open()}
>
{t('about')}
</Menu.Item>
</Menu.Dropdown>
</Menu>
<SettingsDrawer
opened={drawerOpened}
closeDrawer={drawer.close}