Fix css / Add a forgotten feature

mainio · Nov 12, 2024 · 2362231 · 2362231
1 parent 7c4e66e
commit 2362231
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 32 deletions.
diff --git a/app/cells/decidim/locations/locations/show.erb b/app/cells/decidim/locations/locations/show.erb
@@ -34,11 +34,11 @@
       <% end %>
     </template>
 
-    <div class="type-locations-wrapper">
+    <div class="type-locations-wrapper mb-2">
       <label><%= t("address") %></label>
-      <div class="input-group">
-        <span class="input-group-label">
-          <%= icon "map-pin-line", role: "img", "aria-hidden": true %>
+      <div class="input-group mb-2">
+        <span class="input-group-label inline-block h-10 w-10 top-1.5 relative">
+          <%= icon "map-pin-line", role: "img", "aria-hidden": true, class: "h-8 w-8 relative left-1 top-[3px]" %>
         </span>
         <% if form.object.class.name == "Decidim::FormsLocations::Admin::LocationOptionForm"%>
           <% form.fields_for :locations do |location| %>
@@ -47,38 +47,33 @@
         <% else %>
           <%= form.geocoding_field :address, placeholder: t("placeholder.address"), label: false, class: "type-loc-field input-group-field" %>
         <% end %>
-        <div class="input-group-button">
-          <button class="type-loc-button button button__secondary button__sm w-full" disabled><%= t("add") %></button>
+        <div class="input-group-button inline-block relative bottom-[7px]">
+          <button class="type-loc-button button button__secondary button__sm h-10" disabled><%= t("add") %></button>
         </div>
+        <span class="hint form-input-extra-before help-text hidden" aria-hidden="true"><%= t("hint") %></span>
       </div>
-      <span class="hint form-input-extra-before help-text" aria-hidden="true"><%= t("hint") %></span>
 
-      <ul class="dropdown relative" data-map-container="#pick_model_locations_map">
-        <li role="none" data-action="clear-shapes"><a href="#" role="menuitem"><%= t("clear_shapes") %></a></li>
-      </ul>
+      <button class="button button__sm button__secondary w-5/6 relative left-[42px] hidden" disabled data-action="clear-shapes">
+        <span aria-hidden="true"><%= t("clear_shapes") %></span>
+      </button>
     </div>
 
     <%= decidim_modal id: "model_locations_#{ random_id }", class: "model_locations_modal" do %>
-      <div data-dialog-container>
-        <div class="reveal__header">
-          <h3 id="budget-modal-info-label<%= random_id %>" class="reveal__title"><%= t("edit_location") %></h3>
-        </div>
-
-        <div class="location-fields">
-          <div class="text-right">
-            <button data-delete-shape type="button" class="button alert small"><%= t("delete_shape") %></button>
+      <div>
+        <h3 id="budget-modal-info-label<%= random_id %>" class="h3" data-dialog-title>
+          <%= t("edit_location") %>
+        </h3>
+        <div class="flex justify-center">
+          <div class="location-fields form__wrapper w-1/2">
+            <label>
+              <%= t("address") %>
+              <input data-modal-address type="text" name="address">
+            </label>
           </div>
-          <label>
-            <%= t("address") %>
-            <input data-modal-address type="text" name="address">
-          </label>
         </div>
-
-        <div data-modal-buttons class="text-center">
-          <button data-modal-save class="button primary"><%= t("save") %></button>
-          <button class="link" data-close aria-label="Close modal" type="button">
-            <span aria-hidden="true"><%= t("cancel") %></span>
-          </button>
+        <div data-modal-buttons data-dialog-actions class="text-center">
+          <button data-delete-shape class="button button__lg button__transparent-secondary"><%= t("delete_shape") %></button>
+          <button data-modal-save class="button button__lg button__secondary"><%= t("save") %></button>
         </div>
       </div>
     <% end %>

diff --git a/app/packs/src/decidim/locations/map/integration/clear_shape_field_containers.js b/app/packs/src/decidim/locations/map/integration/clear_shape_field_containers.js
@@ -0,0 +1,5 @@
+const clearShapeFieldContainers = function (shapeFieldContainer) {
+  shapeFieldContainer.querySelectorAll(".shape-field").forEach((shape) => shape.remove());
+};
+
+export default clearShapeFieldContainers;
diff --git a/app/packs/src/decidim/locations/map/integration/forms.js b/app/packs/src/decidim/locations/map/integration/forms.js
@@ -3,7 +3,8 @@ import addInputGroup from "src/decidim/locations/map/integration/add_input_group
 import coordAverage from "src/decidim/locations/map/integration/coord_average.js";
 import centerShape from "src/decidim/locations/map/integration/center_shape.js";
 import addExistingShapes from "src/decidim/locations/map/integration/add_existing_shapes";
-import MapControllerRegistry from "src/decidim/map/controller_registry"
+import MapControllerRegistry from "src/decidim/map/controller_registry";
+import clearShapeFieldContainers from "./clear_shape_field_containers";
 
 export default () => {
   document.querySelectorAll("[data-location-picker]").forEach((wrapperEl) => {
@@ -42,7 +43,7 @@ export default () => {
     $(typeLocInput).on("geocoder-suggest-coordinates.decidim", (_ev, coordinates) => {
       clearTimeout(geocodingTimeout);
       geocodingTimeout = setTimeout(() => {
-        typeLocWrap.querySelector(".hint").classList.remove("hide");
+        typeLocWrap.querySelector(".hint").classList.remove("hidden");
         ctrl.setView(coordinates);
         typeLocCoords = coordinates;
         typeLocButton.disabled = false;
@@ -53,6 +54,9 @@ export default () => {
     clear.addEventListener("click", (event) => {
       event.preventDefault();
       ctrl.clearShapes();
+      clearShapeFieldContainers(shapeFieldContainer);
+      clear.disabled = true;
+      clear.classList.add("hidden");
     })
 
     typeLocButton.addEventListener("click", (event) => {
@@ -66,7 +70,7 @@ export default () => {
         coordinates: { lat: typeLocCoords[0], lng: typeLocCoords[1] }
       };
       typeLocInput.value = "";
-      typeLocWrap.querySelector(".hint").classList.add("hide");
+      typeLocWrap.querySelector(".hint").classList.add("hidden");
       displayList = true;
       typeLocButton.disabled = true;
       addInputGroup(shapeFieldContainer, addressData, wrapperEl);
@@ -110,7 +114,7 @@ export default () => {
       if (averageInput) {
         coordAverage(shapeFieldContainer, wrapperEl);
       };
-      window.Decidim.currentDialogs[`model_locations_${mapEl.id}`].open();
+      window.Decidim.currentDialogs[`model_locations_${mapEl.id}`].close();
     });
 
     modalButtons.querySelector("[data-modal-save]").addEventListener("click", () => {
@@ -158,6 +162,8 @@ export default () => {
     });
 
     ctrl.setEventHandler("shapeadd", (shape, ev) => {
+      clear.disabled = false;
+      clear.classList.remove("hidden");
       const shapeId = shape.options.id;
       let objectShape = shape.pm._shape;
 

diff --git a/app/packs/stylesheets/decidim/locations/locations.scss b/app/packs/stylesheets/decidim/locations/locations.scss
@@ -10,6 +10,14 @@
   border-radius: 0;
 }
 
+.input-group > .autoComplete_wrapper{
+  @apply inline-block w-10/12 bottom-[7px];
+}
+
+.input-group .help-text{
+  @apply mt-0 left-[42px] relative;
+}
+
 [data-location-picker]{
   .google-map{
     z-index: 0;