Replace Page settings dialog with modal (#17127)

shucontech · MauricioFauth · web-flow · commit ee5716067121 · 2022-02-01T10:49:48.000-03:00
* Replace Page settings dialog with modal

Signed-off-by: Saksham Gupta &lt;shucontech@gmail.com&gt;

Fix max-width class

Signed-off-by: Saksham Gupta &lt;shucontech@gmail.com&gt;

* Fix failing tests

Signed-off-by: Maurício Meneghini Fauth &lt;mauricio@fauth.dev&gt;

Co-authored-by: Maurício Meneghini Fauth &lt;mauricio@fauth.dev&gt;
diff --git a/js/src/page_settings.js b/js/src/page_settings.js
@@ -8,31 +8,21 @@
  */
 
 function showSettings (selector) {
-    var buttons = {};
-    buttons[Messages.strApply] = function () {
+    // Keeping a clone to restore in case the user cancels the operation
+    var $clone = $(selector + ' .page_settings').clone(true);
+
+    $('#pageSettingsModalApplyButton').on('click', function () {
         $('.config-form').trigger('submit');
-    };
+    });
 
-    buttons[Messages.strCancel] = function () {
-        $(this).dialog('close');
-    };
+    $('#pageSettingsModalCloseButton,#pageSettingsModalCancelButton').on('click', function () {
+        $(selector + ' .page_settings').replaceWith($clone);
+        $('#pageSettingsModal').modal('hide');
+    });
 
-    // Keeping a clone to restore in case the user cancels the operation
-    var $clone = $(selector + ' .page_settings').clone(true);
-    $(selector)
-        .dialog({
-            title: Messages.strPageSettings,
-            width: 700,
-            minHeight: 250,
-            modal: true,
-            open: function () {
-                $(this).dialog('option', 'maxHeight', $(window).height() - $(this).offset().top);
-            },
-            close: function () {
-                $(selector + ' .page_settings').replaceWith($clone);
-            },
-            buttons: buttons
-        });
+    $('#pageSettingsModal').modal('show');
+    $('#pageSettingsModal').find('.modal-body').first().html($(selector));
+    $(selector).css('display', 'block');
 }
 
 function showPageSettings () {
diff --git a/templates/footer.twig b/templates/footer.twig
@@ -1,5 +1,6 @@
 {{ include('modals/function_confirm.twig') }}
 {{ include('modals/add_index.twig') }}
+{{ include('modals/page_settings.twig') }}
 {% if not is_ajax %}
   </div>
 {% endif %}
diff --git a/templates/modals/page_settings.twig b/templates/modals/page_settings.twig
@@ -0,0 +1,15 @@
+<div class="modal fade" id="pageSettingsModal" tabindex="-1" aria-labelledby="pageSettingsModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg" id="pageSettingsModalDialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="pageSettingsModalLabel">{% trans 'Page-related settings' %}</h5>
+        <button type="button" class="btn-close" id="pageSettingsModalCloseButton" aria-label="{% trans 'Close' %}"></button>
+      </div>
+      <div class="modal-body"></div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" id="pageSettingsModalApplyButton">{% trans 'Apply' %}</button>
+        <button type="button" class="btn btn-secondary" id="pageSettingsModalCancelButton">{% trans 'Cancel' %}</button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/test/classes/FooterTest.php b/test/classes/FooterTest.php
@@ -126,7 +126,9 @@ public function testAjax(): void
         $footer->setAjax(true);
         $template = new Template();
         $this->assertEquals(
-            $template->render('modals/function_confirm') . "\n" . $template->render('modals/add_index') . "\n",
+            $template->render('modals/function_confirm') . "\n"
+            . $template->render('modals/add_index') . "\n"
+            . $template->render('modals/page_settings') . "\n",
             $footer->getDisplay()
         );
     }
@@ -167,7 +169,9 @@ public function testMinimal(): void
         $template = new Template();
         $this->assertEquals(
             $template->render('modals/function_confirm') . "\n"
-            . $template->render('modals/add_index') . "\n  </div>\n  </body>\n</html>\n",
+            . $template->render('modals/add_index') . "\n"
+            . $template->render('modals/page_settings')
+            . "\n  </div>\n  </body>\n</html>\n",
             $footer->getDisplay()
         );
     }
