scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 20:27:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add animation during email message opening (#3774)

Browse Source 
* Add animation while message opening

* Set isDisplayed as always true

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thomas Trompette
2024-02-02 14:37:46 +01:00
committed by GitHub
parent 03f89f483c
commit c6c50180b7
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -60,7 +60,7 @@ export const EmailThreadMessage = ({
</StyledThreadMessageHeader> </StyledThreadMessageHeader>
<StyledThreadMessageBody> <StyledThreadMessageBody>
{isOpen ? ( {isOpen ? (
<EmailThreadMessageBody body={body} /> <EmailThreadMessageBody body={body} isDisplayed />
) : ( ) : (
<EmailThreadMessageBodyPreview body={body} /> <EmailThreadMessageBodyPreview body={body} />
)} )}

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

@@ -1,7 +1,10 @@
import React from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { motion } from 'framer-motion';
const StyledThreadMessageBody = styled.div` import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
const StyledThreadMessageBody = styled(motion.div)`
color: ${({ theme }) => theme.font.color.primary}; color: ${({ theme }) => theme.font.color.primary};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -12,10 +15,16 @@ const StyledThreadMessageBody = styled.div`
type EmailThreadMessageBodyProps = { type EmailThreadMessageBodyProps = {
body: string; body: string;
isDisplayed: boolean;
}; };
export const EmailThreadMessageBody = ({ export const EmailThreadMessageBody = ({
body, body,
isDisplayed,
}: EmailThreadMessageBodyProps) => { }: EmailThreadMessageBodyProps) => {
return <StyledThreadMessageBody>{body}</StyledThreadMessageBody>; return (
<AnimatedEaseInOut isOpen={isDisplayed} duration="fast">
<StyledThreadMessageBody>{body}</StyledThreadMessageBody>
</AnimatedEaseInOut>
);
}; };