decidim-admin 0.10.1 → 0.11.0.pre1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 275f84e183275612a1add39ce3da32b9277ffda9137d3c854c4598096a170875
-  data.tar.gz: 98d895bffe24589ceafea8bc8b239252bc1f6e81353e018fbc0c971820586a8b
+  metadata.gz: e66b30e2476e200011abd836e27bf1bb39693cf379e764b355098b8db233f674
+  data.tar.gz: cfcc74ee98f3205d5f82a5bc8300d8c08d8eabc4d8ee2e53e5216545a86a2aae
 SHA512:
-  metadata.gz: 3cf5ce72651241f58724e698cbdd66a005609e642b2d8091c51d8ca782d1c8d00297fdc6591af4124bb233a384c9918d8d905de88ea95a9de63f4c428278828a
-  data.tar.gz: c7a1d0374a0f2d044415bebfc6a174d4e8e13ca198788127ce54cdb47d989e2e3a2caee54ef9d2b8f984d8cf1772499a047dbafe0a45934bb610cd9e6f367959
+  metadata.gz: e8c7e24b71a4063babc7d6a4336e02a3aafea2c731a69af9e277e9daef0273119f5ee2738410671560a00c7d5cbeb77c7725e221f7d423235f499e7dd9b4c9c8
+  data.tar.gz: 3d85b2913258ed6d2ed2274b715bbd7fea7363ce82943c00f45f5e2bdf6800058b005b6d85c94074b5e7b2596c63a0446d01ebe8cef156a3c920f61530191238

data/README.md

@@ -22,11 +22,11 @@ And then execute:
 bundle
 ```
 
-## Features
+## Components
 
 ### Static pages
 
-This feature allows an admin to create pages to serve static content. Some
+This component allows an admin to create pages to serve static content. Some
 example of this kind of pages could be:
 
 * Terms and Conditions

data/app/assets/config/decidim_admin_manifest.js

@@ -1,2 +1,3 @@
 //= link decidim/admin/application.js
+//= link decidim/admin/managed_users.js
 //= link decidim/admin/application.css

data/app/assets/javascripts/decidim/admin/application.js.es6

@@ -10,6 +10,10 @@
 // = require moment.min
 // = require decidim/data_picker
 // = require jquery.auto-complete
+// = require ./auto_label_by_position.component
+// = require ./auto_buttons_by_position.component
+// = require ./dynamic_fields.component
+// = require ./field_dependent_inputs.component
 // = require_self
 
 window.Decidim = window.Decidim || {};
@@ -21,16 +25,16 @@ const pageLoad = () => {
 
   toggleNav();
 
-  createSortList('#steps tbody', {
+  createSortList("#steps tbody", {
     placeholder: $('<tr style="border-style: dashed; border-color: #000"><td colspan="4">&nbsp;</td></tr>')[0],
     onSortUpdate: ($children) => {
-      const sortUrl = $('#steps tbody').data('sort-url')
-      const order = $children.map((index, child) => $(child).data('id')).toArray();
+      const sortUrl = $("#steps tbody").data("sort-url")
+      const order = $children.map((index, child) => $(child).data("id")).toArray();
 
       $.ajax({
-        method: 'POST',
+        method: "POST",
         url: sortUrl,
-        contentType: 'application/json',
+        contentType: "application/json",
         data: JSON.stringify({ items_ids: order }) }, // eslint-disable-line camelcase
       );
     }
@@ -47,4 +51,8 @@ $(() => {
   if (window.Decidim.formDatePicker) {
     window.Decidim.formDatePicker();
   }
+
+  if (window.Decidim.quillEditor) {
+    window.Decidim.quillEditor();
+  }
 });

data/app/assets/javascripts/decidim/admin/auto_buttons_by_position.component.js.es6

@@ -0,0 +1,42 @@
+((exports) => {
+  class AutoButtonsByPositionComponent {
+    constructor(options = {}) {
+      this.listSelector = options.listSelector;
+      this.hideOnFirstSelector = options.hideOnFirstSelector;
+      this.hideOnLastSelector = options.hideOnLastSelector;
+
+      this.run();
+    }
+
+    run() {
+      const $list = $(this.listSelector);
+      const hideOnFirst = this.hideOnFirstSelector;
+      const hideOnLast = this.hideOnLastSelector;
+
+      if ($list.length === 1) {
+        const $item = $list.first();
+
+        $item.find(hideOnFirst).hide();
+        $item.find(hideOnLast).hide();
+      } else {
+        $list.each((idx, el) => {
+          if (el.id === $list.first().attr("id")) {
+            $(el).find(hideOnFirst).hide();
+            $(el).find(hideOnLast).show();
+          }
+          else if (el.id === $list.last().attr("id")) {
+            $(el).find(hideOnLast).hide();
+            $(el).find(hideOnFirst).show();
+          }
+          else {
+            $(el).find(hideOnLast).show();
+            $(el).find(hideOnFirst).show();
+          }
+        });
+      }
+    }
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.AutoButtonsByPositionComponent = AutoButtonsByPositionComponent;
+})(window);

data/app/assets/javascripts/decidim/admin/auto_label_by_position.component.js.es6

@@ -0,0 +1,33 @@
+((exports) => {
+  class AutoLabelByPositionComponent {
+    constructor(options = {}) {
+      this.listSelector = options.listSelector;
+      this.labelSelector = options.labelSelector;
+      this.onPositionComputed = options.onPositionComputed;
+
+      this.run();
+    }
+
+    run() {
+      const $list = $(this.listSelector);
+
+      $list.each((idx, el) => {
+        const $label = $(el).find(this.labelSelector);
+        const labelContent = $label.html();
+
+        if (labelContent.match(/#(\d+)/)) {
+          $label.html(labelContent.replace(/#(\d+)/, `#${idx + 1}`));
+        } else {
+          $label.html(`${labelContent} #${idx + 1}`);
+        }
+
+        if (this.onPositionComputed) {
+          this.onPositionComputed(el, idx);
+        }
+      });
+    }
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.AutoLabelByPositionComponent = AutoLabelByPositionComponent;
+})(window);

