twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-10-27 03:33:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix event value elipsis (#5840)

Browse Source 
<img width="400" alt="Capture d’écran 2024-06-12 à 14 41 08"
src="https://github.com/twentyhq/twenty/assets/22936103/12d333a9-16ce-45f3-a1eb-060bf77bae96">
<img width="400" alt="Capture d’écran 2024-06-12 à 16 47 53"
src="https://github.com/twentyhq/twenty/assets/22936103/6e154936-82d6-4e19-af4c-e6036b01dd04">
<img width="400" alt="Capture d’écran 2024-06-12 à 16 52 48"
src="https://github.com/twentyhq/twenty/assets/22936103/6440af6b-ea40-4321-942a-a6e728a78104">
This commit is contained in:
Thomas Trompette 2024-06-12 17:30:59 +02:00 committed by GitHub
parent 732e8912da
commit 007e0e8b0e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/activities/timelineActivities/rows/calendar/components/EventCardCalendarEvent.tsx
View File

@ -27,6 +27,7 @@ const StyledCalendarEventContent = styled.div`
flex-direction: column; flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
justify-content: center; justify-content: center;
overflow: hidden;
`; `;
const StyledCalendarEventTop = styled.div` const StyledCalendarEventTop = styled.div`
@ -39,7 +40,9 @@ const StyledCalendarEventTop = styled.div`
const StyledCalendarEventTitle = styled.div` const StyledCalendarEventTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary}; color: ${({ theme }) => theme.font.color.primary};
font-weight: ${({ theme }) => theme.font.weight.medium}; font-weight: ${({ theme }) => theme.font.weight.medium};
display: flex; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`; `;
const StyledCalendarEventBody = styled.div` const StyledCalendarEventBody = styled.div`

2
packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx
View File

@ -19,7 +19,7 @@ const StyledEventFieldDiffContainer = styled.div`
flex-direction: row; flex-direction: row;
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
height: 24px; height: 24px;
width: 250px; width: 380px;
`; `;
export const EventFieldDiff = ({ export const EventFieldDiff = ({

3
packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiffValue.tsx
View File

@ -15,6 +15,9 @@ type EventFieldDiffValueProps = {
const StyledEventFieldDiffValue = styled.div` const StyledEventFieldDiffValue = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`; `;
export const EventFieldDiffValue = ({ export const EventFieldDiffValue = ({

15
packages/twenty-front/src/modules/activities/timelineActivities/rows/message/components/EventCardMessage.tsx
View File

@ -13,6 +13,7 @@ import { isDefined } from '~/utils/isDefined';
const StyledEventCardMessageContainer = styled.div` const StyledEventCardMessageContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 380px;
`; `;
const StyledEmailContent = styled.div` const StyledEmailContent = styled.div`
@ -31,18 +32,21 @@ const StyledEmailTop = styled.div`
const StyledEmailTitle = styled.div` const StyledEmailTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary}; color: ${({ theme }) => theme.font.color.primary};
font-weight: ${({ theme }) => theme.font.weight.medium}; font-weight: ${({ theme }) => theme.font.weight.medium};
display: flex; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`; `;
const StyledEmailParticipants = styled.div` const StyledEmailParticipants = styled.div`
color: ${({ theme }) => theme.font.color.tertiary}; color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
font-size: ${({ theme }) => theme.font.size.sm}; font-size: ${({ theme }) => theme.font.size.sm};
`; `;
const StyledEmailBody = styled.div` const StyledEmailBody = styled.div`
cursor: pointer; cursor: pointer;
display: flex; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`; `;
export const EventCardMessage = ({ export const EventCardMessage = ({
@ -103,15 +107,14 @@ export const EventCardMessage = ({
const messageParticipantHandles = message.messageParticipants const messageParticipantHandles = message.messageParticipants
.map((participant) => participant.handle) .map((participant) => participant.handle)
.filter((handle) => isDefined(handle) && handle !== '')
.join(', '); .join(', ');
return ( return (
<StyledEventCardMessageContainer> <StyledEventCardMessageContainer>
<StyledEmailContent> <StyledEmailContent>
<StyledEmailTop> <StyledEmailTop>
<StyledEmailTitle> <StyledEmailTitle>{message.subject}</StyledEmailTitle>
<div>{message.subject}</div>
</StyledEmailTitle>
<StyledEmailParticipants> <StyledEmailParticipants>
<OverflowingTextWithTooltip text={messageParticipantHandles} /> <OverflowingTextWithTooltip text={messageParticipantHandles} />
</StyledEmailParticipants> </StyledEmailParticipants>