gitstart-app[bot]
7bab65b569
### Description - This PR has as the base branch the TWNTY-5491 branch, but we also had to include updates from the main branch, and currently, there are conflicts in the TWNTY-5491, that cause errors on typescript in this PR, so, we can update once the conflicts are resolved on the base branch, but the functionality can be reviewed anyway - We Implemented a new layout of object details settings and new, the data is auto-saved in `Settings `tab of object detail - There is no indication to the user that data are saved automatically in the design, currently we are disabling the form ### Demo\ <https://www.loom.com/share/4198c0aa54b5450780a570ceee574838?sid=b4ef0a42-2d41-435f-9f5f-1b16816939f7> ### Refs #TWNTY-5491 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu> Co-authored-by: Weiko <corentin@twenty.com>
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbProps,
|
|
} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
|
import styled from '@emotion/styled';
|
|
import { JSX, ReactNode } from 'react';
|
|
import { PageBody } from './PageBody';
|
|
import { PageHeader } from './PageHeader';
|
|
|
|
type SubMenuTopBarContainerProps = {
|
|
children: JSX.Element | JSX.Element[];
|
|
title?: string | JSX.Element;
|
|
actionButton?: ReactNode;
|
|
className?: string;
|
|
links: BreadcrumbProps['links'];
|
|
};
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledTitle = styled.h3`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-size: ${({ theme }) => theme.font.size.lg};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
line-height: 1.2;
|
|
margin: ${({ theme }) => theme.spacing(8, 8, 2)};
|
|
`;
|
|
|
|
export const SubMenuTopBarContainer = ({
|
|
children,
|
|
title,
|
|
actionButton,
|
|
className,
|
|
links,
|
|
}: SubMenuTopBarContainerProps) => {
|
|
return (
|
|
<StyledContainer className={className}>
|
|
<PageHeader title={<Breadcrumb links={links} />}>
|
|
{actionButton}
|
|
</PageHeader>
|
|
<PageBody>
|
|
<InformationBannerWrapper />
|
|
{title && <StyledTitle>{title}</StyledTitle>}
|
|
{children}
|
|
</PageBody>
|
|
</StyledContainer>
|
|
);
|
|
};
|