data/app/assets/javascripts/decidim/admin/dynamic_fields.component.js.es6

@@ -0,0 +1,163 @@
+((exports) => {
+  class DynamicFieldsComponent {
+    constructor(options = {}) {
+      this.wrapperSelector = options.wrapperSelector;
+      this.containerSelector = options.containerSelector;
+      this.fieldSelector = options.fieldSelector;
+      this.addFieldButtonSelector = options.addFieldButtonSelector;
+      this.removeFieldButtonSelector = options.removeFieldButtonSelector;
+      this.moveUpFieldButtonSelector = options.moveUpFieldButtonSelector;
+      this.moveDownFieldButtonSelector = options.moveDownFieldButtonSelector;
+      this.onAddField = options.onAddField;
+      this.onRemoveField = options.onRemoveField;
+      this.onMoveUpField = options.onMoveUpField;
+      this.onMoveDownField = options.onMoveDownField;
+      this.placeholderId = options.placeholderId;
+      this.elementCounter = 0;
+      this._enableInterpolation();
+      this._activateFields();
+      this._bindEvents();
+    }
+
+    _enableInterpolation() {
+      $.fn.replaceAttribute = function(attribute, placeholder, value) {
+        $(this).find(`[${attribute}*=${placeholder}]`).addBack(`[${attribute}*=${placeholder}]`).each((index, element) => {
+          $(element).attr(attribute, $(element).attr(attribute).replace(placeholder, value));
+        });
+
+        return this;
+      }
+
+      $.fn.template = function(placeholder, value) {
+        const $subtemplate = $(this).find("template");
+
+        if ($subtemplate.length > 0) {
+          $subtemplate.html((index, oldHtml) => $(oldHtml).template(placeholder, value)[0].outerHTML);
+        }
+
+        $(this).replaceAttribute("id", placeholder, value);
+        $(this).replaceAttribute("name", placeholder, value);
+        $(this).replaceAttribute("data-tabs-content", placeholder, value);
+        $(this).replaceAttribute("for", placeholder, value);
+        $(this).replaceAttribute("tabs_id", placeholder, value);
+        $(this).replaceAttribute("href", placeholder, value);
+
+        return this;
+      }
+    }
+
+    _bindEvents() {
+      $(this.wrapperSelector).on("click", this.addFieldButtonSelector, (event) =>
+        this._bindSafeEvent(event, () => this._addField())
+      );
+
+      $(this.wrapperSelector).on("click", this.removeFieldButtonSelector, (event) =>
+        this._bindSafeEvent(event, (target) => this._removeField(target))
+      );
+
+      if (this.moveUpFieldButtonSelector) {
+        $(this.wrapperSelector).on("click", this.moveUpFieldButtonSelector, (event) =>
+          this._bindSafeEvent(event, (target) => this._moveUpField(target))
+        );
+      }
+
+      if (this.moveDownFieldButtonSelector) {
+        $(this.wrapperSelector).on("click", this.moveDownFieldButtonSelector, (event) =>
+          this._bindSafeEvent(event, (target) => this._moveDownField(target))
+        );
+      }
+    }
+
+    _bindSafeEvent(event, cb) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      try {
+        return cb(event.target);
+      } catch (error) {
+        console.error(error); // eslint-disable-line no-console
+        return error;
+      }
+    }
+
+    _addField() {
+      const $container = $(this.wrapperSelector).find(this.containerSelector);
+      const $template = $(this.wrapperSelector).children("template");
+      const $newField = $($template.html()).template(this.placeholderId, this._getUID());
+
+      $newField.find("ul.tabs").attr("data-tabs", true);
+
+      $newField.appendTo($container);
+      $newField.foundation();
+
+      if (this.onAddField) {
+        this.onAddField($newField);
+      }
+    }
+
+    _removeField(target) {
+      const $target = $(target);
+      const $removedField = $target.parents(this.fieldSelector);
+      const idInput = $removedField.find("input").filter((idx, input) => input.name.match(/id/));
+
+      if (idInput.length > 0) {
+        const deletedInput = $removedField.find("input").filter((idx, input) => input.name.match(/delete/));
+
+        if (deletedInput.length > 0) {
+          $(deletedInput[0]).val(true);
+        }
+
+        $removedField.addClass("hidden");
+        $removedField.hide();
+      } else {
+        $removedField.remove();
+      }
+
+      if (this.onRemoveField) {
+        this.onRemoveField($removedField);
+      }
+    }
+
+    _moveUpField(target) {
+      const $target = $(target);
+      const $movedUpField = $target.parents(this.fieldSelector);
+
+      $movedUpField.prev().before($movedUpField);
+
+      if (this.onMoveUpField) {
+        this.onMoveUpField($movedUpField);
+      }
+    }
+
+    _moveDownField(target) {
+      const $target = $(target);
+      const $movedDownField = $target.parents(this.fieldSelector);
+
+      $movedDownField.next().after($movedDownField);
+
+      if (this.onMoveDownField) {
+        this.onMoveDownField($movedDownField);
+      }
+    }
+
+    _activateFields() {
+      $(this.fieldSelector).each((idx, el) => {
+        $(el).template(this.placeholderId, this._getUID());
+
+        $(el).find("ul.tabs").attr("data-tabs", true);
+      })
+    }
+
+    _getUID() {
+      this.elementCounter += 1;
+
+      return (new Date().getTime()) + this.elementCounter;
+    }
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.DynamicFieldsComponent = DynamicFieldsComponent;
+  exports.DecidimAdmin.createDynamicFields = (options) => {
+    return new DynamicFieldsComponent(options);
+  };
+})(window);

