Improve Timeline design

[Bonapara]

Desired Behavior

• 1. Content should be extended by default (Today only field edits are open by default, not email and calendar events)
• 2. There should be a line in the middle of the gray timeline when it's opened:

[greptile-apps]

Implementation Steps

1. Update Padding:

   • Modify the padding in TimelineItemsContainer.tsx:

     const StyledTimelineContainer = styled.div`
       align-items: center;
       align-self: stretch;
       display: flex;
       flex: 1 0 0;
       flex-direction: column;
       gap: ${({ theme }) => theme.spacing(1)};
       justify-content: flex-start;
       padding: 24px;
       width: calc(100% - 48px);
     `;

2. Extend Content by Default:

   • Ensure the StyledScrollWrapper in TimelineItemsContainer.tsx extends content:

     const StyledScrollWrapper = styled(ScrollWrapper)`
       flex: 1 0 auto;
     `;

3. Add Middle Line:

   • Add a middle line in TimelineActivity.tsx:

     const StyledVerticalLine = styled.div`
       align-self: stretch;
       background: ${({ theme }) => theme.border.color.medium};
       flex-shrink: 0;
       width: 2px;
       margin: 0 auto;
     `;

   • Ensure the line is rendered in the TimelineActivity component:

     {!isLastActivity && (
       <StyledTimelineItemContainer isGap>
         <StyledVerticalLineContainer>
           <StyledVerticalLine />
         </StyledVerticalLineContainer>
       </StyledTimelineItemContainer>
     )}

References

/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
/packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx
/packages/twenty-front/src/modules/activities/timeline

Ask Greptile

[Bonapara]

/oss.gg 150

[oss-gg]

Thanks for opening an issue! It's live on oss.gg!

[Jemeni11]

/assign

[oss-gg]

Assigned to @Jemeni11! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[Jemeni11]

Hi @Bonapara. I encountered a problem while setting up locally.

https://twenty.com/developers/local-setup#step-3:-set-up-a-postgresql-database

I'm currently on this step and I ran into this error:

I assumed it was solvable by using sudo but I still got an error:

So, I decided to skip this step.

I made it to this step before running into another error
https://twenty.com/developers/local-setup#step-6:-running-the-project

I’m not sure how to resolve this issue. Could you help?

[Bonapara]

You can ask on our #Help Discord @Jemeni11
Thanks!

[Supratim69]

Can I pick this up?

[Bonapara]

Sure @Jemeni11, thanks for contributing!

[Jemeni11]

Hi @Bonapara I'm not sure if I'll be able to work on this yet. I haven't finished fixing up local setup error. That's why I unassigned myself. The discord was helpful, thanks for recommending it.

[Jemeni11]

Hi @Bonapara , I will be unable to work on this. My system can't handle this.

[AshishViradiya153]

/assign

[oss-gg]

You already have an open issue assigned to you here. Once that's closed or unassigned, only then we recommend you to take up more.

[Harsh-Mathur-1503]

/assign

[oss-gg]

Assigned to @Harsh-Mathur-1503! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[ManpreetKhinda]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[oss-gg]

@Harsh-Mathur-1503, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg]

@Harsh-Mathur-1503, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg]

@Harsh-Mathur-1503, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[attarzai]

/assign

[oss-gg]

Assigned to @attarzai! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