admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Update timeline empty state in the side panel (#11093)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/10914

Before:


https://github.com/user-attachments/assets/83764543-06bf-455e-8b07-fa2822691005


After:


https://github.com/user-attachments/assets/09afa15d-6352-4024-a6b9-2cccf5991d8a
This commit is contained in:
Raphaël Bosi
2025-03-21 15:30:14 +01:00
committed by GitHub
parent b49dc57bbf
commit d7dabe5826
2 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx
View File

@ -38,10 +38,19 @@ const StyledMainContainer = styled.div`
} }
`; `;
const StyledRightDrawerAnimatedPlaceholderEmptyContainer = styled(
AnimatedPlaceholderEmptyContainer,
)`
height: auto;
padding-top: ${({ theme }) => theme.spacing(8)};
`;
export const TimelineActivities = ({ export const TimelineActivities = ({
targetableObject, targetableObject,
isInRightDrawer,
}: { }: {
targetableObject: ActivityTargetableObject; targetableObject: ActivityTargetableObject;
isInRightDrawer?: boolean;
}) => { }) => {
const { timelineActivities, loading, fetchMoreRecords } = const { timelineActivities, loading, fetchMoreRecords } =
useTimelineActivities(targetableObject); useTimelineActivities(targetableObject);
@ -54,8 +63,12 @@ export const TimelineActivities = ({
} }
if (isTimelineActivitiesEmpty) { if (isTimelineActivitiesEmpty) {
const EmptyContainer = isInRightDrawer
? StyledRightDrawerAnimatedPlaceholderEmptyContainer
: AnimatedPlaceholderEmptyContainer;
return ( return (
<AnimatedPlaceholderEmptyContainer <EmptyContainer
// eslint-disable-next-line react/jsx-props-no-spreading // eslint-disable-next-line react/jsx-props-no-spreading
{...EMPTY_PLACEHOLDER_TRANSITION_PROPS} {...EMPTY_PLACEHOLDER_TRANSITION_PROPS}
> >
@ -68,7 +81,7 @@ export const TimelineActivities = ({
There is no activity associated with this record. There is no activity associated with this record.
</AnimatedPlaceholderEmptySubTitle> </AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer> </AnimatedPlaceholderEmptyTextContainer>
</AnimatedPlaceholderEmptyContainer> </EmptyContainer>
); );
} }

7
packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
View File

@ -41,8 +41,11 @@ type CardComponentProps = {
type CardComponentType = (props: CardComponentProps) => JSX.Element | null; type CardComponentType = (props: CardComponentProps) => JSX.Element | null;
export const CardComponents: Record<CardType, CardComponentType> = { export const CardComponents: Record<CardType, CardComponentType> = {
[CardType.TimelineCard]: ({ targetableObject }) => ( [CardType.TimelineCard]: ({ targetableObject, isInRightDrawer }) => (
<TimelineActivities targetableObject={targetableObject} /> <TimelineActivities
targetableObject={targetableObject}
isInRightDrawer={isInRightDrawer}
/>
), ),
[CardType.FieldCard]: ({ targetableObject, isInRightDrawer }) => ( [CardType.FieldCard]: ({ targetableObject, isInRightDrawer }) => (