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

minor fix - email thread reply button stylings/corrections (#7168)

Browse Source 
fixes #7155
This commit is contained in:
nitin
2024-09-23 14:34:04 +05:30
committed by GitHub
parent 8d496902b7
commit aa7b3107f4
2 changed files with 55 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
View File

@ -13,33 +13,38 @@ import { Button } from '@/ui/input/button/components/Button';
import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener'; import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
import { messageThreadState } from '@/ui/layout/right-drawer/states/messageThreadState'; import { messageThreadState } from '@/ui/layout/right-drawer/states/messageThreadState';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener'; import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { IconArrowBackUp } from 'twenty-ui'; import { IconArrowBackUp } from 'twenty-ui';
const StyledWrapper = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;
const StyledContainer = styled.div` const StyledContainer = styled.div`
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
height: 85%; height: 85%;
justify-content: flex-start;
overflow-y: auto; overflow-y: auto;
position: relative;
`; `;
const StyledButtonContainer = styled.div` const StyledButtonContainer = styled.div<{ isMobile: boolean }>`
background: ${({ theme }) => theme.background.secondary}; background: ${({ theme }) => theme.background.secondary};
bottom: 0; border-top: 1px solid ${({ theme }) => theme.border.color.light};
display: flex; display: flex;
height: 110px; justify-content: flex-end;
left: 0; height: ${({ isMobile }) => (isMobile ? '100px' : '50px')};
padding-left: ${({ theme }) => theme.spacing(7)}; padding: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(5)}; width: 100%;
position: fixed; box-sizing: border-box;
right: 0;
`; `;
export const RightDrawerEmailThread = () => { export const RightDrawerEmailThread = () => {
const setMessageThread = useSetRecoilState(messageThreadState); const setMessageThread = useSetRecoilState(messageThreadState);
const isMobile = useIsMobile();
const { const {
thread, thread,
messages, messages,
@ -118,47 +123,49 @@ export const RightDrawerEmailThread = () => {
return null; return null;
} }
return ( return (
<StyledContainer> <StyledWrapper>
{threadLoading ? ( <StyledContainer>
<EmailLoader loadingText="Loading thread" /> {threadLoading ? (
) : ( <EmailLoader loadingText="Loading thread" />
<> ) : (
<EmailThreadHeader <>
subject={subject} <EmailThreadHeader
lastMessageSentAt={lastMessage.receivedAt} subject={subject}
/> lastMessageSentAt={lastMessage.receivedAt}
{firstMessages.map((message) => (
<EmailThreadMessage
key={message.id}
participants={message.messageParticipants}
body={message.text}
sentAt={message.receivedAt}
/> />
))} {firstMessages.map((message) => (
<IntermediaryMessages messages={intermediaryMessages} /> <EmailThreadMessage
<EmailThreadMessage key={message.id}
key={lastMessage.id} participants={message.messageParticipants}
participants={lastMessage.messageParticipants} body={message.text}
body={lastMessage.text} sentAt={message.receivedAt}
sentAt={lastMessage.receivedAt} />
isExpanded ))}
/> <IntermediaryMessages messages={intermediaryMessages} />
<CustomResolverFetchMoreLoader <EmailThreadMessage
loading={threadLoading} key={lastMessage.id}
onLastRowVisible={fetchMoreMessages} participants={lastMessage.messageParticipants}
/> body={lastMessage.text}
</> sentAt={lastMessage.receivedAt}
)} isExpanded
{canReply && !messageChannelLoading ? ( />
<StyledButtonContainer> <CustomResolverFetchMoreLoader
loading={threadLoading}
onLastRowVisible={fetchMoreMessages}
/>
</>
)}
</StyledContainer>
{canReply && !messageChannelLoading && (
<StyledButtonContainer isMobile={isMobile}>
<Button <Button
onClick={handleReplyClick} onClick={handleReplyClick}
title="Reply (View in Gmail)" title="Reply"
Icon={IconArrowBackUp} Icon={IconArrowBackUp}
disabled={!canReply} disabled={!canReply}
></Button> />
</StyledButtonContainer> </StyledButtonContainer>
) : null} )}
</StyledContainer> </StyledWrapper>
); );
}; };

2
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
View File

@ -32,7 +32,7 @@ const StyledContainer = styled(motion.div)`
background: ${({ theme }) => theme.background.primary}; background: ${({ theme }) => theme.background.primary};
border-left: 1px solid ${({ theme }) => theme.border.color.medium}; border-left: 1px solid ${({ theme }) => theme.border.color.medium};
box-shadow: ${({ theme }) => theme.boxShadow.strong}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
height: 100%; height: 100dvh;
overflow-x: hidden; overflow-x: hidden;
position: fixed; position: fixed;