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>
);
};