decidim-core 0.20.1 → 0.21.0

data/app/assets/javascripts/decidim/form_filter.component.test.js

@@ -2,8 +2,10 @@
 /* eslint-disable id-length */
 window.$ = require("jquery");
 
+require("./delayed.js.es6");
 require("./history.js.es6");
 require("./data_picker.js.es6");
+require("./check_boxes_tree.js.es6");
 require("./form_filter.component.js.es6");
 
 const { Decidim: { FormFilterComponent } } = window;
@@ -11,13 +13,13 @@ const { Decidim: { FormFilterComponent } } = window;
 describe("FormFilterComponent", () => {
   const selector = "form#new_filter";
   let subject = null;
-  let scopesPickerState = {filter_scope_id: [{ url: "picker_url_3", value: 3, text: "Scope 3"}, { url: "picker_url_4", value: 4, text: "Scope 4"}]} // eslint-disable-line camelcase
+  let scopesPickerState = {filter_somerandomid_scope_id: [{ url: "picker_url_3", value: 3, text: "Scope 3"}, { url: "picker_url_4", value: 4, text: "Scope 4"}]} // eslint-disable-line camelcase
 
   beforeEach(() => {
     let form = `
       <form id="new_filter" action="/filters" method="get">
         <fieldset>
-          <div id="filter_scope_id" class="data-picker picker-multiple" data-picker-name="filter[scope_id]">
+          <div id="filter_somerandomid_scope_id" class="data-picker picker-multiple" data-picker-name="filter[scope_id]">
             <div class="picker-values">
               <div>
                 <a href="picker_url_1" data-picker-value="1">Scope 1</a>
@@ -33,16 +35,43 @@ describe("FormFilterComponent", () => {
         </fieldset>
 
         <fieldset>
-          <select id="filter_category_id" name="filter[category_id]">
+          <select id="filter_somerandomid_category_id" name="filter[category_id]">
             <option value="1">Category 1</option>
             <option value="2">Category 2</option>
           </select>
         </fieldset>
+
+        <fieldset>
+          <input type="hidden" name="filter[state][]" id="filter_state_" value="">
+          <label data-global-checkbox="" for="filter_state_all">
+            <input data-checkboxes-tree="state-options" is_root_check_box="true" value="" type="checkbox" name="filter[state][]" id="filter_state_all" class="ignore-filter">
+            All
+          </label>
+          <div id="state-options" class="filters__subfilters ">
+            <label data-children-checkbox="" for="filter_state_accepted">
+              <input value="accepted" type="checkbox" name="filter[state][]" id="filter_state_accepted" class="ignore-filter">
+              Accepted
+            </label>
+            <label data-children-checkbox="" for="filter_state_evaluating">
+              <input value="evaluating" type="checkbox" name="filter[state][]" id="filter_state_evaluating" class="ignore-filter">
+              Evaluating
+            </label>
+            <label data-children-checkbox="" for="filter_state_not_answered">
+              <input value="not_answered" type="checkbox" name="filter[state][]" id="filter_state_not_answered" class="ignore-filter">
+              Not answered
+            </label>
+            <label data-children-checkbox="" for="filter_state_rejected">
+              <input value="rejected" type="checkbox" name="filter[state][]" id="filter_state_rejected" class="ignore-filter">
+              Rejected
+            </label>
+          </div>
+        </fieldset>
       </form>
     `;
     $("body").append(form);
 
     window.theDataPicker = new window.Decidim.DataPicker($(".data-picker"));
+    window.theCheckBoxesTree = new window.Decidim.CheckBoxesTree();
     subject = new FormFilterComponent($(document).find("form"));
   });
 
@@ -90,13 +119,18 @@ describe("FormFilterComponent", () => {
       });
 
       it("sets the correct form fields based on the current location", () => {
-        spyOn(subject, "_getLocation").and.returnValue("/filters?filter[scope_id][]=3&filter[scope_id][]=4&filter[category_id]=2");
+        const path = "/filters?filter[scope_id][]=3&filter[scope_id][]=4&filter[category_id]=2&filter[state][]=&filter[state][]=accepted&filter[state][]=evaluating";
+        spyOn(subject, "_getLocation").and.returnValue(path);
         window.onpopstate({ isTrusted: true, state: scopesPickerState});
 
-        expect($(selector).find("select#filter_category_id").val()).toEqual("2");
-        expect($(`${selector} #filter_scope_id .picker-values div input`).map(function(_index, input) {
+        expect($(selector).find("select#filter_somerandomid_category_id").val()).toEqual("2");
+        expect($(`${selector} #filter_somerandomid_scope_id .picker-values div input`).map(function(_index, input) {
           return $(input).val();
         }).get()).toEqual(["3", "4"]);
+
+        let checked = Array.from($(`${selector} input[name="filter[state][]"]:checked`));
+        expect(checked.map((input) => input.value)).toEqual(["", "accepted", "evaluating"]);
+        expect(checked.filter((input) => input.indeterminate).map((input) => input.value)).toEqual([""]);
       });
     });
   });

data/app/assets/javascripts/decidim/history.js.es6

@@ -29,10 +29,25 @@
     }
   };
 
