Fix modal

mainio · Jun 7, 2024 · 25e8c46 · 25e8c46
1 parent b6b8dc0
commit 25e8c46
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 42 deletions.
diff --git a/app/cells/decidim/privacy/publish_account_modal/show.erb b/app/cells/decidim/privacy/publish_account_modal/show.erb
@@ -1,29 +1,27 @@
 <%= decidim_modal id: "publish-account-modal" do %>
   <div>
-    <h2 id="privacy-consent-label"><%= t("make_profile_public", scope:"decidim.privacy.partials.privacy_consent") %></h2>
-    <button class="close-button" data-dialog-close="publish-account-modal" aria-label="<%= t("close_modal", scope: "decidim.privacy.partials.privacy_consent") %>"
-      type="button">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <h2 class="h2" id="privacy-consent-label"><%= t("make_profile_public", scope:"decidim.privacy.partials.privacy_consent") %></h2>
   </div>
   <div class="row columns">
       <%= t("content_html", scope:"decidim.privacy.partials.privacy_consent") %>
   </div>
-  <div class="row">
-    <div class="columns medium-12">
-      <%= decidim_form_for(Decidim::Privacy::PublishAccountForm.new, url: decidim_privacy.update_account_publicity_path, html: { class: "public-account-form update-privacy" }, method: :put, remote: true) do |f| %>
+  <div class="pt-4">
+    <%= decidim_form_for(Decidim::Privacy::PublishAccountForm.new, url: decidim_privacy.update_account_publicity_path, html: { class: "public-account-form update-privacy" }, method: :put, remote: true) do |f| %>
+      <div class="space-y-4">
         <div class="field margin-bottom-1">
           <%= f.check_box :agree_public_profile,label: t("agree_to_public_profile", scope: "decidim.privacy.partials.privacy_consent"), required: true %>
         </div>
-        <div class="button--double">
-          <%= f.submit t("make_profile_public", scope: "decidim.privacy.partials.privacy_consent"), class: "button expanded" %>
+        <div>
+          <div class="inline">
+            <%= f.submit t("make_profile_public", scope: "decidim.privacy.partials.privacy_consent"), class: "button button__sm md:button__lg button__secondary" %>
+          </div>
+          <div class="inline">
+            <button class="button button__sm md:button__lg button__transparent-secondary" data-dialog-close="publish-account-modal" type="button">
+              <%= t("do_not_agree", scope: "decidim.privacy.partials.privacy_consent")%>
+            </button>
+          </div>
         </div>
-        <div class="text-center">
-          <button class="link" data-dialog-close="publish-account-modal" type="button">
-            <%= t("do_not_agree", scope: "decidim.privacy.partials.privacy_consent")%>
-          </button>
-        </div>
-      <% end %>
-    </div>
+      </div>
+    <% end %>
   </div>
 <% end %>
diff --git a/app/controllers/decidim/privacy/privacy_settings_controller.rb b/app/controllers/decidim/privacy/privacy_settings_controller.rb
@@ -28,7 +28,8 @@ def update
       end
 
       def update_publicity
-        enforce_permission_to :read, :user, current_user:
+        enforce_permission_to(:read, :user, current_user:)
+
         @form = form(::Decidim::Privacy::PublishAccountForm).from_params(params)
 
         UpdateAccountPublicity.call(current_user, @form) do

diff --git a/app/helpers/concerns/decidim/privacy/action_authorization_helper_extensions.rb b/app/helpers/concerns/decidim/privacy/action_authorization_helper_extensions.rb
@@ -28,22 +28,22 @@ def authorized_to(tag, action, arguments, block)
             html_options = clean_authorized_to_data_open(html_options)
 
             html_options[:id] ||= generate_authorized_action_id(tag, action, url) unless html_options.has_key?("id")
-            html_options["data-open"] = "loginModal"
+            html_options["data-dialog-open"] = "loginModal"
             url = "#"
           elsif action && !action_authorized_to(action, resource:, permissions_holder:).ok?
             html_options = clean_authorized_to_data_open(html_options)
 
-            html_options["data-open"] = "authorizationModal"
-            html_options["data-open-url"] = modal_path(action, resource)
+            html_options["data-dialog-open"] = "authorizationModal"
+            html_options["data-dialog-remote-url"] = modal_path(action, resource)
             url = "#"
           end
 
           if controller.respond_to?(:allowed_publicly_to?) && !controller.allowed_publicly_to?(action)
             html_options = clean_authorized_to_data_open(html_options)
             html_options[:id] ||= generate_authorized_action_id(tag, action, url) unless html_options.has_key?("id")
-            html_options["data-privacy"] = { open: html_options["data-open"], openUrl: html_options["data-open-url"] }.compact.to_json
-            html_options["data-open"] = "publish-account-modal"
-            html_options.delete("data-open-url")
+            html_options["data-dialog-privacy"] = { open: html_options["data-open"], openUrl: html_options["data-open-url"] }.compact.to_json
+            html_options["data-dialog-open"] = "publish-account-modal"
+            html_options.delete("data-dialog-remote-url")
             url = "#"
           end
 

