Use Dialog box inplace of fancybox modal, with htmx and alpinejs

HyphaApp / hypha

Submission management software for open calls

https://www.hypha.app

BSD 3-Clause "New" or "Revised" License

67 stars 38 forks source link

Use Dialog box inplace of fancybox modal, with htmx and alpinejs #3968

Closed sandeepsajan0 closed 19 hours ago

sandeepsajan0 commented 1 month ago

Fixes #3391

https://github.com/HyphaApp/hypha/assets/23638629/64b6babe-ff0f-4b98-a880-7517a6207887

Before:

After:

Test Steps

[ ] Check all the modals in the Action to take section.
[ ] Check their functioning.
[ ] Check that the value must get update accordingly, like on update lead, only lead value should get updated instead of reloading the whole page/context.
[ ] Check Update Status different cases.

frjo commented 3 weeks ago

sandeepsajan0 commented 2 weeks ago

@theskumar Can you please look into choice.js selectable dropdowns issue? Other things like UI shift and close via htmx event have been fixed but I couldn't find a way yet to put those dropdowns on the top of the dialog box.

theskumar commented 1 week ago

I've started an alternate implementation that fixes the choices.js overflow issue, and also has some other goodies. There were some hard-choices b/c of which I had to let go <dialog>, more on it to come later, i.e. either the dropdown in the dialog will be visible or the dialog will have proper scrolling, we need to have both.

Right now, I'm going over each of the modal and make sure they work as expected. I've updated the pattern of modal creation and closing to be more simpler.

You can checkout locally and compare a diff with main at https://github.com/HyphaApp/hypha/compare/enhancement/gh-3991-htmx-dialog-alt?expand=1

theskumar commented 19 hours ago

Superseded by https://github.com/HyphaApp/hypha/pull/4053

closing this PR