decidim-core 0.29.7 → 0.30.0.rc1

data/app/packs/src/decidim/onboarding_pending_action.js

@@ -0,0 +1,24 @@
+import Cookies from "js-cookie";
+
+const ONBOARDING_COOKIE_EXPIRY = 365;
+
+// The same key is set in the Decidim::OnboardingManager class to retrieve the data from the cookie and store it in the extended data attribute
+const DATA_KEY = "onboarding";
+
+/**
+ * @param {DOMElement} element Element which provides the information for cookie about action to perform.
+ * @return {Void} Nothing
+ */
+export default function setOnboardingAction(element) {
+  // the dialog-open data attribute is stealing the click event
+  element.addEventListener("mousedown", () => {
+    const action = element.dataset.onboardingAction;
+    const model = element.dataset.onboardingModel;
+    const permissionsHolder = element.dataset.onboardingPermissionsHolder;
+    const redirectPath = element.dataset.onboardingRedirectPath;
+
+    Cookies.set(DATA_KEY, JSON.stringify({ action, model, permissionsHolder, redirectPath }), {
+      expires: ONBOARDING_COOKIE_EXPIRY
+    });
+  });
+}

data/app/packs/src/decidim/sticky_footer.js

@@ -0,0 +1,29 @@
+// This script add margin to the footer when the sticky CTA Buttons are shown on mobile devices,
+// so the footer is always visible.
+//
+// The sticky buttons show some of the main Call to Actions (CTAs) so that they remain accessible on the
+// screen as the participant scrolls through the detailed view of the Meetings, Proposals, Surveys, and Budgets
+// components.
+//
+
+const footer = document.querySelector("footer");
+const stickyButtons = document.querySelector("[data-sticky-buttons]");
+
+const adjustCtasButtons = () => {
+  if (!stickyButtons) {
+    return;
+  }
+
+  const marginBottom = stickyButtons.offsetHeight;
+  footer.style.marginBottom = `${marginBottom}px`;
+};
+
+if (stickyButtons) {
+  document.addEventListener("scroll", () => {
+    adjustCtasButtons();
+  });
+
+  document.addEventListener("on:toggle", () => {
+    adjustCtasButtons();
+  });
+}

data/app/packs/src/decidim/sticky_header.js

@@ -1,33 +1,14 @@
-// This script implements the sticky header and the sticky buttons. The sticky header hides when participants scroll down and shows when they scroll up.
-// Sticky headers allow users to quickly access the navigation, search, and utility-navigation elements without scrolling up to the top of the page. They increase the discoverability of the elements in the header.
-// The sticky buttons in the other hand, those are some of the main Call to Actions (CTAs) that remain accessible on the screen as the user scrolls through the detailed view of the Meetings, Proposals, Surveys, and Budgets components.
+// This script implements the sticky header on mobile devices.
+//
+// The sticky header hides when participants scroll down and shows when they scroll up.
+// Sticky headers allow users to quickly access the navigation, search, and utility-navigation
+// elements without scrolling up to the top of the page. They increase the discoverability of the elements in the header.
+//
 
 import { screens } from "tailwindcss/defaultTheme"
 
 let prevScroll = window.scrollY;
 const stickyHeader = document.querySelector("[data-sticky-header]");
-const footer = document.querySelector("footer");
-const stickyButtons = document.querySelectorAll("[data-sticky-buttons]");
-
-const isElementInViewport = (element) => {
-  const rect = element.getBoundingClientRect();
-  return rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
-};
-
-const adjustCtasButtons = () => {
-  if (!stickyButtons || !stickyButtons.length) {
-    return;
-  }
-
-  let visibleButtons = Array.from(stickyButtons).filter(isElementInViewport);
-
-  if (visibleButtons.length > 0) {
-    const marginBottom = Math.max(...visibleButtons.map((ctasButton) => ctasButton.offsetHeight));
-    footer.style.marginBottom = `${marginBottom}px`;
-  } else {
-    footer.style.marginBottom = 0;
-  }
-};
 
 // Fix the menu bar container margin top when there are multiple elements in the sticky header
 // As there could be different heights and we cannot know beforehand, we need to adjust this in a dynamic way
