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

Build message thread empty right drawer (#3585)

Browse Source 
* Trigger message thread top bar

* Rename message thread to thread

* Move all components in a directory

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thomas Trompette
2024-01-23 10:56:31 +01:00
committed by GitHub
parent 762a56782c
commit 004c23768c
14 changed files with 226 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
View File

@ -1,14 +1,15 @@
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { RightDrawerThread } from '@/activities/emails/right-drawer/components/RightDrawerThread';
import { RightDrawerThreadTopBar } from '@/activities/emails/right-drawer/components/RightDrawerThreadTopBar';
import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity';
import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity';
import { RightDrawerActivityTopBar } from '../../../../activities/right-drawer/components/RightDrawerActivityTopBar';
import { rightDrawerPageState } from '../states/rightDrawerPageState';
import { RightDrawerPages } from '../types/RightDrawerPages';
import { RightDrawerTopBar } from './RightDrawerTopBar';
const StyledRightDrawerPage = styled.div`
display: flex;
flex-direction: column;
@ -30,13 +31,20 @@ export const RightDrawerRouter = () => {
const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
let page = <></>;
let topBar = <></>;
switch (rightDrawerPage) {
case RightDrawerPages.CreateActivity:
page = <RightDrawerCreateActivity />;
topBar = <RightDrawerActivityTopBar />;
break;
case RightDrawerPages.EditActivity:
page = <RightDrawerEditActivity />;
topBar = <RightDrawerActivityTopBar />;
break;
case RightDrawerPages.ViewThread:
page = <RightDrawerThread />;
topBar = <RightDrawerThreadTopBar />;
break;
default:
break;
@ -44,7 +52,7 @@ export const RightDrawerRouter = () => {
return (
<StyledRightDrawerPage>
<RightDrawerTopBar />
{topBar}
<StyledRightDrawerBody>{page}</StyledRightDrawerBody>
</StyledRightDrawerPage>
);

44
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
View File

@ -1,44 +0,0 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { ActivityActionBar } from '@/activities/right-drawer/components/ActivityActionBar';
import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
import { RightDrawerTopBarExpandButton } from './RightDrawerTopBarExpandButton';
const StyledRightDrawerTopBar = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.md};
gap: ${({ theme }) => theme.spacing(1)};
height: 56px;
justify-content: space-between;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const StyledTopBarWrapper = styled.div`
display: flex;
`;
export const RightDrawerTopBar = () => {
const isMobile = useIsMobile();
const viewableActivityId = useRecoilValue(viewableActivityIdState);
return (
<StyledRightDrawerTopBar>
<StyledTopBarWrapper>
<RightDrawerTopBarCloseButton />
{!isMobile && <RightDrawerTopBarExpandButton />}
</StyledTopBarWrapper>
<ActivityActionBar activityId={viewableActivityId ?? ''} />
</StyledRightDrawerTopBar>
);
};

17
packages/twenty-front/src/modules/ui/layout/right-drawer/components/StyledRightDrawerTopBar.tsx Normal file
View File

@ -0,0 +1,17 @@
import styled from '@emotion/styled';
export const StyledRightDrawerTopBar = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.md};
gap: ${({ theme }) => theme.spacing(1)};
height: 56px;
justify-content: space-between;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
`;

27
packages/twenty-front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx
View File

@ -1,27 +0,0 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { RightDrawerTopBar } from '../RightDrawerTopBar';
const meta: Meta<typeof RightDrawerTopBar> = {
title: 'UI/Layout/RightDrawer/RightDrawerTopBar',
component: RightDrawerTopBar,
decorators: [
(Story) => (
<div style={{ width: '500px' }}>
<Story />
</div>
),
ComponentDecorator,
],
parameters: {
msw: graphqlMocks,
},
};
export default meta;
type Story = StoryObj<typeof RightDrawerTopBar>;
export const Default: Story = {};

1
packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts
View File

@ -1,4 +1,5 @@
export enum RightDrawerPages {
CreateActivity = 'create-activity',
EditActivity = 'edit-activity',
ViewThread = 'view-thread',
}