mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix mail thread design (#12167)

Browse Source 
## Before
METADATA
<img width="400" alt="Screenshot 2025-05-21 at 11 34 51"
src="https://github.com/user-attachments/assets/b057dd3f-3ba1-4597-86a4-84157941f10a"
/>
SUBJECT
<img width="400" alt="Screenshot 2025-05-21 at 11 34 38"
src="https://github.com/user-attachments/assets/c41bc102-a84d-443f-bf8c-a77ca9eacd2c"
/>
SHARE_EVERYTHING
<img width="400" alt="Screenshot 2025-05-21 at 11 34 04"
src="https://github.com/user-attachments/assets/0ed39c88-3516-4ebf-9950-5ceabbc38f13"
/>


## After
SHARE_EVERYTHING
<img width="400" alt="Screenshot 2025-05-21 at 11 29 18"
src="https://github.com/user-attachments/assets/72efbf0f-021b-4012-8516-8b7b8318a1e8"
/>
METADAT
<img width="400" alt="Screenshot 2025-05-21 at 11 28 49"
src="https://github.com/user-attachments/assets/73065e89-c5ab-4938-ae71-e557aa3fe8f3"
/>
SUBJECT
<img width="400" alt="Screenshot 2025-05-21 at 11 28 35"
src="https://github.com/user-attachments/assets/10487afb-602d-41fc-bb66-15d71e2fb90f"
/>

Design :
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=23338-52430&t=9NbeB5idQaaOWPAq-0
This commit is contained in:
Etienne
2025-05-21 12:07:17 +02:00
committed by GitHub
parent 3702fefc89
commit 76a8a644a2
2 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx
View File

@ -11,8 +11,7 @@ const StyledContainer = styled.div<{ isCompact?: boolean }>`
height: 20px;
margin-left: auto;
width: ${({ isCompact }) => (isCompact ? 'auto' : '100%')};
min-width: ${({ theme }) =>
`calc(${theme.icon.size.md} + ${theme.spacing(2)})`};
min-width: ${({ theme }) => `${theme.spacing(21)}`};
padding: ${({ theme }) => theme.spacing(0, 1)};
border-radius: 4px;
@ -21,6 +20,8 @@ const StyledContainer = styled.div<{ isCompact?: boolean }>`
color: ${({ theme }) => theme.font.color.tertiary};
font-weight: ${({ theme }) => theme.font.weight.regular};
font-size: ${({ theme }) => theme.font.size.sm};
flex: 1;
`;
type EmailThreadNotSharedProps = {
@ -37,8 +38,8 @@ export const EmailThreadNotShared = ({
return (
<>
<StyledContainer id={containerId} isCompact={isCompact}>
<IconLock size={theme.icon.size.md} />
{visibility === MessageChannelVisibility.METADATA && 'Not shared'}
<IconLock size={theme.icon.size.sm} />
{'Not shared'}
</StyledContainer>
{visibility === MessageChannelVisibility.SUBJECT && (
<AppTooltip

30
packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
View File

@ -44,14 +44,11 @@ const StyledSubjectAndBody = styled.div`
overflow: hidden;
`;
const StyledSubject = styled.span<{ flex: number }>`
const StyledSubject = styled.span`
color: ${({ theme }) => theme.font.color.primary};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
flex: ${({ flex }) => flex};
max-width: max-content;
`;
const StyledBody = styled.span`
@ -59,6 +56,7 @@ const StyledBody = styled.span`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
`;
const StyledReceivedAt = styled.div`
@ -145,20 +143,20 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
</StyledHeading>
<StyledSubjectAndBody>
{visibility !== MessageChannelVisibility.METADATA && (
<StyledSubject
flex={
visibility === MessageChannelVisibility.SHARE_EVERYTHING ? 0 : 1
}
>
{thread.subject}
</StyledSubject>
{visibility === MessageChannelVisibility.METADATA && (
<EmailThreadNotShared visibility={visibility} />
)}
{visibility === MessageChannelVisibility.SUBJECT && (
<>
<StyledSubject>{thread.subject}</StyledSubject>
<EmailThreadNotShared visibility={visibility} />
</>
)}
{visibility === MessageChannelVisibility.SHARE_EVERYTHING && (
<StyledBody>{thread.lastMessageBody}</StyledBody>
)}
{visibility !== MessageChannelVisibility.SHARE_EVERYTHING && (
<EmailThreadNotShared visibility={visibility} />
<>
<StyledSubject>{thread.subject}</StyledSubject>
<StyledBody>{thread.lastMessageBody}</StyledBody>
</>
)}
</StyledSubjectAndBody>
<StyledReceivedAt>