data/app/assets/javascripts/decidim/admin/field_dependent_inputs.component.js.es6

@@ -0,0 +1,39 @@
+((exports) => {
+  class FieldDependentInputsComponent {
+    constructor(options = {}) {
+      this.controllerField = options.controllerField;
+      this.wrapperSelector = options.wrapperSelector;
+      this.dependentFieldsSelector = options.dependentFieldsSelector;
+      this.dependentInputSelector = options.dependentInputSelector;
+      this.enablingCondition = options.enablingCondition;
+      this._bindEvent();
+      this._run();
+    }
+
+    _run() {
+      const $controllerField = this.controllerField;
+      const $dependentFields = $controllerField.parents(this.wrapperSelector).find(this.dependentFieldsSelector);
+      const $dependentInputs = $dependentFields.find(this.dependentInputSelector);
+
+      if (this.enablingCondition($controllerField)) {
+        $dependentInputs.prop("disabled", false);
+        $dependentFields.show();
+      } else {
+        $dependentInputs.prop("disabled", true);
+        $dependentFields.hide();
+      }
+    }
+
+    _bindEvent() {
+      this.controllerField.on("change", () => {
+        this._run();
+      });
+    }
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.FieldDependentInputsComponent = FieldDependentInputsComponent;
+  exports.DecidimAdmin.createFieldDependentInputs = (options) => {
+    return new FieldDependentInputsComponent(options);
+  };
+})(window);

data/app/assets/javascripts/decidim/admin/managed_users.js.es6

@@ -0,0 +1,12 @@
+// = require ./subform_toggler.component
+
+((exports) => {
+  const { SubformTogglerComponent } = exports.DecidimAdmin;
+
+  const subformToggler = new SubformTogglerComponent({
+    controllerSelect: $("select#impersonate_user_authorization_handler_name"),
+    subformWrapperClass: "authorization-handler"
+  });
+
+  subformToggler.run();
+})(window);

data/app/assets/javascripts/decidim/admin/sort_list.component.js.es6

@@ -16,7 +16,7 @@
      */
     constructor(sortListSelector, options) {
       if ($(sortListSelector).length > 0) {
-        exports.sortable(sortListSelector, options)[0].addEventListener('sortupdate', (event) => {
+        exports.sortable(sortListSelector, options)[0].addEventListener("sortupdate", (event) => {
           const $children = $(event.target).children();
 
           if (options.onSortUpdate) {

data/app/assets/javascripts/decidim/admin/subform_toggler.component.js.es6

@@ -0,0 +1,35 @@
+((exports) => {
+  class SubformTogglerComponent {
+    constructor(options = {}) {
+      this.controllerSelect = options.controllerSelect;
+      this.subformWrapperClass = options.subformWrapperClass;
+      this._bindEvent();
+      this.run();
+    }
+
+    run() {
+      let $controllerSelect = this.controllerSelect;
+      let subformWrapperClass = this.subformWrapperClass;
+      let value = $controllerSelect.val();
+
+      let $form = $controllerSelect.parents("form");
+      let $subforms = $form.find(`.${subformWrapperClass}`);
+      let $selectedSubform = $subforms.filter(`#${subformWrapperClass}-${value}`)
+
+      $subforms.find("input,textarea").prop("disabled", true);
+      $subforms.hide();
+
+      $selectedSubform.find("input,textarea").prop("disabled", false);
+      $selectedSubform.show();
+    }
+
+    _bindEvent() {
+      this.controllerSelect.on("change", () => {
+        this.run();
+      });
+    }
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.SubformTogglerComponent = SubformTogglerComponent;
+})(window);

data/app/assets/javascripts/decidim/admin/tab_focus.js.es6

@@ -5,15 +5,15 @@
  */
 $(() => {
   // Event launched by foundation
-  $('[data-tabs]').on('change.zf.tabs', (event) => {
-    const $container = $(event.target).next('.tabs-content .tabs-panel.is-active');
+  $("[data-tabs]").on("change.zf.tabs", (event) => {
+    const $container = $(event.target).next(".tabs-content .tabs-panel.is-active");
     // Detect quilljs editor inside the tabs-panel
-    let $content = $container.find('.editor .ql-editor');
+    let $content = $container.find(".editor .ql-editor");
     if ($content.length > 0) {
       $content.focus();
     // Detect if inside the tabs-panel have an input
     } else {
-      $content = $container.find('input:first');
+      $content = $container.find("input:first");
       if ($content.length > 0) {
         $content.focus();
       }

data/app/assets/stylesheets/decidim/admin/application.scss.erb

@@ -1,6 +1,6 @@
 @import "decidim";
 @import "extra/*";
 
-<% Decidim.feature_manifests.map(&:admin_stylesheet).compact.each do |stylesheet| %>
+<% Decidim.component_manifests.map(&:admin_stylesheet).compact.each do |stylesheet| %>
 @import "<%= stylesheet %>";
 <% end %>

data/app/assets/stylesheets/decidim/admin/extra/_dropdown_inverted.scss

@@ -21,17 +21,13 @@
     box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
     min-width: 100px;
 
-    li{
-      padding: 8px 8px 0;
-    }
-
     li:hover{
       background-color: darken($white, 5%) !important;
     }
 
     a{
       color: $body-font-color;
-      padding: .5rem;
+      padding: 16px;
     }
 
     a:hover{
@@ -40,6 +36,12 @@
   }
 }
 
+.dropdown-inverted.dropdown.menu{
+  .is-active > a{
+    color: $anchor-color;
+  }
+}
+
 .dropdown-menu-inverted_label{
   vertical-align: middle;
 }

data/app/assets/stylesheets/decidim/admin/modules/_agenda.scss

@@ -0,0 +1,34 @@
+.agenda{
+  .grid-x{
+    border-bottom: 1px solid $light-gray;
+
+    .cell:first-child{
+      color: $medium-gray;
+    }
+
+    .cell:nth-child(2){
+      color: $muted;
+
+      small{
+        color: $medium-gray;
+      }
+    }
+
+    .cell:nth-last-child(2){
+      display: flex;
+      align-items: baseline;
+
+      small{
+        color: $medium-gray;
+        white-space: nowrap;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+      }
+    }
+
+    .cell:last-child{
+      color: map-get($foundation-palette, alert);
+    }
+  }
+}

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

@@ -21,6 +21,11 @@
       letter-spacing: 0;
     }
   }
+
+  &.reverse{
+    @include modifiers(color);
+    @include modifiers(background-color, (primary: $white, secondary: $white, success: $white, warning: $white, alert: $white));
+  }
 }
 
 .button.muted{

data/app/assets/stylesheets/decidim/admin/modules/_cards.scss

@@ -14,6 +14,15 @@ $card-padding-small: 1rem;
 
   font-size: 1rem;
   width: 100%;
+
+  &--nocaps{
+    text-transform: lowercase;
+    letter-spacing: 0;
+
+    &::first-letter{
+      text-transform: uppercase;
+    }
+  }
 }
 
 .card-footer{
@@ -94,6 +103,12 @@ $card-padding-small: 1rem;
   display: block;
 }
 
+.card-divider{
+  @include modifiers(background){
+    color: $white;
+  }
+}
+
 .card-divider--reduced{
   // height adjust
   padding: (($global-padding / 2) + rem-calc(.7)) $global-padding;

data/app/assets/stylesheets/decidim/admin/modules/_forms.scss

@@ -23,6 +23,10 @@ textarea{
   .input-field,
   .data-picker{
     margin-bottom: $input-margin;
+
+    &.nomargin{
+      margin-bottom: 0;
+    }
   }
 
   .check-radio-group{

data/app/assets/stylesheets/decidim/admin/modules/_modules.scss

@@ -25,3 +25,4 @@
 @import "pics";
 @import "filters";
 @import "dropdown";
+@import "agenda";

data/app/assets/stylesheets/decidim/admin/modules/_typography.scss

@@ -17,3 +17,11 @@
 .text-info{
   color: $secondary;
 }
+
+.text-lowercase{
+  text-transform: lowercase;
+}
+
+.text-uppercase{
+  text-transform: uppercase;
+}

data/app/assets/stylesheets/decidim/admin/utils/_flex.scss

@@ -51,10 +51,10 @@ $spaces: $space ($space * 2);
   @include flex-align($x: center, $y: middle);
 }
 
-// flex--cc:
+// flex--sbc:
 // justify-content: space-between;
 // align-items: center;
 .flex--sbc{
   @include flex;
-  @include flex-align($x: spaced, $y: middle);
+  @include flex-align($x: justify, $y: middle);
 }

data/app/assets/stylesheets/decidim/admin/utils/_helpers.scss

@@ -23,3 +23,31 @@
     margin-bottom: 0;
   }
 }
+
+// Make parent relative to absolute positioning children
+.absolutes{
+  position: relative;
+
+  .left,
+  .right,
+  .top,
+  .bottom{
+    position: absolute;
+  }
+
+  .left{
+    left: 0;
+  }
+
+  .right{
+    right: 0;
+  }
+
+  .top{
+    top: 0;
+  }
+
+  .bottom{
+    bottom: 0;
+  }
+}

data/app/assets/stylesheets/decidim/admin/utils/_mixins.scss

@@ -34,3 +34,47 @@ $palette: $foundation-palette;
     }
   }
 }
+
+// helpers
+$margin-s: 1rem;
+$margin-sm: 2rem;
+$margin-m: 3rem;
+$margin-l: 5rem;
+
+$size:(
+  none: 0,
+  s: $margin-s,
+  sm: $margin-sm,
+  m: $margin-m,
+  l: $margin-l
+) !default;
+
+$property:(
+  p: padding,
+  m: margin
+) !default;
+
+$side:(
+  t: top,
+  r: right,
+  b: bottom,
+  l: left
+) !default;
+
+@mixin make-spaces(){
+  @each $p-key, $prop in $property{
+    @each $v-key, $value in $size{
+      .#{$p-key}-#{$v-key}{
+        #{$prop}: #{$value};
+      }
+
+      @each $s-key, $side in $side{
+        .#{$p-key}#{$s-key}-#{$v-key}{
+          #{$prop}-#{$side}: #{$value};
+        }
+      }
+    }
+  }
+}
+
+@include make-spaces()