parse-dashboard icon indicating copy to clipboard operation
parse-dashboard copied to clipboard

feat: New option to make modal resizable

Open damianstasik opened this issue 2 years ago • 9 comments

New Pull Request Checklist

  • [x] I am not disclosing a vulnerability.
  • [x] I am creating this PR in reference to an issue.

Issue Description

This PR adds a "resize" handle to modals that have the resizable prop enabled.

Closes: #1879

Approach

TODOs before merging

  • [x] A changelog entry is created automatically using the pull request title (do not manually add a changelog entry)

damianstasik avatar Oct 26 '21 20:10 damianstasik

Thanks for opening this pull request!

  • 🎉 We are excited about your hands-on contribution!

Here is how the final resize handle looks: Screen Shot 2021-10-27 at 20 22 07

damianstasik avatar Oct 27 '21 18:10 damianstasik

@mtrezza regarding labels being resized as well: I tried to force a max-width on them, but the Field component would require a slightly bigger refactor that I did not want to include in this PR.

damianstasik avatar Oct 27 '21 18:10 damianstasik

That's fine then, thanks for looking into it.

mtrezza avatar Oct 27 '21 20:10 mtrezza

@mtrezza Maybe instead of the drag handle in the corner, we could allow resizing the modal with both the left and right edge of the container.

damianstasik avatar Oct 30 '21 20:10 damianstasik

Not sure how the experience of that would be. I can only think of a corner drag handle, like the field had. That is the UI behavior a user would typically expect. If there is another way that is intuitive, we can also explore that.

mtrezza avatar Oct 30 '21 21:10 mtrezza

It could work as in a regular OS window manager, the whole side could be used to resize the modal:

https://user-images.githubusercontent.com/920747/139558468-ee3f470a-853f-4e58-9af2-32bb575d67d7.mov

damianstasik avatar Oct 30 '21 21:10 damianstasik

If it's separately resizable on the horizontal and vertical side it would certainly be an improvement over the status quo, but it would still be impractical when you cannot resize both simultaneously. I think that's an issue when want to resize because there is a large JSON object that you want to display and you want to fit the dialog just right to display it.

What is the difficulty to let resize both at the same time? Is it a component restriction?

mtrezza avatar Oct 30 '21 22:10 mtrezza

I will reformat the title to use the proper commit message syntax.