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

49
packages/twenty-front/src/modules/activities/emails/components/ThreadPreview.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { useOpenThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenThreadRightDrawer';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Avatar } from '@/users/components/Avatar';
import { TimelineThread } from '~/generated/graphql';
@ -11,6 +12,7 @@ const StyledCardContent = styled(CardContent)`
gap: ${({ theme }) => theme.spacing(2)};
height: ${({ theme }) => theme.spacing(12)};
padding: ${({ theme }) => theme.spacing(0, 4)};
cursor: pointer;
`;
const StyledHeading = styled.div<{ unread: boolean }>`
@ -81,24 +83,31 @@ type ThreadPreviewProps = {
thread: TimelineThread;
};
export const ThreadPreview = ({ divider, thread }: ThreadPreviewProps) => (
<StyledCardContent divider={divider}>
<StyledHeading unread={!thread.read}>
<StyledAvatar
avatarUrl={thread.senderPictureUrl}
placeholder={thread.senderName}
type="rounded"
/>
<StyledSenderName>{thread.senderName}</StyledSenderName>
<StyledThreadCount>{thread.numberOfMessagesInThread}</StyledThreadCount>
</StyledHeading>
export const ThreadPreview = ({ divider, thread }: ThreadPreviewProps) => {
const openMessageThreadRightDrawer = useOpenThreadRightDrawer();
<StyledSubjectAndBody>
<StyledSubject unread={!thread.read}>{thread.subject}</StyledSubject>
<StyledBody>{thread.body}</StyledBody>
</StyledSubjectAndBody>
<StyledReceivedAt>
{formatToHumanReadableDate(thread.receivedAt)}
</StyledReceivedAt>
</StyledCardContent>
);
return (
<StyledCardContent
onClick={() => openMessageThreadRightDrawer()}
divider={divider}
>
<StyledHeading unread={!thread.read}>
<StyledAvatar
avatarUrl={thread.senderPictureUrl}
placeholder={thread.senderName}
type="rounded"
/>
<StyledSenderName>{thread.senderName}</StyledSenderName>
<StyledThreadCount>{thread.numberOfMessagesInThread}</StyledThreadCount>
</StyledHeading>
<StyledSubjectAndBody>
<StyledSubject unread={!thread.read}>{thread.subject}</StyledSubject>
<StyledBody>{thread.body}</StyledBody>
</StyledSubjectAndBody>
<StyledReceivedAt>
{formatToHumanReadableDate(thread.receivedAt)}
</StyledReceivedAt>
</StyledCardContent>
);
};

20
packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import styled from '@emotion/styled';
const StyledContainer = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
overflow-y: auto;
position: relative;
`;
export const RightDrawerThread = () => {
return (
<StyledContainer>
<></>
</StyledContainer>
);
};

24
packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThreadTopBar.tsx Normal file
View File

@ -0,0 +1,24 @@
import styled from '@emotion/styled';
import { StyledRightDrawerTopBar } from '@/ui/layout/right-drawer/components/StyledRightDrawerTopBar';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { RightDrawerTopBarCloseButton } from '../../../../ui/layout/right-drawer/components/RightDrawerTopBarCloseButton';
import { RightDrawerTopBarExpandButton } from '../../../../ui/layout/right-drawer/components/RightDrawerTopBarExpandButton';
const StyledTopBarWrapper = styled.div`
display: flex;
`;
export const RightDrawerThreadTopBar = () => {
const isMobile = useIsMobile();
return (
<StyledRightDrawerTopBar>
<StyledTopBarWrapper>
<RightDrawerTopBarCloseButton />
{!isMobile && <RightDrawerTopBarExpandButton />}
</StyledTopBarWrapper>
</StyledRightDrawerTopBar>
);
};

26
packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/RightDrawerThreadTopBar.stories.tsx Normal file
View File

@ -0,0 +1,26 @@
import { Meta, StoryObj } from '@storybook/react';
import { RightDrawerThreadTopBar } from '@/activities/emails/right-drawer/components/RightDrawerThreadTopBar';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<typeof RightDrawerThreadTopBar> = {
title: 'Modules/Activities/Emails/RightDrawer/RightDrawerThreadTopBar',
component: RightDrawerThreadTopBar,
decorators: [
(Story) => (
<div style={{ width: '500px' }}>
<Story />
</div>
),
ComponentDecorator,
],
parameters: {
msw: graphqlMocks,
},
};
export default meta;
type Story = StoryObj<typeof RightDrawerThreadTopBar>;
export const Default: Story = {};

14
packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useOpenThreadRightDrawer.ts Normal file
View File

@ -0,0 +1,14 @@
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
export const useOpenThreadRightDrawer = () => {
const { openRightDrawer } = useRightDrawer();
const setHotkeyScope = useSetHotkeyScope();
return () => {
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
openRightDrawer(RightDrawerPages.ViewThread);
};
};