decidim-core 0.26.4 → 0.26.7

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

@@ -1,11 +1,25 @@
 /* eslint-disable require-jsdoc */
 
-import lineBreakButtonHandler from "src/decidim/editor/linebreak_module"
-import "src/decidim/editor/clipboard_override"
-import "src/decidim/vendor/image-resize.min"
-import "src/decidim/vendor/image-upload.min"
+import lineBreakButtonHandler from "src/decidim/editor/linebreak_module";
+import "src/decidim/editor/clipboard_override";
+import "src/decidim/vendor/image-resize.min";
+import "src/decidim/vendor/image-upload.min";
 
-const quillFormats = ["bold", "italic", "link", "underline", "header", "list", "video", "image", "alt", "break", "width", "style", "code", "blockquote", "indent"];
+const quillFormats = [
+  "bold",
+  "italic",
+  "link",
+  "underline",
+  "header",
+  "list",
+  "alt",
+  "break",
+  "width",
+  "style",
+  "code",
+  "blockquote",
+  "indent"
+];
 
 export default function createQuillEditor(container) {
   const toolbar = $(container).data("toolbar");
@@ -17,26 +31,28 @@ export default function createQuillEditor(container) {
     [{ list: "ordered" }, { list: "bullet" }],
     ["link", "clean"],
     ["code", "blockquote"],
-    [{ "indent": "-1"}, { "indent": "+1" }]
+    [{ indent: "-1" }, { indent: "+1" }]
   ];
 
-  let addImage = $(container).data("editorImages");
+  let addImage = false;
+  let addVideo = false;
 
-  if (toolbar === "full") {
+  /**
+   * - basic = only basic controls without titles
+   * - content = basic + headings
+   * - full = basic + headings + image + video
+   */
+  if (toolbar === "content") {
+    quillToolbar = [[{ header: [2, 3, 4, 5, 6, false] }], ...quillToolbar];
+  } else if (toolbar === "full") {
+    addImage = true;
+    addVideo = true;
     quillToolbar = [
       [{ header: [2, 3, 4, 5, 6, false] }],
       ...quillToolbar,
-      ["video"]
+      ["video"],
+      ["image"]
     ];
-  } else if (toolbar === "basic") {
-    quillToolbar = [
-      ...quillToolbar,
-      ["video"]
-    ];
-  }
-
-  if (addImage) {
-    quillToolbar.push(["image"]);
   }
 
   let modules = {
@@ -44,17 +60,26 @@ export default function createQuillEditor(container) {
     toolbar: {
       container: quillToolbar,
       handlers: {
-        "linebreak": lineBreakButtonHandler
+        linebreak: lineBreakButtonHandler
       }
     }
   };
   const $input = $(container).siblings('input[type="hidden"]');
   container.innerHTML = $input.val() || "";
   const token = $('meta[name="csrf-token"]').attr("content");
+
+  if (addVideo) {
+    quillFormats.push("video");
+  }
+
   if (addImage) {
+    // Attempt to allow images only if the image support is enabled at editor support.
+    // see: https://github.com/quilljs/quill/issues/1108
+    quillFormats.push("image");
+
     modules.imageResize = {
       modules: ["Resize", "DisplaySize"]
-    }
+    };
     modules.imageUpload = {
       url: $(container).data("uploadImagesPath"),
       method: "POST",
@@ -62,18 +87,23 @@ export default function createQuillEditor(container) {
       withCredentials: false,
       headers: { "X-CSRF-Token": token },
       callbackOK: (serverResponse, next) => {
-        $("div.ql-toolbar").last().removeClass("editor-loading")
+        $("div.ql-toolbar").last().removeClass("editor-loading");
         next(serverResponse.url);
       },
       callbackKO: (serverError) => {
-        $("div.ql-toolbar").last().removeClass("editor-loading")
+        $("div.ql-toolbar").last().removeClass("editor-loading");
         console.log(`Image upload error: ${serverError.message}`);
       },
       checkBeforeSend: (file, next) => {
-        $("div.ql-toolbar").last().addClass("editor-loading")
+        $("div.ql-toolbar").last().addClass("editor-loading");
         next(file);
       }
-    }
+    };
+
+    const text = $(container).data("dragAndDropHelpText");
+    $(container).after(
+      `<p class="help-text" style="margin-top:-1.5rem;">${text}</p>`
+    );
   }
   const quill = new Quill(container, {
     modules: modules,
@@ -81,6 +111,11 @@ export default function createQuillEditor(container) {
     theme: "snow"
   });
 
+  if (addImage === false) {
+    // Firefox natively implements image drop in contenteditable which is why we need to disable that
+    quill.root.addEventListener("drop", (ev) => ev.preventDefault());
+  }
+
   if (disabled) {
     quill.disable();
   }
@@ -95,7 +130,10 @@ export default function createQuillEditor(container) {
     });
     container.dispatchEvent(event);
 
-    if ((text === "\n" || text === "\n\n") && quill.root.querySelectorAll(allowedEmptyContentSelector).length === 0) {
+    if (
+      (text === "\n" || text === "\n\n") &&
+      quill.root.querySelectorAll(allowedEmptyContentSelector).length === 0
+    ) {
       $input.val("");
     } else {
       const emptyParagraph = "<p><br></p>";
@@ -109,13 +147,5 @@ export default function createQuillEditor(container) {
   // After editor is ready, linebreak_module deletes two extraneous new lines
   quill.emitter.emit("editor-ready");
 
-  if (addImage) {
-    const text = $(container).data("dragAndDropHelpText");
-    $(container).after(`<p class="help-text" style="margin-top:-1.5rem;">${text}</p>`);
-  }
-
-  // After editor is ready, linebreak_module deletes two extraneous new lines
-  quill.emitter.emit("editor-ready");
-
   return quill;
 }

data/app/packs/src/decidim/form_filter.component.test.js

@@ -1,4 +1,4 @@
-/* global spyOn */
+/* global spyOn, jest */
 /* eslint-disable id-length */
 window.$ = $;
 
@@ -7,6 +7,20 @@ import DataPicker from "./data_picker"
 
 const FormFilterComponent = require("./form_filter.component_for_testing.js");
 
+const expectedPushState = (state, filters) => {
+  const queryString = Object.keys(filters).map((key) => {
+    const name = `filter[${key}]`;
+    const val = filters[key];
+    if (Array.isArray(val)) {
+      return val.map((v) => `${encodeURIComponent(`${name}[]`)}=${encodeURIComponent(v)}`).join("&");
+    }
+
+    return `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;
+  }).join("&");
+
+  return [state, null, `/filters?${queryString}`];
+}
+
 describe("FormFilterComponent", () => {
   const selector = "form#new_filter";
   let subject = null;
@@ -15,6 +29,10 @@ describe("FormFilterComponent", () => {
   beforeEach(() => {
     let form = `
       <form id="new_filter" action="/filters" method="get">
+        <fieldset>
+          <input id="filter_search_text_cont" placeholder="Search" data-disable-dynamic-change="true" type="search" name="filter[search_text_cont]">
+        </fieldset>
+
         <fieldset>
           <div id="filter_somerandomid_scope_id" class="data-picker picker-multiple" data-picker-name="filter[scope_id]">
             <div class="picker-values">
@@ -67,11 +85,25 @@ describe("FormFilterComponent", () => {
     `;
     $("body").append(form);
 
+    const $form = $(document).find("form");
+
     window.Decidim = window.Decidim || {};
 
     window.theDataPicker = new DataPicker($(".data-picker"));
     window.theCheckBoxesTree = new CheckBoxesTree();
-    subject = new FormFilterComponent($(document).find("form"));
+    window.Rails = {
+      fire: (htmlElement, event) => {
+        // Hack to call trigger on the correct instance of the form, as fetching
+        // with the selector does not work.
+        if (htmlElement === $form[0]) {
+          $form.trigger(event);
+        }
+      }
+    };
+
+    subject = new FormFilterComponent($form);
+
+    jest.useFakeTimers();
   });
 
   it("exists", () => {
@@ -88,7 +120,19 @@ describe("FormFilterComponent", () => {
 
   describe("when mounted", () => {
     beforeEach(() => {
-      spyOn(subject.$form, "on");
+      // Jest doesn't implement listening on the form submit event so we need
+      // to hack it.
+      const originalOn = subject.$form.on.bind(subject.$form);
+      jest.spyOn(subject.$form, "on").mockImplementation((...args) => {
+        if (args[0] === "submit") {
+          subject.$form.submitHandler = args[1];
+        } else if (args[0] === "change" && typeof args[1] === "string") {
+          subject.$form.changeHandler = args[2];
+        } else {
+          originalOn(...args);
+        }
+      });
+
       subject.mountComponent();
     });
 
@@ -100,8 +144,98 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeTruthy();
     });
 
-    it("binds the form change event", () => {
+    it("binds the form change and submit events", () => {
       expect(subject.$form.on).toHaveBeenCalledWith("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", subject._onFormChange);
+      expect(subject.$form.on).toHaveBeenCalledWith("submit", subject._onFormSubmit);
+    });
+
+    describe("form changes", () => {
+      beforeEach(() => {
+        spyOn(window.history, "pushState");
+
+        // This is a hack to be able to trigger the events even somewhat close
+        // to an actual situation. In real browser environment the change events
+        // would be triggered by the input/select elements but to simplify the
+        // test implementation, we trigger them directly on the form.
+        const originalTrigger = subject.$form.trigger.bind(subject.$form);
+        jest.spyOn(subject.$form, "trigger").mockImplementation((...args) => {
+          if (args[0] === "submit") {
+            subject.$form.submitHandler(
+              $.event.fix(new CustomEvent("submit", { bubbles: true, cancelable: true }))
+            );
+          } else if (args[0] === "change") {
+            subject.$form.changeHandler();
+          } else {
+            originalTrigger(...args);
+          }
+
+          jest.runAllTimers();
+        });
+      });
+
+      it("does not save the state in case there were no changes to previous state", () => {
+        subject.$form.trigger("change");
+
+        expect(window.history.pushState).not.toHaveBeenCalled();
+      });
+
+      it("saves the state after dynamic form changes", () => {
+        $("#filter_somerandomid_category_id").val(2);
+
+        subject.$form.trigger("change");
+
+        const state = {
+          "filter_somerandomid_scope_id": [
+            {
+              "text": "Scope 1",
+              "url": "picker_url_1",
+              "value": "3"
+            },
+            {
+              "text": "Scope 2",
+              "url": "picker_url_2",
+              "value": "4"
+            }
+          ]
+        };
+        const filters = {
+          "search_text_cont": "",
+          "scope_id": [3, 4],
+          "category_id": 2,
+          "state": [""]
+        };
+        expect(window.history.pushState).toHaveBeenCalledWith(...expectedPushState(state, filters));
+      });
+
+      it("saves the state after form submission through input element", () => {
+        const textInput = document.getElementById("filter_search_text_cont");
+        textInput.value = "search";
+
+        subject.$form.trigger("submit");
+
+        const state = {
+          "filter_somerandomid_scope_id": [
+            {
+              "text": "Scope 1",
+              "url": "picker_url_1",
+              "value": "3"
+            },
+            {
+              "text": "Scope 2",
+              "url": "picker_url_2",
+              "value": "4"
+            }
+          ]
+        }
+        const filters = {
+          "search_text_cont": "search",
+          "scope_id": [3, 4],
+          "category_id": 1,
+          "state": [""]
+        }
+
+        expect(window.history.pushState).toHaveBeenCalledWith(...expectedPushState(state, filters));
+      });
     });
 
     describe("onpopstate event", () => {
@@ -131,6 +265,14 @@ describe("FormFilterComponent", () => {
         expect(checked.map((input) => input.value)).toEqual(["", "accepted", "evaluating"]);
         expect(checked.filter((input) => input.indeterminate).map((input) => input.value)).toEqual([""]);
       });
+
+      it("does not save the state", () => {
+        spyOn(window.history, "pushState");
+
+        window.onpopstate({ isTrusted: true, state: scopesPickerState});
+
+        expect(window.history.pushState).not.toHaveBeenCalled();
+      });
     });
   });
 
@@ -145,8 +287,9 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeFalsy();
     });
 
-    it("unbinds the form change event", () => {
+    it("unbinds the form change and submit events", () => {
       expect(subject.$form.off).toHaveBeenCalledWith("change", "input, select", subject._onFormChange);
+      expect(subject.$form.off).toHaveBeenCalledWith("submit", subject._onFormSubmit);
     });
   });
 

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

@@ -23,6 +23,7 @@ export default class FormFilterComponent {
 
     this._updateInitialState();
     this._onFormChange = delayed(this, this._onFormChange.bind(this));
+    this._onFormSubmit = delayed(this, this._onFormSubmit.bind(this));
     this._onPopState = this._onPopState.bind(this);
 
     if (window.Decidim.PopStateHandler) {
@@ -42,6 +43,7 @@ export default class FormFilterComponent {
     if (this.mounted) {
       this.mounted = false;
       this.$form.off("change", "input, select", this._onFormChange);
+      this.$form.off("submit", this._onFormSubmit);
 
       unregisterCallback(`filters-${this.id}`)
     }
@@ -62,6 +64,7 @@ export default class FormFilterComponent {
         contentContainer = this.$form.data("remoteFill");
       }
       this.$form.on("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", this._onFormChange);
+      this.$form.on("submit", this._onFormSubmit);
 
       this.currentFormRequest = null;
       this.$form.on("ajax:beforeSend", (e) => {
@@ -254,14 +257,16 @@ export default class FormFilterComponent {
 
     // Only one instance should submit the form on browser history navigation
     if (this.popStateSubmiter) {
-      Rails.fire(this.$form[0], "submit");
+      Rails.fire(this.$form[0], "submit", { from: "pop" });
     }
 
     this.changeEvents = true;
   }
 
   /**
-   * Handles the logic to update the current location after a form change event.
+   * Handles the logic to decide whether the form should be submitted or not
+   * after a form change event. The form is only submitted when changes have
+   * occurred.
    * @private
    * @returns {Void} - Returns nothing.
    */
@@ -270,7 +275,7 @@ export default class FormFilterComponent {
       return;
     }
 
-    const [newPath, newState] = this._currentStateAndPath();
+    const [newPath] = this._currentStateAndPath();
     const path = this._getLocation(false);
 
     if (newPath === path) {
@@ -278,6 +283,23 @@ export default class FormFilterComponent {
     }
 
     Rails.fire(this.$form[0], "submit");
+  }
+
+  /**
+   * Saves the current state of the search on form submit to update the search
+   * parameters to the URL and store the picker states.
+   * @private
+   * @param {jQuery.Event} ev The event that caused the form to submit.
+   * @returns {Void} - Returns nothing.
+   */
+  _onFormSubmit(ev) {
+    const eventDetail = ev.originalEvent.detail;
+    if (eventDetail && eventDetail.from === "pop") {
+      return;
+    }
+
+    const [newPath, newState] = this._currentStateAndPath();
+
     pushState(newPath, newState);
     this._saveFilters(newPath);
   }
@@ -314,7 +336,7 @@ export default class FormFilterComponent {
    * @returns {String} - Returns a unique identifier
    */
   _getUID() {
-    return `filter-form-${new Date().setUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
+    return `filter-form-${new Date().getUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
   }
 
   /**

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

@@ -10,4 +10,133 @@
     margin-bottom: $paragraph-margin-bottom;
     text-rendering: $paragraph-text-rendering;
   }
+
+  ul,
+  ol{
+    margin-bottom: $paragraph-margin-bottom;
+  }
+}
+
+.ql-editor-display{
+  ul,
+  ol{
+    li{
+      list-style-type: none;
+      margin-bottom: .5rem;
+
+      &::before{
+        content: "\2022";
+        display: inline-block;
+        white-space: nowrap;
+        width: 1.2em;
+      }
+
+      &.ql-indent-1{
+        padding-left: 3em;
+      }
+
+      &.ql-indent-2{
+        padding-left: 6em;
+      }
+
+      &.ql-indent-3{
+        padding-left: 9em;
+      }
+
+      &.ql-indent-4{
+        padding-left: 12em;
+      }
+
+      &.ql-indent-5{
+        padding-left: 15em;
+      }
+
+      &.ql-indent-6{
+        padding-left: 18em;
+      }
+
+      &.ql-indent-7{
+        padding-left: 21em;
+      }
+
+      &.ql-indent-8{
+        padding-left: 24em;
+      }
+
+      &.ql-indent-9{
+        padding-left: 27em;
+      }
+    }
+  }
+
+  ol{
+    li{
+      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+      counter-increment: list-0;
+
+      &::before{ content: counter(list-0, decimal) ". "; }
+
+      &.ql-indent-1{
+        counter-increment: list-1;
+        counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+
+        &::before{ content: counter(list-1, lower-alpha) ". "; }
+      }
+
+      &.ql-indent-2{
+        counter-increment: list-2;
+        counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+
+        &::before{ content: counter(list-2, lower-roman) ". "; }
+      }
+
+      &.ql-indent-3{
+        counter-increment: list-3;
+        counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+
+        &::before{ content: counter(list-3, decimal) ". "; }
+      }
+
+      &.ql-indent-4{
+        counter-increment: list-4;
+        counter-reset: list-5 list-6 list-7 list-8 list-9;
+
+        &::before{ content: counter(list-4, lower-alpha) ". "; }
+      }
+
+      &.ql-indent-5{
+        counter-increment: list-5;
+        counter-reset: list-6 list-7 list-8 list-9;
+
+        &::before{ content: counter(list-5, lower-roman) ". "; }
+      }
+
+      &.ql-indent-6{
+        counter-increment: list-6;
+        counter-reset: list-7 list-8 list-9;
+
+        &::before{ content: counter(list-6, decimal) ". "; }
+      }
+
+      &.ql-indent-7{
+        counter-increment: list-7;
+        counter-reset: list-8 list-9;
+
+        &::before{ content: counter(list-7, lower-alpha) ". "; }
+      }
+
+      &.ql-indent-8{
+        counter-increment: list-8;
+        counter-reset: list-9;
+
+        &::before{ content: counter(list-8, lower-roman) ". "; }
+      }
+
+      &.ql-indent-9{
+        counter-increment: list-9;
+
+        &::before{ content: counter(list-9, decimal) ". "; }
+      }
+    }
+  }
 }

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

@@ -25,6 +25,13 @@ body{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+
+  &.preview{
+    .see-on-website,
+    .unsubscribe{
+      cursor: not-allowed;
+    }
+  }
 }
 
 .ExternalClass{

data/app/packs/stylesheets/decidim/extras/_quill.scss

@@ -11,9 +11,3 @@
   margin-top: 0;
   margin-bottom: 0;
 }
-
-.ql-reset-decidim{
-  display: inline;
-  padding: 0;
-  white-space: inherit;
-}

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

@@ -123,6 +123,10 @@
     }
   }
 
+  &.primary{
+    @include button-hollow-variant(var(--primary));
+  }
+
   &.secondary{
     @include button-hollow-variant(var(--secondary));
   }
@@ -257,12 +261,12 @@
 
 .button--shadow{
   $shadows: (
-    primary: shade($primary, 50),
-    secondary: shade($secondary, 50),
-    success: shade($success, 50),
-    warning: shade($warning, 50),
-    alert: shade($alert, 50),
-    muted: shade($muted, 50),
+    primary: shade($primary, 50%),
+    secondary: shade($secondary, 50%),
+    success: shade($success, 50%),
+    warning: shade($warning, 50%),
+    alert: shade($alert, 50%),
+    muted: shade($muted, 50%),
   );
 
   @include modifiers(background-color, $shadows){

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

@@ -934,7 +934,7 @@ a .card__title{
   @include modifiers(
     color,
     (
-      muted: tint($muted, 50),
+      muted: tint($muted, 50%),
     )
   ){
     margin-top: -$global-margin * .95;

data/app/packs/stylesheets/decidim/modules/_comments.scss

@@ -17,6 +17,30 @@ $comment-form-bg: $light-gray;
 
 .comment-thread{
   @extend .card;
+
+  .show-comment-replies{
+    display: none;
+  }
+
+  .hide-comment-replies{
+    display: inline;
+  }
+
+  .comment__hide{
+    float: left;
+    margin-bottom: 0;
+  }
+
+  .no-comments{
+    .show-comment-replies{
+      display: inline;
+    }
+
+    .hide-comment-replies,
+    .replies{
+      display: none;
+    }
+  }
 }
 
 .comment-thread__title{

data/app/packs/stylesheets/decidim/vizzs/_linechart.scss

@@ -36,8 +36,8 @@
   @mixin loop-colors-types($color, $max: 12){
     @for $i from 0 through ($max - 1){
       $interval: ($i % 4) * 24 + 1;
-      $tints: tint($color, $interval);
-      $shades: shade($color, $interval);
+      $tints: tint($color, $interval * 1%);
+      $shades: shade($color, $interval * 1%);
       $adjusts: adjust-color($color, $lightness: $interval * 1%, $hue: -$interval);
 
       .type-#{$i}:not(.legend){