decidim-core 0.32.0.rc3 → 0.32.1

data/app/packs/src/decidim/map/controller.js

@@ -29,7 +29,16 @@ export default class MapController {
   }
 
   load() {
-    this.map = L.map(this.mapId);
+    const zoomControl = L.control.zoom({
+      zoomInTitle: this.config.zoomInText || "Zoom in",
+      zoomOutTitle: this.config.zoomOutText || "Zoom out"
+    });
+
+    this.map = L.map(this.mapId, {
+      zoomControl: false
+    });
+
+    this.map.addControl(zoomControl);
 
     this.map.scrollWheelZoom.disable();
 

data/app/packs/src/decidim/refactor/moved/focus_guard.js

@@ -5,14 +5,12 @@ const focusableDisableableNodes = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"];
 export default class FocusGuard {
   constructor(container) {
     this.container = container;
-    this.guardedElement = null;
-    this.triggerElement = null;
+    this.stack = [];
   }
 
   trap(element, trigger) {
     this.enable();
-    this.guardedElement = element;
-    this.triggerElement = trigger;
+    this.stack.push({ element, trigger });
   }
 
   enable() {
@@ -45,14 +43,15 @@ export default class FocusGuard {
   }
 
   disable() {
-    const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
-    guards.forEach((guard) => guard.remove());
+    const current = this.stack.pop();
 
-    this.guardedElement = null;
+    if (this.stack.length === 0) {
+      const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
+      guards.forEach((guard) => guard.remove());
+    }
 
-    if (this.triggerElement) {
-      this.triggerElement.focus();
-      this.triggerElement = null;
+    if (current && current.trigger) {
+      current.trigger.focus();
     }
   }
 
@@ -67,12 +66,13 @@ export default class FocusGuard {
   };
 
   handleContainerFocus(guard) {
-    if (!this.guardedElement) {
+    const current = this.stack[this.stack.length - 1];
+    if (!current || !current.element) {
       guard.blur();
       return;
     }
 
-    const visibleNodes = Array.from(this.guardedElement.querySelectorAll("*")).filter((item) => {
+    const visibleNodes = Array.from(current.element.querySelectorAll("*")).filter((item) => {
       return this.isVisible(item);
     });
 

data/app/packs/src/decidim/refactor/moved/focus_guard.test.js

@@ -0,0 +1,136 @@
+/* global jest */
+
+import FocusGuard from "src/decidim/refactor/moved/focus_guard"
+
+describe("FocusGuard", () => {
+  let focusGuard = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    focusGuard = new FocusGuard(document.body);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  describe("single dialog", () => {
+    it("creates focus guards on trap", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(2);
+    });
+
+    it("removes focus guards and returns focus on disable", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      focusGuard.disable();
+
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(0);
+      expect(document.activeElement).toBe(trigger);
+    });
+  });
+
+  describe("nested dialogs", () => {
+    it("keeps guards when inner dialog is disabled", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+      expect(document.activeElement).toBe(innerTrigger);
+    });
+
+    it("removes guards when outer dialog is disabled last", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      focusGuard.disable();
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(0);
+      expect(document.activeElement).toBe(outerTrigger);
+    });
+
+    it("cycles focus to the current top dialog when a guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      innerDialog.appendChild(innerInput);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const endGuard = document.body.querySelector('.focusguard[data-position="end"]');
+      endGuard.focus();
+
+      expect(document.activeElement).toBe(innerInput);
+    });
+
+    it("cycles focus backward to the current top dialog when the start guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      const innerButton = document.createElement("button");
+      innerDialog.appendChild(innerInput);
+      innerDialog.appendChild(innerButton);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const startGuard = document.body.querySelector('.focusguard[data-position="start"]');
+      startGuard.focus();
+
+      expect(document.activeElement).toBe(innerButton);
+    });
+  });
+});

data/app/packs/stylesheets/decidim/_cards.scss

@@ -55,7 +55,7 @@
     }
 
     &-content {
-      @apply flex flex-col gap-2.5;
+      @apply flex flex-col gap-2.5 min-w-0 break-words;
     }
 
     &-title {

data/app/packs/stylesheets/decidim/_conversations.scss

@@ -88,6 +88,20 @@
   }
 
   &__modal {
+    &-error {
+      [data-dialog-closable] {
+        @apply top-6 right-6;
+      }
+
+      [data-dialog-container] {
+        @apply inline grid-cols-none;
+      }
+
+      [data-dialog-title] {
+        @apply col-span-2 md:col-span-1 md:col-start-2 grid grid-cols-[auto_1fr] items-start md:items-center gap-2 pb-4 text-left text-xl text-gray-2 md:border-b md:border-gray-3;
+      }
+    }
+
     &-results {
       @apply mb-20 flex flex-wrap gap-x-8 gap-y-4;
     }

data/app/packs/stylesheets/decidim/_cookies.scss

@@ -65,17 +65,25 @@
     &-panel {
       @apply divide-y divide-gray-3 [&>*]:py-4 [&>p]:text-gray-2;
 
-      &__tr {
-        @apply flex items-center justify-between rounded first-of-type:bg-background-4;
+      table {
+        @apply w-full border-collapse;
       }
 
-      &__th {
-        @apply w-1/4 p-2 bg-background-4 text-gray-2 font-bold text-sm;
+      thead tr {
+        @apply bg-background-4;
       }
 
-      &__td {
+      th {
+        @apply w-1/4 p-2 text-gray-2 font-bold text-sm text-left;
+      }
+
+      td {
         @apply w-1/4 p-2 text-gray-2 text-xs;
       }
+
+      tbody tr {
+        @apply border-b border-gray-3;
+      }
     }
 
     &-toggle {

data/app/packs/stylesheets/decidim/_documents.scss

@@ -3,7 +3,7 @@
     @apply divide-y divide-background [&>*]:py-4 first:[&>*]:pt-0 last:[&>*]:pb-0;
 
     > * {
-      @apply flex items-center justify-between gap-4;
+      @apply grid sm:flex items-center justify-between gap-4;
     }
   }
 

data/app/packs/stylesheets/decidim/_dropdown.scss

@@ -1,5 +1,5 @@
 [id*="dropdown-menu"] {
-  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3 cursor-pointer;
+  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3;
 
   &[aria-hidden="true"] {
     @apply hidden md:flex;

data/app/packs/stylesheets/decidim/_editor_suggestions.scss

@@ -0,0 +1,49 @@
+.editor-suggestions-props {
+  --editor-suggestions-border-color: #000;
+  --editor-suggestions-background-color: #eee;
+  --editor-suggestions-selected-highlight-color: #ccc;
+}
+
+.editor-suggestions {
+  @apply editor-suggestions-props border-0 bg-[var(--editor-suggestions-background-color)] max-w-sm drop-shadow-md rounded-md;
+
+  &:hover {
+    .editor-suggestions-item[data-selected]:not(:hover) {
+      @apply bg-transparent;
+    }
+  }
+
+  .editor-suggestions-item {
+    @apply flex items-center gap-2 w-full text-left py-[0.375rem] px-1.5 border-0 rounded-none text-sm;
+
+    &:first-child {
+      @apply rounded-t-md;
+    }
+
+    &:last-child {
+      @apply rounded-b-md;
+    }
+
+    &:hover,
+    &[data-selected] {
+      @apply bg-[var(--editor-suggestions-selected-highlight-color)];
+    }
+
+    .editor-suggestions-item-avatar {
+      @apply rounded-full w-6 h-6 object-cover flex-none;
+    }
+
+    .editor-suggestions-item-label {
+      @apply truncate;
+    }
+  }
+
+  .editor-suggestions-item-disabled {
+    @apply cursor-default;
+
+    &:hover,
+    &[data-selected] {
+      @apply bg-transparent;
+    }
+  }
+}

data/app/packs/stylesheets/decidim/_footer.scss

@@ -3,12 +3,44 @@ footer {
     @apply bg-gray-4;
 
     &__top {
-      @apply hidden lg:flex flex-row gap-8 container py-10;
+      @apply flex flex-col lg:flex-row gap-0 lg:gap-8 container py-10;
 
       .prose a,
       .prose strong {
         @apply text-white;
       }
+
+      .footer__nav {
+        @apply border-b border-white/20 lg:border-0;
+
+        ul {
+          @apply space-y-4 break-inside-avoid mb-4;
+
+          li a {
+            @apply font-semibold underline decoration-1 underline-offset-1;
+          }
+        }
+
+        > [data-controls] {
+          @apply flex items-center justify-between w-full py-4 lg:pointer-events-none lg:cursor-default text-left text-white font-semibold;
+
+          svg {
+            @apply w-4 h-4 fill-current transition-transform lg:hidden;
+          }
+
+          &[aria-expanded="true"] svg {
+            @apply rotate-180;
+          }
+        }
+
+        [id*="panel"][aria-hidden="true"] {
+          @apply hidden lg:block;
+        }
+
+        [id*="panel"][aria-hidden="false"] {
+          @apply block;
+        }
+      }
     }
 
     &__down {

data/app/packs/stylesheets/decidim/_header.scss

@@ -248,6 +248,10 @@ header {
         .account-container {
           @apply before:block before:absolute before:top-16 before:right-14 before:content-[""] before:bg-white before:w-2 before:h-12 before:-mt-8;
         }
+
+        #dropdown-trigger-links-mobile-close {
+          @apply relative z-10;
+        }
       }
 
       &__item {
@@ -337,12 +341,8 @@ header {
         @apply min-w-0;
       }
 
-      .no-interactive {
-        @apply font-normal px-0 min-w-0;
-      }
-
       &__dropdown-trigger {
-        @apply flex flex-none rounded py-1 z-20 font-semibold;
+        @apply flex flex-none rounded px-2 py-1 z-20 font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-inset;
 
         &--truncatable {
           @apply min-w-0 overflow-hidden;
@@ -357,6 +357,10 @@ header {
         }
       }
 
+      .no-interactive {
+        @apply font-normal px-0 min-w-0;
+      }
+
       &__dropdown-wrapper {
         @apply flex flex-none items-center cursor-pointer underline;
       }
@@ -449,15 +453,15 @@ header {
       }
 
       &__label-wrapper {
-        @apply block min-w-0 flex-1 overflow-hidden;
+        @apply block min-w-0 flex-1;
       }
 
       &__label {
-        @apply flex w-full items-center gap-x-2 min-w-0 overflow-hidden;
+        @apply flex w-11/12 items-center gap-x-2 min-w-0;
       }
 
       .menu-bar__breadcrumb-item {
-        @apply block flex-1 min-w-0 overflow-hidden whitespace-nowrap text-ellipsis font-semibold underline;
+        @apply flex flex-1 min-w-0 items-center gap-x-1 whitespace-nowrap font-semibold underline focus:outline focus:outline-2 focus:outline-offset-2 rounded-sm;
       }
 
       /* overwrite default dropdown styles */

data/app/packs/stylesheets/decidim/_participatory_spaces.scss

@@ -49,7 +49,7 @@
         }
 
         &__collection-content {
-          @apply w-auto ml-6 my-4 pl-4 lg:pl-8 border-l border-[#D3D5D9];
+          @apply w-auto sm:ml-6 sm:my-4 sm:pl-4 lg:pl-8 sm:border-l sm:border-[#D3D5D9];
 
           p {
             @apply pt-4;

data/app/packs/stylesheets/decidim/_tom_select.scss

@@ -0,0 +1,23 @@
+@use "tom-select/dist/scss/tom-select";
+
+.ts {
+  &-control {
+    @apply border-gray text-md min-h-[40px];
+
+    input {
+      @apply font-normal text-black text-md;
+    }
+  }
+
+  &-dropdown {
+    @apply text-md text-gray-2 font-normal;
+
+    .option img {
+      @apply inline;
+    }
+
+    .active {
+      @apply bg-gray-3;
+    }
+  }
+}

data/app/packs/stylesheets/decidim/application.scss

@@ -6,6 +6,8 @@
 // Datepicker
 @use "stylesheets/decidim/vendor/datepicker_light";
 @use "stylesheets/decidim/datepicker";
+// TomSelect
+@use "stylesheets/decidim/tom_select";
 // On the other hand, the following styles match with specific routes
 @use "stylesheets/decidim/header";
 @use "stylesheets/decidim/footer";

data/app/packs/stylesheets/decidim/editor.scss

@@ -1,3 +1,5 @@
+@use "stylesheets/decidim/editor_suggestions";
+
 .editor-props {
   --editor-active-color: #487bda;
   --editor-disabled-color: #eee;
@@ -5,12 +7,6 @@
   --editor-bubble-shadow-color: #333;
 }
 
-.editor-suggestions-props {
-  --editor-suggestions-border-color: #000;
-  --editor-suggestions-background-color: #eee;
-  --editor-suggestions-selected-highlight-color: #ccc;
-}
-
 .editor-active {
   @apply outline outline-4 outline-[var(--editor-active-color)];
 }
@@ -186,30 +182,3 @@
     }
   }
 }
-
-.editor-suggestions {
-  @apply editor-suggestions-props border-0 bg-[var(--editor-suggestions-background-color)] max-w-sm drop-shadow-md rounded-md;
-
-  &:hover {
-    .editor-suggestions-item[data-selected]:not(:hover) {
-      @apply bg-transparent;
-    }
-  }
-
-  .editor-suggestions-item {
-    @apply block w-full text-left py-[0.375rem] px-1.5 border-0 rounded-none truncate text-sm;
-
-    &:first-child {
-      @apply rounded-t-md;
-    }
-
-    &:last-child {
-      @apply rounded-b-md;
-    }
-
-    &:hover,
-    &[data-selected] {
-      @apply bg-[var(--editor-suggestions-selected-highlight-color)];
-    }
-  }
-}

data/app/packs/stylesheets/decidim/geocoding_addons.scss

@@ -1,5 +1,13 @@
-.geocoding-container {
-  .user-device-location button {
+.geocoding {
+  &__locate .geocoding__button {
     @apply mt-4;
+
+    &--locating {
+      @apply opacity-70 cursor-wait;
+    }
+
+    .geocoding__spinner {
+      @apply inline-block w-4 h-4 rounded-full animate-spin border-2 border-l-transparent border-y-transparent border-r-secondary align-middle;
+    }
   }
 }

data/app/presenters/decidim/footer_menu_presenter.rb

@@ -3,10 +3,8 @@
 module Decidim
   # A presenter to render footer menu
   class FooterMenuPresenter < MenuPresenter
-    def render
-      content_tag(:nav, :role => "navigation", "aria-label" => @options[:label]) do
-        safe_join([content_tag(:h2, @options[:label], class: "h5 mb-4"), render_menu])
-      end
+    def render_menu_items
+      render_menu
     end
   end
 end

data/app/resolvers/decidim/meta_image_url_resolver.rb

@@ -79,6 +79,9 @@ module Decidim
         image_url = image_element["src"]
         next if image_url.blank?
 
+        blob = find_blob_by_id(image_url.split("/").last)
+        return blob if blob.present?
+
         blob = find_blob_by_key(image_url.split("/").second_to_last)
         return blob if blob.present?
       end
@@ -120,6 +123,10 @@ module Decidim
       ActiveStorage::Blob.find_signed(blob_key) if blob_key.present?
     end
 
+    def find_blob_by_id(blob_id)
+      ActiveStorage::Blob.find_by(id: blob_id) if blob_id.present?
+    end
+
     def blob_from_attached_file(file)
       return unless file.respond_to?(:attached?) && file.attached?
 

data/app/uploaders/decidim/image_uploader.rb

@@ -8,7 +8,7 @@ module Decidim
     end
 
     def content_type_allowlist
-      extension_allowlist.map { |ext| MiniMime.lookup_by_extension(ext).content_type }.uniq
+      extension_allowlist.filter_map { |ext| MiniMime.lookup_by_extension(ext)&.content_type }.uniq
     end
 
     # Fetches info about different variants, their processors and dimensions

data/app/views/decidim/delete_user_mailer/delete.html.erb

@@ -0,0 +1,6 @@
+<p class="email-greeting"><%= t(".hello", username: @user_name) %></p>
+
+<p class="email-instructions"><%= t ".body_1" %></p>
+<p class="email-instructions"><%= t ".body_2" %></p>
+
+<p class="email-closing"><%= t(".greetings_html", organization_name: organization_name(@organization), organization_url: decidim.root_url(host: @organization.host)) %></p>

data/app/views/decidim/messaging/conversations/_error_modal.html.erb

@@ -1,21 +1,13 @@
-<div id="messageErrorModal" data-reveal>
-  <div>
-    <h2><%= error %></h2>
-    <button class="close-button" data-close aria-label="<%= t(".close") %>"
-      type="button">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <div class="reveal__body">
-    <p><%= t(".intro") %></p>
-    <p>
-      <%= messages.join("<br>") %>
-    </p>
-    <p><%= t(".correct_errors") %></p>
-  </div>
-  <div>
-    <div>
-      <a class="button" role="button" href="#" data-close aria-label="<%= t(".ok") %>"><%= t(".ok") %></a>
+<%= decidim_modal id: "messageErrorModal", class: "conversation__modal-error" do %>
+  <div data-dialog-container>
+    <h2 id="dialog-title-messageErrorModal" tabindex="-1" data-dialog-title><%= error %></h2>
+    <div id="dialog-desc-messageErrorModal" class="mt-4">
+      <p><%= t(".intro") %></p>
+      <p><%= safe_join(messages, tag.br) %></p>
+      <p><%= t(".correct_errors") %></p>
+    </div>
+    <div data-dialog-actions>
+      <button type="button" class="button button__sm lg:button__lg button__secondary" data-dialog-close="messageErrorModal" aria-label="<%= t(".ok") %>"><%= t(".ok") %></button>
     </div>
   </div>
-</div>
+<% end %>

data/app/views/decidim/messaging/conversations/error.js.erb

@@ -1,10 +1,15 @@
-var $messageError = $("#messageErrorModal");
-if ($messageError.length > 0) {
-  $messageError.foundation("_destroy").remove();
+var messageError = document.getElementById("messageErrorModal")
+
+if (messageError) {
+  messageError.remove();
 }
+document.body.insertAdjacentHTML("beforeend", "<%= j(render "error_modal", error:, messages:).html_safe %>");
 
-$("#messages").append("<%= j(render "error_modal", error:, messages:).html_safe %>");
-$messageError = $("#messageErrorModal");
+messageError = document.getElementById("messageErrorModal")
+if (messageError) {
+  window.createDialog(messageError);
 
-var messageErrorReveal = new Foundation.Reveal($messageError);
-messageErrorReveal.open();
+  if (Decidim.currentDialogs.messageErrorModal) {
+    window.Decidim.currentDialogs.messageErrorModal.open();
+  }
+}

data/app/views/decidim/searches/_filters.html.erb

@@ -16,7 +16,7 @@
         </button>
       <% end %>
     </div>
-    <button id="dropdown-trigger-search" data-controller="dropdown" data-target="dropdown-menu-search" data-auto-close="true" aria-expanded="true">
+    <button id="dropdown-trigger-search" data-controller="dropdown" data-target="dropdown-menu-search" data-auto-close="true">
       <%= content_tag :span, t("decidim.searches.filters_small_view.filter_by"), class: "#{"is-active" if params.dig(:filter, :with_resource_type) == nil}" %>
       <% @blocks.each do |elements| %>
         <% elements.each do |type, results| %>