admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

1909 object edit add icon section (#1995)

Browse Source 
* wip

* wip

* wip

* wip

* wip

* remove hardcoded values and use theme values

* add styles to StyledContainer

* fix iconPicker bug

* wip

* refactor IconPicker to include IconButton

* close IconPicker on click outside

* close IconPicker on escape and enter

* refactor to use DropDownMenu

* refactor to use DropDownMenu

* modify default icon

* Refactor to use useIconPicker hook

* fix WithSearch story

* reinitialized searchString state on close

* create and update stories for the iconPicker

* remove comments

* use theme for gap

* remove align-self

* fix typo in icon

* fix type any

* fix merge conflicts

* remove experimental css properties
This commit is contained in:
bosiraphael
2023-10-13 15:29:30 +02:00
committed by GitHub
parent 818efd72d0
commit 30aeea9eec
9 changed files with 287 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
front/src/pages/settings/SettingsNewObject.tsx
View File

@ -1,25 +1,41 @@
import styled from '@emotion/styled';
import { SettingsIconSection } from '@/settings/components/SettingsIconSection';
import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
import { Breadcrumb } from '@/ui/breadcrumb/components/Breadcrumb';
import { IconSettings } from '@/ui/icon';
import { useIconPicker } from '@/ui/input/hooks/useIconPicker';
import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
const StyledContainer = styled.div`
align-items: flex-start;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(8)};
height: fit-content;
padding: ${({ theme }) => theme.spacing(8)};
width: ${objectSettingsWidth};
`;
export const SettingsNewObject = () => (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{ children: 'New' },
]}
/>
</StyledContainer>
</SubMenuTopBarContainer>
);
export const SettingsNewObject = () => {
const { Icon, iconKey, setIconPicker } = useIconPicker();
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{ children: 'New' },
]}
/>
<SettingsIconSection
Icon={Icon}
iconKey={iconKey}
setIconPicker={setIconPicker}
/>
</StyledContainer>
</SubMenuTopBarContainer>
);
};