@@ -76,12 +57,6 @@ if (stickyHeader) {
         }
         prevScroll = currentScroll;
       }
-
-      adjustCtasButtons();
     }
   });
-
-  document.addEventListener("on:toggle", () => {
-    adjustCtasButtons();
-  });
 };

data/app/packs/src/decidim/user_registrations.js

@@ -2,6 +2,7 @@ import PasswordToggler from "src/decidim/password_toggler";
 
 $(() => {
   const $userRegistrationForm = $("#register-form");
+  const $userOmniauthRegistrationForm = $("#omniauth-register-form");
   const $userGroupFields      = $userRegistrationForm.find(".user-group-fields");
   const userPassword         =  document.querySelector(".user-password");
   const inputSelector         = 'input[name="user[sign_up_as]"]';
@@ -19,9 +20,11 @@ $(() => {
 
   const checkNewsletter = (check) => {
     $userRegistrationForm.find(newsletterSelector).prop("checked", check);
+    $userOmniauthRegistrationForm.find(newsletterSelector).prop("checked", check);
     $newsletterModal.data("continue", true);
     window.Decidim.currentDialogs["sign-up-newsletter-modal"].close()
     $userRegistrationForm.submit();
+    $userOmniauthRegistrationForm.submit();
   }
 
   setGroupFieldsVisibility($userRegistrationForm.find(`${inputSelector}:checked`).val());
@@ -42,6 +45,16 @@ $(() => {
     }
   });
 
+  $userOmniauthRegistrationForm.on("submit", (event) => {
+    const newsletterChecked = $userOmniauthRegistrationForm.find(newsletterSelector);
+    if (!$newsletterModal.data("continue")) {
+      if (!newsletterChecked.prop("checked")) {
+        event.preventDefault();
+        window.Decidim.currentDialogs["sign-up-newsletter-modal"].open()
+      }
+    }
+  });
+
   $newsletterModal.find("[data-check]").on("click", (event) => {
     checkNewsletter($(event.target).data("check"));
   });

data/app/packs/src/decidim/vendor/leaflet-tilelayer-here.js

@@ -0,0 +1,212 @@
+/* eslint-disable */
+
+// 🍂class TileLayer.HERE
+// Tile layer for HERE maps tiles.
+L.TileLayer.HERE = L.TileLayer.extend({
+
+  options: {
+    subdomains: '1234',
+    minZoom: 2,
+    maxZoom: 18,
+
+    // 🍂option scheme: String = 'normal.day'
+    // The "map scheme", as documented in the HERE API.
+    scheme: 'normal.day',
+
+    // 🍂option resource: String = 'maptile'
+    // The "map resource", as documented in the HERE API.
+    resource: 'maptile',
+
+    // 🍂option mapId: String = 'newest'
+    // Version of the map tiles to be used, or a hash of an unique map
+    mapId: 'newest',
+
+    // 🍂option format: String = 'png8'
+    // Image format to be used (`png8`, `png`, or `jpg`)
+    format: 'png8',
+
+    // 🍂option appId: String = ''
+    // Required option. The `app_id` provided as part of the HERE credentials
+    appId: '',
+
+    // 🍂option appCode: String = ''
+    // Required option. The `app_code` provided as part of the HERE credentials
+    appCode: '',
+
+    // 🍂option useCIT: boolean = false
+    // Whether to use the CIT when loading the here-maptiles
+    useCIT: false,
+
+    // 🍂option useHTTPS: boolean = true
+    // Whether to use HTTPS when loading the here-maptiles
+    useHTTPS: true,
+
+    // 🍂option language: String = ''
+    // The language of the descriptions on the maps that are loaded
+    language: '',
+
+    // 🍂option language: String = ''
+    // The second language of the descriptions on the maps that are loaded
+    language2: '',
+  },
+
+
+  initialize: function initialize(options) {
+    options = L.setOptions(this, options);
+
+    // Decide if this scheme uses the aerial servers or the basemap servers
+    var schemeStart = options.scheme.split('.')[0];
+    options.tileResolution = 256;
+
+    // {Base URL}{Path}/{resource (tile type)}/{map id}/{scheme}/{zoom}/{column}/{row}/{size}/{format}
+    // ?apiKey={YOUR_API_KEY}
+    // &{param}={value}
+
+    var params = [
+      'apiKey=' + encodeURIComponent(options.apiKey)
+    ];
+    // Fallback to old app_id,app_code if no apiKey passed
+    if(!options.apiKey) {
+      params = [
+        'app_id=' + encodeURIComponent(options.appId),
+        'app_code=' + encodeURIComponent(options.appCode),
+      ];
+    }
+    if(options.language) {
+      params.push('lg=' + encodeURIComponent(options.language));
+    }
+    if(options.language2) {
+      params.push('lg2=' + encodeURIComponent(options.language2));
+    }
+    var urlQuery = '?' + params.join('&');
+
+    var path = '/maptile/2.1/{resource}/{mapId}/{scheme}/{z}/{x}/{y}/{tileResolution}/{format}' + urlQuery;
+    var attributionPath = '/maptile/2.1/copyright/{mapId}?apiKey={apiKey}';
+
+    var baseUrl = 'maps.ls.hereapi.com';
+
+    // Old style with apiId/apiCode for compatibility
+    if(!options.apiKey) {
+      // make sure the CIT-url can be used
+      baseUrl = 'maps' + (options.useCIT ? '.cit' : '') + '.api.here.com';
+      attributionPath = '/maptile/2.1/copyright/{mapId}?app_id={appId}&app_code={appCode}';
+    }
+
+    var tileServer = 'base.' + baseUrl;
+    if (schemeStart == 'satellite' || schemeStart == 'terrain' || schemeStart == 'hybrid') {
+      tileServer = 'aerial.' + baseUrl;
+    }
+    if (options.scheme.indexOf('.traffic.') !== -1) {
+      tileServer = 'traffic' + baseUrl;
+    }
+
+    var protocol = 'http' + (options.useHTTPS ? 's' : '');
+    var tileUrl = protocol + '://{s}.' + tileServer + path;
+
+    this._attributionUrl = L.Util.template(protocol + '://1.' + tileServer + attributionPath, this.options);
+
+    L.TileLayer.prototype.initialize.call(this, tileUrl, options);
+
+    this._attributionText = '';
+
+  },
+
+  onAdd: function onAdd(map) {
+    L.TileLayer.prototype.onAdd.call(this, map);
+
+    if (!this._attributionBBoxes) {
+      this._fetchAttributionBBoxes();
+    }
+  },
+
+  onRemove: function onRemove(map) {
+    //
+    // Remove the attribution text, and clear the cached text so it will be recalculated
+    // if/when we are shown again.
+    //
+    this._map.attributionControl.removeAttribution(this._attributionText);
+    this._attributionText = '';
+
+    this._map.off('moveend zoomend resetview', this._findCopyrightBBox, this);
+
+    //
+    // Call the prototype last, once we have tidied up our own changes
+    //
+    L.TileLayer.prototype.onRemove.call(this, map);
+  },
+
+  _fetchAttributionBBoxes: function _onMapMove() {
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = L.bind(function(){
+      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+        this._parseAttributionBBoxes(JSON.parse(xmlhttp.responseText));
+      }
+    }, this);
+    xmlhttp.open("GET", this._attributionUrl, true);
+    xmlhttp.send();
+  },
+
+  _parseAttributionBBoxes: function _parseAttributionBBoxes(json) {
+    if (!this._map) { return; }
+    var providers = json[this.options.scheme.split('.')[0]] || json.normal;
+    for (var i=0; i<providers.length; i++) {
+      if (providers[i].boxes) {
+        for (var j=0; j<providers[i].boxes.length; j++) {
+          var box = providers[i].boxes[j];
+          providers[i].boxes[j] = L.latLngBounds( [ [box[0], box[1]], [box[2], box[3]] ]);
+        }
+      }
+    }
+
+    this._map.on('moveend zoomend resetview', this._findCopyrightBBox, this);
+
+    this._attributionProviders = providers;
+
+    this._findCopyrightBBox();
+  },
+
+  _findCopyrightBBox: function _findCopyrightBBox() {
+    if (!this._map) { return; }
+    var providers = this._attributionProviders;
+    var visibleProviders = [];
+    var zoom = this._map.getZoom();
+    var visibleBounds = this._map.getBounds();
+
+    for (var i=0; i<providers.length; i++) {
+      if (providers[i].minLevel <= zoom && providers[i].maxLevel >= zoom) {
+
+        if (!providers[i].boxes) {
+          // No boxes = attribution always visible
+          visibleProviders.push(providers[i]);
+        } else {
+          for (var j=0; j<providers[i].boxes.length; j++) {
+            var box = providers[i].boxes[j];
+            if (visibleBounds.intersects(box)) {
+              visibleProviders.push(providers[i]);
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    var attributions = ['<a href="https://legal.here.com/en-gb/terms" target="_blank" rel="noopener noreferrer">HERE maps</a>'];
+    for (var i=0; i<visibleProviders.length; i++) {
+      var provider = visibleProviders[i];
+      attributions.push('<abbr title="' + provider.alt + '">' + provider.label + '</abbr>');
+    }
+
+    var attributionText = '© ' + attributions.join(', ') + '. ';
+
+    if (attributionText !== this._attributionText) {
+      this._map.attributionControl.removeAttribution(this._attributionText);
+      this._map.attributionControl.addAttribution(this._attributionText = attributionText);
+    }
+  },
+
+});
+
+
+L.tileLayer.here = function(opts){
+  return new L.TileLayer.HERE(opts);
+}

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

@@ -11,3 +11,33 @@
   [id*="comment"][class="comment-reply"][aria-hidden="false"] {
   display: block;
 }
+
+.card-accordion {
+  @apply border-b border-gray-3 mt-6;
+
+  &-title {
+    @apply text-primary font-semibold text-xl inline-block;
+  }
+
+  &-divider-button {
+    @apply flex items-center justify-between items-end w-full;
+
+    svg {
+      @apply inline-block w-6 h-6 fill-primary;
+    }
+
+    &[aria-expanded="true"] {
+      svg {
+        @apply rotate-180 transition-transform;
+      }
+    }
+  }
+
+  &-section {
+    @apply pb-8;
+
+    ul {
+      @apply mb-0;
+    }
+  }
+}

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

@@ -12,12 +12,12 @@
   &__content {
     @apply col-span-2 md:col-span-1 order-first md:order-none space-y-2;
 
-    > div:first-child {
-      p {
-        @apply text-gray-2 text-sm inline-block;
+    > span:first-child {
+      span {
+        @apply text-gray-2 text-sm;
 
         svg {
-          @apply text-gray fill-current inline;
+          @apply text-gray fill-current;
         }
       }
 

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

@@ -14,10 +14,6 @@
 
     &-container {
       @apply rounded-full overflow-hidden inline-block w-6 h-6 align-top;
-
-      &:focus-within {
-        @apply ring-2 ring-primary;
-      }
     }
 
     &-counter {
@@ -33,10 +29,6 @@
     @apply text-secondary font-semibold;
   }
 
-  &__badge svg {
-    @apply grid overflow-hidden place-items-center bg-primary rounded-full w-4 h-4 text-white fill-current;
-  }
-
   &__metadata {
     @apply flex items-center gap-1 text-gray-2 text-sm;
 

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

@@ -98,3 +98,22 @@
     @apply rounded-full bg-secondary text-white inline-grid place-items-center h-[18px] w-[18px] ml-2 text-xs;
   }
 }
+
+.layout-main__buttons {
+  .button {
+    &__sm {
+      @apply text-2xl [&:not([class*="button\\_\\_text"])]:px-1.5 [&:not([class*="button\\_\\_text"])]:py-1.5 gap-1.5
+      lg:text-sm lg:[&:not([class*="button\\_\\_text"])]:px-4;
+
+      span {
+        @apply hidden lg:flex;
+      }
+    }
+
+    &__transparent {
+      &-secondary {
+        @apply p-0 border-0 lg:border lg:border-secondary;
+      }
+    }
+  }
+}

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

@@ -59,11 +59,7 @@
     }
 
     &-title {
-      @apply h4;
-    }
-
-    a &-title {
-      @apply text-secondary;
+      @apply h4 text-secondary;
 
       overflow: hidden;
       display: -webkit-box;
@@ -168,10 +164,6 @@
     svg {
       @apply flex-none text-gray fill-current;
     }
-
-    [data-author] {
-      @apply flex first:[&>*]:max-w-40 -mr-8;
-    }
   }
 
   /* shared styles */

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

@@ -27,10 +27,6 @@
         @apply block;
       }
     }
-
-    > h3:not([class~="not-prose"]) {
-      @apply mb-[-0.4rem] pt-4 pb-2;
-    }
   }
 
   &__span {

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

@@ -19,7 +19,7 @@
   }
 
   > svg {
-    @apply w-8 h-8 flex-none text-secondary fill-current;
+    @apply w-6 h-6 flex-none text-secondary fill-current;
   }
 
   &[aria-expanded="false"] > svg:last-of-type,

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

@@ -2,44 +2,50 @@
   @apply space-y-3 opacity-0 -translate-y-full invisible transition-all absolute;
 
   &__text {
-    @apply text-sm text-gray-2;
+    @apply text-md text-gray-2 ml-4 leading-normal;
+
+    a {
+      @apply text-md;
+    }
   }
 
   &__grid {
     @apply flex flex-wrap gap-y-3;
   }
 
-  &__avatar,
-  &__counter {
+  &__avatar {
     @apply rounded-full overflow-hidden border border-white inline-grid w-6 h-6;
   }
 
-  &__counter {
-    @apply bg-background place-items-center text-secondary text-xs font-semibold transition;
-  }
-
   &__button {
     @apply block ml-auto text-right text-xs text-secondary cursor-pointer;
   }
 
-  &__trigger {
-    @apply flex justify-start -space-x-4;
-  }
-
-  &__trigger:hover &__counter,
-  &__trigger[aria-expanded="true"] &__counter {
-    @apply text-white bg-secondary border-secondary;
-  }
-
-  &__trigger[data-target*="dropdown"] {
-    @apply p-0 w-auto;
+  &__container {
+    @apply w-full flex justify-start -space-x-4 p-0 gap-2;
 
     > span {
       @apply inline-grid;
     }
   }
 
-  &[id*="dropdown-menu"][aria-hidden="false"] {
-    @apply opacity-100 visible translate-y-0 transition-all relative;
+  &__modal {
+    .list-item__author {
+      @apply flex w-full justify-between;
+
+      .author__avatar-container {
+        @apply w-8 h-8;
+      }
+
+      .button {
+        @apply [&>svg]:hidden;
+      }
+    }
+
+    .list-item__author + .list-item__author {
+      --vertical-spacing: 1rem;
+
+      @apply mt-[var(--vertical-spacing)];
+    }
   }
 }

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

@@ -89,7 +89,7 @@
   }
 
   span {
-    @apply text-sm text-gray-2 first-letter:uppercase;
+    @apply text-sm text-gray-2 truncate whitespace-nowrap first-letter:uppercase;
   }
 
   [data-controls*="panel"] {

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

@@ -4,11 +4,6 @@ footer {
 
     &__top {
       @apply hidden lg:flex flex-row gap-8 container py-10;
-
-      .prose a,
-      .prose strong {
-        @apply text-white;
-      }
     }
 
     &__down {

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

@@ -79,10 +79,10 @@
 }
 
 .form__wrapper {
-  @apply flex flex-col py-10 gap-10 last:pb-0;
+  @apply flex flex-col pt-10 pb-4 gap-10 last:pb-0;
 
   &-block {
-    @apply py-10 last:pb-0 border-t-2 border-background flex flex-col gap-4 only:[&_*]:ml-auto [&_p]:text-gray-2;
+    @apply py-10 last:pb-0 border-background flex flex-col gap-4 [&_p]:text-gray-2;
   }
 
   &-checkbox-label {