+  const replaceState = (url, state = null) => {
+    if (window.history) {
+      window.history.replaceState(state, null,  url);
+    }
+  };
+
+  const state = () => {
+    if (window.history) {
+      return window.history.state;
+    }
+    return null;
+  };
+
   exports.Decidim = exports.Decidim || {};
   exports.Decidim.History = {
     registerCallback,
     unregisterCallback,
-    pushState
+    pushState,
+    replaceState,
+    state
   };
 })(window);

data/app/assets/javascripts/decidim/vizzs/orgchart.js.es6

@@ -534,7 +534,7 @@
             node.proportion = (max + min) / 2
             if (!node.x) {
 
-            // if node has parent, match entered node positions to it's parent
+              // if node has parent, match entered node positions to it's parent
               if (node.parent) {
                 node.x = node.parent.x
               } else {

data/app/assets/stylesheets/decidim/_variables.scss

@@ -18,7 +18,7 @@ $meetings: #fabc6c !default;
 
 $twitter: #55acee !default;
 $facebook: #3b5998 !default;
-$google: #dd4b39 !default;
+$google: #4285f4 !default;
 
 // background colors used in public diff views
 $color-addition: #e6ffed !default;

data/app/assets/stylesheets/decidim/extras/_results-per-page.scss

@@ -63,4 +63,3 @@ $order-border: $border;
     border-left: none;
   }
 }
-

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

@@ -158,12 +158,40 @@
 .button--icon{
   display: flex;
   align-items: center;
+  position: relative;
+
+  .icon-wrap{
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: .85em;
+    border-right: 1px solid var(--secondary);
+    height: 100%;
+    min-width: 3.5em;
+    white-space: no-wrap;
+    padding-right: 5px;
+
+    .icon{
+      margin: 0;
+      vertical-align: bottom;
+    }
+  }
+
+  .text-wrap{
+    display: block;
+    margin-left: 2rem;
+  }
 
   .icon{
     margin: 0 2px;
   }
 
   &.small{
+    .icon-wrap{
+      padding: .5rem;
+      min-width: 2.5rem;
+    }
+
     .icon{
       width: 12px;
       height: 12px;
@@ -253,7 +281,8 @@
   background-color: var(--twitter);
 
   &:hover{
-    filter: brightness(50%);
+    background-color: var(--twitter);
+    filter: brightness(90%);
   }
 }
 
@@ -261,14 +290,58 @@
   background-color: var(--facebook);
 
   &:hover{
-    filter: brightness(50%);
+    background-color: var(--facebook);
+    filter: brightness(90%);
   }
 }
 
 .button--google{
   background-color: var(--google);
+  font-family: Roboto;
 
   &:hover{
-    filter: brightness(50%);
+    background-color: var(--google);
+    filter: brightness(90%);
+  }
+
+  .button--social__icon{
+    padding: 0;
+
+    svg.icon{
+      fill: inherit;
+      width: inherit;
+      height: inherit;
+      margin-top: 2px;
+
+      /*
+       * This is a hack to comply with google guidelines
+       * https://developers.google.com/identity/branding-guidelines
+       * Currently the icons.svg file have the wrong google icon, until that's fixed
+       * google icon can be specified in secrets.yml with icon_path: decidim/brands/google.svg
+       * however to facilitate upgrades this provides a fallback
+       */
+      max-width: 42px;
+      max-height: 42px;
+
+      &.icon--google{
+        > use{
+          display: none;
+        }
+
+        background-image: image-url("decidim/brands/google.svg");
+      }
+    }
+  }
+
+  &.button--social--mini{
+    .button--social__icon{
+      font-size: 0;
+      min-width: auto;
+      padding: 0;
+
+      svg.icon{
+        margin: 1px;
+      }
+    }
   }
 }

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

@@ -28,6 +28,7 @@ $comment-form-bg: $light-gray;
 
 .comment__header{
   padding: $comment-padding;
+  display: flex;
 }
 
 .comment__content{
@@ -36,9 +37,12 @@ $comment-form-bg: $light-gray;
   > :last-child{
     margin-bottom: 0;
   }
+
+  p:empty{
+    display: none;
+  }
 }
 
-.comment__footer,
 .comment__additionalreply{
   padding: $comment-padding;
   font-size: 90%;
@@ -46,6 +50,15 @@ $comment-form-bg: $light-gray;
   @include clearfix;
 }
 
+.comment__footer{
+  padding: $comment-padding;
+  font-size: 90%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
 .comment--nested{
   background: $comment-nested-bg;
   margin: $comment-padding;
@@ -60,13 +73,32 @@ $comment-form-bg: $light-gray;
   }
 }
 
-.comment__reply{
+.comment__actions{
+  display: flex;
+  flex-wrap: wrap;
+
+  > button,
+  a{
+    cursor: pointer;
+    margin-top: .5rem;
+  }
+}
+
+.comment__reply,
+.comment__reply[data-toggle]{
   float: left;
   color: $muted;
+  margin-right: .75rem;
+  margin-bottom: 0;
+
+  span{
+    margin-right: 0;
+  }
 }
 
 .comment__votes{
   float: right;
+  margin-top: .5rem;
 }
 
 .comment__votes--up{
@@ -122,8 +154,36 @@ $comment-form-bg: $light-gray;
   }
 }
 
+.comment__quote{
+  border-left-width: 6px;
+  font-size: 80%;
+  background-color: rgba(0, 0, 0, .03);
+  padding: 1rem;
+  margin-bottom: 1rem;
+
+  > p:last-of-type{
+    margin-bottom: 0;
+  }
+
+  > br{
+    display: none;
+  }
+}
+
 /* Comment form */
 
+.comment__quote{
+  border-left-width: 6px;
+  font-size: 80%;
+  background-color: rgba(0, 0, 0, .03);
+  padding: 1rem;
+  margin-bottom: 1rem;
+
+  > p:last-child{
+    margin-bottom: 0;
+  }
+}
+
 .add-comment{
   background: $comment-form-bg;
   padding: $comment-padding;
@@ -140,3 +200,19 @@ $comment-form-bg: $light-gray;
     display: block;
   }
 }