diff --git a/app/packs/src/decidim/privacy/decidim_account_publish_handler.js b/app/packs/src/decidim/privacy/decidim_account_publish_handler.js
@@ -12,7 +12,7 @@ $(() => {
     }
 
     let redirectUrl = ev.target.getAttribute("data-redirect-url")
-    let dataPrivacy = ev.target.getAttribute("data-privacy") || "{}"
+    let dataPrivacy = ev.target.getAttribute("data-dialog-privacy") || "{}"
     if (dataPrivacy && dataPrivacy !== "{}") {
       $publishAccountModal.find("form").attr("data-triggering-privacy", ev.target.id)
     } else {
@@ -24,22 +24,24 @@ $(() => {
     if (triggeredLoginElement) {
       let element = document.getElementById(triggeredLoginElement)
       if (element) {
-        $publishAccountModal.foundation("open")
+        $publishAccountModal.get(0).setAttribute("aria-hidden", "false");
         $publishAccountModal.find("form").attr("data-redirect-url", element.getAttribute("data-redirect-url"))
         localStorage.removeItem("loginTriggeringElement");
       }
     }
-
-    document.querySelectorAll("[data-open='publish-account-modal']").forEach((el) => {
+    document.querySelectorAll("[data-dialog='publish-account-modal']").forEach((el) => {
       el.addEventListener("click", setFormValues)
     });
+  }
 
-    $publishAccountModal.on("closed.zf.reveal", () => {
+  document.querySelectorAll("[data-dialog-close='publish-account-modal']").forEach((el) => {
+    el.addEventListener("click", () => {
+      $publishAccountModal.get(0).setAttribute("aria-hidden", "true");
       $publishAccountModal.find("form").removeAttr("data-redirect-url")
-    });
-  }
+    })
+  })
 
-  document.querySelectorAll("[data-open='loginModal']").forEach((el) => {
+  document.querySelectorAll("[data-dialog-open='loginModal']").forEach((el) => {
     el.addEventListener("click", (ev) => {
       localStorage.setItem("loginTriggeringElement", ev.target.id);
     })
@@ -57,9 +59,10 @@ $(() => {
     if ($publishAccountModal !== null) {
       ev.preventDefault();
       setCommentData(ev.target)
-      $publishAccountModal.foundation("open");
+      $publishAccountModal.get(0).setAttribute("aria-hidden", "false");
     }
   };
+
   const handleCommentForms = (wrapper) => {
     wrapper.querySelectorAll("form").forEach((commentForm) => {
       commentForm.querySelectorAll("button[type='submit'], input[type='submit']").forEach((button) => {
@@ -84,29 +87,31 @@ $(() => {
     };
     handleCommentForms(commentsWrapper);
   });
+
   const removePublishModal = () => {
-    document.querySelectorAll("[data-open='publish-account-modal']").forEach((item) => {
+    document.querySelectorAll("[data-dialog='publish-account-modal']").forEach((item) => {
       item.removeEventListener("click", setFormValues)
-      let dataPrivacy = JSON.parse(item.getAttribute("data-privacy"));
+      let dataPrivacy = JSON.parse(item.getAttribute("data-dialog-privacy"));
       if (!dataPrivacy) {
         return;
       }
 
       if (dataPrivacy.open && dataPrivacy.openUrl) {
-        item.setAttribute("data-open", dataPrivacy.open);
+        item.setAttribute("data-dialog", dataPrivacy.open);
         $(item).data("open", dataPrivacy.open);
-        item.setAttribute("data-open-url", dataPrivacy.openUrl);
+        item.setAttribute("data-dialog-remote-url", dataPrivacy.openUrl);
         $(item).data("open-url", dataPrivacy.openUrl);
         item.removeAttribute("data-privacy");
       } else {
-        item.removeAttribute("data-open");
+        item.removeAttribute("data-dialog");
       }
     })
-    $publishAccountModal.foundation("close");
+    $publishAccountModal.get(0).setAttribute("aria-hidden", "true");
     $publishAccountModal.remove();
     $publishAccountModal = null;
   }
 
+
   const handleCommentSubmission = () => {
     removePublishModal();
     $("[data-popup-comment-id]").click();

diff --git a/app/views/decidim/privacy/privacy_block.html.erb b/app/views/decidim/privacy/privacy_block.html.erb
@@ -7,7 +7,7 @@
   </p>
   <div class="form__wrapper-block">
     <button class="button button__sm md:button__lg button__secondary"
-      data-open="publish-account-modal" data-redirect-url=<%= request.original_url %>>
+      data-dialog="publish-account-modal" data-redirect-url=<%= request.original_url %>>
       <%= t("decidim.privacy.privacy_block.button") %>
     </button>
   </div>

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -99,14 +99,14 @@ en:
               such as the proposals or comments you have submitted. The public profile displays the following
               information about you:
             </p>
-            <ul>
+            <ul class="list-disc pl-4">
               <li>your name</li>
               <li>your nickname</li>
               <li>your public activity on this platform, such as the proposals and comments you have submitted</li>
               <li>who you follow and who follows you on this platform</li>
             </ul>
             <p>If you wish, you can also add the following information to your public profile:</p>
-            <ul>
+            <ul class="list-disc pl-4">
               <li>a profile photo (avatar)</li>
               <li>a profile description</li>
             </ul>