feat: improved table scrolling #7731

Khaan25 · 2024-10-16T04:08:17Z

This PR fixes #7515

Demo:

2024-10-16.09-06-19.mp4

greptile-apps

PR Summary

This PR enhances table scrolling by implementing smoother transitions and adjusting column widths, addressing the issues raised in #7515, particularly for mobile devices.

Added transition effect (0.3s ease) to header cells in RecordTableHeaderCell.tsx for smoother scrolling
Increased left positioning of second and third columns in RecordTableBodyDroppable.tsx for better alignment
Removed 'hideTitle' prop from StyledTitle in RecordTableColumnHead.tsx, potentially affecting mobile view
Significantly increased third column width (30px to 150px) for mobile devices in RecordTableHeader.tsx, which may impact small screen layouts

_{4 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-10-16T04:09:52Z

.../modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx

@@ -30,6 +30,7 @@ const StyledColumnHeaderCell = styled.th<{
  color: ${({ theme }) => theme.font.color.tertiary};
  padding: 0;
  text-align: left;
+  transition: 0.3s ease;


style: Consider using a shorter duration for a snappier feel, e.g., '0.2s ease'

Bonapara · 2024-10-16T07:46:32Z

Hi @Khaan25 we want to keep the following behavior on mobile:

Khaan25 · 2024-10-16T07:47:40Z

Alright. Will do it

Khaan25 · 2024-10-16T14:39:33Z

2024-10-16.19-37-06.mp4

@Bonapara 🤝

Khaan25 · 2024-10-16T15:07:03Z

@Bonapara Can you please close this? I can see another issue open, I cna work on that?

Bonapara · 2024-10-16T15:52:57Z

@Khaan25, this looks great! Can you make these two fixes?

Desired:

The shape of mobile chips should be square:

Current:

the chip has an extra right padding

Also can you add a small margin at the right of the chips & + button?

Desired

Current

(No margin right)

Khaan25 · 2024-10-16T15:54:07Z

Sure. I was thinking to ask you about this - Great you brought it up 💪

Khaan25 · 2024-10-16T15:54:35Z

One more question, Can I unassign myself from the Issue and assign myself to any other issue?

Will I get points for this PR as well or first finish it then move on?

Bonapara · 2024-10-16T16:02:17Z

We should finish so we don't lose track of things. Additionally, the bot doesn't allow assigning oss.gg issues to someone if they are already assigned to another issue..

Khaan25 · 2024-10-16T16:03:55Z

RIght. It was a simple CSS fix so I thought I could get points for that one as well while you review this one :)

Anyway, Thank you. It's my first time contributing open source

Bonapara · 2024-10-16T16:05:49Z

If it's a minor CSS fix, let's make an exception. Tag me, and I'll assign it to you if no one else is assigned ;)

Khaan25 · 2024-10-16T16:06:55Z

But now it's too late, someone assign himself 😄 - I'll tag you next time. Thank you for the support

Khaan25 · 2024-10-16T16:07:38Z

Can you assign this to me? #7757

Khaan25 · 2024-10-16T16:07:51Z

Can you assign this to me? #7757

greptile-apps

PR Summary

(updates since last review)

This PR continues to refine table scrolling improvements, focusing on transition effects and mobile responsiveness.

Added transition effect (0.3s ease) to table body cells in RecordTableBodyDroppable.tsx for consistent smooth scrolling
Implemented 'hideTitle' prop in RecordTableColumnHead.tsx to improve first column readability on mobile
Fine-tuned positioning and sizing of header elements in RecordTableHeader.tsx for better mobile scrolling experience
Ensured consistent transition effects across table components for a unified scrolling behavior

_{4 file(s) reviewed, 4 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-10-16T16:08:06Z

...modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx

      z-index: 5;
+      transition: 0.3s ease;


style: Consider applying transition to all sticky columns for consistent behavior

...-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx

Bonapara · 2024-10-16T16:35:41Z

Sorry, I wasn't quick enough, which is why it's not that simple 😅

Khaan25 · 2024-10-16T16:37:05Z

You can unassign him and assign me? 😂

P.S. wrapping up this one as well

Bonapara · 2024-10-16T16:38:12Z

That would not be fair :)

Khaan25 · 2024-10-16T16:39:37Z

Haha, I know but if it occurs again?

Can I unassign myself from this issue and assign myself to new issue and still get points for PR? If that's the option then it would be great :)

Khaan25 · 2024-10-16T16:44:08Z

Quick question, if you don't mind, How do I see the issues that have points and are not assigned? Can't figure that out from the search :(

Have to search from the long list.

Bonapara · 2024-10-16T16:55:14Z

https://github.com/twentyhq/twenty/issues?q=is%3Aopen+is%3Aissue+label%3A%22%F0%9F%95%B9%EF%B8%8F+oss.gg%22+no%3Aassignee

Khaan25 · 2024-10-16T16:57:29Z

Can you please assign this to me? #4588

Bonapara · 2024-10-16T17:01:16Z

You need to comment on it

Khaan25 · 2024-10-18T16:45:01Z

Perfect. Gimme few minutes

Khaan25 · 2024-10-18T17:54:36Z

@Bonapara Fixed

Khaan25 · 2024-10-19T16:11:06Z

Hey, could you review it? I can work on other issues?

Bonapara · 2024-10-21T07:42:31Z

@lucasbordeau looks good to me from a design point of view if you want to proceed with the code review

Khaan25 · 2024-10-23T03:15:26Z

Hey hey, any update on this? :)

Khaan25 · 2024-10-25T08:19:07Z

Any update :)

