twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-25 21:13:01 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 8 deletions
Show Stats 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};
display: flex;
flex-direction: column;
padding: ${({ theme }) => theme.spacing(4, 6)};
padding: ${({ theme }) => theme.spacing(4, 0)};
`;
const StyledThreadMessageHeader = styled.div`
@ -20,6 +20,11 @@ const StyledThreadMessageHeader = styled.div`
flex-direction: column;
justify-content: space-between;
margin-bottom: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(0, 6)};
`;
const StyledThreadMessageBody = styled.div`
padding: ${({ theme }) => theme.spacing(0, 6)};
`;
type EmailThreadMessageProps = {
@ -45,16 +50,21 @@ export const EmailThreadMessage = ({
}
return (
<StyledThreadMessage>
<StyledThreadMessageHeader onClick={() => setIsOpen(!isOpen)}>
<StyledThreadMessage
onClick={() => !isOpen && setIsOpen(true)}
style={{ cursor: isOpen ? 'auto' : 'pointer' }}
>
<StyledThreadMessageHeader onClick={() => isOpen && setIsOpen(false)}>
<EmailThreadMessageSender sender={from} sentAt={sentAt} />
{isOpen && <EmailThreadMessageReceivers receivers={receivers} />}
</StyledThreadMessageHeader>
{isOpen ? (
<EmailThreadMessageBody body={body} />
) : (
<EmailThreadMessageBodyPreview body={body} />
)}
<StyledThreadMessageBody>
{isOpen ? (
<EmailThreadMessageBody body={body} />
) : (
<EmailThreadMessageBodyPreview body={body} />
)}
</StyledThreadMessageBody>
</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;
margin-top: ${({ theme }) => theme.spacing(4)};
white-space: pre-line;
overflow-wrap: break-word;
`;
type EmailThreadMessageBodyProps = {