Relocate Rows and Columns Selector Controls from Grid Overlay #1979

[Priyanshu1-62]

Description

This PR relocates the Rows and Columns selector controls from the grid overlay to a more accessible location, addressing Issue #1979.

Changes Made

• Implemented the new controls in a modular file structure for better organization.
• Followed the existing code style for function and class definitions.
• Applied the DRY principle to avoid code duplication.
• Internalized the new labels/messages created by me using react-intl so they can be translated by contributing translators.

Screenshots

Before:

After (Option 2):

Final (Option 3):

Closes: #1979

[Priyanshu1-62]

Hi @RodriSanchez1 ,
Thanks for your feedback on my last PR. Since that was my first PR, I wasn’t aware of all the rules. I’ve created this new one — please have a look and let me know if it needs any changes.

[Priyanshu1-62]

Hi @magush27 , just wanted to kindly follow up on the PR. Whenever you get a chance, I would love to hear your thoughts on it.

[RodriSanchez1]

Good work! I left some comments! Consider creating a new FooterEditToolbar to wrap the grid-size selectors. This will give us a reusable toolbar we can extend with more functionality later. Let me know if you have any doubts

[Priyanshu1-62]

Hi @RodriSanchez1 @magush27 ,
I like the idea of making the footer toolbar reusable and extendable. I have made all updates you mentioned and here is the summary:

• Board.component now renders the new FooterEditToolbar component.
• FooterEditToolbar renders only one component called GridSizePanel and can be extended to have more tools in future.
• GridSizePanel is the control panel, a pure UI component.
• Rest of the minor editings mentioned are also completed.

Please let me know if you’d like me to make any further changes.

[RodriSanchez1]

Awesome work! 🎉

One more thing we should adjust. I realize my earlier comments may not have been entirely accurate.

I suggest avoiding the creation of the GridSizePanel component.
Instead, create a new component:

<GridSizeSelector
  onAddClick
  onRemoveClick
  labelMessage
/>

This component should handle rendering the UI for adding and removing columns and rows.

With this in place, you can render two GridSizeSelector components inside the FooterEditToolbar, passing the appropriate props for columns and rows.
That way, we avoid introducing an unnecessary intermediate component (GridSizePanel).

[RodriSanchez1]

One more thing, keep the showing the FooterEditBar when a modification is pending and disable the GridSizeSelectors buttons

[Priyanshu1-62]

Hi @RodriSanchez1 ,
Got it.
I have introduced the new GridSizeSelector minimalist UI component and changed the flow according to your instructions.
Also, now the buttons gets disabled and becomes gray in colour when modification is pending.
Let me know if any further changes are required.

[Priyanshu1-62]

Hi @RodriSanchez1 , just following up to check if everything is fine on this PR.
No rush, let me know whenever possible if any modification is required.

[RodriSanchez1]

Hi @Priyanshu1-62 — fantastic work! Your implementation is awesome!!

Just to share some context: in our weekly meeting last week, I proposed these changes to the team. After some discussion, we decided not to move forward with this new UI for now. We realized that the current button sizes are too small and may be difficult to use for people with motor disabilities. Because of this, we’ll need to rethink the position and accessibility of the grid size selectors.

I’m really sorry about this change in direction, but I want to emphasize how valuable your contribution was. You did an amazing job on your first open-source contribution, and I hope this experience helps you grow as a developer.

If you’d like, we can definitely find another issue for you to work on. @magush27 also mentioned that we’re brainstorming new ideas for enhancing the grid size selectors, so there may be opportunities to collaborate on that as well.

Awesome work again, and thanks so much for your effort and dedication! 🚀

I will wait your response and after that close the PR

[Priyanshu1-62]

Hi @RodriSanchez1 ,
It's alright, I understand your concern. It was nice working on this issue and it definitely added a plus point in my experience. Thank you for that.
Regarding smaller and difficult to use buttons, can we switch from round buttons to square buttons similar to that on the master branch? They will be be easy to work with and the footer control panel look attractive too.
Let me know once your preferred design updates, it will be easier to build on top of my current work.
Thank you.

[RodriSanchez1]

Okay! Awesome

Regarding smaller and difficult to use buttons, can we switch from round buttons to square buttons similar to that on the master branch? They will be be easy to work with and the footer control panel look attractive too.

Yes, that was one idea that we had in the meeting. If you wan't, you could post your design idea on the original issue. And we keep talking there.

I will keep this PR open for now

[Priyanshu1-62]

Okay, great.