Bonapara · 2024-10-25T08:22:25Z

@lucasbordeau will review it today @Khaan25 ;)

Khaan25 · 2024-10-25T11:26:42Z

@Bonapara Finally it's done 🎉:)

Khaan25 · 2024-10-27T04:53:36Z

@Bonapara, could you please assign me points for this one? :)

Bonapara · 2024-10-28T09:04:01Z

/award 300

oss-gg · 2024-10-28T09:04:04Z

Awarding Khaan25: 300 points 🕹️ Well done! Check out your new contribution on oss.gg/Khaan25

Devessier · 2024-10-28T10:36:45Z

I'm unsure if we want to rely on the data-testid attributes for styling. It should be used only in e2e tests.

twenty/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx

Lines 32 to 42 in 8533fac

    
                 @media (max-width: ${MOBILE_VIEWPORT}px) { 
        
                   & [data-testid='editable-cell-display-mode'] { 
        
                     [data-testid='tooltip'] { 
        
                       display: none; 
        
                     } 
        
                     [data-testid='chip'] { 
        
                       gap: 0; 
        
                     } 
        
                   } 
        
                 }

lucasbordeau · 2024-11-04T09:57:06Z

@Bonapara Is it ok for you ?

Bonapara · 2024-11-04T10:34:51Z

Yes @lucasbordeau, I think it was!

lucasbordeau · 2024-11-04T14:07:41Z

Follow-up issue : #8307

github-actions · 2024-11-04T16:56:24Z

Thanks @Khaan25 for your contribution!
This marks your 17th PR on the repo. You're top 2% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter

feat: improved table scrolling

6d8681a

greptile-apps bot reviewed Oct 16, 2024

View reviewed changes

Bonapara self-requested a review October 16, 2024 07:47

Bonapara added the -PR: awaiting author label Oct 16, 2024

Khaan25 added 2 commits October 16, 2024 19:20

feat: mobile view fixed

8291528

feat: smoothen the animation

e6af66e

Khaan25 closed this Oct 16, 2024

Khaan25 reopened this Oct 16, 2024

greptile-apps bot reviewed Oct 16, 2024

View reviewed changes

fix: chip

8533fac

lucasbordeau self-assigned this Oct 21, 2024

charlesBochet force-pushed the main branch from 1c484d5 to 2f72e22 Compare October 21, 2024 11:19

charlesBochet added -PR: awaiting review and removed -PR: awaiting author labels Oct 21, 2024

lucasbordeau approved these changes Oct 25, 2024

View reviewed changes

lucasbordeau enabled auto-merge (squash) October 25, 2024 08:41

lucasbordeau approved these changes Nov 4, 2024

View reviewed changes

Merge branch 'main' into fix/improved-scrolling-in-the-table

95c888e

lucasbordeau added -PR: awaiting CI and removed -PR: awaiting review labels Nov 4, 2024

lucasbordeau mentioned this pull request Nov 4, 2024

Refactor mobile table scrolling data test id #8307

Open

Fixed CI

f081689

lucasbordeau merged commit 66c0aa5 into twentyhq:main Nov 4, 2024
17 checks passed

feat: improved table scrolling #7731

feat: improved table scrolling #7731

Conversation

Khaan25 commented Oct 16, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Oct 16, 2024

Choose a reason for hiding this comment

Bonapara commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Bonapara commented Oct 16, 2024 • edited Loading

Desired:

Current:

Desired

Current

Khaan25 commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Bonapara commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Bonapara commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Oct 16, 2024

Choose a reason for hiding this comment

Bonapara commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Bonapara commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Bonapara commented Oct 16, 2024

Khaan25 commented Oct 16, 2024

Bonapara commented Oct 16, 2024

Khaan25 commented Oct 18, 2024

Khaan25 commented Oct 18, 2024

Khaan25 commented Oct 19, 2024

Bonapara commented Oct 21, 2024

Khaan25 commented Oct 23, 2024

Khaan25 commented Oct 25, 2024

Bonapara commented Oct 25, 2024

Khaan25 commented Oct 25, 2024

Khaan25 commented Oct 27, 2024

Bonapara commented Oct 28, 2024

oss-gg bot commented Oct 28, 2024

Devessier commented Oct 28, 2024 • edited Loading

lucasbordeau commented Nov 4, 2024

Bonapara commented Nov 4, 2024

lucasbordeau commented Nov 4, 2024

github-actions bot commented Nov 4, 2024

Bonapara commented Oct 16, 2024 •

edited

Loading

Devessier commented Oct 28, 2024 •

edited

Loading