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

Fix message opening (#3687)

Browse Source 
* fix

* improve styling so we can close the message by clicking on the whole header

* fix line overflowing

* fix
This commit is contained in:
bosiraphael
2024-01-30 11:56:26 +01:00
committed by GitHub
parent fc63c51d6d
commit a012ba1087
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
View File

@ -11,7 +11,7 @@ const StyledThreadMessage = styled.div`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: ${({ theme }) => theme.spacing(4, 6)}; padding: ${({ theme }) => theme.spacing(4, 0)};
`; `;
const StyledThreadMessageHeader = styled.div` const StyledThreadMessageHeader = styled.div`
@ -20,6 +20,11 @@ const StyledThreadMessageHeader = styled.div`
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin-bottom: ${({ theme }) => theme.spacing(2)}; margin-bottom: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(0, 6)};
`;
const StyledThreadMessageBody = styled.div`
padding: ${({ theme }) => theme.spacing(0, 6)};
`; `;
type EmailThreadMessageProps = { type EmailThreadMessageProps = {
@ -45,16 +50,21 @@ export const EmailThreadMessage = ({
} }
return ( return (
<StyledThreadMessage> <StyledThreadMessage
<StyledThreadMessageHeader onClick={() => setIsOpen(!isOpen)}> onClick={() => !isOpen && setIsOpen(true)}
style={{ cursor: isOpen ? 'auto' : 'pointer' }}
>
<StyledThreadMessageHeader onClick={() => isOpen && setIsOpen(false)}>
<EmailThreadMessageSender sender={from} sentAt={sentAt} /> <EmailThreadMessageSender sender={from} sentAt={sentAt} />
{isOpen && <EmailThreadMessageReceivers receivers={receivers} />} {isOpen && <EmailThreadMessageReceivers receivers={receivers} />}
</StyledThreadMessageHeader> </StyledThreadMessageHeader>
{isOpen ? ( <StyledThreadMessageBody>
<EmailThreadMessageBody body={body} /> {isOpen ? (
) : ( <EmailThreadMessageBody body={body} />
<EmailThreadMessageBodyPreview body={body} /> ) : (
)} <EmailThreadMessageBodyPreview body={body} />
)}
</StyledThreadMessageBody>
</StyledThreadMessage> </StyledThreadMessage>
); );
}; };

1
packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx
View File

@ -7,6 +7,7 @@ const StyledThreadMessageBody = styled.div`
flex-direction: column; flex-direction: column;
margin-top: ${({ theme }) => theme.spacing(4)}; margin-top: ${({ theme }) => theme.spacing(4)};
white-space: pre-line; white-space: pre-line;
overflow-wrap: break-word;
`; `;
type EmailThreadMessageBodyProps = { type EmailThreadMessageBodyProps = {