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

Add participant avatars + remove tbody from fetchMore loader (#3679)

Browse Source 
* Add participant avatars + remove tbody from fetchMore loader

* Update sender names

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thomas Trompette 2024-01-30 10:47:15 +01:00 committed by GitHub
parent c9a19fd4d9
commit 96bcddc056
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,13 +36,20 @@ const StyledHeading = styled.div<{ unread: boolean }>`
}
`;
const StyledAvatar = styled(Avatar)`
margin: ${({ theme }) => theme.spacing(0, 1)};
const StyledParticipantsContainer = styled.div`
align-items: center;
display: flex;
`;
const StyledSenderName = styled.span`
const StyledAvatar = styled(Avatar)`
margin-left: ${({ theme }) => theme.spacing(-1)};
`;
const StyledSenderNames = styled.span`
margin: ${({ theme }) => theme.spacing(0, 1)};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledThreadCount = styled.span`
@ -88,17 +95,49 @@ export const EmailThreadPreview = ({
thread,
onClick,
}: EmailThreadPreviewProps) => {
const senderNames =
thread.firstParticipant.displayName +
(thread?.lastTwoParticipants?.[0]?.displayName
? `, ${thread.lastTwoParticipants?.[0]?.displayName}`
: '') +
(thread?.lastTwoParticipants?.[1]?.displayName
? `, ${thread.lastTwoParticipants?.[1]?.displayName}`
: '');
const [finalDisplayedName, finalAvatarUrl] =
thread.participantCount > 3
? [`${thread.participantCount}`, '']
: [
thread?.lastTwoParticipants?.[1]?.displayName,
thread?.lastTwoParticipants?.[1]?.avatarUrl,
];
return (
<StyledCardContent onClick={() => onClick()} divider={divider}>
<StyledHeading unread={!thread.read}>
<StyledAvatar
avatarUrl={thread.firstParticipant.avatarUrl}
placeholder={thread.firstParticipant.displayName}
type="rounded"
/>
<StyledSenderName>
{thread.firstParticipant.displayName}
</StyledSenderName>
<StyledParticipantsContainer>
<Avatar
avatarUrl={thread?.firstParticipant?.avatarUrl}
placeholder={thread.firstParticipant.displayName}
type="rounded"
/>
{thread?.lastTwoParticipants?.[0] && (
<StyledAvatar
avatarUrl={thread.lastTwoParticipants[0].avatarUrl}
placeholder={thread.lastTwoParticipants[0].displayName}
type="rounded"
/>
)}
{finalDisplayedName && (
<StyledAvatar
avatarUrl={finalAvatarUrl}
placeholder={finalDisplayedName}
type="rounded"
/>
)}
</StyledParticipantsContainer>
<StyledSenderNames>{senderNames}</StyledSenderNames>
<StyledThreadCount>{thread.numberOfMessagesInThread}</StyledThreadCount>
</StyledHeading>

13
packages/twenty-front/src/modules/ui/utilities/loading-state/components/FetchMoreLoader.tsx
View File

@ -27,15 +27,8 @@ export const FetchMoreLoader = ({
});
return (
<tbody ref={tbodyRef}>
{loading && (
<tr>
<td colSpan={7}>
<StyledText>Loading more...</StyledText>
</td>
<td colSpan={7} />
</tr>
)}
</tbody>
<div ref={tbodyRef}>
{loading && <StyledText>Loading more...</StyledText>}
</div>
);
};