Feat/add opportunity (#1267)
* Renamed AuthAutoRouter * Moved RecoilScope * Refactored old WithTopBarContainer to make it less transclusive * Created new add opportunity button and refactored DropdownButton * Added tests * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/layout/components/PageHeader.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/pages/opportunities/Opportunities.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Fix lint * Fix lint --------- Co-authored-by: Charles Bochet <charles@twenty.com> Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com> Co-authored-by: Thaïs <guigon.thais@gmail.com>
This commit is contained in:
Lucas Bordeau
15
front/src/modules/ui/layout/components/PageBody.tsx
Normal file
15
front/src/modules/ui/layout/components/PageBody.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { PAGE_BAR_MIN_HEIGHT } from '../page-bar/components/PageBar';
|
||||
|
||||
import { RightDrawerContainer } from './RightDrawerContainer';
|
||||
|
||||
type OwnProps = {
|
||||
children: JSX.Element | JSX.Element[];
|
||||
};
|
||||
|
||||
export function PageBody({ children }: OwnProps) {
|
||||
return (
|
||||
<RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
|
||||
{children}
|
||||
</RightDrawerContainer>
|
||||
);
|
||||
}
|
||||
15
front/src/modules/ui/layout/components/PageContainer.tsx
Normal file
15
front/src/modules/ui/layout/components/PageContainer.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type OwnProps = {
|
||||
children: JSX.Element | JSX.Element[];
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export function PageContainer({ children }: OwnProps) {
|
||||
return <StyledContainer>{children}</StyledContainer>;
|
||||
}
|
||||
109
front/src/modules/ui/layout/components/PageHeader.tsx
Normal file
109
front/src/modules/ui/layout/components/PageHeader.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
import { ReactNode, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { IconButton } from '@/ui/button/components/IconButton';
|
||||
import { IconChevronLeft } from '@/ui/icon/index';
|
||||
import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
|
||||
import { navbarIconSize } from '@/ui/navbar/constants';
|
||||
import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
|
||||
|
||||
export const PAGE_BAR_MIN_HEIGHT = 40;
|
||||
|
||||
const StyledTopBarContainer = styled.div`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.noisy};
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: ${({ theme }) => theme.font.size.lg};
|
||||
justify-content: space-between;
|
||||
min-height: ${PAGE_BAR_MIN_HEIGHT}px;
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
padding-left: 0;
|
||||
padding-right: ${({ theme }) => theme.spacing(3)};
|
||||
`;
|
||||
|
||||
const StyledLeftContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledTitleContainer = styled.div`
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
margin-left: ${({ theme }) => theme.spacing(1)};
|
||||
max-width: 50%;
|
||||
`;
|
||||
|
||||
const StyledTopBarButtonContainer = styled.div`
|
||||
margin-right: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledBackIconButton = styled(IconButton)`
|
||||
margin-right: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledTopBarIconStyledTitleContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledPageActionContainer = styled.div`
|
||||
display: inline-flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
type OwnProps = {
|
||||
title: string;
|
||||
hasBackButton?: boolean;
|
||||
icon: ReactNode;
|
||||
children: JSX.Element | JSX.Element[];
|
||||
};
|
||||
|
||||
export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) {
|
||||
const navigate = useNavigate();
|
||||
const navigateBack = useCallback(() => navigate(-1), [navigate]);
|
||||
|
||||
const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
|
||||
|
||||
const iconSize = useIsMobile()
|
||||
? navbarIconSize.mobile
|
||||
: navbarIconSize.desktop;
|
||||
|
||||
return (
|
||||
<StyledTopBarContainer>
|
||||
<StyledLeftContainer>
|
||||
{!isNavbarOpened && (
|
||||
<StyledTopBarButtonContainer>
|
||||
<NavCollapseButton direction="right" />
|
||||
</StyledTopBarButtonContainer>
|
||||
)}
|
||||
{hasBackButton && (
|
||||
<StyledTopBarButtonContainer>
|
||||
<StyledBackIconButton
|
||||
icon={<IconChevronLeft size={iconSize} />}
|
||||
onClick={navigateBack}
|
||||
/>
|
||||
</StyledTopBarButtonContainer>
|
||||
)}
|
||||
<StyledTopBarIconStyledTitleContainer>
|
||||
{icon}
|
||||
<StyledTitleContainer data-testid="top-bar-title">
|
||||
<OverflowingTextWithTooltip text={title} />
|
||||
</StyledTitleContainer>
|
||||
</StyledTopBarIconStyledTitleContainer>
|
||||
</StyledLeftContainer>
|
||||
<StyledPageActionContainer>{children}</StyledPageActionContainer>
|
||||
</StyledTopBarContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user