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

New page structure (#1377)

Browse Source 
* - new page structure

* - removed unecessary task changes

* - handleClick -> onClick
This commit is contained in:
brendanlaschke
2023-08-30 15:10:16 +02:00
committed by GitHub
parent 85155a634f
commit fa33506b96
14 changed files with 182 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
front/src/modules/ui/layout/components/PageAddButton.tsx Normal file
View File

@ -0,0 +1,19 @@
import { IconButton } from '@/ui/button/components/IconButton';
import { IconPlus } from '@/ui/icon';
type OwnProps = {
onClick: () => void;
};
export function PageAddButton({ onClick }: OwnProps) {
return (
<IconButton
icon={<IconPlus size={16} />}
size="medium"
variant="secondary"
data-testid="add-button"
accent="default"
onClick={onClick}
/>
);
}

3
front/src/modules/ui/layout/components/PageBody.tsx
View File

@ -1,5 +1,4 @@
import { PAGE_BAR_MIN_HEIGHT } from '../page-bar/components/PageBar';
import { PAGE_BAR_MIN_HEIGHT } from './PageHeader';
import { RightDrawerContainer } from './RightDrawerContainer';
type OwnProps = {

20
front/src/modules/ui/layout/components/PageFavoriteButton.tsx Normal file
View File

@ -0,0 +1,20 @@
import { IconButton } from '@/ui/button/components/IconButton';
import { IconHeart } from '@/ui/icon';
type OwnProps = {
isFavorite: boolean;
onClick: () => void;
};
export function PageFavoriteButton({ isFavorite, onClick }: OwnProps) {
return (
<IconButton
icon={<IconHeart size={16} />}
size="medium"
variant="secondary"
data-testid="add-button"
accent={isFavorite ? 'danger' : 'default'}
onClick={onClick}
/>
);
}

2
front/src/modules/ui/layout/components/PageHeader.tsx
View File

@ -67,7 +67,7 @@ type OwnProps = {
title: string;
hasBackButton?: boolean;
icon: ReactNode;
children: JSX.Element | JSX.Element[];
children?: JSX.Element | JSX.Element[];
};
export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) {

2
front/src/modules/ui/layout/page-bar/components/PageBarHotkeys.tsx → front/src/modules/ui/layout/components/PageHotkeys.tsx
View File

@ -5,7 +5,7 @@ type OwnProps = {
onAddButtonClick?: () => void;
};
export function PageBarHotkeys({ onAddButtonClick }: OwnProps) {
export function PageHotkeys({ onAddButtonClick }: OwnProps) {
useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [
onAddButtonClick,
]);

5
front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx
View File

@ -2,8 +2,7 @@ import styled from '@emotion/styled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { PageBar } from '../page-bar/components/PageBar';
import { PageHeader } from './PageHeader';
import { RightDrawerContainer } from './RightDrawerContainer';
type OwnProps = {
@ -24,7 +23,7 @@ export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) {
return (
<StyledContainer isMobile={isMobile}>
{isMobile && <PageBar title={title} icon={icon} />}
{isMobile && <PageHeader title={title} icon={icon} />}
<RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
</StyledContainer>
);

53
front/src/modules/ui/layout/components/WithTopBarContainer.tsx
View File

@ -1,53 +0,0 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { PAGE_BAR_MIN_HEIGHT, PageBar } from '../page-bar/components/PageBar';
import { PageBarHotkeys } from '../page-bar/components/PageBarHotkeys';
import { RightDrawerContainer } from './RightDrawerContainer';
type OwnProps = {
children: JSX.Element | JSX.Element[];
title: string;
hasBackButton?: boolean;
isFavorite?: boolean;
icon: ReactNode;
onAddButtonClick?: () => void;
onFavoriteButtonClick?: () => void;
extraButtons?: ReactNode[];
};
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
width: 100%;
`;
export function WithTopBarContainer({
children,
title,
hasBackButton,
isFavorite,
icon,
onAddButtonClick,
onFavoriteButtonClick,
extraButtons,
}: OwnProps) {
return (
<StyledContainer>
<PageBarHotkeys onAddButtonClick={onAddButtonClick} />
<PageBar
title={title}
hasBackButton={hasBackButton}
isFavorite={isFavorite}
icon={icon}
onAddButtonClick={onAddButtonClick}
onFavoriteButtonClick={onFavoriteButtonClick}
extraButtons={extraButtons}
/>
<RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
{children}
</RightDrawerContainer>
</StyledContainer>
);
}

142
front/src/modules/ui/layout/page-bar/components/PageBar.tsx
View File

@ -1,142 +0,0 @@
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 { LightIconButton } from '@/ui/button/components/LightIconButton';
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
import { IconChevronLeft, IconHeart, IconPlus } from '@/ui/icon/index';
import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
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 StyledTopBarIconTitleContainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
padding-left: ${({ theme }) => theme.spacing(2)};
width: 100%;
`;
const StyledActionButtonsContainer = styled.div`
display: inline-flex;
gap: ${({ theme }) => theme.spacing(2)};
`;
type OwnProps = {
title: string;
hasBackButton?: boolean;
isFavorite?: boolean;
icon: ReactNode;
onAddButtonClick?: () => void;
onFavoriteButtonClick?: () => void;
extraButtons?: ReactNode[];
};
export function PageBar({
title,
hasBackButton,
isFavorite,
icon,
onAddButtonClick,
onFavoriteButtonClick,
extraButtons,
}: OwnProps) {
const navigate = useNavigate();
const navigateBack = useCallback(() => navigate(-1), [navigate]);
const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
return (
<>
<StyledTopBarContainer>
<StyledLeftContainer>
{!isNavbarOpened && (
<StyledTopBarButtonContainer>
<NavCollapseButton direction="right" hide={true} />
</StyledTopBarButtonContainer>
)}
{hasBackButton && (
<StyledTopBarButtonContainer>
<LightIconButton
size="medium"
accent="tertiary"
icon={<IconChevronLeft />}
onClick={navigateBack}
/>
</StyledTopBarButtonContainer>
)}
<StyledTopBarIconTitleContainer>
{icon}
<StyledTitleContainer data-testid="top-bar-title">
<OverflowingTextWithTooltip text={title} />
</StyledTitleContainer>
</StyledTopBarIconTitleContainer>
</StyledLeftContainer>
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
<StyledActionButtonsContainer>
{onFavoriteButtonClick && (
<IconButton
icon={<IconHeart size={16} />}
size="medium"
variant="secondary"
data-testid="add-button"
accent={isFavorite ? 'danger' : 'default'}
onClick={onFavoriteButtonClick}
/>
)}
{onAddButtonClick && (
<IconButton
icon={<IconPlus size={16} />}
size="medium"
variant="secondary"
data-testid="add-button"
accent="default"
onClick={onAddButtonClick}
/>
)}
{extraButtons}
</StyledActionButtonsContainer>
</RecoilScope>
</StyledTopBarContainer>
</>
);
}