bug/673-modal-not-closing (#686)

* remove fade class to prevent wrong animation * implement custom fade animation
puzzle · May 3, 2024 · 6452afe · 6452afe
1 parent 690bd8c
commit 6452afe
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
@@ -230,4 +230,13 @@ pzsh-topbar {
 
 .modal-title {
   word-break: break-word;
-}
+}
+
+#modal-animation {
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+#modal-animation.fader {
+  opacity: 1;
+}
diff --git a/app/javascript/controllers/remote_modal_controller.js b/app/javascript/controllers/remote_modal_controller.js
@@ -3,10 +3,16 @@ import { Modal } from "bootstrap"
 
 export default class extends Controller {
     connect() {
-        this.modal = new Modal(this.element)
-        this.modal.show()
+        this.modal = new Modal(this.element);
+        this.modal.show();
+        this.element.classList.toggle('fader');
     }
 
+    disconnect() {
+        this.element.classList.remove('fader');
+    }
+
+
     hideBeforeRender(event) {
         if (this.isOpen()) {
             event.preventDefault()

diff --git a/app/views/application/_remote_modal.html.haml b/app/views/application/_remote_modal.html.haml
@@ -1,5 +1,6 @@
 = turbo_frame_tag "remote_modal" do
-  .modal.fade{tabindex:"-1", "data-controller":"remote-modal", "data-action":"turbo:before-render@document->remote-modal#hideBeforeRender"}
+  #modal-animation.modal{tabindex:"-1", "data-controller":"remote-modal",
+  "data-action":"turbo:before-render@document->remote-modal#hideBeforeRender"}
     .modal-dialog
       .modal-content
         .modal-header