mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 15:35:36 +03:00
3804 use email visibility to display only the shared information frontend (#3875)
* create and use component * visibility working * Fix click behavior for email thread previews * Add dynamic styling to EmailThreadPreview component * refactor to respect the convention
This commit is contained in:
parent
99e2dd6899
commit
2ba9a209e8
@ -0,0 +1,30 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconLock } from '@/ui/display/icon';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
height: 20px;
|
||||
padding: ${({ theme }) => theme.spacing(0, 1)};
|
||||
|
||||
border-radius: 4px;
|
||||
border: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
background: ${({ theme }) => theme.background.transparent.lighter};
|
||||
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
`;
|
||||
|
||||
export const EmailThreadNotShared = () => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<StyledContainer>
|
||||
<IconLock size={theme.icon.size.md} />
|
||||
Not shared
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
@ -1,18 +1,20 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
|
||||
import { CardContent } from '@/ui/layout/card/components/CardContent';
|
||||
import { grayScale } from '@/ui/theme/constants/colors';
|
||||
import { Avatar } from '@/users/components/Avatar';
|
||||
import { TimelineThread } from '~/generated/graphql';
|
||||
import { formatToHumanReadableDate } from '~/utils';
|
||||
|
||||
const StyledCardContent = styled(CardContent)`
|
||||
const StyledCardContent = styled(CardContent)<{ visibility: string }>`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: ${({ theme }) => theme.spacing(12)};
|
||||
padding: ${({ theme }) => theme.spacing(0, 4)};
|
||||
cursor: pointer;
|
||||
cursor: ${({ visibility }) =>
|
||||
visibility === 'share_everything' ? 'pointer' : 'default'};
|
||||
`;
|
||||
|
||||
const StyledHeading = styled.div<{ unread: boolean }>`
|
||||
@ -43,6 +45,7 @@ const StyledThreadCount = styled.span`
|
||||
`;
|
||||
|
||||
const StyledSubjectAndBody = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
@ -74,12 +77,14 @@ type EmailThreadPreviewProps = {
|
||||
divider?: boolean;
|
||||
thread: TimelineThread;
|
||||
onClick: () => void;
|
||||
visibility: 'metadata' | 'subject' | 'share_everything';
|
||||
};
|
||||
|
||||
export const EmailThreadPreview = ({
|
||||
divider,
|
||||
thread,
|
||||
onClick,
|
||||
visibility,
|
||||
}: EmailThreadPreviewProps) => {
|
||||
const senderNames =
|
||||
thread.firstParticipant.displayName +
|
||||
@ -100,7 +105,11 @@ export const EmailThreadPreview = ({
|
||||
];
|
||||
|
||||
return (
|
||||
<StyledCardContent onClick={() => onClick()} divider={divider}>
|
||||
<StyledCardContent
|
||||
onClick={() => onClick()}
|
||||
divider={divider}
|
||||
visibility={visibility}
|
||||
>
|
||||
<StyledHeading unread={!thread.read}>
|
||||
<StyledParticipantsContainer>
|
||||
<Avatar
|
||||
@ -131,8 +140,13 @@ export const EmailThreadPreview = ({
|
||||
</StyledHeading>
|
||||
|
||||
<StyledSubjectAndBody>
|
||||
<StyledSubject>{thread.subject}</StyledSubject>
|
||||
<StyledBody>{thread.lastMessageBody}</StyledBody>
|
||||
{visibility !== 'metadata' && (
|
||||
<StyledSubject>{thread.subject}</StyledSubject>
|
||||
)}
|
||||
{visibility === 'share_everything' && (
|
||||
<StyledBody>{thread.lastMessageBody}</StyledBody>
|
||||
)}
|
||||
{visibility !== 'share_everything' && <EmailThreadNotShared />}
|
||||
</StyledSubjectAndBody>
|
||||
<StyledReceivedAt>
|
||||
{formatToHumanReadableDate(thread.lastMessageReceivedAt)}
|
||||
|
@ -185,7 +185,18 @@ export const EmailThreads = ({
|
||||
key={index}
|
||||
divider={index < timelineThreads.length - 1}
|
||||
thread={thread}
|
||||
onClick={() => openEmailThread(thread.id)}
|
||||
onClick={
|
||||
thread.visibility === 'share_everything'
|
||||
? () => openEmailThread(thread.id)
|
||||
: () => {}
|
||||
}
|
||||
visibility={
|
||||
// TODO: Fix typing for visibility
|
||||
thread.visibility as
|
||||
| 'metadata'
|
||||
| 'subject'
|
||||
| 'share_everything'
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Card>
|
||||
|
@ -76,6 +76,7 @@ export {
|
||||
IconLink,
|
||||
IconLinkOff,
|
||||
IconList,
|
||||
IconLock,
|
||||
IconLogout,
|
||||
IconMail,
|
||||
IconMailCog,
|
||||
|
Loading…
Reference in New Issue
Block a user