decidim-admin 0.30.9 → 0.31.0.rc1

data/app/packs/src/decidim/admin/resources_permissions.js

@@ -1,6 +1,6 @@
 import SubformMultiTogglerComponent from "src/decidim/admin/subform_multi_toggler.component"
 
-$(() => {
+document.addEventListener("turbo:load", () => {
   const subformMultiToggler = new SubformMultiTogglerComponent({
     controllerSelect: $("input[name$=\\[authorization_handlers\\]\\[\\]]"),
     subformWrapperClass: "authorization-handler",

data/app/packs/src/decidim/admin/sort_list.component.js

@@ -6,7 +6,7 @@ class SortListComponent {
   /**
    * Creates a sortable list using hmtl5sortable function.
    *
-   * @param {String|HTMLElement} sortListSelector The list selector or element that has to be sortable.
+   * @param {String} sortListSelector The list selector that has to be sortable.
    * @param {Object} options An object containing the same options as html5sortable. It also includes
    *                an extra option `onSortUpdate`, a callback which returns the children collection
    *                whenever the list order has been changed.
@@ -14,8 +14,7 @@ class SortListComponent {
    * @returns {void} Nothing.
    */
   constructor(sortListSelector, options) {
-    const $element = $(sortListSelector);
-    if ($element.length > 0) {
+    if ($(sortListSelector).length > 0) {
       sortable(sortListSelector, options)[0].addEventListener("sortupdate", (event) => {
         const $children = $(event.target).children();
 

data/app/packs/src/decidim/admin/sortable.js

@@ -10,7 +10,7 @@ import sortable from "html5sortable/dist/html5sortable.es";
     console.log('The new order is:', event.target.children);
   });
 */
-window.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const draggables = document.querySelectorAll(".js-sortable");
 
   if (draggables) {

data/app/packs/src/decidim/admin/sync_radio_buttons.js

@@ -14,7 +14,7 @@
 //                       } %>
 // ```
 //
-window.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   document.querySelectorAll("input[data-sync-radio-buttons=true]").forEach((element) => {
     element.addEventListener("change", (event) => {
       const value = event.target.dataset.syncRadioButtonsValue;

data/app/packs/src/decidim/admin/tab_focus.js

@@ -1,7 +1,7 @@
 /**
  * When switching tabs in i18n fields, autofocus on the input to save clicks #212
  */
-$(() => {
+document.addEventListener("turbo:load", () => {
   // Event launched by foundation
   $("[data-tabs]").on("change.zf.tabs", (event) => {
     const $container = $(event.target).parent().next(".tabs-content").find(".tabs-panel.is-active");

data/app/packs/src/decidim/admin/text_copy.js

@@ -9,7 +9,7 @@
 // </div>
 // ```
 //
-window.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   document.querySelectorAll("input[data-text-copy=true], textarea[data-text-copy=true]").forEach((element) => {
     element.addEventListener("change", (event) => {
       const target = document.querySelector(event.target.dataset.target);

data/app/packs/src/decidim/admin/triadic_color_picker.js

@@ -93,7 +93,7 @@ const setTheme = (primary, saturation) => {
   (document.getElementById("preview-tertiary") || {}).value = tertiary;
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const selector = document.querySelector("#primary-selector")
 
   if (selector) {

data/app/packs/stylesheets/decidim/admin/_datepicker.scss

@@ -15,11 +15,11 @@
 
 .datepicker {
   &__clock-button {
-    @apply top-0;
+    @apply top-2;
   }
 
   &__calendar-button {
-    @apply top-0;
+    @apply top-2;
   }
 
   &__pick-calendar {

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

@@ -8,11 +8,11 @@
   }
 
   .dropdown__trigger {
-    @apply flex underline p-0;
+    @apply flex p-0;
   }
 
   .dropdown {
-    @apply divide-y divide-gray-3 z-20;
+    @apply divide-y divide-gray-3;
 
     &.button {
       @apply z-10;
@@ -33,3 +33,13 @@
     }
   }
 }
+
+.dropdown {
+  &[aria-hidden="true"] {
+    @apply hidden;
+  }
+
+  &[aria-hidden="false"] {
+    @apply block;
+  }
+}

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

@@ -7,18 +7,6 @@
     }
   }
 
-  .dropdown .is-dropdown-submenu a {
-    @apply w-full inline-block;
-  }
-
-  .dropdown .is-dropdown-submenu li {
-    @apply w-full relative;
-  }
-
-  .dropdown {
-    @apply relative p-0 border-0;
-  }
-
   .button,
   .input-group {
     @apply mb-0;
@@ -33,36 +21,7 @@
   }
 
   .input-group-button {
-    @apply absolute right-4 top-0 h-full top-1;
-  }
-
-  .dropdown.menu {
-    z-index: 5;
-
-    li {
-      @apply p-0;
-    }
-
-    .button {
-      @apply drop-shadow-none;
-    }
-
-    & > li.is-dropdown-submenu-parent > a {
-      @apply px-4 py-1 text-white bg-secondary flex items-center gap-x-2;
-
-      &:hover {
-        @apply text-white bg-secondary;
-      }
-    }
-
-    li.is-active > a,
-    li.is-active li.is-submenu-item > a:hover {
-      @apply text-white bg-secondary;
-    }
-
-    .dropdown-filter-icon {
-      @apply fill-white w-5 h-5 p-0;
-    }
+    @apply absolute right-4 h-full top-[0.35rem];
   }
 }
 
@@ -75,20 +34,5 @@
     .type-icon {
       @apply align-top;
     }
-
-    .action-icon {
-      span {
-        @apply ml-1;
-      }
-
-      &.action-icon--remove {
-        color: #e66a5d;
-        margin-left: 0.3rem;
-
-        &:hover {
-          color: #e66a5d;
-        }
-      }
-    }
   }
 }

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

@@ -16,7 +16,7 @@
     input[type="week"],
     select,
     textarea {
-      @apply mt-0;
+      @apply mt-2;
     }
 
     & label:not(&-checkbox-label),
@@ -24,10 +24,6 @@
       @apply text-sm;
     }
 
-    .help-text {
-      @apply mt-1;
-    }
-
     .row .columns,
     .row.column {
       @apply mb-4;
@@ -43,11 +39,6 @@
       @apply block my-2;
     }
 
-    textarea#component_step_settings_1_automatic_hashtags,
-    textarea#component_step_settings_1_suggested_hashtags {
-      @apply block w-full;
-    }
-
     #choose-template label {
       @apply block my-2;
     }
@@ -58,32 +49,24 @@
   }
 }
 
-.questionnaire-questions {
-  .questionnaire-question {
-    transition: all 0.2s ease;
-
-    svg[role="img"] {
-      transition: color 0.2s ease;
+.questionnaire-question {
+  button[aria-expanded="true"] {
+    .icon-collapse {
+      @apply block;
     }
 
-    button[aria-expanded="true"] {
-      .icon-collapse {
-        @apply block;
-      }
-
-      .icon-expand {
-        @apply hidden;
-      }
+    .icon-expand {
+      @apply hidden;
     }
+  }
 
-    button[aria-expanded="false"] {
-      .icon-collapse {
-        @apply hidden;
-      }
+  button[aria-expanded="false"] {
+    .icon-collapse {
+      @apply hidden;
+    }
 
-      .icon-expand {
-        @apply block;
-      }
+    .icon-expand {
+      @apply block;
     }
   }
 }

data/app/packs/stylesheets/decidim/admin/_item_edit.scss

@@ -3,7 +3,7 @@
 
   &-form {
     .card {
-      @apply rounded bg-white border-background border fill-secondary;
+      @apply rounded bg-white border-neutral-200 border fill-secondary;
     }
 
     .card-section {
@@ -30,7 +30,7 @@
       }
 
       &[aria-expanded="true"] {
-        @apply border-solid border-b border-gray w-full rounded-none;
+        @apply border-solid border-b border-neutral-200 w-full rounded-none;
 
         svg {
           @apply rotate-90 transition-transform;
@@ -42,10 +42,6 @@
       @apply font-semibold text-md text-left inline-block text-secondary;
     }
 
-    .label--tabs {
-      @apply mb-2;
-    }
-
     label {
       @apply text-gray-2 text-sm;
     }
@@ -111,10 +107,6 @@
       }
     }
   }
-
-  .label--tabs {
-    @apply mb-2;
-  }
 }
 
 .item__edit-1col {

data/app/packs/stylesheets/decidim/admin/_item_show.scss

@@ -3,7 +3,7 @@
 }
 
 .item_show__header {
-  @apply flex items-center pb-4 border-b border-gray mb-4 gap-x-2;
+  @apply flex items-center pb-4 border-b border-neutral-200 mb-4 gap-x-2;
 
   > svg {
     @apply w-4 h-4;
@@ -11,10 +11,6 @@
 
   &-title {
     @apply text-xl font-bold block sm:flex items-center justify-between gap-4 w-full first-letter:capitalize first:[&>div]:ml-0 first:[&>*]:ml-auto;
-
-    .dropdown-pane {
-      @apply font-normal;
-    }
   }
 
   &--with-action-options {