Patch #42521
open
Reimplement modal dialog with Stimulus
0%
Description
This patch replaces the jQuery UI dialog with a reimplemented modal dialog with Stimulus. It is assumed that Stimulus has been installed with the #42515 patch.
The new modal dialog uses SVG icons.
I've also created JavaScript tests that run in the browser. I think now would be a good time to add JavaScript testing to the Redmine environment.
- To simplify testing within the importmap environment, I created the importmap_mocha-rails gem , a simple gem that integrates JavaScript testing tools.
- In development or test mode, test results are displayed at http://localhost:3000/rails/info/mocha.
- importmap_mocha-reils can be used in combination with rails_live_reload gem.
Files
Related issues
Updated by Marius BĂLTEANU 2 months ago
Thanks for your work and for the patches.
Let's discuss the integration of Stimulus in #42510 and then we can get back to this.
Updated by Marius BĂLTEANU 2 months ago
- Related to Feature #42510: Add Stimulus as a Javascript framework added
Updated by Takashi Kato about 1 month ago
- File 0001v2-Add-daialog-controller-and-dialog-dispatcher-control.patch 0001v2-Add-daialog-controller-and-dialog-dispatcher-control.patch added
I've updated the first patch.
It was working in Firefox, but I noticed a problem with the dialog not closing in Chrome.
Updated by Go MAEDA 18 days ago
- Related to Defect #42690: PNG icon is displayed instead of SVG for close button of dialogue popups added
Updated by Takashi Kato 18 days ago
Go MAEDA wrote in #note-6:
Thank you for your work on this patch. I noticed that with the new dialog implementation, pressing the Escape key no longer closes the dialog.
Do you think we should support the Escape key to close dialogs?
Thank you for your feedback!
I think it's important to be able to close a dialog with the Escape key.
This is achieved by fixing the data-action attribute as follows.
diff --git a/app/views/common/_dialog.html.erb b/app/views/common/_dialog.html.erb
index 6317d48d3e..bfdf893006 100644
--- a/app/views/common/_dialog.html.erb
+++ b/app/views/common/_dialog.html.erb
@@ -1,5 +1,5 @@
<%= tag.div style: 'display:none', class: 'modal', id: id, data: (data || { controller: 'dialog' }) do %>
- <div class="handle" data-action="pointerdown->dialog#start pointerup->dialog#end pointercancel->dialog#end pointermove->dialog#move touchstart->dialog#noop dragstart->dialog#noop" data-dialog-target="handler">
+ <div class="handle" data-action="pointerdown->dialog#start pointerup->dialog#end pointercancel->dialog#end pointermove->dialog#move touchstart->dialog#noop dragstart->dialog#noop keydown.esc@window->dialog#cancel" data-dialog-target="handler">
<span class="title"><%= title %></span>
<%= tag.button type: "button", title: l(:button_close_dialog), data: {action: "dialog#cancel", dialog_target: 'cancel'} do %>
<%= sprite_icon 'close-dialog'%>