From 17cd98610d9756b5441c5bcaf2e64e0049d7f42e Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 10:48:53 +0200 Subject: [PATCH 01/46] Create ParticipantChip --- .../activities/components/ParticipantChip.tsx | 60 +++++++++++++++++++ .../components/EmailThreadMessageSender.tsx | 49 ++------------- 2 files changed, 66 insertions(+), 43 deletions(-) create mode 100644 packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx new file mode 100644 index 000000000000..18b60e8ecb44 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx @@ -0,0 +1,60 @@ +import styled from '@emotion/styled'; + +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; +import { RecordChip } from '@/object-record/components/RecordChip'; +import { Person } from '@/people/types/Person'; +import { Avatar } from '@/users/components/Avatar'; + +const StyledAvatar = styled(Avatar)` + margin: ${({ theme }) => theme.spacing(0, 1)}; +`; + +const StyledSenderName = styled.span` + color: ${({ theme }) => theme.font.color.primary}; + font-size: ${({ theme }) => theme.font.size.sm}; + font-weight: ${({ theme }) => theme.font.weight.medium}; + overflow: hidden; + text-overflow: ellipsis; +`; + +const StyledContainer = styled.div` + align-items: flex-start; + display: flex; +`; + +const StyledRecordChip = styled(RecordChip)` + font-weight: ${({ theme }) => theme.font.weight.medium}; +`; + +type ParticipantChipProps = { + person?: Person; + displayName: string; + avatarUrl: string; +}; + +export const ParticipantChip = ({ + person, + displayName, + avatarUrl, +}: ParticipantChipProps) => { + return ( + + {person ? ( + + ) : ( + <> + + {displayName} + + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx index ae2552c203b1..26f01b14420a 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx @@ -1,11 +1,8 @@ -import React from 'react'; import styled from '@emotion/styled'; +import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant'; import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant'; -import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; -import { RecordChip } from '@/object-record/components/RecordChip'; -import { Avatar } from '@/users/components/Avatar'; import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; const StyledEmailThreadMessageSender = styled.div` @@ -13,23 +10,6 @@ const StyledEmailThreadMessageSender = styled.div` justify-content: space-between; `; -const StyledEmailThreadMessageSenderUser = styled.div` - align-items: flex-start; - display: flex; -`; - -const StyledAvatar = styled(Avatar)` - margin: ${({ theme }) => theme.spacing(0, 1)}; -`; - -const StyledSenderName = styled.span` - color: ${({ theme }) => theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; - overflow: hidden; - text-overflow: ellipsis; -`; - const StyledThreadMessageSentAt = styled.div` align-items: flex-end; display: flex; @@ -37,10 +17,6 @@ const StyledThreadMessageSentAt = styled.div` font-size: ${({ theme }) => theme.font.size.sm}; `; -const StyledRecordChip = styled(RecordChip)` - font-weight: ${({ theme }) => theme.font.weight.medium}; -`; - type EmailThreadMessageSenderProps = { sender: EmailThreadMessageParticipant; sentAt: string; @@ -61,24 +37,11 @@ export const EmailThreadMessageSender = ({ return ( - - {person ? ( - - ) : ( - <> - - {displayName} - - )} - + {beautifyPastDateRelativeToNow(sentAt)} From 6cabfd83893edb6a6e9ee489d417c3237a773771 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 11:58:12 +0200 Subject: [PATCH 02/46] create CalendarEventParticipantsResponseStatus component --- .../components/CalendarEventDetails.tsx | 54 +++++++++++-------- ...alendarEventParticipantsResponseStatus.tsx | 33 ++++++++++++ .../calendar/types/CalendarEvent.ts | 7 ++- .../types/CalendarEventParticipant.ts | 12 +++++ .../activities/components/ParticipantChip.tsx | 21 ++++---- .../components/EmailThreadMessageSender.tsx | 16 +----- 6 files changed, 92 insertions(+), 51 deletions(-) create mode 100644 packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx create mode 100644 packages/twenty-front/src/modules/activities/calendar/types/CalendarEventParticipant.ts diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index 393b17971efa..b245619cd223 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -1,7 +1,9 @@ +import React from 'react'; import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconCalendarEvent } from 'twenty-ui'; +import { CalendarEventParticipantsResponseStatus } from '@/activities/calendar/components/CalendarEventParticipantsResponseStatus'; import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent'; import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; @@ -88,6 +90,30 @@ export const CalendarEventDetails = ({ ({ name }) => name, ); + const { participants } = calendarEvent; + + const Fields = fieldsToDisplay.map((fieldName) => ( + + [() => undefined, { loading: false }], + }} + > + + + + )); + return ( - {fieldsToDisplay.map((fieldName) => ( - - [() => undefined, { loading: false }], - }} - > - - - - ))} + {Fields.slice(0, 2)} + {participants && ( + + )} + {Fields.slice(2)} ); diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx new file mode 100644 index 000000000000..47fb53c6c9a8 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx @@ -0,0 +1,33 @@ +import styled from '@emotion/styled'; +import groupBy from 'lodash.groupby'; + +import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; +import { ParticipantChip } from '@/activities/components/ParticipantChip'; +import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; + +const StyledPropertyBox = styled(PropertyBox)` + height: ${({ theme }) => theme.spacing(6)}; + padding: 0; +`; + +export const CalendarEventParticipantsResponseStatus = ({ + participants, +}: { + participants: CalendarEventParticipant[]; +}) => { + const groupedParticipants = groupBy(participants, 'responseStatus'); + + return ( + <> + {Object.entries(groupedParticipants).map( + ([responseStatus, participants]) => ( + + {participants.map((participant) => ( + + ))} + + ), + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts b/packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts index 01ec2c2d5ac2..173f82012db4 100644 --- a/packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts +++ b/packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts @@ -1,3 +1,5 @@ +import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; + // TODO: use backend CalendarEvent type when ready export type CalendarEvent = { conferenceLink?: { @@ -14,8 +16,5 @@ export type CalendarEvent = { startsAt: string; title?: string; visibility: 'METADATA' | 'SHARE_EVERYTHING'; - participants?: { - displayName: string; - workspaceMemberId?: string; - }[]; + participants?: CalendarEventParticipant[]; }; diff --git a/packages/twenty-front/src/modules/activities/calendar/types/CalendarEventParticipant.ts b/packages/twenty-front/src/modules/activities/calendar/types/CalendarEventParticipant.ts new file mode 100644 index 000000000000..079e57c18d31 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/calendar/types/CalendarEventParticipant.ts @@ -0,0 +1,12 @@ +import { Person } from '@/people/types/Person'; +import { WorkspaceMember } from '~/generated-metadata/graphql'; + +export type CalendarEventParticipant = { + id: string; + handle: string; + isOrganizer: boolean; + displayName: string; + person?: Person; + workspaceMember?: WorkspaceMember; + responseStatus: 'ACCEPTED' | 'DECLINED' | 'NEEDS_ACTION' | 'TENTATIVE'; +}; diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx index 18b60e8ecb44..0ee3699f3a70 100644 --- a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx +++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; +import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { RecordChip } from '@/object-record/components/RecordChip'; -import { Person } from '@/people/types/Person'; import { Avatar } from '@/users/components/Avatar'; const StyledAvatar = styled(Avatar)` @@ -26,17 +26,16 @@ const StyledRecordChip = styled(RecordChip)` font-weight: ${({ theme }) => theme.font.weight.medium}; `; -type ParticipantChipProps = { - person?: Person; - displayName: string; - avatarUrl: string; -}; +export const ParticipantChip = ({ participant }: any) => { + const { person, workspaceMember } = participant; + + const displayName = getDisplayNameFromParticipant({ + participant, + shouldUseFullName: true, + }); + + const avatarUrl = person?.avatarUrl ?? workspaceMember?.avatarUrl ?? ''; -export const ParticipantChip = ({ - person, - displayName, - avatarUrl, -}: ParticipantChipProps) => { return ( {person ? ( diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx index 26f01b14420a..38e3730dfb30 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx @@ -2,7 +2,6 @@ import styled from '@emotion/styled'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant'; -import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant'; import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; const StyledEmailThreadMessageSender = styled.div` @@ -26,22 +25,9 @@ export const EmailThreadMessageSender = ({ sender, sentAt, }: EmailThreadMessageSenderProps) => { - const { person, workspaceMember } = sender; - - const displayName = getDisplayNameFromParticipant({ - participant: sender, - shouldUseFullName: true, - }); - - const avatarUrl = person?.avatarUrl ?? workspaceMember?.avatarUrl ?? ''; - return ( - + {beautifyPastDateRelativeToNow(sentAt)} From 983e60ab3c5de8fce338d198fd2697675bbb11be Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 12:28:38 +0200 Subject: [PATCH 03/46] modify calendarEventParticipant --- .../components/CalendarEventDetails.tsx | 8 +++--- .../calendar/types/CalendarEvent.ts | 2 +- .../src/testing/mock-data/calendar.ts | 26 ++++++++++++++++--- .../calendar-event.object-metadata.ts | 2 +- 4 files changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index b245619cd223..704e3813d3bf 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -90,7 +90,9 @@ export const CalendarEventDetails = ({ ({ name }) => name, ); - const { participants } = calendarEvent; + const { calendarEventParticipants } = calendarEvent; + + console.log('calendarEvent', calendarEvent); const Fields = fieldsToDisplay.map((fieldName) => ( @@ -137,9 +139,9 @@ export const CalendarEventDetails = ({ {Fields.slice(0, 2)} - {participants && ( + {calendarEventParticipants && ( )} {Fields.slice(2)} diff --git a/packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts b/packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts index 173f82012db4..a598c23d967f 100644 --- a/packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts +++ b/packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts @@ -16,5 +16,5 @@ export type CalendarEvent = { startsAt: string; title?: string; visibility: 'METADATA' | 'SHARE_EVERYTHING'; - participants?: CalendarEventParticipant[]; + calendarEventParticipants?: CalendarEventParticipant[]; }; diff --git a/packages/twenty-front/src/testing/mock-data/calendar.ts b/packages/twenty-front/src/testing/mock-data/calendar.ts index 7e115ddaca2b..a58f0074ec94 100644 --- a/packages/twenty-front/src/testing/mock-data/calendar.ts +++ b/packages/twenty-front/src/testing/mock-data/calendar.ts @@ -10,10 +10,28 @@ export const mockedCalendarEvents: CalendarEvent[] = [ isFullDay: false, startsAt: addDays(new Date().setHours(10, 0), 1).toISOString(), visibility: 'METADATA', - participants: [ - { displayName: 'John Doe', workspaceMemberId: 'john-doe' }, - { displayName: 'Jane Doe', workspaceMemberId: 'jane-doe' }, - { displayName: 'Tim Apple', workspaceMemberId: 'tim-apple' }, + calendarEventParticipants: [ + { + id: '1', + handle: 'jdoe', + isOrganizer: false, + responseStatus: 'ACCEPTED', + displayName: 'John Doe', + }, + { + id: '2', + handle: 'jadoe', + isOrganizer: false, + responseStatus: 'ACCEPTED', + displayName: 'Jane Doe', + }, + { + id: '3', + handle: 'tapple', + isOrganizer: false, + responseStatus: 'ACCEPTED', + displayName: 'Tim Apple', + }, ], }, { diff --git a/packages/twenty-server/src/modules/calendar/standard-objects/calendar-event.object-metadata.ts b/packages/twenty-server/src/modules/calendar/standard-objects/calendar-event.object-metadata.ts index 95382121dcd7..30348db561be 100644 --- a/packages/twenty-server/src/modules/calendar/standard-objects/calendar-event.object-metadata.ts +++ b/packages/twenty-server/src/modules/calendar/standard-objects/calendar-event.object-metadata.ts @@ -182,5 +182,5 @@ export class CalendarEventObjectMetadata extends BaseObjectMetadata { inverseSideTarget: () => CalendarEventParticipantObjectMetadata, onDelete: RelationOnDeleteAction.CASCADE, }) - eventParticipants: CalendarEventParticipantObjectMetadata[]; + calendarEventParticipants: CalendarEventParticipantObjectMetadata[]; } From 09e97afea12b96c814afeb48153be2ea2bae3451 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 13:46:21 +0200 Subject: [PATCH 04/46] augment depth in useFindOneRecord --- .../right-drawer/components/RightDrawerCalendarEvent.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx b/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx index 845885e7cd7d..f0e895dcdaa5 100644 --- a/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx @@ -14,6 +14,7 @@ export const RightDrawerCalendarEvent = () => { objectNameSingular: CoreObjectNameSingular.CalendarEvent, objectRecordId: viewableCalendarEventId ?? '', onCompleted: (record) => setRecords([record]), + depth: 2, }); if (!calendarEvent) return null; From 6f2083421cc284cafb33b5d6650f236fb3c4d000 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 14:12:41 +0200 Subject: [PATCH 05/46] wip --- ...alendarEventParticipantsResponseStatus.tsx | 35 +++++++++++-------- ...arEventParticipantsResponseStatusField.tsx | 27 ++++++++++++++ 2 files changed, 48 insertions(+), 14 deletions(-) create mode 100644 packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx index 47fb53c6c9a8..f9a912731cbe 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx @@ -1,31 +1,38 @@ -import styled from '@emotion/styled'; import groupBy from 'lodash.groupby'; +import { CalendarEventParticipantsResponseStatusField } from '@/activities/calendar/components/CalendarEventParticipantsResponseStatusField'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; -import { ParticipantChip } from '@/activities/components/ParticipantChip'; -import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; - -const StyledPropertyBox = styled(PropertyBox)` - height: ${({ theme }) => theme.spacing(6)}; - padding: 0; -`; export const CalendarEventParticipantsResponseStatus = ({ participants, }: { participants: CalendarEventParticipant[]; }) => { - const groupedParticipants = groupBy(participants, 'responseStatus'); + const groupedParticipants = groupBy(participants, (participant) => { + switch (participant.responseStatus) { + case 'ACCEPTED': + return 'Yes'; + case 'DECLINED': + return 'No'; + case 'NEEDS_ACTION': + case 'TENTATIVE': + return 'Maybe'; + default: + return ''; + } + }); + + const responseStatusOrder = ['Yes', 'Maybe', 'No']; return ( <> {Object.entries(groupedParticipants).map( ([responseStatus, participants]) => ( - - {participants.map((participant) => ( - - ))} - + ), )} diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx new file mode 100644 index 000000000000..57cb64a28326 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -0,0 +1,27 @@ +import styled from '@emotion/styled'; + +import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; +import { ParticipantChip } from '@/activities/components/ParticipantChip'; +import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; + +const StyledPropertyBox = styled(PropertyBox)` + height: ${({ theme }) => theme.spacing(6)}; + padding: 0; +`; + +export const CalendarEventParticipantsResponseStatusField = ({ + responseStatus, + participants, +}: { + responseStatus: 'Yes' | 'Maybe' | 'No'; + participants: CalendarEventParticipant[]; +}) => { + return ( + + {responseStatus} + {participants.map((participant) => ( + + ))} + + ); +}; From b13aa18218c775d00e7fc718437defb09c83c6a9 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 14:14:51 +0200 Subject: [PATCH 06/46] add typing --- ...alendarEventParticipantsResponseStatus.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx index f9a912731cbe..1db72c28ac34 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatus.tsx @@ -22,19 +22,21 @@ export const CalendarEventParticipantsResponseStatus = ({ } }); - const responseStatusOrder = ['Yes', 'Maybe', 'No']; + const responseStatusOrder: ('Yes' | 'Maybe' | 'No')[] = [ + 'Yes', + 'Maybe', + 'No', + ]; return ( <> - {Object.entries(groupedParticipants).map( - ([responseStatus, participants]) => ( - - ), - )} + {responseStatusOrder.map((responseStatus) => ( + + ))} ); }; From 1710c50bb01518b105213a05d03099093fd28ba9 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 14:34:55 +0200 Subject: [PATCH 07/46] add labels and icons --- ...arEventParticipantsResponseStatusField.tsx | 48 ++++++++++++++++++- .../display/icon/components/TablerIcons.ts | 1 + 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 57cb64a28326..1643a03e2f49 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -1,14 +1,45 @@ +import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; +import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; const StyledPropertyBox = styled(PropertyBox)` height: ${({ theme }) => theme.spacing(6)}; padding: 0; `; +const StyledIconContainer = styled.div` + align-items: center; + color: ${({ theme }) => theme.font.color.tertiary}; + display: flex; + width: 16px; + + svg { + align-items: center; + display: flex; + height: 16px; + justify-content: center; + width: 16px; + } +`; + +const StyledLabelAndIconContainer = styled.div` + align-items: center; + color: ${({ theme }) => theme.font.color.tertiary}; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; +`; + +const StyledLabelContainer = styled.div<{ width?: number }>` + color: ${({ theme }) => theme.font.color.tertiary}; + font-size: ${({ theme }) => theme.font.size.sm}; + width: ${({ width }) => width}px; +`; + export const CalendarEventParticipantsResponseStatusField = ({ responseStatus, participants, @@ -16,9 +47,24 @@ export const CalendarEventParticipantsResponseStatusField = ({ responseStatus: 'Yes' | 'Maybe' | 'No'; participants: CalendarEventParticipant[]; }) => { + const theme = useTheme(); + + const Icon = { + Yes: , + Maybe: , + No: , + }[responseStatus]; + return ( - {responseStatus} + + {Icon} + + + {responseStatus} + + + {participants.map((participant) => ( ))} diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts index 25ec8383fa5d..39382d1ed9e8 100644 --- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts +++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts @@ -112,6 +112,7 @@ export { IconPresentation, IconProgressCheck, IconPuzzle, + IconQuestionMark, IconRefresh, IconRelationManyToMany, IconRelationOneToMany, From 9b8c06c9fdc8fbfba4c87a748e6311179167c7a7 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 15:07:32 +0200 Subject: [PATCH 08/46] improve styling --- ...arEventParticipantsResponseStatusField.tsx | 43 +++++++++++++++---- 1 file changed, 34 insertions(+), 9 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 1643a03e2f49..9f2792698836 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -7,6 +7,18 @@ import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; +const StyledInlineCellBaseContainer = styled.div` + align-items: center; + box-sizing: border-box; + width: 100%; + display: flex; + + gap: ${({ theme }) => theme.spacing(1)}; + + position: relative; + user-select: none; +`; + const StyledPropertyBox = styled(PropertyBox)` height: ${({ theme }) => theme.spacing(6)}; padding: 0; @@ -40,6 +52,15 @@ const StyledLabelContainer = styled.div<{ width?: number }>` width: ${({ width }) => width}px; `; +const StyledParticipantsContainer = styled.div` + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + align-items: center; +`; + export const CalendarEventParticipantsResponseStatusField = ({ responseStatus, participants, @@ -57,17 +78,21 @@ export const CalendarEventParticipantsResponseStatusField = ({ return ( - - {Icon} + + + {Icon} - - {responseStatus} - - + + {responseStatus} + + - {participants.map((participant) => ( - - ))} + + {participants.map((participant) => ( + + ))} + + ); }; From c0f4105667922a351131c23c536dca3d0f736272 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 15:28:08 +0200 Subject: [PATCH 09/46] add chip variant --- .../components/CalendarEventDetails.tsx | 1 + ...arEventParticipantsResponseStatusField.tsx | 5 +++-- .../activities/components/ParticipantChip.tsx | 21 +++++++++++++------ .../components/EmailThreadMessageSender.tsx | 2 +- 4 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index 704e3813d3bf..db993e2cfad3 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -32,6 +32,7 @@ const StyledContainer = styled.div` flex-direction: column; gap: ${({ theme }) => theme.spacing(6)}; padding: ${({ theme }) => theme.spacing(6)}; + max-width: 100%; `; const StyledEventChip = styled(Chip)` diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 9f2792698836..b42552452f45 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -53,12 +53,13 @@ const StyledLabelContainer = styled.div<{ width?: number }>` `; const StyledParticipantsContainer = styled.div` + align-items: center; display: flex; gap: ${({ theme }) => theme.spacing(1)}; + max-width: 100%; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - align-items: center; + white-space: nowrap; `; export const CalendarEventParticipantsResponseStatusField = ({ diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx index 0ee3699f3a70..0f1f755c5207 100644 --- a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx +++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx @@ -9,10 +9,11 @@ const StyledAvatar = styled(Avatar)` margin: ${({ theme }) => theme.spacing(0, 1)}; `; -const StyledSenderName = styled.span` +const StyledSenderName = styled.span<{ variant?: 'default' | 'bold' }>` color: ${({ theme }) => theme.font.color.primary}; font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; + font-weight: ${({ theme, variant }) => + variant === 'bold' ? theme.font.weight.medium : theme.font.weight.regular}; overflow: hidden; text-overflow: ellipsis; `; @@ -22,11 +23,18 @@ const StyledContainer = styled.div` display: flex; `; -const StyledRecordChip = styled(RecordChip)` - font-weight: ${({ theme }) => theme.font.weight.medium}; +const StyledRecordChip = styled(RecordChip)<{ variant: 'default' | 'bold' }>` + font-weight: ${({ theme, variant }) => + variant === 'bold' ? theme.font.weight.medium : theme.font.weight.regular}; `; -export const ParticipantChip = ({ participant }: any) => { +export const ParticipantChip = ({ + participant, + variant = 'default', +}: { + participant: any; + variant?: 'default' | 'bold'; +}) => { const { person, workspaceMember } = participant; const displayName = getDisplayNameFromParticipant({ @@ -42,6 +50,7 @@ export const ParticipantChip = ({ participant }: any) => { ) : ( <> @@ -51,7 +60,7 @@ export const ParticipantChip = ({ participant }: any) => { placeholder={displayName} size="sm" /> - {displayName} + {displayName} )} diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx index 38e3730dfb30..d58e4606aafb 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx @@ -27,7 +27,7 @@ export const EmailThreadMessageSender = ({ }: EmailThreadMessageSenderProps) => { return ( - + {beautifyPastDateRelativeToNow(sentAt)} From 472b0a8e44f5c16c36e51f67e4c92a1699e370d7 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 15:34:19 +0200 Subject: [PATCH 10/46] order participants --- .../CalendarEventParticipantsResponseStatusField.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index b42552452f45..b402095a8964 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -77,6 +77,15 @@ export const CalendarEventParticipantsResponseStatusField = ({ No: , }[responseStatus]; + // We want to display external participants first + const orderedParticipants = [ + ...participants.filter((participant) => participant.person), + ...participants.filter( + (participant) => !participant.person && !participant.workspaceMember, + ), + ...participants.filter((participant) => participant.workspaceMember), + ]; + return ( @@ -89,7 +98,7 @@ export const CalendarEventParticipantsResponseStatusField = ({ - {participants.map((participant) => ( + {orderedParticipants.map((participant) => ( ))} From 3c255d20159fedd65b100d3e7243efb0cde43888 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 16:39:41 +0200 Subject: [PATCH 11/46] add a way to count the participants in view --- ...arEventParticipantsResponseStatusField.tsx | 48 ++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index b402095a8964..da641fedd3e5 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -1,5 +1,7 @@ +import React, { useEffect, useRef, useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useInView } from 'framer-motion'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; @@ -62,6 +64,41 @@ const StyledParticipantsContainer = styled.div` white-space: nowrap; `; +const ParticipantChipWithIntersectionObserver = ({ + participant, + setParticipantsInView, +}: { + participant: CalendarEventParticipant; + setParticipantsInView: React.Dispatch>>; +}) => { + // eslint-disable-next-line @nx/workspace-no-state-useref + const ref = useRef(null); + const isInView = useInView(ref); + + useEffect(() => { + if (isInView) { + setParticipantsInView((prev: Set) => { + const newSet = new Set(prev); + newSet.add(participant.id); + return newSet; + }); + } + if (!isInView) { + setParticipantsInView((prev: Set) => { + const newSet = new Set(prev); + newSet.delete(participant.id); + return newSet; + }); + } + }, [isInView, participant.id, setParticipantsInView]); + + return ( +
+ +
+ ); +}; + export const CalendarEventParticipantsResponseStatusField = ({ responseStatus, participants, @@ -71,6 +108,10 @@ export const CalendarEventParticipantsResponseStatusField = ({ }) => { const theme = useTheme(); + const [participantsInView, setParticipantsInView] = useState( + new Set(), + ); + const Icon = { Yes: , Maybe: , @@ -98,8 +139,13 @@ export const CalendarEventParticipantsResponseStatusField = ({ + {participantsInView.size} {orderedParticipants.map((participant) => ( - + ))} From 5afe8df63fc8529855d1baed476b3c0e5e68a339 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 17:20:57 +0200 Subject: [PATCH 12/46] add right marginto the intersection observer --- ...arEventParticipantsResponseStatusField.tsx | 44 +++++++++++-------- .../activities/components/ParticipantChip.tsx | 4 +- 2 files changed, 28 insertions(+), 20 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index da641fedd3e5..bb47fcd67b7e 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -60,10 +60,13 @@ const StyledParticipantsContainer = styled.div` gap: ${({ theme }) => theme.spacing(1)}; max-width: 100%; overflow: hidden; - text-overflow: ellipsis; white-space: nowrap; `; +const StyledParticipantChip = styled(ParticipantChip)<{ isInView: boolean }>` + opacity: ${({ isInView }) => (isInView ? 1 : 0)}; +`; + const ParticipantChipWithIntersectionObserver = ({ participant, setParticipantsInView, @@ -73,7 +76,10 @@ const ParticipantChipWithIntersectionObserver = ({ }) => { // eslint-disable-next-line @nx/workspace-no-state-useref const ref = useRef(null); - const isInView = useInView(ref); + const isInView = useInView(ref, { + once: true, + margin: '0px 0px -200px 0px', + }); useEffect(() => { if (isInView) { @@ -83,19 +89,13 @@ const ParticipantChipWithIntersectionObserver = ({ return newSet; }); } - if (!isInView) { - setParticipantsInView((prev: Set) => { - const newSet = new Set(prev); - newSet.delete(participant.id); - return newSet; - }); - } }, [isInView, participant.id, setParticipantsInView]); return ( -
- -
+ <> + +
+ ); }; @@ -139,13 +139,19 @@ export const CalendarEventParticipantsResponseStatusField = ({ - {participantsInView.size} - {orderedParticipants.map((participant) => ( - + {orderedParticipants.map((participant, index) => ( + <> + + {index === participantsInView.size - 1 && ( + {`+${ + orderedParticipants.length - participantsInView.size + }`} + )}{' '} + ))} diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx index 0f1f755c5207..4c18db700c64 100644 --- a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx +++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx @@ -31,9 +31,11 @@ const StyledRecordChip = styled(RecordChip)<{ variant: 'default' | 'bold' }>` export const ParticipantChip = ({ participant, variant = 'default', + className, }: { participant: any; variant?: 'default' | 'bold'; + className?: string; }) => { const { person, workspaceMember } = participant; @@ -45,7 +47,7 @@ export const ParticipantChip = ({ const avatarUrl = person?.avatarUrl ?? workspaceMember?.avatarUrl ?? ''; return ( - + {person ? ( Date: Mon, 8 Apr 2024 17:55:56 +0200 Subject: [PATCH 13/46] use react intersection observer instead --- .../components/CalendarEventDetails.tsx | 2 - ...arEventParticipantsResponseStatusField.tsx | 57 ++++++++++--------- 2 files changed, 30 insertions(+), 29 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index db993e2cfad3..37668d98e416 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -93,8 +93,6 @@ export const CalendarEventDetails = ({ const { calendarEventParticipants } = calendarEvent; - console.log('calendarEvent', calendarEvent); - const Fields = fieldsToDisplay.map((fieldName) => ( >>; }) => { - // eslint-disable-next-line @nx/workspace-no-state-useref - const ref = useRef(null); - const isInView = useInView(ref, { - once: true, - margin: '0px 0px -200px 0px', + const { ref, inView } = useInView({ + threshold: 1, + onChange: (inView) => { + if (inView) { + setParticipantsInView((prev: Set) => { + const newSet = new Set(prev); + newSet.add(participant.id); + return newSet; + }); + } + if (!inView) { + setParticipantsInView((prev: Set) => { + const newSet = new Set(prev); + newSet.delete(participant.id); + return newSet; + }); + } + }, }); - useEffect(() => { - if (isInView) { - setParticipantsInView((prev: Set) => { - const newSet = new Set(prev); - newSet.add(participant.id); - return newSet; - }); - } - }, [isInView, participant.id, setParticipantsInView]); - return ( - <> - -
- +
+ +
); }; @@ -142,15 +144,16 @@ export const CalendarEventParticipantsResponseStatusField = ({ {orderedParticipants.map((participant, index) => ( <> - {index === participantsInView.size - 1 && ( - {`+${ - orderedParticipants.length - participantsInView.size - }`} - )}{' '} + {index === participantsInView.size - 1 && + orderedParticipants.length - participantsInView.size !== 0 && ( + {`+${ + orderedParticipants.length - participantsInView.size + }`} + )}{' '} ))} From 7aa325606b617cffe66a6b6a2c1d88d7cafac036 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 17:57:45 +0200 Subject: [PATCH 14/46] add root margin --- .../components/CalendarEventParticipantsResponseStatusField.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index c56f6ff7e71c..10eac2a33958 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -92,6 +92,7 @@ const ParticipantChipWithIntersectionObserver = ({ }); } }, + rootMargin: '0px -50px 0px 0px', }); return ( From dd9ab48fa3266d9fd27f7797284c3a53d3d256b0 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 18:13:20 +0200 Subject: [PATCH 15/46] introduce IntersectionObserverWrapper --- ...arEventParticipantsResponseStatusField.tsx | 53 ++++--------------- .../IntersectionObserverWrapper.tsx | 41 ++++++++++++++ 2 files changed, 51 insertions(+), 43 deletions(-) create mode 100644 packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 10eac2a33958..78789294690d 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; -import { useInView } from 'react-intersection-observer'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; +import { IntersectionObserverWrapper } from '@/activities/calendar/components/IntersectionObserverWrapper'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; @@ -63,45 +63,10 @@ const StyledParticipantsContainer = styled.div` white-space: nowrap; `; -const StyledParticipantChip = styled(ParticipantChip)<{ isInView: boolean }>` - opacity: ${({ isInView }) => (isInView ? 1 : 0)}; +const StyledParticipantChip = styled(ParticipantChip)<{ inView?: boolean }>` + opacity: ${({ inView }) => (inView ? 1 : 0)}; `; -const ParticipantChipWithIntersectionObserver = ({ - participant, - setParticipantsInView, -}: { - participant: CalendarEventParticipant; - setParticipantsInView: React.Dispatch>>; -}) => { - const { ref, inView } = useInView({ - threshold: 1, - onChange: (inView) => { - if (inView) { - setParticipantsInView((prev: Set) => { - const newSet = new Set(prev); - newSet.add(participant.id); - return newSet; - }); - } - if (!inView) { - setParticipantsInView((prev: Set) => { - const newSet = new Set(prev); - newSet.delete(participant.id); - return newSet; - }); - } - }, - rootMargin: '0px -50px 0px 0px', - }); - - return ( -
- -
- ); -}; - export const CalendarEventParticipantsResponseStatusField = ({ responseStatus, participants, @@ -144,11 +109,13 @@ export const CalendarEventParticipantsResponseStatusField = ({ {orderedParticipants.map((participant, index) => ( <> - + + + {index === participantsInView.size - 1 && orderedParticipants.length - participantsInView.size !== 0 && ( {`+${ diff --git a/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx b/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx new file mode 100644 index 000000000000..0a41601379cc --- /dev/null +++ b/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { useInView } from 'react-intersection-observer'; + +export const IntersectionObserverWrapper = ({ + set, + id, + children, + margin, +}: { + set: React.Dispatch>>; + id: string; + children: React.ReactNode; + margin?: string; +}) => { + const { ref, inView } = useInView({ + threshold: 1, + onChange: (inView) => { + if (inView) { + set((prev: Set) => { + const newSet = new Set(prev); + newSet.add(id); + return newSet; + }); + } + if (!inView) { + set((prev: Set) => { + const newSet = new Set(prev); + newSet.delete(id); + return newSet; + }); + } + }, + rootMargin: margin, + }); + + return ( +
+ {React.cloneElement(children as React.ReactElement, { inView })} +
+ ); +}; From cb6fd97423b722f877cc0b588213f5ba0cb639cd Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 18:20:18 +0200 Subject: [PATCH 16/46] create CalendarEventParticipantPlus --- .../CalendarEventParticipantPlus.tsx | 19 +++++++++++++++++++ ...arEventParticipantsResponseStatusField.tsx | 11 +++++++---- 2 files changed, 26 insertions(+), 4 deletions(-) create mode 100644 packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx new file mode 100644 index 000000000000..8b139b58a8f4 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx @@ -0,0 +1,19 @@ +import styled from '@emotion/styled'; + +const StyledCalendarEventParticipantPlusContainer = styled.div` + align-items: center; + display: flex; + justify-content: space-between; +`; + +export const CalendarEventParticipantPlus = ({ + number, +}: { + number: number; +}) => { + return ( + + +{number} + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 78789294690d..8f3a67547eca 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -1,8 +1,9 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; +import { CalendarEventParticipantPlus } from '@/activities/calendar/components/CalendarEventParticipantPlus'; import { IntersectionObserverWrapper } from '@/activities/calendar/components/IntersectionObserverWrapper'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; @@ -118,9 +119,11 @@ export const CalendarEventParticipantsResponseStatusField = ({ {index === participantsInView.size - 1 && orderedParticipants.length - participantsInView.size !== 0 && ( - {`+${ - orderedParticipants.length - participantsInView.size - }`} + )}{' '} ))} From f7077db5529dd079a814ce6b608b701e37c8b8c9 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Mon, 8 Apr 2024 18:37:51 +0200 Subject: [PATCH 17/46] improve plus button --- .../components/CalendarEventParticipantPlus.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx index 8b139b58a8f4..257449341fec 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx @@ -2,17 +2,29 @@ import styled from '@emotion/styled'; const StyledCalendarEventParticipantPlusContainer = styled.div` align-items: center; + background: ${({ theme }) => theme.background.tertiary}; + border-radius: 4px; display: flex; + height: 20px; justify-content: space-between; + padding: 3px 4px; + box-sizing: border-box; + cursor: pointer; + + &:hover { + background: ${({ theme }) => theme.background.quaternary}; + } `; export const CalendarEventParticipantPlus = ({ number, + onClick, }: { number: number; + onClick?: () => void; }) => { return ( - + +{number} ); From 5aa84232f0c84ec8f288dd945f5d9474b83c819e Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 11:01:21 +0200 Subject: [PATCH 18/46] update root --- .../CalendarEventParticipantsResponseStatusField.tsx | 5 ++++- .../activities/calendar/components/ExpendableCell.tsx | 5 +++++ .../calendar/components/IntersectionObserverWrapper.tsx | 3 +++ 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 packages/twenty-front/src/modules/activities/calendar/components/ExpendableCell.tsx diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 8f3a67547eca..bbb2ac0b213b 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useRef, useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; @@ -96,6 +96,8 @@ export const CalendarEventParticipantsResponseStatusField = ({ ...participants.filter((participant) => participant.workspaceMember), ]; + const participantsContainerRef = useRef(null); + return ( @@ -113,6 +115,7 @@ export const CalendarEventParticipantsResponseStatusField = ({ diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpendableCell.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpendableCell.tsx new file mode 100644 index 000000000000..859fc09f8f0f --- /dev/null +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpendableCell.tsx @@ -0,0 +1,5 @@ +export const ExpendableCell = ({ children, isExpanded }) => { + return ( +
{children}
+ ); +}; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx b/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx index 0a41601379cc..7e5ea01aa03b 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx @@ -4,11 +4,13 @@ import { useInView } from 'react-intersection-observer'; export const IntersectionObserverWrapper = ({ set, id, + rootRef, children, margin, }: { set: React.Dispatch>>; id: string; + rootRef?: React.RefObject; children: React.ReactNode; margin?: string; }) => { @@ -30,6 +32,7 @@ export const IntersectionObserverWrapper = ({ }); } }, + root: rootRef?.current, rootMargin: margin, }); From 1e4b1c1fac6bbf4f62c9cbec5160ef8b7f459aae Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 11:30:49 +0200 Subject: [PATCH 19/46] making the component generic --- ...arEventParticipantsResponseStatusField.tsx | 34 +++----------- .../calendar/components/ExpandableList.tsx | 47 +++++++++++++++++++ .../IntersectionObserverWrapper.tsx | 8 ++-- 3 files changed, 58 insertions(+), 31 deletions(-) create mode 100644 packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index bbb2ac0b213b..2e54de50a45b 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -1,10 +1,9 @@ -import { useRef, useState } from 'react'; +import { useRef } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; -import { CalendarEventParticipantPlus } from '@/activities/calendar/components/CalendarEventParticipantPlus'; -import { IntersectionObserverWrapper } from '@/activities/calendar/components/IntersectionObserverWrapper'; +import { ExpandableList } from '@/activities/calendar/components/ExpandableList'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; @@ -77,10 +76,6 @@ export const CalendarEventParticipantsResponseStatusField = ({ }) => { const theme = useTheme(); - const [participantsInView, setParticipantsInView] = useState( - new Set(), - ); - const Icon = { Yes: , Maybe: , @@ -110,26 +105,11 @@ export const CalendarEventParticipantsResponseStatusField = ({ - {orderedParticipants.map((participant, index) => ( - <> - - - - {index === participantsInView.size - 1 && - orderedParticipants.length - participantsInView.size !== 0 && ( - - )}{' '} - - ))} + diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx new file mode 100644 index 000000000000..5e3674eb971f --- /dev/null +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx @@ -0,0 +1,47 @@ +import React, { useState } from 'react'; + +import { CalendarEventParticipantPlus } from '@/activities/calendar/components/CalendarEventParticipantPlus'; +import { IntersectionObserverWrapper } from '@/activities/calendar/components/IntersectionObserverWrapper'; + +export const ExpandableList = ({ + components, + rootRef, + margin, +}: { + components: React.ReactNode[]; + rootRef: React.RefObject; + margin?: string; +}) => { + const [componentsInView, setComponentsInView] = useState(new Set()); + + const firstComponent = components[0]; + + return ( + <> + {firstComponent} + {components.slice(1).map((component, index) => ( + + + {component} + + {index === componentsInView.size && + components.length - componentsInView.size - 1 !== 0 && ( + + )}{' '} + + ))} + {components.length - componentsInView.size - 1 !== 0 && ( + + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx b/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx index 7e5ea01aa03b..03452f8dd1b7 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx @@ -8,8 +8,8 @@ export const IntersectionObserverWrapper = ({ children, margin, }: { - set: React.Dispatch>>; - id: string; + set: React.Dispatch>>; + id: number; rootRef?: React.RefObject; children: React.ReactNode; margin?: string; @@ -18,14 +18,14 @@ export const IntersectionObserverWrapper = ({ threshold: 1, onChange: (inView) => { if (inView) { - set((prev: Set) => { + set((prev: Set) => { const newSet = new Set(prev); newSet.add(id); return newSet; }); } if (!inView) { - set((prev: Set) => { + set((prev: Set) => { const newSet = new Set(prev); newSet.delete(id); return newSet; From c609a9172b02883704aa15fe912982647554c0bf Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 11:45:33 +0200 Subject: [PATCH 20/46] improve component and fix bugs --- ...arEventParticipantsResponseStatusField.tsx | 4 ++- .../calendar/components/ExpandableList.tsx | 31 ++++++++++++------- ...icipantPlus.tsx => ExpandableListPlus.tsx} | 8 ++--- .../calendar/components/ExpendableCell.tsx | 5 --- 4 files changed, 26 insertions(+), 22 deletions(-) rename packages/twenty-front/src/modules/activities/calendar/components/{CalendarEventParticipantPlus.tsx => ExpandableListPlus.tsx} (67%) delete mode 100644 packages/twenty-front/src/modules/activities/calendar/components/ExpendableCell.tsx diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 2e54de50a45b..de907dd9d7e5 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -106,7 +106,9 @@ export const CalendarEventParticipantsResponseStatusField = ({ ( + + ))} rootRef={participantsContainerRef} margin="0px -50px 0px 0px" /> diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx index 5e3674eb971f..997088810c23 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; +import React, { ReactElement, useState } from 'react'; -import { CalendarEventParticipantPlus } from '@/activities/calendar/components/CalendarEventParticipantPlus'; +import { ExpandableListPlus } from '@/activities/calendar/components/ExpandableListPlus'; import { IntersectionObserverWrapper } from '@/activities/calendar/components/IntersectionObserverWrapper'; export const ExpandableList = ({ @@ -8,7 +8,7 @@ export const ExpandableList = ({ rootRef, margin, }: { - components: React.ReactNode[]; + components: ReactElement[]; rootRef: React.RefObject; margin?: string; }) => { @@ -18,7 +18,7 @@ export const ExpandableList = ({ return ( <> - {firstComponent} + {firstComponent && React.cloneElement(firstComponent, { inView: true })} {components.slice(1).map((component, index) => ( {component} - {index === componentsInView.size && + {index === componentsInView.size - 1 && components.length - componentsInView.size - 1 !== 0 && ( - - )}{' '} + )} ))} - {components.length - componentsInView.size - 1 !== 0 && ( - - )} ); }; + +const ExpendableCell = ({ + children, + isExpanded, +}: { + children: React.ReactNode; + isExpanded: boolean; +}) => { + return ( +
{children}
+ ); +}; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableListPlus.tsx similarity index 67% rename from packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx rename to packages/twenty-front/src/modules/activities/calendar/components/ExpandableListPlus.tsx index 257449341fec..16476f98d278 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantPlus.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableListPlus.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -const StyledCalendarEventParticipantPlusContainer = styled.div` +const StyledExpandableListPlusContainer = styled.div` align-items: center; background: ${({ theme }) => theme.background.tertiary}; border-radius: 4px; @@ -16,7 +16,7 @@ const StyledCalendarEventParticipantPlusContainer = styled.div` } `; -export const CalendarEventParticipantPlus = ({ +export const ExpandableListPlus = ({ number, onClick, }: { @@ -24,8 +24,8 @@ export const CalendarEventParticipantPlus = ({ onClick?: () => void; }) => { return ( - + +{number} - + ); }; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpendableCell.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpendableCell.tsx deleted file mode 100644 index 859fc09f8f0f..000000000000 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpendableCell.tsx +++ /dev/null @@ -1,5 +0,0 @@ -export const ExpendableCell = ({ children, isExpanded }) => { - return ( -
{children}
- ); -}; From d5fafa535d8afbdb776368334526ab5a571e0d13 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 11:48:55 +0200 Subject: [PATCH 21/46] improve code --- .../CalendarEventParticipantsResponseStatusField.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index de907dd9d7e5..7c15523342e7 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -93,6 +93,10 @@ export const CalendarEventParticipantsResponseStatusField = ({ const participantsContainerRef = useRef(null); + const StyledChips = orderedParticipants.map((participant) => ( + + )); + return ( @@ -106,9 +110,7 @@ export const CalendarEventParticipantsResponseStatusField = ({ ( - - ))} + components={StyledChips} rootRef={participantsContainerRef} margin="0px -50px 0px 0px" /> From a329cac1d318e3558b78f394f228c35403eba08f Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 12:21:17 +0200 Subject: [PATCH 22/46] show more on click --- ...arEventParticipantsResponseStatusField.tsx | 23 +++------ .../calendar/components/ExpandableList.tsx | 47 +++++++++++++------ .../components/RightDrawerRouter.tsx | 2 +- 3 files changed, 40 insertions(+), 32 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 7c15523342e7..75fdc6494c92 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -54,17 +54,8 @@ const StyledLabelContainer = styled.div<{ width?: number }>` width: ${({ width }) => width}px; `; -const StyledParticipantsContainer = styled.div` - align-items: center; - display: flex; - gap: ${({ theme }) => theme.spacing(1)}; - max-width: 100%; - overflow: hidden; - white-space: nowrap; -`; - const StyledParticipantChip = styled(ParticipantChip)<{ inView?: boolean }>` - opacity: ${({ inView }) => (inView ? 1 : 0)}; + opacity: ${({ inView }) => (inView === undefined || inView ? 1 : 0)}; `; export const CalendarEventParticipantsResponseStatusField = ({ @@ -108,13 +99,11 @@ export const CalendarEventParticipantsResponseStatusField = ({ - - - + ); diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx index 997088810c23..39818979f79c 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx @@ -1,4 +1,5 @@ import React, { ReactElement, useState } from 'react'; +import styled from '@emotion/styled'; import { ExpandableListPlus } from '@/activities/calendar/components/ExpandableListPlus'; import { IntersectionObserverWrapper } from '@/activities/calendar/components/IntersectionObserverWrapper'; @@ -14,11 +15,13 @@ export const ExpandableList = ({ }) => { const [componentsInView, setComponentsInView] = useState(new Set()); + const [isExpanded, setIsExpanded] = useState(false); + const firstComponent = components[0]; return ( - <> - {firstComponent && React.cloneElement(firstComponent, { inView: true })} + + {firstComponent} {components.slice(1).map((component, index) => ( setIsExpanded(!isExpanded)} /> )} ))} - + + {components} + + ); }; -const ExpendableCell = ({ - children, - isExpanded, -}: { - children: React.ReactNode; - isExpanded: boolean; -}) => { - return ( -
{children}
- ); -}; +const StyledContainer = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + position: relative; + white-space: nowrap; + max-width: 100%; + box-sizing: border-box; +`; + +const StyledExpendableCell = styled.div<{ isExpanded: boolean }>` + border: 1px solid ${({ theme }) => theme.border.color.strong}; + display: ${({ isExpanded }) => (isExpanded ? 'flex' : 'none')}; + flex-flow: row wrap; + gap: ${({ theme }) => theme.spacing(1)}; + position: absolute; + top: 0; + left: 0; + width: 100%; + width: 300px; + box-sizing: border-box; + background: ${({ theme }) => theme.background.secondary}; +`; diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx index a0eb83b409e2..77daadb0eb4c 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx @@ -23,7 +23,7 @@ const StyledRightDrawerBody = styled.div` height: calc( 100vh - ${({ theme }) => theme.spacing(14)} - 1px ); // (-1 for border) - overflow: auto; + //overflow: auto; position: relative; `; From 9b6a2e1a114039e8b3630d7ad1cc7845ca9bf7f9 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 12:22:21 +0200 Subject: [PATCH 23/46] update style --- .../modules/activities/calendar/components/ExpandableList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx index 39818979f79c..5e072376195e 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx @@ -61,6 +61,7 @@ const StyledContainer = styled.div` const StyledExpendableCell = styled.div<{ isExpanded: boolean }>` border: 1px solid ${({ theme }) => theme.border.color.strong}; display: ${({ isExpanded }) => (isExpanded ? 'flex' : 'none')}; + align-items: center; flex-flow: row wrap; gap: ${({ theme }) => theme.spacing(1)}; position: absolute; From 78425cea56c1eb8c43c0d04a2538417aeede98a2 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 13:41:45 +0200 Subject: [PATCH 24/46] styling --- .../calendar/components/ExpandableList.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx index 5e072376195e..760b73413237 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx @@ -59,16 +59,21 @@ const StyledContainer = styled.div` `; const StyledExpendableCell = styled.div<{ isExpanded: boolean }>` - border: 1px solid ${({ theme }) => theme.border.color.strong}; display: ${({ isExpanded }) => (isExpanded ? 'flex' : 'none')}; align-items: center; - flex-flow: row wrap; + align-content: center; + flex-wrap: wrap; gap: ${({ theme }) => theme.spacing(1)}; position: absolute; - top: 0; - left: 0; - width: 100%; - width: 300px; + top: ${({ theme }) => `-${theme.spacing(2.25)}`}; + left: ${({ theme }) => `-${theme.spacing(2.25)}`}; + width: 232px; + z-index: 1; box-sizing: border-box; background: ${({ theme }) => theme.background.secondary}; + padding: ${({ theme }) => theme.spacing(2)}; + box-shadow: ${({ theme }) => theme.boxShadow.light}; + backdrop-filter: blur(20px); + border-radius: 4px; + border: 1px solid ${({ theme }) => theme.border.color.medium}; `; From 3b21d9066bb16796f97fe653c70fa345b97c4d6f Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 13:52:53 +0200 Subject: [PATCH 25/46] use dropdown --- ...arEventParticipantsResponseStatusField.tsx | 2 +- .../{ => ExpandableList}/ExpandableList.tsx | 32 +++++++++++++------ .../IntersectionObserverWrapper.tsx | 0 .../components/ExpandableListPlus.tsx | 31 ------------------ 4 files changed, 23 insertions(+), 42 deletions(-) rename packages/twenty-front/src/modules/activities/calendar/components/{ => ExpandableList}/ExpandableList.tsx (68%) rename packages/twenty-front/src/modules/activities/calendar/components/{ => ExpandableList}/IntersectionObserverWrapper.tsx (100%) delete mode 100644 packages/twenty-front/src/modules/activities/calendar/components/ExpandableListPlus.tsx diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 75fdc6494c92..d64aef7d08b1 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; -import { ExpandableList } from '@/activities/calendar/components/ExpandableList'; +import { ExpandableList } from '@/activities/calendar/components/ExpandableList/ExpandableList'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx similarity index 68% rename from packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx rename to packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx index 760b73413237..1e4d6dc3e6fc 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx @@ -1,8 +1,9 @@ import React, { ReactElement, useState } from 'react'; import styled from '@emotion/styled'; -import { ExpandableListPlus } from '@/activities/calendar/components/ExpandableListPlus'; -import { IntersectionObserverWrapper } from '@/activities/calendar/components/IntersectionObserverWrapper'; +import { IntersectionObserverWrapper } from '@/activities/calendar/components/ExpandableList/IntersectionObserverWrapper'; +import { Chip, ChipVariant } from '@/ui/display/chip/components/Chip'; +import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; export const ExpandableList = ({ components, @@ -19,6 +20,8 @@ export const ExpandableList = ({ const firstComponent = components[0]; + const dropdownId = 'expandable-list-dropdown'; + return ( {firstComponent} @@ -34,16 +37,25 @@ export const ExpandableList = ({ {index === componentsInView.size - 1 && components.length - componentsInView.size - 1 !== 0 && ( - setIsExpanded(!isExpanded)} + + } + dropdownOffset={{ x: 0, y: -20 }} + dropdownComponents={ + {components} + } /> )} ))} - - {components} - ); }; @@ -58,8 +70,8 @@ const StyledContainer = styled.div` box-sizing: border-box; `; -const StyledExpendableCell = styled.div<{ isExpanded: boolean }>` - display: ${({ isExpanded }) => (isExpanded ? 'flex' : 'none')}; +const StyledExpendableCell = styled.div` + display: flex; align-items: center; align-content: center; flex-wrap: wrap; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/IntersectionObserverWrapper.tsx similarity index 100% rename from packages/twenty-front/src/modules/activities/calendar/components/IntersectionObserverWrapper.tsx rename to packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/IntersectionObserverWrapper.tsx diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableListPlus.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableListPlus.tsx deleted file mode 100644 index 16476f98d278..000000000000 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableListPlus.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import styled from '@emotion/styled'; - -const StyledExpandableListPlusContainer = styled.div` - align-items: center; - background: ${({ theme }) => theme.background.tertiary}; - border-radius: 4px; - display: flex; - height: 20px; - justify-content: space-between; - padding: 3px 4px; - box-sizing: border-box; - cursor: pointer; - - &:hover { - background: ${({ theme }) => theme.background.quaternary}; - } -`; - -export const ExpandableListPlus = ({ - number, - onClick, -}: { - number: number; - onClick?: () => void; -}) => { - return ( - - +{number} - - ); -}; From f867c7e725b0da48f32e031b12e99ba1e403d193 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 14:19:57 +0200 Subject: [PATCH 26/46] create portal --- .../components/ExpandableList/ExpandableList.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx index 1e4d6dc3e6fc..2e0edafe50fe 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx @@ -1,4 +1,5 @@ import React, { ReactElement, useState } from 'react'; +import ReactDOM from 'react-dom'; import styled from '@emotion/styled'; import { IntersectionObserverWrapper } from '@/activities/calendar/components/ExpandableList/IntersectionObserverWrapper'; @@ -16,14 +17,14 @@ export const ExpandableList = ({ }) => { const [componentsInView, setComponentsInView] = useState(new Set()); - const [isExpanded, setIsExpanded] = useState(false); - const firstComponent = components[0]; const dropdownId = 'expandable-list-dropdown'; + const containerRef = React.useRef(null); + return ( - + {firstComponent} {components.slice(1).map((component, index) => ( @@ -48,10 +49,10 @@ export const ExpandableList = ({ variant={ChipVariant.Highlighted} /> } - dropdownOffset={{ x: 0, y: -20 }} - dropdownComponents={ - {components} - } + dropdownComponents={ReactDOM.createPortal( + {components}, + containerRef.current as HTMLDivElement, + )} /> )} From 1b8756c187206f531f620a413eb2a11c49f4f90e Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 14:36:46 +0200 Subject: [PATCH 27/46] add disableBorder prop to dropdown --- .../calendar/components/ExpandableList/ExpandableList.tsx | 1 + .../src/modules/ui/layout/dropdown/components/Dropdown.tsx | 3 +++ .../modules/ui/layout/dropdown/components/DropdownMenu.tsx | 4 +++- 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx index 2e0edafe50fe..e6631ca788a0 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx @@ -53,6 +53,7 @@ export const ExpandableList = ({ {components}, containerRef.current as HTMLDivElement, )} + disableBorder /> )} diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx index 70c58355d4da..e77e70d42221 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx @@ -37,6 +37,7 @@ type DropdownProps = { dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number; dropdownOffset?: { x?: number; y?: number }; disableBlur?: boolean; + disableBorder?: boolean; onClickOutside?: () => void; onClose?: () => void; onOpen?: () => void; @@ -53,6 +54,7 @@ export const Dropdown = ({ dropdownPlacement = 'bottom-end', dropdownOffset = { x: 0, y: 0 }, disableBlur = false, + disableBorder = false, onClickOutside, onClose, onOpen, @@ -130,6 +132,7 @@ export const Dropdown = ({ {isDropdownOpen && ( ` backdrop-filter: ${({ disableBlur }) => @@ -14,7 +15,8 @@ const StyledDropdownMenu = styled.div<{ ? theme.background.primary : theme.background.transparent.secondary}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; + border: ${({ disableBorder, theme }) => + disableBorder ? 'none' : `1px solid ${theme.border.color.medium}`}; border-radius: ${({ theme }) => theme.border.radius.md}; box-shadow: ${({ theme }) => theme.boxShadow.strong}; From a31c48eb1e44285336cd8699a1787d5e773d76cc Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 15:04:30 +0200 Subject: [PATCH 28/46] make dropdown full width --- .../ExpandableList/ExpandableList.tsx | 85 +++++++++++-------- 1 file changed, 50 insertions(+), 35 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx index e6631ca788a0..e0b48e409563 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx @@ -25,54 +25,69 @@ export const ExpandableList = ({ return ( - {firstComponent} - {components.slice(1).map((component, index) => ( - - - {component} - - {index === componentsInView.size - 1 && - components.length - componentsInView.size - 1 !== 0 && ( - - } - dropdownComponents={ReactDOM.createPortal( - {components}, - containerRef.current as HTMLDivElement, - )} - disableBorder - /> - )} - - ))} + + {firstComponent} + {components.slice(1).map((component, index) => ( + + + {component} + + {index === componentsInView.size - 1 && + components.length - componentsInView.size - 1 !== 0 && ( + + } + dropdownComponents={ReactDOM.createPortal( + {components}, + containerRef.current as HTMLDivElement, + )} + disableBorder + /> + )} + + ))} + ); }; const StyledContainer = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + position: relative; + width: 100%; + box-sizing: border-box; +`; + +const StyledDiv = styled.div` align-items: center; display: flex; gap: ${({ theme }) => theme.spacing(1)}; position: relative; white-space: nowrap; max-width: 100%; + width: 100%; box-sizing: border-box; + overflow: hidden; `; -const StyledExpendableCell = styled.div` +const StyledExpendableCell = styled.div<{ width?: number }>` display: flex; align-items: center; align-content: center; @@ -81,7 +96,7 @@ const StyledExpendableCell = styled.div` position: absolute; top: ${({ theme }) => `-${theme.spacing(2.25)}`}; left: ${({ theme }) => `-${theme.spacing(2.25)}`}; - width: 232px; + width: ${({ width }) => width}px; z-index: 1; box-sizing: border-box; background: ${({ theme }) => theme.background.secondary}; From c8b040e6a8bb342cb4d4bce97cb150f22e012d1c Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 16:01:12 +0200 Subject: [PATCH 29/46] add id --- .../CalendarEventParticipantsResponseStatusField.tsx | 2 ++ .../components/ExpandableList/ExpandableList.tsx | 9 +++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index d64aef7d08b1..c8c0f087d0ac 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -2,6 +2,7 @@ import { useRef } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; +import { v4 } from 'uuid'; import { ExpandableList } from '@/activities/calendar/components/ExpandableList/ExpandableList'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; @@ -101,6 +102,7 @@ export const CalendarEventParticipantsResponseStatusField = ({ diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx index e0b48e409563..8d24cb43efa8 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx @@ -9,17 +9,19 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; export const ExpandableList = ({ components, rootRef, + id, margin, }: { components: ReactElement[]; rootRef: React.RefObject; + id: string; margin?: string; }) => { const [componentsInView, setComponentsInView] = useState(new Set()); const firstComponent = components[0]; - const dropdownId = 'expandable-list-dropdown'; + const dropdownId = `expandable-list-dropdown-${id}`; const containerRef = React.useRef(null); @@ -71,7 +73,6 @@ const StyledContainer = styled.div` display: flex; gap: ${({ theme }) => theme.spacing(1)}; position: relative; - width: 100%; box-sizing: border-box; `; @@ -87,7 +88,7 @@ const StyledDiv = styled.div` overflow: hidden; `; -const StyledExpendableCell = styled.div<{ width?: number }>` +const StyledExpendableCell = styled.div` display: flex; align-items: center; align-content: center; @@ -96,7 +97,7 @@ const StyledExpendableCell = styled.div<{ width?: number }>` position: absolute; top: ${({ theme }) => `-${theme.spacing(2.25)}`}; left: ${({ theme }) => `-${theme.spacing(2.25)}`}; - width: ${({ width }) => width}px; + width: 232px; z-index: 1; box-sizing: border-box; background: ${({ theme }) => theme.background.secondary}; From 822dbce3d5cfacc7e036a35cb269a45b0bcd4382 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 16:33:12 +0200 Subject: [PATCH 30/46] move components --- .../components/CalendarEventParticipantsResponseStatusField.tsx | 2 +- .../{calendar => }/components/ExpandableList/ExpandableList.tsx | 2 +- .../components/ExpandableList/IntersectionObserverWrapper.tsx | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/twenty-front/src/modules/activities/{calendar => }/components/ExpandableList/ExpandableList.tsx (96%) rename packages/twenty-front/src/modules/activities/{calendar => }/components/ExpandableList/IntersectionObserverWrapper.tsx (100%) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index c8c0f087d0ac..d280d5759cb8 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -4,8 +4,8 @@ import styled from '@emotion/styled'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; import { v4 } from 'uuid'; -import { ExpandableList } from '@/activities/calendar/components/ExpandableList/ExpandableList'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; +import { ExpandableList } from '@/activities/components/ExpandableList/ExpandableList'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx similarity index 96% rename from packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx rename to packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx index 8d24cb43efa8..8019c43b5042 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx @@ -2,7 +2,7 @@ import React, { ReactElement, useState } from 'react'; import ReactDOM from 'react-dom'; import styled from '@emotion/styled'; -import { IntersectionObserverWrapper } from '@/activities/calendar/components/ExpandableList/IntersectionObserverWrapper'; +import { IntersectionObserverWrapper } from '@/activities/components/ExpandableList/IntersectionObserverWrapper'; import { Chip, ChipVariant } from '@/ui/display/chip/components/Chip'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/IntersectionObserverWrapper.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx similarity index 100% rename from packages/twenty-front/src/modules/activities/calendar/components/ExpandableList/IntersectionObserverWrapper.tsx rename to packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx From 63510c36eca7322346c234b9f1d2c6141ed727ae Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 9 Apr 2024 16:49:48 +0200 Subject: [PATCH 31/46] reorder --- .../ExpandableList/ExpandableList.tsx | 80 +++++++++---------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx index 8019c43b5042..963f3209ee50 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx @@ -6,6 +6,46 @@ import { IntersectionObserverWrapper } from '@/activities/components/ExpandableL import { Chip, ChipVariant } from '@/ui/display/chip/components/Chip'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; +const StyledContainer = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + position: relative; + box-sizing: border-box; +`; + +const StyledDiv = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + position: relative; + white-space: nowrap; + max-width: 100%; + width: 100%; + box-sizing: border-box; + overflow: hidden; +`; + +const StyledExpendableCell = styled.div` + display: flex; + align-items: center; + align-content: center; + flex-wrap: wrap; + gap: ${({ theme }) => theme.spacing(1)}; + position: absolute; + top: ${({ theme }) => `-${theme.spacing(2.25)}`}; + left: ${({ theme }) => `-${theme.spacing(2.25)}`}; + width: 232px; + z-index: 1; + box-sizing: border-box; + background: ${({ theme }) => theme.background.secondary}; + padding: ${({ theme }) => theme.spacing(2)}; + box-shadow: ${({ theme }) => theme.boxShadow.light}; + backdrop-filter: blur(20px); + border-radius: 4px; + border: 1px solid ${({ theme }) => theme.border.color.medium}; +`; + export const ExpandableList = ({ components, rootRef, @@ -67,43 +107,3 @@ export const ExpandableList = ({ ); }; - -const StyledContainer = styled.div` - align-items: center; - display: flex; - gap: ${({ theme }) => theme.spacing(1)}; - position: relative; - box-sizing: border-box; -`; - -const StyledDiv = styled.div` - align-items: center; - display: flex; - gap: ${({ theme }) => theme.spacing(1)}; - position: relative; - white-space: nowrap; - max-width: 100%; - width: 100%; - box-sizing: border-box; - overflow: hidden; -`; - -const StyledExpendableCell = styled.div` - display: flex; - align-items: center; - align-content: center; - flex-wrap: wrap; - gap: ${({ theme }) => theme.spacing(1)}; - position: absolute; - top: ${({ theme }) => `-${theme.spacing(2.25)}`}; - left: ${({ theme }) => `-${theme.spacing(2.25)}`}; - width: 232px; - z-index: 1; - box-sizing: border-box; - background: ${({ theme }) => theme.background.secondary}; - padding: ${({ theme }) => theme.spacing(2)}; - box-shadow: ${({ theme }) => theme.boxShadow.light}; - backdrop-filter: blur(20px); - border-radius: 4px; - border: 1px solid ${({ theme }) => theme.border.color.medium}; -`; From a44d9a33f29cd712011ce63fe8766dcbc39954d5 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 10:47:28 +0200 Subject: [PATCH 32/46] use theme --- .../activities/components/ExpandableList/ExpandableList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx index 963f3209ee50..beb70b4a8548 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx @@ -41,8 +41,8 @@ const StyledExpendableCell = styled.div` background: ${({ theme }) => theme.background.secondary}; padding: ${({ theme }) => theme.spacing(2)}; box-shadow: ${({ theme }) => theme.boxShadow.light}; - backdrop-filter: blur(20px); - border-radius: 4px; + backdrop-filter: ${({ theme }) => theme.blur.strong}; + border-radius: ${({ theme }) => theme.border.radius.sm}; border: 1px solid ${({ theme }) => theme.border.color.medium}; `; From c062a63421aa16970cb1a2b04415c17acaae65f7 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 10:50:42 +0200 Subject: [PATCH 33/46] decompose spacing --- .../activities/components/ExpandableList/ExpandableList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx index beb70b4a8548..caf412bdcddd 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx @@ -33,8 +33,8 @@ const StyledExpendableCell = styled.div` flex-wrap: wrap; gap: ${({ theme }) => theme.spacing(1)}; position: absolute; - top: ${({ theme }) => `-${theme.spacing(2.25)}`}; - left: ${({ theme }) => `-${theme.spacing(2.25)}`}; + top: ${({ theme }) => `-${theme.spacing(2 + 1 / 4)}`}; // spacing + border + left: ${({ theme }) => `-${theme.spacing(2 + 1 / 4)}`}; width: 232px; z-index: 1; box-sizing: border-box; From 02ad6f6659c476711ae8a1b6c7d0d6b5b0f1fa19 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 10:55:00 +0200 Subject: [PATCH 34/46] refactoring --- .../ExpandableList/ExpandableList.tsx | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx index caf412bdcddd..b00ab4c897ee 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx @@ -47,19 +47,19 @@ const StyledExpendableCell = styled.div` `; export const ExpandableList = ({ - components, + listItems, rootRef, id, margin, }: { - components: ReactElement[]; + listItems: ReactElement[]; rootRef: React.RefObject; id: string; margin?: string; }) => { - const [componentsInView, setComponentsInView] = useState(new Set()); + const [listItemsInView, setListItemsInView] = useState(new Set()); - const firstComponent = components[0]; + const firstListItem = listItems[0]; const dropdownId = `expandable-list-dropdown-${id}`; @@ -68,19 +68,19 @@ export const ExpandableList = ({ return ( - {firstComponent} - {components.slice(1).map((component, index) => ( + {firstListItem} + {listItems.slice(1).map((listItem, index) => ( - {component} + {listItem} - {index === componentsInView.size - 1 && - components.length - componentsInView.size - 1 !== 0 && ( + {index === listItemsInView.size - 1 && + listItems.length - listItemsInView.size - 1 !== 0 && ( } dropdownComponents={ReactDOM.createPortal( - {components}, + {listItems}, containerRef.current as HTMLDivElement, )} disableBorder From 46fc0499eb7750f00844846aa192bf1cbd8388eb Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 10:58:05 +0200 Subject: [PATCH 35/46] remove margin prop --- .../CalendarEventParticipantsResponseStatusField.tsx | 3 +-- .../activities/components/ExpandableList/ExpandableList.tsx | 3 --- .../components/ExpandableList/IntersectionObserverWrapper.tsx | 4 +--- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index d280d5759cb8..ad36ae9c4762 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -101,10 +101,9 @@ export const CalendarEventParticipantsResponseStatusField = ({ diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx index b00ab4c897ee..e802da11bd25 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx @@ -50,12 +50,10 @@ export const ExpandableList = ({ listItems, rootRef, id, - margin, }: { listItems: ReactElement[]; rootRef: React.RefObject; id: string; - margin?: string; }) => { const [listItemsInView, setListItemsInView] = useState(new Set()); @@ -75,7 +73,6 @@ export const ExpandableList = ({ set={setListItemsInView} id={index} rootRef={rootRef} - margin={margin} > {listItem} diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx index 03452f8dd1b7..560b8ec74718 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx @@ -6,13 +6,11 @@ export const IntersectionObserverWrapper = ({ id, rootRef, children, - margin, }: { set: React.Dispatch>>; id: number; rootRef?: React.RefObject; children: React.ReactNode; - margin?: string; }) => { const { ref, inView } = useInView({ threshold: 1, @@ -33,7 +31,7 @@ export const IntersectionObserverWrapper = ({ } }, root: rootRef?.current, - rootMargin: margin, + rootMargin: '0px 0px -50px 0px', }); return ( From 20c3b377e73cc96b1b1c99c68dfbc6546d48df8e Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 11:07:59 +0200 Subject: [PATCH 36/46] add opacity logic to the intersection observer wrapper --- .../ExpandableList/IntersectionObserverWrapper.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx index 560b8ec74718..d4a81d2e2974 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx @@ -1,5 +1,10 @@ import React from 'react'; import { useInView } from 'react-intersection-observer'; +import styled from '@emotion/styled'; + +const StyledDiv = styled.div<{ inView?: boolean }>` + opacity: ${({ inView }) => (inView === undefined || inView ? 1 : 0)}; +`; export const IntersectionObserverWrapper = ({ set, @@ -35,8 +40,8 @@ export const IntersectionObserverWrapper = ({ }); return ( -
- {React.cloneElement(children as React.ReactElement, { inView })} -
+ + {children} + ); }; From 681cfd80443c9fa108ec7b5b7d7670ba729d9008 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 11:09:49 +0200 Subject: [PATCH 37/46] refactoring --- .../CalendarEventParticipantsResponseStatusField.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index ad36ae9c4762..50b49da6073c 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -55,10 +55,6 @@ const StyledLabelContainer = styled.div<{ width?: number }>` width: ${({ width }) => width}px; `; -const StyledParticipantChip = styled(ParticipantChip)<{ inView?: boolean }>` - opacity: ${({ inView }) => (inView === undefined || inView ? 1 : 0)}; -`; - export const CalendarEventParticipantsResponseStatusField = ({ responseStatus, participants, @@ -86,7 +82,7 @@ export const CalendarEventParticipantsResponseStatusField = ({ const participantsContainerRef = useRef(null); const StyledChips = orderedParticipants.map((participant) => ( - + )); return ( From 5cbb4f0d7c0194c614a37174675443e8c981b019 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 11:11:01 +0200 Subject: [PATCH 38/46] introduce ParticipantChipVariant --- .../src/modules/activities/components/ParticipantChip.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx index 4c18db700c64..c34ce5744009 100644 --- a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx +++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx @@ -28,13 +28,15 @@ const StyledRecordChip = styled(RecordChip)<{ variant: 'default' | 'bold' }>` variant === 'bold' ? theme.font.weight.medium : theme.font.weight.regular}; `; +type ParticipantChipVariant = 'default' | 'bold'; + export const ParticipantChip = ({ participant, variant = 'default', className, }: { participant: any; - variant?: 'default' | 'bold'; + variant?: ParticipantChipVariant; className?: string; }) => { const { person, workspaceMember } = participant; From a5b33a85e857d80219b2aca0797019702abfb9b3 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 11:13:29 +0200 Subject: [PATCH 39/46] remove portal and disableBorder --- .../components/ExpandableList/ExpandableList.tsx | 13 ++++--------- .../ui/layout/dropdown/components/Dropdown.tsx | 3 --- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx index e802da11bd25..72f4f4f31153 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx @@ -1,5 +1,4 @@ import React, { ReactElement, useState } from 'react'; -import ReactDOM from 'react-dom'; import styled from '@emotion/styled'; import { IntersectionObserverWrapper } from '@/activities/components/ExpandableList/IntersectionObserverWrapper'; @@ -61,10 +60,8 @@ export const ExpandableList = ({ const dropdownId = `expandable-list-dropdown-${id}`; - const containerRef = React.useRef(null); - return ( - + {firstListItem} {listItems.slice(1).map((listItem, index) => ( @@ -89,11 +86,9 @@ export const ExpandableList = ({ variant={ChipVariant.Highlighted} /> } - dropdownComponents={ReactDOM.createPortal( - {listItems}, - containerRef.current as HTMLDivElement, - )} - disableBorder + dropdownComponents={ + {listItems} + } /> )} diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx index e77e70d42221..70c58355d4da 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx @@ -37,7 +37,6 @@ type DropdownProps = { dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number; dropdownOffset?: { x?: number; y?: number }; disableBlur?: boolean; - disableBorder?: boolean; onClickOutside?: () => void; onClose?: () => void; onOpen?: () => void; @@ -54,7 +53,6 @@ export const Dropdown = ({ dropdownPlacement = 'bottom-end', dropdownOffset = { x: 0, y: 0 }, disableBlur = false, - disableBorder = false, onClickOutside, onClose, onOpen, @@ -132,7 +130,6 @@ export const Dropdown = ({ {isDropdownOpen && ( Date: Thu, 11 Apr 2024 11:26:52 +0200 Subject: [PATCH 40/46] rename eventParticipants in calendarEventParticipants --- packages/twenty-front/src/testing/mock-data/metadata.ts | 2 +- .../workspace-sync-metadata/constants/standard-field-ids.ts | 2 +- .../calendar/standard-objects/calendar-event.object-metadata.ts | 2 +- .../twenty-server/src/modules/calendar/types/calendar-event.ts | 1 - 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/testing/mock-data/metadata.ts b/packages/twenty-front/src/testing/mock-data/metadata.ts index caa9c53f072a..1d844d43a628 100644 --- a/packages/twenty-front/src/testing/mock-data/metadata.ts +++ b/packages/twenty-front/src/testing/mock-data/metadata.ts @@ -1443,7 +1443,7 @@ const mockedCalendarEventsMetadata = { __typename: 'field', id: '07880d2d-4f08-458f-be0b-876402d2a769', type: 'RELATION', - name: 'eventParticipants', + name: 'calendarEventParticipants', label: 'Event Participants', description: 'Event Participants', icon: 'IconUserCircle', diff --git a/packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-field-ids.ts b/packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-field-ids.ts index 5f6bb82271ca..f27e8f1e77ed 100644 --- a/packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-field-ids.ts +++ b/packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-field-ids.ts @@ -97,7 +97,7 @@ export const calendarEventStandardFieldIds = { conferenceLink: '20202020-35da-43ef-9ca0-e936e9dc237b', recurringEventExternalId: '20202020-4b96-43d0-8156-4c7a9717635c', calendarChannelEventAssociations: '20202020-bdf8-4572-a2cc-ecbb6bcc3a02', - eventParticipants: '20202020-e07e-4ccb-88f5-6f3d00458eec', + calendarEventParticipants: '20202020-e07e-4ccb-88f5-6f3d00458eec', }; export const commentStandardFieldIds = { diff --git a/packages/twenty-server/src/modules/calendar/standard-objects/calendar-event.object-metadata.ts b/packages/twenty-server/src/modules/calendar/standard-objects/calendar-event.object-metadata.ts index 30348db561be..14c8b509a4e3 100644 --- a/packages/twenty-server/src/modules/calendar/standard-objects/calendar-event.object-metadata.ts +++ b/packages/twenty-server/src/modules/calendar/standard-objects/calendar-event.object-metadata.ts @@ -171,7 +171,7 @@ export class CalendarEventObjectMetadata extends BaseObjectMetadata { calendarChannelEventAssociations: CalendarChannelEventAssociationObjectMetadata[]; @FieldMetadata({ - standardId: calendarEventStandardFieldIds.eventParticipants, + standardId: calendarEventStandardFieldIds.calendarEventParticipants, type: FieldMetadataType.RELATION, label: 'Event Participants', description: 'Event Participants', diff --git a/packages/twenty-server/src/modules/calendar/types/calendar-event.ts b/packages/twenty-server/src/modules/calendar/types/calendar-event.ts index 21a7f8433d3f..72818b13110b 100644 --- a/packages/twenty-server/src/modules/calendar/types/calendar-event.ts +++ b/packages/twenty-server/src/modules/calendar/types/calendar-event.ts @@ -8,7 +8,6 @@ export type CalendarEvent = Omit< | 'updatedAt' | 'calendarChannelEventAssociations' | 'calendarEventParticipants' - | 'eventParticipants' | 'conferenceLink' > & { conferenceLinkLabel: string; From 6b6f2541d6529295adaa0b9e25c8638efa4a115d Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 11:51:54 +0200 Subject: [PATCH 41/46] update style --- .../ExpandableList/ExpandableList.tsx | 83 ++++++++----------- 1 file changed, 36 insertions(+), 47 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx index 72f4f4f31153..5ba5dea22735 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx @@ -9,20 +9,11 @@ const StyledContainer = styled.div` align-items: center; display: flex; gap: ${({ theme }) => theme.spacing(1)}; - position: relative; box-sizing: border-box; -`; - -const StyledDiv = styled.div` - align-items: center; - display: flex; - gap: ${({ theme }) => theme.spacing(1)}; - position: relative; white-space: nowrap; max-width: 100%; width: 100%; - box-sizing: border-box; - overflow: hidden; + overflow-x: hidden; `; const StyledExpendableCell = styled.div` @@ -31,10 +22,7 @@ const StyledExpendableCell = styled.div` align-content: center; flex-wrap: wrap; gap: ${({ theme }) => theme.spacing(1)}; - position: absolute; - top: ${({ theme }) => `-${theme.spacing(2 + 1 / 4)}`}; // spacing + border - left: ${({ theme }) => `-${theme.spacing(2 + 1 / 4)}`}; - width: 232px; + width: 100%; z-index: 1; box-sizing: border-box; background: ${({ theme }) => theme.background.secondary}; @@ -60,40 +48,41 @@ export const ExpandableList = ({ const dropdownId = `expandable-list-dropdown-${id}`; + const containerRef = React.useRef(null); + return ( - - - {firstListItem} - {listItems.slice(1).map((listItem, index) => ( - - - {listItem} - - {index === listItemsInView.size - 1 && - listItems.length - listItemsInView.size - 1 !== 0 && ( - - } - dropdownComponents={ - {listItems} - } - /> - )} - - ))} - + + {firstListItem} + {listItems.slice(1).map((listItem, index) => ( + + + {listItem} + + {index === listItemsInView.size - 1 && + listItems.length - listItemsInView.size - 1 !== 0 && ( + + } + dropdownComponents={ + {listItems} + } + dropdownPlacement="bottom-start" + /> + )} + + ))} ); }; From 6d95c4897259cc5696820ac5f7d01890c6cb81ba Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 14:53:47 +0200 Subject: [PATCH 42/46] fix styling issues --- .../components/CalendarEventDetails.tsx | 5 +- ...arEventParticipantsResponseStatusField.tsx | 1 + .../ExpandableList/ExpandableList.tsx | 48 ++++++++++++------- 3 files changed, 37 insertions(+), 17 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index d410da5e22b0..76cd53e37681 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -32,7 +32,8 @@ const StyledContainer = styled.div` flex-direction: column; gap: ${({ theme }) => theme.spacing(6)}; padding: ${({ theme }) => theme.spacing(6)}; - max-width: 100%; + width: 100%; + box-sizing: border-box; `; const StyledEventChip = styled(Chip)` @@ -63,11 +64,13 @@ const StyledFields = styled.div` display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing(3)}; + width: 100%; `; const StyledPropertyBox = styled(PropertyBox)` height: ${({ theme }) => theme.spacing(6)}; padding: 0; + width: 100%; `; export const CalendarEventDetails = ({ diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 50b49da6073c..d030f3b42e71 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -25,6 +25,7 @@ const StyledInlineCellBaseContainer = styled.div` const StyledPropertyBox = styled(PropertyBox)` height: ${({ theme }) => theme.spacing(6)}; padding: 0; + width: 100%; `; const StyledIconContainer = styled.div` diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx index 5ba5dea22735..29af8a1a9086 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx @@ -1,4 +1,5 @@ -import React, { ReactElement, useState } from 'react'; +import React, { ReactElement, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; import styled from '@emotion/styled'; import { IntersectionObserverWrapper } from '@/activities/components/ExpandableList/IntersectionObserverWrapper'; @@ -8,29 +9,26 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; const StyledContainer = styled.div` align-items: center; display: flex; + flex: 1; gap: ${({ theme }) => theme.spacing(1)}; box-sizing: border-box; white-space: nowrap; - max-width: 100%; - width: 100%; overflow-x: hidden; `; const StyledExpendableCell = styled.div` - display: flex; - align-items: center; align-content: center; + align-items: center; + backdrop-filter: ${({ theme }) => theme.blur.strong}; + background: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.medium}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + box-shadow: ${({ theme }) => theme.boxShadow.light}; + box-sizing: border-box; + display: flex; flex-wrap: wrap; gap: ${({ theme }) => theme.spacing(1)}; - width: 100%; - z-index: 1; - box-sizing: border-box; - background: ${({ theme }) => theme.background.secondary}; padding: ${({ theme }) => theme.spacing(2)}; - box-shadow: ${({ theme }) => theme.boxShadow.light}; - backdrop-filter: ${({ theme }) => theme.blur.strong}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; `; export const ExpandableList = ({ @@ -48,7 +46,9 @@ export const ExpandableList = ({ const dropdownId = `expandable-list-dropdown-${id}`; - const containerRef = React.useRef(null); + const containerRef = useRef(null); + + const divRef = useRef(null); return ( @@ -76,13 +76,29 @@ export const ExpandableList = ({ /> } dropdownComponents={ - {listItems} + <> + {divRef.current && + createPortal( + + {listItems} + , + divRef.current as HTMLElement, + )} + } - dropdownPlacement="bottom-start" /> )} ))} +
); }; From c000397db2b94a4a9a9bed2d7e661aa2229d72b1 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 15:09:20 +0200 Subject: [PATCH 43/46] fix font size --- .../activities/components/ParticipantChip.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx index c34ce5744009..84235d6a912e 100644 --- a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx +++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx @@ -6,12 +6,12 @@ import { RecordChip } from '@/object-record/components/RecordChip'; import { Avatar } from '@/users/components/Avatar'; const StyledAvatar = styled(Avatar)` - margin: ${({ theme }) => theme.spacing(0, 1)}; + margin-right: ${({ theme }) => theme.spacing(1)}; `; const StyledSenderName = styled.span<{ variant?: 'default' | 'bold' }>` color: ${({ theme }) => theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.sm}; + font-size: ${({ theme }) => theme.font.size.md}; font-weight: ${({ theme, variant }) => variant === 'bold' ? theme.font.weight.medium : theme.font.weight.regular}; overflow: hidden; @@ -28,6 +28,14 @@ const StyledRecordChip = styled(RecordChip)<{ variant: 'default' | 'bold' }>` variant === 'bold' ? theme.font.weight.medium : theme.font.weight.regular}; `; +const StyledChip = styled.div` + align-items: center; + display: flex; + padding: ${({ theme }) => theme.spacing(1)}; + height: 20px; + box-sizing: border-box; +`; + type ParticipantChipVariant = 'default' | 'bold'; export const ParticipantChip = ({ @@ -57,7 +65,7 @@ export const ParticipantChip = ({ variant={variant} /> ) : ( - <> + {displayName} - + )} ); From 349907282432bbd7eacd53a1a06d26119d3eec6a Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 15:14:38 +0200 Subject: [PATCH 44/46] move to ui --- .../components/CalendarEventParticipantsResponseStatusField.tsx | 2 +- .../display/expandable-list}/ExpandableList.tsx | 2 +- .../display/expandable-list}/IntersectionObserverWrapper.tsx | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/twenty-front/src/modules/{activities/components/ExpandableList => ui/display/expandable-list}/ExpandableList.tsx (96%) rename packages/twenty-front/src/modules/{activities/components/ExpandableList => ui/display/expandable-list}/IntersectionObserverWrapper.tsx (100%) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index d030f3b42e71..c1ed1914870b 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -5,7 +5,7 @@ import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; import { v4 } from 'uuid'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; -import { ExpandableList } from '@/activities/components/ExpandableList/ExpandableList'; +import { ExpandableList } from '@/ui/display/expandable-list/ExpandableList'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx b/packages/twenty-front/src/modules/ui/display/expandable-list/ExpandableList.tsx similarity index 96% rename from packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx rename to packages/twenty-front/src/modules/ui/display/expandable-list/ExpandableList.tsx index 29af8a1a9086..0d7bf8c2bb8e 100644 --- a/packages/twenty-front/src/modules/activities/components/ExpandableList/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/ui/display/expandable-list/ExpandableList.tsx @@ -2,8 +2,8 @@ import React, { ReactElement, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import styled from '@emotion/styled'; -import { IntersectionObserverWrapper } from '@/activities/components/ExpandableList/IntersectionObserverWrapper'; import { Chip, ChipVariant } from '@/ui/display/chip/components/Chip'; +import { IntersectionObserverWrapper } from '@/ui/display/expandable-list/IntersectionObserverWrapper'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; const StyledContainer = styled.div` diff --git a/packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx b/packages/twenty-front/src/modules/ui/display/expandable-list/IntersectionObserverWrapper.tsx similarity index 100% rename from packages/twenty-front/src/modules/activities/components/ExpandableList/IntersectionObserverWrapper.tsx rename to packages/twenty-front/src/modules/ui/display/expandable-list/IntersectionObserverWrapper.tsx From c5eeb94a71ae1aa79e4a7c3a8ed221bdb2637933 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Thu, 11 Apr 2024 18:29:07 +0200 Subject: [PATCH 45/46] use maxWidth --- .../activities/calendar/components/CalendarEventDetails.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index 76cd53e37681..363ceafeb586 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -111,6 +111,7 @@ export const CalendarEventDetails = ({ labelWidth: 72, }), useUpdateRecord: () => [() => undefined, { loading: false }], + maxWidth: 300, }} > From 82d011d475d7d3d3494f1ca0d3377cc22cd50ad3 Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Fri, 12 Apr 2024 10:25:52 +0200 Subject: [PATCH 46/46] fix lint --- .../components/CalendarEventParticipantsResponseStatusField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index c1ed1914870b..6a83a6f723b5 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -5,9 +5,9 @@ import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; import { v4 } from 'uuid'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; -import { ExpandableList } from '@/ui/display/expandable-list/ExpandableList'; import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; +import { ExpandableList } from '@/ui/display/expandable-list/ExpandableList'; import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; const StyledInlineCellBaseContainer = styled.div`