Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 23:15:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

💄 Improve edit mode UX

Browse Source
This commit is contained in:
Manuel Ruwe
2023-01-01 17:26:09 +01:00
parent f23c317ef1
commit aa31824169
3 changed files with 101 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
View File

@@ -1,29 +1,59 @@
import { ActionIcon, Tooltip } from '@mantine/core';
import { ActionIcon, Button, Tooltip } from '@mantine/core';
import { openContextModal } from '@mantine/modals';
import { IconApps } from '@tabler/icons';
import { useTranslation } from 'next-i18next';
export const AddElementAction = () => {
interface AddElementActionProps {
type: 'action-icon' | 'button';
}
export const AddElementAction = ({ type }: AddElementActionProps) => {
const { t } = useTranslation('layout/element-selector/selector');
return (
<Tooltip withinPortal label={t('actionIcon.tooltip')}>
<ActionIcon
variant="default"
radius="md"
size="xl"
color="blue"
onClick={() =>
openContextModal({
modal: 'selectElement',
title: t('modal.title'),
size: 'xl',
innerProps: {},
})
}
>
<IconApps />
</ActionIcon>
</Tooltip>
);
switch (type) {
case 'button':
return (
<Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
<Button
variant="default"
radius="md"
color="blue"
style={{ height: 43 }}
onClick={() =>
openContextModal({
modal: 'selectElement',
title: t('modal.title'),
size: 'xl',
innerProps: {},
})
}
>
<IconApps />
</Button>
</Tooltip>
);
case 'action-icon':
return (
<Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
<ActionIcon
variant="default"
radius="md"
size="xl"
color="blue"
onClick={() =>
openContextModal({
modal: 'selectElement',
title: t('modal.title'),
size: 'xl',
innerProps: {},
})
}
>
<IconApps />
</ActionIcon>
</Tooltip>
);
default:
return null;
}
};