mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 23:37:21 +03:00
feat: add Show Page Emails preview (#2964)
* feat: add Show Page Emails preview Closes #2928 * refactor: review - rename StyledContainer to StyledCardContent
This commit is contained in:
parent
1e33959733
commit
9f6d476351
@ -0,0 +1,88 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { CardContent } from '@/ui/layout/card/components/CardContent';
|
||||
import { Avatar } from '@/users/components/Avatar';
|
||||
import { formatToHumanReadableDate } from '~/utils';
|
||||
|
||||
import { Email } from '../types/email';
|
||||
|
||||
const StyledCardContent = styled(CardContent)`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: ${({ theme }) => theme.spacing(12)};
|
||||
padding: ${({ theme }) => theme.spacing(0, 4)};
|
||||
`;
|
||||
|
||||
const StyledHeading = styled.div<{ unread: boolean }>`
|
||||
align-items: center;
|
||||
color: ${({ theme, unread }) =>
|
||||
unread ? theme.font.color.primary : theme.font.color.secondary};
|
||||
display: flex;
|
||||
font-weight: ${({ theme, unread }) =>
|
||||
unread ? theme.font.weight.medium : theme.font.weight.regular};
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
width: 160px;
|
||||
|
||||
:before {
|
||||
background-color: ${({ theme, unread }) =>
|
||||
unread ? theme.color.blue : 'transparent'};
|
||||
border-radius: ${({ theme }) => theme.border.radius.rounded};
|
||||
content: '';
|
||||
display: block;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledAvatar = styled(Avatar)`
|
||||
margin: ${({ theme }) => theme.spacing(0, 1)};
|
||||
`;
|
||||
|
||||
const StyledThreadCount = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
`;
|
||||
|
||||
const StyledSubject = styled.div<{ unread: boolean }>`
|
||||
color: ${({ theme, unread }) =>
|
||||
unread ? theme.font.color.primary : theme.font.color.secondary};
|
||||
`;
|
||||
|
||||
const StyledBody = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
flex: 1 0 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledReceivedAt = styled.div`
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
padding: ${({ theme }) => theme.spacing(0, 1)};
|
||||
`;
|
||||
|
||||
type EmailPreviewProps = {
|
||||
divider?: boolean;
|
||||
email: Email;
|
||||
};
|
||||
|
||||
export const EmailPreview = ({ divider, email }: EmailPreviewProps) => (
|
||||
<StyledCardContent divider={divider}>
|
||||
<StyledHeading unread={!email.read}>
|
||||
<StyledAvatar
|
||||
avatarUrl={email.senderPictureUrl}
|
||||
placeholder={email.senderName}
|
||||
type="rounded"
|
||||
/>
|
||||
{email.senderName}{' '}
|
||||
<StyledThreadCount>{email.numberOfEmailsInThread}</StyledThreadCount>
|
||||
</StyledHeading>
|
||||
<StyledSubject unread={!email.read}>{email.subject}</StyledSubject>
|
||||
<StyledBody>{email.body}</StyledBody>
|
||||
<StyledReceivedAt>
|
||||
{formatToHumanReadableDate(email.receivedAt)}
|
||||
</StyledReceivedAt>
|
||||
</StyledCardContent>
|
||||
);
|
@ -4,7 +4,11 @@ import {
|
||||
H1Title,
|
||||
H1TitleFontColor,
|
||||
} from '@/ui/display/typography/components/H1Title';
|
||||
import { Card } from '@/ui/layout/card/components/Card';
|
||||
import { Section } from '@/ui/layout/section/components/Section';
|
||||
import { mockedEmails as emails } from '~/testing/mock-data/activities';
|
||||
|
||||
import { EmailPreview } from './EmailPreview';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
@ -28,11 +32,16 @@ export const Emails = () => (
|
||||
<StyledH1Title
|
||||
title={
|
||||
<>
|
||||
Inbox <StyledEmailCount>2</StyledEmailCount>
|
||||
Inbox <StyledEmailCount>{emails.length}</StyledEmailCount>
|
||||
</>
|
||||
}
|
||||
fontColor={H1TitleFontColor.Primary}
|
||||
/>
|
||||
<Card>
|
||||
{emails.map((email, index) => (
|
||||
<EmailPreview divider={index < emails.length - 1} email={email} />
|
||||
))}
|
||||
</Card>
|
||||
</Section>
|
||||
</StyledContainer>
|
||||
);
|
||||
|
@ -0,0 +1,13 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Emails } from '../Emails';
|
||||
|
||||
const meta: Meta<typeof Emails> = {
|
||||
title: 'Modules/Activity/Emails/Emails',
|
||||
component: Emails,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Emails>;
|
||||
|
||||
export const Default: Story = {};
|
@ -0,0 +1,9 @@
|
||||
export type Email = {
|
||||
body: string;
|
||||
numberOfEmailsInThread: number;
|
||||
read: boolean;
|
||||
receivedAt: Date;
|
||||
senderName: string;
|
||||
senderPictureUrl: string;
|
||||
subject: string;
|
||||
};
|
@ -12,6 +12,7 @@ export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
|
||||
|
||||
export type AvatarProps = {
|
||||
avatarUrl: string | null | undefined;
|
||||
className?: string;
|
||||
size?: AvatarSize;
|
||||
placeholder: string | undefined;
|
||||
colorId?: string;
|
||||
@ -90,6 +91,7 @@ const StyledAvatar = styled.div<AvatarProps & { colorId: string }>`
|
||||
|
||||
export const Avatar = ({
|
||||
avatarUrl,
|
||||
className,
|
||||
size = 'md',
|
||||
placeholder,
|
||||
colorId = placeholder,
|
||||
@ -113,6 +115,7 @@ export const Avatar = ({
|
||||
|
||||
return (
|
||||
<StyledAvatar
|
||||
className={className}
|
||||
avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
|
||||
placeholder={placeholder}
|
||||
size={size}
|
||||
|
@ -1,3 +1,4 @@
|
||||
import { Email } from '@/activities/emails/types/email';
|
||||
import { Activity } from '@/activities/types/Activity';
|
||||
import { ActivityTarget } from '@/activities/types/ActivityTarget';
|
||||
import { Comment } from '@/activities/types/Comment';
|
||||
@ -222,3 +223,24 @@ export const mockedActivities: Array<MockedActivity> = [
|
||||
__typename: 'Activity',
|
||||
},
|
||||
];
|
||||
|
||||
export const mockedEmails: Email[] = [
|
||||
{
|
||||
body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nisi eu tellus dapibus, egestas placerat risus placerat. Praesent eget arcu consectetur, efficitur felis.',
|
||||
numberOfEmailsInThread: 4,
|
||||
read: false,
|
||||
receivedAt: new Date('11/04/2023'),
|
||||
senderName: 'Steve Anahi',
|
||||
senderPictureUrl: '',
|
||||
subject: 'Partnerships',
|
||||
},
|
||||
{
|
||||
body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nisi eu tellus dapibus, egestas placerat risus placerat. Praesent eget arcu consectetur, efficitur felis.',
|
||||
numberOfEmailsInThread: 3,
|
||||
read: true,
|
||||
receivedAt: new Date('11/04/2023'),
|
||||
senderName: 'Alexandre Prot',
|
||||
senderPictureUrl: '',
|
||||
subject: 'Next step',
|
||||
},
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user