+
+/* Comments toggle */
+
+.comment{
+  &__text-is-open{
+    display: none;
+  }
+
+  &__is-open &__text-is-open{
+    display: inline-block;
+  }
+
+  &__is-open &__text-is-closed{
+    display: none;
+  }
+}

data/app/assets/stylesheets/decidim/modules/_filters.scss

@@ -65,17 +65,21 @@ $filters-padding-y: 1rem;
   padding: $filters-padding-x $filters-padding-y;
 
   &:first-of-type{
-    padding-top: $filters-padding-x*1.5;
+    padding-top: $filters-padding-x * 1.5;
   }
 
   &:last-of-type{
-    padding-bottom: $filters-padding-x*1.5;
+    padding-bottom: $filters-padding-x * 1.5;
     border-bottom: none;
   }
 
   label{
     line-height: 1.2;
     margin-bottom: .4rem;
+
+    &[data-global-checkbox]{
+      font-weight: 600;
+    }
   }
 
   .button{
@@ -90,6 +94,36 @@ $filters-padding-y: 1rem;
   }
 }
 
+.filters__subfilters{
+  & > .filters__subfilters{
+    padding-left: $filters-padding-x / 2;
+  }
+}
+
+.filters__has-subfilters{
+  display: flex;
+  justify-content: space-between;
+}
+
+.filters__icon-is-open,
+.filters__icon-is-closed{
+  font-size: .5em;
+}
+
+.filters__icon-is-open{
+  display: none;
+}
+
+.filters__is-open{
+  .filters__icon-is-open{
+    display: inline-block;
+  }
+
+  .filters__icon-is-closed{
+    display: none;
+  }
+}
+
 .filters__section--general{
   @extend .filters__section;
 

data/app/assets/stylesheets/decidim/modules/_layout.scss

@@ -12,6 +12,19 @@
   }
 }
 
+.wrapper-mini{
+  padding: 1.2rem 1rem;
+  position: relative;
+
+  @include breakpoint(medium){
+    padding: 2rem 1.5rem;
+  }
+
+  @include breakpoint(large){
+    padding: 3rem 4rem;
+  }
+}
+
 .wrapper--inner{
   background: $light-gray-dark;
   padding-top: 1rem;