define arbre dialog component

Author: tsubik

app/admin/components/dialog.rb

@@ -0,0 +1,34 @@
+module Admin
+  module Components
+    class Header < Arbre::HTML::Tag
+      builder_method :html5_header
+    end
+
+    class Dialog < Arbre::HTML::Tag
+      builder_method :dialog
+      attr_accessor :inner_content
+
+      def build(attributes = {})
+        title = attributes[:title]
+        super(attributes.except(:title))
+        html5_header do
+          strong title if title.present?
+          button "X", title: "Close", class: "button close-dialog-button"
+        end
+        @inner_content = div
+      end
+
+      def add_child(child)
+        if @inner_content
+          @inner_content.add_child child
+        else
+          super
+        end
+      end
+
+      def children?
+        @inner_content.children?
+      end
+    end
+  end
+end

app/admin/fmu.rb

@@ -117,26 +117,14 @@ def download_shapefiles(fmus)
           end
           if resource.geojson
             row(:geojson) do
-              dialog id: "geojson_modal" do
-                html5_header do
-                  strong Fmu.human_attribute_name(:geojson)
-                  button "Close", class: "button close-dialog-button"
-                end
-                div do
-                  resource.geojson
-                end
+              dialog id: "geojson_modal", title: Fmu.human_attribute_name(:geojson) do
+                resource.geojson
               end
               link_to t("active_admin.view"), "javascript:void(0)", onclick: "document.querySelector('#geojson_modal').showModal()"
             end
             row(:properties) do
-              dialog id: "properties_modal" do
-                html5_header do
-                  strong Fmu.human_attribute_name(:properties)
-                  button "Close", class: "button close-dialog-button"
-                end
-                div do
-                  resource.properties
-                end
+              dialog id: "properties_modal", title: Fmu.human_attribute_name(:properties) do
+                resource.properties
               end
               link_to t("active_admin.view"), "javascript:void(0)", onclick: "document.querySelector('#properties_modal').showModal()"
             end

app/assets/javascripts/dialog.js

@@ -14,8 +14,10 @@ function initializeDialog() {
       }
     });
 
-    dialog.querySelector(".close-dialog-button").addEventListener("click", () => {
-      dialog.close();
+    dialog.querySelectorAll(".close-dialog-button").forEach((button) => {
+      button.addEventListener("click", () => {
+        dialog.close();
+      });
     });
   });
 }

app/assets/stylesheets/active_admin.scss

@@ -229,11 +229,15 @@ dialog {
     justify-content: space-between;
     align-items: center;
     padding: 10px;
-    border-bottom: 1px solid #ccc;
 
-    .close-dialog {
+    > strong {
+      font-size: 1.2em;
+    }
+
+    .close-dialog-button {
       cursor: pointer;
-      font-size: 1.5em;
+      padding: 10px 15px;
+      margin-left: auto;
     }
   }
 

config/initializers/active_admin.rb

@@ -369,18 +369,6 @@ def set_admin_locale
   app.view_factory.register header: CustomAdminHeader
 end
 
-module Arbre
-  module HTML
-    class Dialog < Tag
-      builder_method :dialog
-    end
-
-    class Header < Tag
-      builder_method :html5_header
-    end
-  end
-end
-
 # activeadmin_addons update in 1.10 introduced a bug where it raises Formtastic::UnsupportedEnumCollection for multiple selects with enum values
 # not sure why it should be raising not supported but it works so for me it's supported just fine
 # https://github.com/platanus/activeadmin_addons/pull/442/files#diff-811ca221eee9c4866653114961ac21bcd0398557bb402c60f149be506c385a8eR3