[Bug 37605] New: Why do the vue apps use 'dialog' in place of modals?
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Bug ID: 37605 Summary: Why do the vue apps use 'dialog' in place of modals? Change sponsored?: --- Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Staff interface Assignee: koha-bugs@lists.koha-community.org Reporter: martin.renvoize@ptfs-europe.com QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com I find the vue apps all use dialog where I feel 90% of the time it would be much more appropriate to use a bootstrap modal. The inconsistency is stark. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Severity|enhancement |normal -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |jonathan.druart@gmail.com, | |katrin.fischer@bsz-bw.de, | |matt.blenkinsop@ptfs-europe | |.com, | |nick@bywatersolutions.com, | |oleonard@myacpl.org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |me@paulderscheid.xyz, | |paul.derscheid@lmscloud.de -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |jake.deery@ptfs-europe.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |michaela.sieber@kit.edu -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au --- Comment #1 from David Cook <dcook@prosentient.com.au> --- (In reply to Martin Renvoize from comment #0)
I find the vue apps all use dialog where I feel 90% of the time it would be much more appropriate to use a bootstrap modal.
The inconsistency is stark.
It's a good question, and I don't think that I know the answer. My guess is that we might not have great Vue-Bootstrap integrations? If I look through all our .vue files, I don't see any references to the string "bootstrap". Whereas working with "dialog" elements is super easy in any Javascript. Recently, I was looking at replacing jQuery UI in a different app, and I was thinking about doing my own modals using <dialog>, but I probably will end up using Bootstrap modals. In the case of Koha, it probably does make sense to be consistent across the board, but maybe folks have reason for using <dialog> elements instead. On a related note, it looks like Bootstrap might start using "dialog" elements in Bootstrap 6 for modals. (I'd include the link but Bugzilla likes to autoban me when I post links...) -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #2 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 170225 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170225&action=edit Bug 37605: Convert dialog to modal markup This converts the vue Dialog component to use Boostrap Modal markup to increase consistency with the rest of Koha. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #3 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- This proposed patch updates the markup for the 'Dialog' component we've built. It converts us from the older bootstrap dialog classes to the more modern bootstrap modal markup. I've tested it for the 'Delete' confirmation on the 'Record sources' admin page and it's working reasonably well there. I'm not sure how prevalently it's used elsewhere do we'll want to try and catch that and I wouldn't mind a bit of help making sure the styling is 100% there on it for all the cases. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |martin.renvoize@ptfs-europe |ity.org |.com -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #170225|0 |1 is obsolete| | --- Comment #4 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 170257 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170257&action=edit Bug 37605: Convert dialog to modal markup This converts the vue Dialog component to use Boostrap Modal markup to increase consistency with the rest of Koha. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #5 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 170258 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170258&action=edit Bug 37605: Apply to Records Sources Delete Confirm -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #6 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- More work needed here.. we need to work through each of the current dialog uses and ensure they continue to operate properly with the new markup. I'm confident they wont all yet as there's a change to where buttons are defined (inside the alert box vs in a modal footer) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #7 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 170259 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170259&action=edit Bug 37605: Apply to Agreements Delete Confirm -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #8 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- So.. my change works well for 'Confirmation' modals.. and I think it also makes sense to do this for 'Form' type modals. However.. for the 'Feedback' alert boxes that are mingled into this component, I think it would be good to have a distinct component. 'Alert', 'Message', 'Notice', 'Feedback' or something.. we could even introduce a new UI here.. perhaps 'Toasts'? I also think they should be transient.. i.e fade out after a period. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #9 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- I suppose there's really one major distinction between these.. 'actionable' and 'informational only' -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #10 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Yeah, just reading back. Let's do toasts. However there is one caveat. When I introduced toasts to some plugins, I always had to take into account the height of the i18n menu when it was present (to not overlap it which looks bad). Other than that it's pretty convenient. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #11 from Paul Derscheid <paul.derscheid@lmscloud.de> --- But I guess that's only if you position them at the bottom of the viewport. The top is even more of a mess, though. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #12 from Paul Derscheid <paul.derscheid@lmscloud.de> --- What I completely ignored in my last comments is that toasts only become available in bootstrap 4. As I take it, the vue components use the standard koha stylesheets for the staff interface and are therefore currently bound to 3.4.1. We could do a follow up bug on bug 35402 to introduce toasts. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #13 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 170261 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170261&action=edit Bug 37605: Replace close with closebtn class and reverse order of heading, button in header This gets the modal header in line with the koha convention and fixes the close button visually appearing as a new block. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #14 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Btw I think we should just use flex here instead of float: right and consorts. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #15 from David Cook <dcook@prosentient.com.au> --- (In reply to Paul Derscheid from comment #14)
Btw I think we should just use flex here instead of float: right and consorts.
Death to "float"! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #16 from Jonathan Druart <jonathan.druart@gmail.com> --- Could you rebase? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #17 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Yikes.. I'll try ;P.. could be fun with the bootstrap upgrade. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #170257|0 |1 is obsolete| | --- Comment #18 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 170971 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170971&action=edit Bug 37605: Convert dialog to modal markup This converts the vue Dialog component to use Boostrap Modal markup to increase consistency with the rest of Koha. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #170258|0 |1 is obsolete| | --- Comment #19 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 170972 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170972&action=edit Bug 37605: Apply to Records Sources Delete Confirm -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #170259|0 |1 is obsolete| | --- Comment #20 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 170973 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170973&action=edit Bug 37605: Apply to Agreements Delete Confirm -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #170261|0 |1 is obsolete| | --- Comment #21 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 170974 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170974&action=edit Bug 37605: Replace close with closebtn class and reverse order of heading, button in header This gets the modal header in line with the koha convention and fixes the close button visually appearing as a new block. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #22 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Rebased.. certainly still needs work and I think it's work splitting into some distinct bugs. But.. I like the confirmation as a modal as I've done here.. and really this was a proof of concept to start us going. With bootstrap having been upgraded this might be the prime opportunity to look into this more deeply. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 --- Comment #23 from Jonathan Druart <jonathan.druart@gmail.com> --- Tried to create an agreement but the confirmation message is not displayed. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Jonathan Druart <jonathan.druart@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |pedro.amorim@ptfs-europe.co | |m --- Comment #24 from Jonathan Druart <jonathan.druart@gmail.com> --- (In reply to Paul Derscheid from comment #12)
We could do a follow up bug on bug 35402 to introduce toasts.
Should we consider that instead? All Vue dialogs/messages are badly styled for now. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Brendan Lawlor <blawlor@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |blawlor@clamsnet.org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |ASSIGNED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |NEW -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |In Discussion -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|martin.renvoize@openfifth.c |koha-bugs@lists.koha-commun |o.uk |ity.org -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Severity|normal |enhancement -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37605 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Resolution|--- |REMIND Status|In Discussion |RESOLVED --- Comment #25 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- With all the Vue work that's happened, I'm not sure any of this is relevant anymore.. closing for now but people can open new bugs for any further enhancements. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org