decidim-core 0.26.9 → 0.27.0.rc1

data/app/packs/src/decidim/vizzs/areachart.js

@@ -1,10 +1,15 @@
-/* global d3 */
 /* eslint-disable require-jsdoc, id-length, no-undefined, no-unused-vars, multiline-ternary, no-ternary, no-nested-ternary, no-invalid-this */
 /* eslint prefer-reflect: ["error", { "exceptions": ["call"] }] */
 /* eslint dot-location: ["error", "property"] */
 /* eslint no-unused-vars: 0 */
 
-import * as d3 from "d3";
+import { select, mouse } from "d3-selection";
+import { min, max, extent, ascending, bisector } from "d3-array";
+import { scaleTime, scaleLinear } from "d3-scale";
+import { axisLeft, axisBottom } from "d3-axis";
+import { timeMonth } from "d3-time";
+import { timeFormat, isoParse } from "d3-time-format";
+import { area, line } from "d3-shape";
 
 // lib
 export default function areachart(opts = {}) {
@@ -12,12 +17,12 @@ export default function areachart(opts = {}) {
   const parseData = (data) => {
     // format the data
     data.forEach((d) => {
-      d.key = d3.isoParse(d.key)
+      d.key = isoParse(d.key)
       d.value = Number(d.value)
     });
 
     // order by date
-    return data.sort((x, y) => d3.ascending(x.key, y.key))
+    return data.sort((x, y) => ascending(x.key, y.key))
   }
 
   // OPTIONAL: Helper function to accumulates all data values
@@ -32,7 +37,7 @@ export default function areachart(opts = {}) {
   let data = parseData(opts.data)
   let title = opts.title
   let objectName = opts.objectName || ""
-  let container = d3.select(opts.container)
+  let container = select(opts.container)
   let showAxis = opts.axis || false
   let ratio = (opts.ratio || "").split(":").reduce((a, b) => a / b) || (4 / 3)
   let showTooltip = Object.is(opts.tip, undefined) ? true : opts.tip
@@ -52,20 +57,20 @@ export default function areachart(opts = {}) {
 
   let width = Number(container.node().getBoundingClientRect().width) - margin.left - margin.right
   let height = (width / ratio) - margin.top - margin.bottom
-  let titlePadding = d3.min([width / 10, 32])
+  let titlePadding = min([width / 10, 32])
 
   // set the ranges
-  let x = d3.scaleTime().range([0, width]);
-  let y = d3.scaleLinear().range([height, 0]);
+  let x = scaleTime().range([0, width]);
+  let y = scaleLinear().range([height, 0]);
 
   // define the area
-  let area = d3.area()
+  let _area = area()
     .x((d) => x(d.key))
     .y0(height)
     .y1((d) => y(d.value));
 
   // define the line
-  let valueline = d3.line()
+  let valueline = line()
     .x((d) => x(d.key))
     .y((d) => y(d.value));
 
@@ -76,8 +81,8 @@ export default function areachart(opts = {}) {
     .attr("transform", `translate(${margin.left},${margin.top})`);
 
   // scale the range of the data
-  x.domain(d3.extent(data, (d) => d.key));
-  y.domain([0, d3.max(data, (d) => d.value)]).nice();
+  x.domain(extent(data, (d) => d.key));
+  y.domain([0, max(data, (d) => d.value)]).nice();
 
   // add the valueline path.
   let topLine = svg.append("path")
@@ -89,7 +94,7 @@ export default function areachart(opts = {}) {
   svg.append("path")
     .data([data])
     .attr("class", "area")
-    .attr("d", area)
+    .attr("d", _area)
 
   if (showTooltip) {
     // tooltip
@@ -98,7 +103,7 @@ export default function areachart(opts = {}) {
       .attr("r", 6)
       .style("display", "none")
 
-    let tooltip = d3.select("body").append("div")
+    let tooltip = select("body").append("div")
       .attr("id", `${container.node().id}-tooltip`)
       .attr("class", "chart-tooltip")
       .style("opacity", 0)
@@ -113,8 +118,8 @@ export default function areachart(opts = {}) {
         tooltip.style("opacity", 0)
       })
       .on("mousemove", function() {
-        let x0 = x.invert(d3.mouse(this)[0])
-        let i = d3.bisector((d) => d.key).left(data, x0, 1)
+        let x0 = x.invert(mouse(this)[0])
+        let i = bisector((d) => d.key).left(data, x0, 1)
         let d0 = data[i - 1]
         let d1 = data[i]
         let d = (x0 - d0.key > d1.key - x0) ? d1 : d0
@@ -127,7 +132,7 @@ export default function areachart(opts = {}) {
 
         let tooltipContent = `
           <div class="tooltip-content">
-            ${d3.timeFormat("%e %B %Y")(d.key)}<br />
+            ${timeFormat("%e %B %Y")(d.key)}<br />
             ${d.value.toLocaleString()} ${objectName}
           </div>`
 
@@ -139,11 +144,11 @@ export default function areachart(opts = {}) {
   }
 
   if (showAxis) {
-    let xAxis = d3.axisBottom(x)
-      .ticks(d3.timeMonth)
-      .tickFormat(d3.timeFormat("%b %y"))
+    let xAxis = axisBottom(x)
+      .ticks(timeMonth)
+      .tickFormat(timeFormat("%b %y"))
       .tickSize(-height)
-    let yAxis = d3.axisLeft(y)
+    let yAxis = axisLeft(y)
       .ticks(5)
       .tickSize(8)
 
@@ -200,10 +205,10 @@ export default function areachart(opts = {}) {
         .text(title)
         .call(function(fulltext, wrapwidth, start = 0) {
           fulltext.each(function() {
-            let text = d3.select(this)
+            let text = select(this)
             let word = ""
             let words = text.text().split(/\s+/).reverse()
-            let line = []
+            let _line = []
             let lineNumber = 0
             let lineHeight = 1.1
             let _x = text.attr("x")
@@ -217,12 +222,12 @@ export default function areachart(opts = {}) {
 
             /* eslint-disable no-cond-assign, no-plusplus */
             while (word = words.pop()) {
-              line.push(word);
-              tspan.text(line.join(" "));
+              _line.push(word);
+              tspan.text(_line.join(" "));
               if (tspan.node().getComputedTextLength() > wrapwidth) {
-                line.pop()
-                tspan.text(line.join(" "))
-                line = [word]
+                _line.pop()
+                tspan.text(_line.join(" "))
+                _line = [word]
                 tspan = text.append("tspan")
                   .attr("x", _x)
                   .attr("y", _y)

data/app/packs/src/decidim/vizzs/linechart.js

@@ -1,9 +1,15 @@
 /* eslint-disable require-jsdoc, max-lines, id-length, no-invalid-this, no-cond-assign, no-unused-vars, max-params, no-undefined, no-sequences, multiline-ternary, no-ternary */
 /* eslint prefer-reflect: ["error", { "exceptions": ["call"] }] */
 /* eslint dot-location: ["error", "property"] */
-/* global d3, DATACHARTS, fetchDatacharts */
+/* global DATACHARTS, fetchDatacharts */
 
-import * as d3 from "d3"
+import { select, mouse } from "d3-selection";
+import { extent, ascending } from "d3-array";
+import { scaleTime, scaleLinear } from "d3-scale";
+import { axisLeft, axisBottom } from "d3-axis";
+import { timeMonth } from "d3-time";
+import { timeFormat, isoParse } from "d3-time-format";
+import { line } from "d3-shape";
 
 export default function renderLineCharts() {
   // lib
@@ -15,9 +21,9 @@ export default function renderLineCharts() {
     let data = opts.data
     let title = opts.title
     let subtitle = opts.subtitle
-    let container = d3.select(opts.container)
+    let container = select(opts.container)
     let ratio = opts.ratio
-    let xTickFormat = opts.xTickFormat || d3.timeFormat("%b %y")
+    let xTickFormat = opts.xTickFormat || timeFormat("%b %y")
     let showTooltip = opts.tip !== "false"
 
     // precalculation
@@ -40,13 +46,13 @@ export default function renderLineCharts() {
     let height = (width / ratio) - margin.top - margin.bottom
 
     // set the ranges
-    const x = d3.scaleTime().range([0, width])
-    const y = d3.scaleLinear().range([height, 0])
+    const x = scaleTime().range([0, width])
+    const y = scaleLinear().range([height, 0])
 
     // set the scales
-    x.domain(d3.extent([...new Set([].concat(...data.map((f) => f.value.map((d) => d.key))))]))
+    x.domain(extent([...new Set([].concat(...data.map((f) => f.value.map((d) => d.key))))]))
     // group names
-    y.domain(d3.extent([...new Set([].concat(...data.map((f) => f.value.map((d) => d.value))))]))
+    y.domain(extent([...new Set([].concat(...data.map((f) => f.value.map((d) => d.value))))]))
 
     // container
     let svg = container.append("svg")
@@ -103,23 +109,22 @@ export default function renderLineCharts() {
       .attr("transform", `translate(${margin.left},${margin.top - headerHeight})`)
       .attr("class", "group")
 
-    let line = d3.line()
-      // .curve(d3.curveBasis)
+    let _line = line()
       .x((d) => x(d.key))
       .y((d) => y(d.value))
 
     let cat = g.selectAll("path")
       .data(data)
       .enter().append("path")
-      .attr("d", (d) => line(d.value))
+      .attr("d", (d) => _line(d.value))
       .attr("class", (d) =>  `line type-${keys.indexOf(d.key)}`)
 
     // axis
-    let xAxis = d3.axisBottom(x)
-      .ticks(d3.timeMonth.every(4))
+    let xAxis = axisBottom(x)
+      .ticks(timeMonth.every(4))
       .tickSize(-height)
       .tickFormat(xTickFormat)
-    let yAxis = d3.axisLeft(y)
+    let yAxis = axisLeft(y)
       .ticks(5)
 
     let _xAxis = (xg) => {
@@ -146,7 +151,7 @@ export default function renderLineCharts() {
 
     // tooltip
     if (showTooltip) {
-      let tooltip = d3.select("body").append("div")
+      let tooltip = select("body").append("div")
         .attr("id", `${container.node().id}-tooltip`)
         .attr("class", "chart-tooltip")
         .style("opacity", 0)
@@ -159,7 +164,7 @@ export default function renderLineCharts() {
           tooltip.style("opacity", 0)
         })
         .on("mousemove", function() {
-          let x0 = x.invert(d3.mouse(this)[0])
+          let x0 = x.invert(mouse(this)[0])
 
           let ge = []
           data.forEach((o) => {
@@ -225,10 +230,10 @@ export default function renderLineCharts() {
       // format the data
       data.forEach((d) => {
         d.value.forEach((f) => {
-          f.key = d3.isoParse(f.key)
+          f.key = isoParse(f.key)
         })
 
-        d.value.sort((x, y) => d3.ascending(x.key, y.key))
+        d.value.sort((x, y) => ascending(x.key, y.key))
       });
 
       return data

data/app/packs/src/decidim/vizzs/rowchart.js

@@ -1,9 +1,13 @@
 /* eslint-disable require-jsdoc, max-lines, id-length, no-invalid-this, no-cond-assign, no-unused-vars, max-params, no-sequences, no-ternary */
 /* eslint prefer-reflect: ["error", { "exceptions": ["call"] }] */
 /* eslint dot-location: ["error", "property"] */
-/* global d3, DATACHARTS, fetchDatacharts */
+/* global DATACHARTS, fetchDatacharts */
 
-import * as d3 from "d3"
+import { select } from "d3-selection";
+import { max } from "d3-array";
+import { scaleBand, scaleLinear } from "d3-scale";
+import { axisLeft, axisBottom } from "d3-axis";
+import "d3-transition"
 
 export default function renderRowCharts() {
   // lib
@@ -15,14 +19,14 @@ export default function renderRowCharts() {
     let data = opts.data
     let title = opts.title
     let subtitle = opts.subtitle
-    let container = d3.select(opts.container)
+    let container = select(opts.container)
     let ratio = opts.ratio
     let xTickFormat = opts.xTickFormat
     let showTooltip = opts.tip !== "false"
 
     // precalculation
     // Explanation: get the inner values foreach object outer values, flat the array, remove duplicates
-    let maxValue = d3.max([...new Set([].concat(...data.map((f) => f.value.map((d) => d.value))))])
+    let maxValue = max([...new Set([].concat(...data.map((f) => f.value.map((d) => d.value))))])
     // Explanation: get the inner keys foreach object outer values, flat the array, remove duplicates
     let keys = [...new Set([].concat(...data.map((f) => f.value.map((d) => d.key))))]
 
@@ -57,9 +61,9 @@ export default function renderRowCharts() {
     let height = (width / ratio) - margin.top - margin.bottom
 
     // set the ranges
-    const x = d3.scaleLinear().rangeRound([0, width])
-    const y0 = d3.scaleBand().rangeRound([height, 0]).paddingInner(0.1)
-    const y1 = d3.scaleBand().padding(0.05)
+    const x = scaleLinear().rangeRound([0, width])
+    const y0 = scaleBand().rangeRound([height, 0]).paddingInner(0.1)
+    const y1 = scaleBand().padding(0.05)
 
     // set the scales
     x.domain([0, maxValue]).nice()
@@ -123,11 +127,11 @@ export default function renderRowCharts() {
       .attr("transform", `translate(${margin.left},${margin.top - headerHeight})`)
 
     // axis
-    let xAxis = d3.axisBottom(x)
+    let xAxis = axisBottom(x)
       .ticks(5)
       .tickSize(-height)
       .tickFormat(xTickFormat)
-    let yAxis = d3.axisLeft(y0)
+    let yAxis = axisLeft(y0)
 
     let _xAxis = (xg) => {
       xg.call(xAxis)
@@ -142,7 +146,7 @@ export default function renderRowCharts() {
       yg.selectAll(".tick text")
         .attr("class", "text-large")
         .each(function() {
-          let text = d3.select(this)
+          let text = select(this)
           let limitLength = margin.left - (gutter * 10)
 
           if (text.node().getComputedTextLength() > limitLength) {
@@ -210,7 +214,7 @@ export default function renderRowCharts() {
 
     // tooltip
     if (showTooltip) {
-      let tooltip = d3.select("body").append("div")
+      let tooltip = select("body").append("div")
         .attr("id", `${container.node().id}-tooltip`)
         .attr("class", "chart-tooltip")
         .style("opacity", 0)

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

@@ -10,133 +10,4 @@
     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,13 +25,6 @@ body{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-
-  &.preview{
-    .see-on-website,
-    .unsubscribe{
-      cursor: not-allowed;
-    }
-  }
 }
 
 .ExternalClass{
@@ -1788,3 +1781,69 @@ th,
 td{
   box-sizing: border-box;
 }
+
+.email-notifications-digest{
+  .email-header{
+    margin-bottom: 32px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #2c2930;
+    display: inline-block;
+    width: 49%;
+
+    &--right{
+      text-align: right;
+    }
+  }
+
+  .email-intro{
+    font-size: 16px;
+    line-height: 21px;
+  }
+
+  .email-content-notifications{
+    background-color: #f4f4f4;
+    border-radius: 5px;
+    border: 1px #e5e5e5;
+    padding: 16px;
+    margin: 32px 0;
+  }
+
+  .email-content-notification{
+    p a{
+      color: #327f9b;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+
+  .email-element-separator{
+    margin: 24px 0;
+    color: #e5e5e5;
+    border-color: #e5e5e5;
+    height: 0;
+    border-style: solid;
+    border-width: 1px;
+  }
+
+  .email-notification-date{
+    color: #666d7a;
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  .email-closing{
+    font-size: 14px;
+  }
+
+  .email-btn{
+    border: solid 1px;
+    margin: 0 33% 30px;
+    width: 33%;
+    text-align: center;
+    display: inline-block;
+    padding: 10px;
+    color: #5295ad;
+    text-decoration: none;
+  }
+}

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

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

data/app/packs/stylesheets/decidim/layouts/_user.scss

@@ -37,6 +37,14 @@
   }
 }
 
+.account-notification{
+  display: flex;
+
+  &.callout.flash{
+    margin-bottom: 1rem;
+  }
+}
+
 .badge-card__content{
   @extend .card__content;
 

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

@@ -0,0 +1,99 @@
+@import "@tarekraafat/autocomplete.js/dist/css/autoComplete.02.css";
+
+$autocomplete-item-color: $secondary !default;
+$autocomplete-item-hover-bg: #ededed !default;
+$autocomplete-multiselect-bg: $white !default;
+$autocomplete-multiselect-border-color: $medium-gray !default;
+$autocomplete-multiselect-search-prompt-color: $dark-gray;
+
+.autoComplete_wrapper{
+  width: 100%;
+
+  input{
+    color: $black;
+    width: 100%;
+    margin: 0;
+  }
+
+  ul{
+    position: relative;
+    margin: 0;
+
+    li{
+      color: $autocomplete-item-color;
+
+      span{
+        &.author__avatar{
+          display: inline-block;
+        }
+      }
+
+      &:hover,
+      &[aria-selected="true"]{
+        background-color: $autocomplete-item-hover-bg;
+      }
+
+      &.disabled{
+        pointer-events: none;
+        opacity: .6;
+      }
+
+      .is-group{
+        float: right;
+      }
+    }
+  }
+
+  span{
+    &.autocomplete__selected-item.sticky{
+      position: absolute;
+      height: 3rem;
+      line-height: 3rem;
+      padding: 0 1rem;
+    }
+  }
+
+  .clear-sticky-selection{
+    display: inline;
+    position: absolute;
+    font-size: 1.3rem;
+    cursor: pointer;
+    right: 1rem;
+  }
+
+  .clear-multi-selection{
+    cursor: pointer;
+  }
+
+  .search-prompt{
+    color: $autocomplete-multiselect-search-prompt-color;
+    border: 1px solid $autocomplete-multiselect-border-color;
+    padding: .2rem;
+  }
+}
+
+.multiselect{
+  background-color: $autocomplete-multiselect-bg;
+  display: inline-block;
+  border: 1px solid $autocomplete-multiselect-border-color;
+  width: 100%;
+  cursor: text;
+  padding: 0 .5rem;
+  min-height: 2.4375rem;
+
+  span{
+    display: inline-block;
+    position: relative;
+    margin: .5rem .5rem .5rem 0;
+
+    input{
+      border: none;
+      outline: none;
+    }
+
+    &.clear-multi-selection{
+      margin: 0 0 0 .2rem;
+      cursor: pointer;
+    }
+  }
+}