diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx index bf5f20991..686471a3a 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx @@ -13,7 +13,6 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; @@ -80,19 +79,6 @@ const StyledItemContainer = styled.div<{ isMarginBottom?: boolean }>` min-height: 26px; `; -const StyledItemTitleDate = styled.div` - @media (max-width: ${MOBILE_VIEWPORT}px) { - display: none; - } - align-items: flex-start; - padding-top: ${({ theme }) => theme.spacing(1)}; - color: ${({ theme }) => theme.font.color.tertiary}; - display: flex; - gap: ${({ theme }) => theme.spacing(1)}; - justify-content: flex-end; - margin-left: auto; -`; - type EventRowProps = { mainObjectMetadataItem: ObjectMetadataItem | null; isLastEvent?: boolean; @@ -164,12 +150,10 @@ export const EventRow = ({ event={event} mainObjectMetadataItem={mainObjectMetadataItem} linkedObjectMetadataItem={linkedObjectMetadataItem} + createdAt={beautifiedCreatedAt} /> - - {beautifiedCreatedAt} - ); diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx index 07a632c72..f99d3b8d0 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx @@ -9,6 +9,7 @@ import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordIn import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache'; import { isNonEmptyString } from '@sniptt/guards'; +import { MOBILE_VIEWPORT, OverflowingTextWithTooltip } from 'twenty-ui'; type EventRowActivityProps = EventRowDynamicComponentProps; @@ -22,6 +23,35 @@ const StyledLinkedActivity = styled.span` white-space: nowrap; `; +const StyledRowContainer = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + justify-content: space-between; +`; + +const StyledEventRow = styled.div` + display: flex; + flex-direction: column; + gap: ${({ theme }) => theme.spacing(1)}; + width: 100%; +`; + +const StyledRow = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + overflow: hidden; +`; + +const StyledItemTitleDate = styled.div` + @media (max-width: ${MOBILE_VIEWPORT}px) { + display: none; + } + color: ${({ theme }) => theme.font.color.tertiary}; + padding: 0 ${({ theme }) => theme.spacing(1)}; +`; + export const StyledEventRowItemText = styled.span` color: ${({ theme }) => theme.font.color.primary}; `; @@ -30,6 +60,7 @@ export const EventRowActivity = ({ event, authorFullName, objectNameSingular, + createdAt, }: EventRowActivityProps & { objectNameSingular: CoreObjectNameSingular }) => { const [eventLinkedObject, eventAction] = event.name.split('.'); @@ -58,21 +89,26 @@ export const EventRowActivity = ({ const { openRecordInCommandMenu } = useOpenRecordInCommandMenu(); return ( - <> - {authorFullName} - - {`${eventAction} a related ${eventObject}`} - - - openRecordInCommandMenu({ - recordId: event.linkedRecordId, - objectNameSingular, - }) - } - > - {activityTitle} - - + + + + {authorFullName} + + {`${eventAction} a related ${eventObject}`} + + + openRecordInCommandMenu({ + recordId: event.linkedRecordId, + objectNameSingular, + }) + } + > + + + + {createdAt} + + ); }; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx index 267e56f2d..01129a057 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx @@ -26,7 +26,7 @@ const StyledCard = styled(Card)` background: ${({ theme }) => theme.background.secondary}; border: 1px solid ${({ theme }) => theme.border.color.medium}; border-radius: ${({ theme }) => theme.border.radius.md}; - + box-sizing: border-box; display: flex; padding: ${({ theme }) => theme.spacing(2)}; flex-direction: column; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx index e51556dec..9f12ded1a 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx @@ -14,6 +14,7 @@ export interface EventRowDynamicComponentProps { mainObjectMetadataItem: ObjectMetadataItem; linkedObjectMetadataItem: ObjectMetadataItem | null; authorFullName: string; + createdAt?: string; } export const StyledEventRowItemColumn = styled.div` @@ -34,6 +35,7 @@ export const EventRowDynamicComponent = ({ mainObjectMetadataItem, linkedObjectMetadataItem, authorFullName, + createdAt, }: EventRowDynamicComponentProps) => { switch (linkedObjectMetadataItem?.nameSingular) { case 'calendarEvent': @@ -65,6 +67,7 @@ export const EventRowDynamicComponent = ({ linkedObjectMetadataItem={linkedObjectMetadataItem} authorFullName={authorFullName} objectNameSingular={CoreObjectNameSingular.Task} + createdAt={createdAt} /> ); case 'note': @@ -76,6 +79,7 @@ export const EventRowDynamicComponent = ({ linkedObjectMetadataItem={linkedObjectMetadataItem} authorFullName={authorFullName} objectNameSingular={CoreObjectNameSingular.Note} + createdAt={createdAt} /> ); default: @@ -86,6 +90,7 @@ export const EventRowDynamicComponent = ({ mainObjectMetadataItem={mainObjectMetadataItem} linkedObjectMetadataItem={linkedObjectMetadataItem} authorFullName={authorFullName} + createdAt={createdAt} /> ); } diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx index 448879073..1e6f1950b 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx @@ -5,13 +5,37 @@ import { } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent'; import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated'; import styled from '@emotion/styled'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; type EventRowMainObjectProps = EventRowDynamicComponentProps; const StyledMainContainer = styled.div` display: flex; - flex-direction: row; + flex-direction: column; gap: ${({ theme }) => theme.spacing(1)}; + width: 100%; +`; + +const StyledRowContainer = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + justify-content: space-between; +`; + +const StyledItemTitleDate = styled.div` + @media (max-width: ${MOBILE_VIEWPORT}px) { + display: none; + } + color: ${({ theme }) => theme.font.color.tertiary}; + padding: 0 ${({ theme }) => theme.spacing(1)}; +`; + +const StyledRow = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + overflow: hidden; `; export const EventRowMainObject = ({ @@ -19,6 +43,7 @@ export const EventRowMainObject = ({ labelIdentifierValue, event, mainObjectMetadataItem, + createdAt, }: EventRowMainObjectProps) => { const [, eventAction] = event.name.split('.'); @@ -26,11 +51,20 @@ export const EventRowMainObject = ({ case 'created': { return ( - - {labelIdentifierValue} - - was created by - {authorFullName} + + + + {labelIdentifierValue} + + + was created by + + + {authorFullName} + + + {createdAt} + ); } @@ -41,17 +75,27 @@ export const EventRowMainObject = ({ labelIdentifierValue={labelIdentifierValue} event={event} mainObjectMetadataItem={mainObjectMetadataItem} + createdAt={createdAt} /> ); } case 'deleted': { return ( - - {labelIdentifierValue} - - was deleted by - {authorFullName} + + + + {labelIdentifierValue} + + + was deleted by + + + {authorFullName} + + + {createdAt} + ); } diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx index cc2b7102e..0065f6ea7 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx @@ -3,32 +3,48 @@ import { useState } from 'react'; import { EventCard } from '@/activities/timeline-activities/rows/components/EventCard'; import { EventCardToggleButton } from '@/activities/timeline-activities/rows/components/EventCardToggleButton'; -import { - StyledEventRowItemAction, - StyledEventRowItemColumn, -} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent'; +import { StyledEventRowItemColumn } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent'; import { EventFieldDiffContainer } from '@/activities/timeline-activities/rows/main-object/components/EventFieldDiffContainer'; import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; type EventRowMainObjectUpdatedProps = { mainObjectMetadataItem: ObjectMetadataItem; authorFullName: string; labelIdentifierValue: string; event: TimelineActivity; + createdAt?: string; }; const StyledRowContainer = styled.div` + align-items: center; display: flex; - flex-direction: row; gap: ${({ theme }) => theme.spacing(1)}; + justify-content: space-between; +`; + +const StyledItemTitleDate = styled.div` + @media (max-width: ${MOBILE_VIEWPORT}px) { + display: none; + } + color: ${({ theme }) => theme.font.color.tertiary}; + padding: 0 ${({ theme }) => theme.spacing(1)}; +`; + +const StyledRow = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + overflow: hidden; `; const StyledEventRowMainObjectUpdatedContainer = styled.div` display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing(1)}; + width: 100%; `; export const EventRowMainObjectUpdated = ({ @@ -36,6 +52,7 @@ export const EventRowMainObjectUpdated = ({ labelIdentifierValue, event, mainObjectMetadataItem, + createdAt, }: EventRowMainObjectUpdatedProps) => { const diff: Record = event.properties?.diff; @@ -56,8 +73,8 @@ export const EventRowMainObjectUpdated = ({ return ( - {authorFullName} - + + {authorFullName} updated {diffEntries.length === 1 && ( )} - + + {createdAt} {diffEntries.length > 1 && (