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

1761 objects settings add a cover image (#2096)

Browse Source 
* add image

* overflow hidden

* add close button

* add animation to cover image

* use cookie to store user preference

* refactor to have a reusable component called AnimatedFadeOut

* corrected close button position

* modified according to comments
This commit is contained in:
bosiraphael
2023-10-18 13:02:44 +02:00
committed by GitHub
parent a1a2309140
commit f95c9d3df8
6 changed files with 168 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
front/src/pages/settings/data-model/SettingsObjects.tsx
View File

@ -8,6 +8,7 @@ import {
activeObjectItems,
disabledObjectItems,
} from '@/settings/data-model/constants/mockObjects';
import { SettingsObjectCoverImage } from '@/settings/data-model/objects/SettingsObjectCoverImage';
import {
IconChevronRight,
IconDotsVertical,
@ -76,52 +77,28 @@ export const SettingsObjects = () => {
}}
/>
</SettingsHeaderContainer>
<Section>
<H2Title title="Existing objects" />
<Table>
<StyledTableRow>
<TableHeader>Name</TableHeader>
<TableHeader>Type</TableHeader>
<TableHeader align="right">Fields</TableHeader>
<TableHeader align="right">Instances</TableHeader>
<TableHeader></TableHeader>
</StyledTableRow>
<TableSection title="Active">
{activeObjectItems.map((objectItem) => (
<StyledTableRow
key={objectItem.name}
onClick={() =>
navigate(
`/settings/objects/${objectItem.name.toLowerCase()}`,
)
}
>
<StyledNameTableCell>
<objectItem.Icon size={theme.icon.size.md} />
{objectItem.name}
</StyledNameTableCell>
<TableCell>
{objectItem.type === 'standard' ? (
<StyledTag color="blue" text="Standard" />
) : (
<StyledTag color="orange" text="Custom" />
)}
</TableCell>
<TableCell align="right">{objectItem.fields}</TableCell>
<TableCell align="right">{objectItem.instances}</TableCell>
<StyledIconTableCell>
<StyledIconChevronRight
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
</StyledIconTableCell>
</StyledTableRow>
))}
</TableSection>
{!!disabledObjectItems.length && (
<TableSection title="Disabled">
{disabledObjectItems.map((objectItem) => (
<StyledTableRow key={objectItem.name}>
<div>
<SettingsObjectCoverImage />
<Section>
<H2Title title="Existing objects" />
<Table>
<StyledTableRow>
<TableHeader>Name</TableHeader>
<TableHeader>Type</TableHeader>
<TableHeader align="right">Fields</TableHeader>
<TableHeader align="right">Instances</TableHeader>
<TableHeader></TableHeader>
</StyledTableRow>
<TableSection title="Active">
{activeObjectItems.map((objectItem) => (
<StyledTableRow
key={objectItem.name}
onClick={() =>
navigate(
`/settings/objects/${objectItem.name.toLowerCase()}`,
)
}
>
<StyledNameTableCell>
<objectItem.Icon size={theme.icon.size.md} />
{objectItem.name}
@ -136,7 +113,7 @@ export const SettingsObjects = () => {
<TableCell align="right">{objectItem.fields}</TableCell>
<TableCell align="right">{objectItem.instances}</TableCell>
<StyledIconTableCell>
<StyledIconDotsVertical
<StyledIconChevronRight
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
@ -144,9 +121,38 @@ export const SettingsObjects = () => {
</StyledTableRow>
))}
</TableSection>
)}
</Table>
</Section>
{!!disabledObjectItems.length && (
<TableSection title="Disabled">
{disabledObjectItems.map((objectItem) => (
<StyledTableRow key={objectItem.name}>
<StyledNameTableCell>
<objectItem.Icon size={theme.icon.size.md} />
{objectItem.name}
</StyledNameTableCell>
<TableCell>
{objectItem.type === 'standard' ? (
<StyledTag color="blue" text="Standard" />
) : (
<StyledTag color="orange" text="Custom" />
)}
</TableCell>
<TableCell align="right">{objectItem.fields}</TableCell>
<TableCell align="right">
{objectItem.instances}
</TableCell>
<StyledIconTableCell>
<StyledIconDotsVertical
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
</StyledIconTableCell>
</StyledTableRow>
))}
</TableSection>
)}
</Table>
</Section>
</div>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);