decidim-comments 0.29.4 → 0.30.0.rc1

data/app/packs/src/decidim/comments/comments_mobile_modal.js

@@ -0,0 +1,46 @@
+// The code: 1. Manages a responsive "Add Comment" modal: Opens fullscreen on mobile (<= sm) and closes it via a "close" button.
+// 2. Handles dropdown menus: Dynamically updates button content based on user selection, hides selected items, and manages dropdown visibility.
+// This creates a responsive, interactive comment interface with mobile-friendly design and dynamic user group selection.
+
+import { screens } from "tailwindcss/defaultTheme"
+import { initializeCommentsDropdown } from "../../decidim/comments/comments_dropdown";
+
+// Add comment card for mobile
+const addCommentMobile = function (addCommentCard) {
+  const smBreakpoint = parseInt(screens.sm.replace("px", ""), 10);
+  if (window.matchMedia(`(max-width: ${smBreakpoint}px)`).matches) {
+    addCommentCard.classList.remove("hidden");
+    addCommentCard.classList.add("fullscreen");
+  }
+};
+
+const closeAddComment = function (addCommentCard) {
+  addCommentCard.classList.add("hidden");
+  addCommentCard.classList.remove("fullscreen");
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  // Add comment card for mobile
+  const addCommentCard = document.getElementById("add-comment-anchor");
+  if (addCommentCard) {
+    document.querySelectorAll(".add-comment-mobile").forEach((addButtonMobile) => {
+      addButtonMobile.addEventListener("click", () => {
+        addCommentMobile(addCommentCard);
+      });
+    });
+  }
+
+  // Close comment modal
+  const closeButton = document.querySelector(
+    "#add-comment-anchor .close-add-comment-fullscreen"
+  );
+  if (closeButton) {
+    closeButton.addEventListener("click", () =>
+      closeAddComment(addCommentCard)
+    );
+  }
+
+
+  // Initialize dropdown menu
+  initializeCommentsDropdown(document);
+});

data/app/packs/stylesheets/comments.scss

@@ -1,13 +1,19 @@
+@import "stylesheets/decidim/_tribute.scss";
+
 .comments {
   &__container {
     @apply md:mt-12;
   }
 
   .add-comment {
-    @apply mt-12;
+    @apply mt-12 md:bg-gray-5 p-0 md:px-4 md:pb-6 md:pt-1 rounded-lg w-full;
+
+    .new_comment {
+      @apply w-full;
+    }
 
     .remaining-character-count {
-      @apply block text-right text-sm text-gray-2;
+      @apply block text-left text-sm text-gray-2 mx-4 md:m-0;
     }
 
     .form__wrapper {
@@ -19,61 +25,62 @@
     }
   }
 
+  .account-message {
+    a {
+      @apply text-secondary underline font-semibold;
+    }
+  }
+
   &__header {
-    @apply flex flex-col md:flex-row md:items-center gap-x-2 mb-4;
+    @apply flex justify-between md:flex-row md:items-center mb-4;
+
+    option {
+      &.selected {
+        @apply font-bold;
+      }
+    }
   }
 
   .author__avatar-container {
     @apply w-8 h-8;
   }
 
-  .tribute-container {
-    @apply w-full relative;
-
-    #results {
-      @apply absolute max-h-[225px] top-full left-0 right-0 p-0 my-2 rounded z-50 overflow-y-scroll bg-white;
-
-      border: 1px solid rgba(33, 33, 33, 0.1);
-
-      li {
-        @apply flex items-center gap-2 cursor-pointer px-4 py-2;
-      }
-
-      li:hover {
-        @apply cursor-pointer;
+  .comments-section {
+    &__header {
+      @apply flex items-center justify-center space-x-2 p-4 bg-secondary/5 rounded-b-md mb-4;
 
-        background-color: rgba(123, 123, 123, 0.1);
-      }
-
-      img {
-        @apply rounded-full w-6 h-6 object-cover;
-      }
-
-      span,
-      strong {
-        @apply font-semibold text-sm text-secondary;
+      svg {
+        @apply w-6 h-6 mr-2 fill-secondary;
       }
+    }
 
-      small {
-        @apply font-normal text-gray-2 text-xs;
-      }
+    &__title {
+      @apply text-md font-semibold text-secondary;
+    }
+  }
+}
 
-      svg {
-        @apply w-4 h-4 text-primary fill-current;
-      }
+.comments-two-columns {
+  .most-upvoted-label {
+    @apply px-2 mb-2;
+  }
 
-      .is-group {
-        @apply ml-auto flex items-center gap-1;
-      }
+  input[type="radio"] {
+    &:not(.reset-defaults) {
+      @apply inline-block mr-0;
     }
   }
 }
 
 .comment {
-  @apply rounded-lg border-2 border-background p-3 pl-6;
+  @apply rounded-lg border-2 border-background-5 p-3 pl-6;
+
+  &.top-comment {
+    @apply border-gray-2;
+  }
 
   &__header {
-    @apply flex items-center gap-x-2 mb-2 -ml-10 relative;
+    @apply flex items-center gap-x-2 mb-2 relative;
 
     a[href^="/profile"] > span:first-child {
       @apply z-10;
@@ -82,11 +89,30 @@
     &--edited {
       @apply text-sm font-semibold;
     }
+
+    /* affects the left margin of the avatar in the comment replies */
+    & ~ [data-comment-footer] {
+      .comment__header {
+        @apply -ml-10;
+      }
+
+      [data-target*="dropdown-menu-add-comment"] {
+        @apply w-full flex items-center justify-between gap-2 px-0 pt-2 pb-0 first-of-type:[&>svg]:block last-of-type:[&>svg]:hidden;
+
+        > svg {
+          @apply w-6 h-6 flex-none text-secondary fill-current;
+        }
+      }
+    }
   }
 
   /* overwrite default dropdown styles */
   [data-target*="dropdown"] {
     @apply md:flex w-auto cursor-pointer text-sm text-secondary;
+
+    > svg {
+      @apply h-3 w-3;
+    }
   }
 
   /* overwrite default dropdown styles */
@@ -95,11 +121,11 @@
   }
 
   &__footer-grid {
-    @apply grid grid-cols-2 items-center mt-4;
+    @apply grid items-center mt-4;
   }
 
   &-reply {
-    @apply rounded-lg border-2 border-background ml-3 relative;
+    @apply rounded-lg border-2 border-background-5 ml-3 relative;
   }
 
   &-reply:empty {
@@ -107,7 +133,7 @@
   }
 
   &-reply::after {
-    @apply bg-background-3 inline-block absolute top-8 h-4/5 w-px -z-10;
+    @apply bg-background-5 inline-block absolute top-8 h-4/5 w-px -z-10;
 
     content: "";
   }
@@ -142,7 +168,27 @@
   }
 
   &__as {
-    @apply my-4;
+    @apply my-4 px-4 md:p-0;
+
+    &-author-container {
+      @apply flex justify-between items-center;
+    }
+
+    &-author-info {
+      @apply flex items-center gap-2;
+    }
+
+    &-author-name {
+      @apply text-secondary font-semibold;
+    }
+
+    &-author-selected {
+      @apply flex flex-col;
+
+      .author__avatar-container {
+        @apply -mt-3.5;
+      }
+    }
   }
 
   .add-comment {
@@ -156,10 +202,8 @@
       @apply mr-2;
     }
 
-    .button_to:first-child,
-    button:first-child,
-    button:nth-child(2),
-    .button_to:nth-child(2) {
+    > :first-child,
+    > :nth-child(2) {
       svg:first-child {
         @apply block;
       }
@@ -189,7 +233,7 @@
       }
     }
 
-    .button_to:nth-child(2) {
+    > :nth-child(2) {
       svg:first-child {
         @apply block;
       }
@@ -234,11 +278,15 @@
   }
 
   &-order-by {
-    @apply ml-auto grid grid-cols-4 place-items-center mt-4 md:mt-0;
+    @apply ml-auto flex place-items-center md:mt-0;
+
+    > form {
+      @apply flex;
+    }
   }
 
   &__actions {
-    @apply flex items-center gap-4;
+    @apply flex items-center justify-center gap-4;
 
     .button[aria-expanded="false"] {
       svg:first-of-type {
@@ -277,6 +325,50 @@
     }
   }
 
+  &__reply-button {
+    @apply flex items-center justify-center;
+
+    .button[aria-expanded="false"] {
+      svg:first-of-type {
+        @apply block;
+      }
+
+      svg:last-of-type {
+        @apply hidden;
+      }
+
+      span:first-of-type {
+        @apply block;
+      }
+
+      span:last-of-type {
+        @apply hidden;
+      }
+    }
+
+    .button[aria-expanded="true"] {
+      svg:first-of-type {
+        @apply hidden;
+      }
+
+      svg:last-of-type {
+        @apply block;
+      }
+
+      span:first-of-type {
+        @apply hidden;
+      }
+
+      span:last-of-type {
+        @apply block;
+      }
+    }
+  }
+
+  &__votes-actions {
+    @apply flex justify-between;
+  }
+
   &__content {
     &--label {
       @apply inline-block mb-2;
@@ -289,7 +381,15 @@
     }
 
     &-submit {
-      @apply flex flex-col md:flex-row justify-between items-stretch md:items-end gap-4 mt-4;
+      @apply flex flex-col md:flex-row md:justify-between items-stretch md:items-end gap-4 mt-4;
+    }
+
+    &-mobile-banner {
+      @apply flex relative md:hidden h-[72px] border-b border-gray justify-center items-center;
+
+      .close-button {
+        @apply absolute top-7 right-6 [&_svg]:w-4 [&_svg]:h-4;
+      }
     }
   }
 
@@ -325,3 +425,56 @@
     @apply text-md;
   }
 }
+
+.comments-label-dropdown {
+  @apply mr-2 mt-2;
+}
+
+[id*="dropdown-menu-add-comment"] {
+  @apply flex flex-col py-0 mx-0 border-t-0 border-gray-3 cursor-pointer;
+
+  &[aria-hidden="true"] {
+    @apply hidden;
+  }
+}
+
+[data-target*="dropdown-menu-add-comment"] {
+  @apply w-full flex items-center justify-between mb-4 gap-2 px-0 pt-2 pb-0 first-of-type:[&>svg]:block last-of-type:[&>svg]:hidden;
+
+  & > span {
+    @apply hidden font-semibold text-secondary;
+
+    &:only-of-type,
+    &.is-active {
+      @apply flex items-center gap-2 [&_svg]:fill-current;
+    }
+  }
+
+  > svg {
+    @apply w-6 h-6 flex-none text-secondary fill-current;
+  }
+
+  &[aria-expanded="false"] > svg:last-of-type,
+  &[aria-expanded="true"] > svg:first-of-type {
+    @apply hidden;
+  }
+
+  &[aria-expanded="true"] > svg:last-of-type,
+  &[aria-expanded="false"] > svg:first-of-type {
+    @apply block;
+  }
+}
+
+.publish-comment-button {
+  @apply md:relative fixed inset-x-0 bottom-0 z-30 md:z-0 flex flex-row items-center md:items-end md:justify-end font-semibold justify-around bg-white md:bg-transparent gap-4 md:gap-0 p-4 md:p-0 shadow-inner md:shadow-none first:[&>*]:grow md:first:[&>*]:grow-0 h-14 md:h-fit first:[&>button]:py-3;
+}
+
+.fullscreen {
+  @apply fixed md:relative inset-0 w-screen md:w-full h-screen bg-white z-50 p-0 overflow-auto md:overflow-hidden rounded-none;
+}
+
+.comments {
+  .fullscreen.add-comment {
+    @apply mt-0;
+  }
+}

data/app/queries/decidim/comments/metrics/comment_participants_metric_measure.rb

@@ -40,7 +40,7 @@ module Decidim
         def retrieve_comments_for_organization
           user_ids = Decidim::User.where(organization: @resource.organization).pluck(:id)
           Decidim::Comments::Comment.includes(:root_commentable).not_hidden.not_deleted
-                                    .where("decidim_comments_comments.created_at <= ?", end_time)
+                                    .where(decidim_comments_comments: { created_at: ..end_time })
                                     .where(decidim_comments_comments: { decidim_author_id: user_ids })
                                     .where(decidim_comments_comments: { decidim_author_type: "Decidim::UserBaseEntity" })
         end

data/app/queries/decidim/comments/metrics/comments_metric_manage.rb

@@ -14,10 +14,10 @@ module Decidim
             next if cumulative_value.zero?
 
             quantity_value = results[:quantity] || 0
-            space_type, space_id, category_id, related_object_type, related_object_id = key
+            space_type, space_id, taxonomy_id, related_object_type, related_object_id = key
             record = Decidim::Metric.find_or_initialize_by(day: @day.to_s, metric_type: @metric_name,
                                                            participatory_space_type: space_type, participatory_space_id: space_id,
-                                                           organization: @organization, decidim_category_id: category_id,
+                                                           organization: @organization, decidim_taxonomy_id: taxonomy_id,
                                                            related_object_type:, related_object_id:)
             record.assign_attributes(cumulative: cumulative_value, quantity: quantity_value)
             record.save!
@@ -29,7 +29,7 @@ module Decidim
         # Creates a Hashed structure with comments grouped by
         #
         #  - ParticipatorySpace (type & ID)
-        #  - Category (ID)
+        #  - Taxonomy (ID)
         #  - RelatedObject (type & ID)
         #
         def query
@@ -39,14 +39,15 @@ module Decidim
             related_object = comment.root_commentable
             next grouped_comments unless related_object
 
-            group_key = generate_group_key(related_object)
-            next grouped_comments unless group_key
+            group_keys = generate_group_keys(related_object)
 
-            grouped_comments[group_key] ||= { cumulative: 0, quantity: 0 }
-            grouped_comments[group_key][:cumulative] += 1
-            grouped_comments[group_key][:quantity] += 1 if comment.created_at >= start_time
+            next grouped_comments unless group_keys
 
-            grouped_comments
+            group_keys.map do |group_key|
+              grouped_comments[group_key] ||= { cumulative: 0, quantity: 0 }
+              grouped_comments[group_key][:cumulative] += 1
+              grouped_comments[group_key][:quantity] += 1 if comment.created_at >= start_time
+            end
           end
 
           @query
@@ -60,22 +61,26 @@ module Decidim
           user_ids = Decidim::User.select(:id).where(organization: @organization).collect(&:id)
           user_group_ids = Decidim::UserGroup.select(:id).where(organization: @organization).collect(&:id)
           Decidim::Comments::Comment.includes(:root_commentable).not_hidden.not_deleted
-                                    .where("decidim_comments_comments.created_at <= ?", end_time)
+                                    .where(decidim_comments_comments: { created_at: ..end_time })
                                     .where("decidim_comments_comments.decidim_author_id IN (?) OR
                                            decidim_comments_comments.decidim_user_group_id IN (?)", user_ids, user_group_ids)
         end
 
         # Generates a group key from the related object of a Comment
-        def generate_group_key(related_object)
+        def generate_group_keys(related_object)
           participatory_space = retrieve_participatory_space(related_object)
           return unless participatory_space
 
-          category_id = related_object.respond_to?(:category) ? related_object.category.try(:id) : ""
-          group_key = []
-          group_key += [participatory_space.class.name, participatory_space.id]
-          group_key += [category_id]
-          group_key += [related_object.class.name, related_object.id]
-          group_key
+          return unless related_object.respond_to?(:taxonomies)
+
+          taxonomy_ids = related_object.taxonomies.pluck(:id)
+          taxonomy_ids.each_with_object([]) do |taxonomy_id, group_keys|
+            group_key = []
+            group_key += [participatory_space.class.name, participatory_space.id]
+            group_key += [taxonomy_id]
+            group_key += [related_object.class.name, related_object.id]
+            group_keys << group_key
+          end
         end
 
         # Gets current ParticipatorySpace of a given 'related_object'

data/app/views/decidim/comments/comments/_comments.html.erb

@@ -0,0 +1 @@
+<%= inline_comments_for(commentable, order:) %>

data/app/views/decidim/comments/comments/create.js.erb

@@ -2,6 +2,7 @@
   var rootCommentableId = <%== "comments-for-#{@comment.root_commentable.commentable_type.demodulize}-#{@comment.root_commentable.id}".to_json %>;
   var commentHtml = '<%== j(render @comment).strip %>';
   var inReplyTo = <%== (reply?(@comment) ? @commentable.id : nil).to_json %>;
+  var alignment = <%= @comment.alignment.nil? ? "null" : @comment.alignment %>;
 
   var $comments = $("#" + rootCommentableId);
   var component = $comments.data("comments");
@@ -12,7 +13,7 @@
     hideButton.find("[data-show-comment-reply]").first().html('<%= t("decidim.components.comment.show_replies", count: Decidim::Comments::SortedComments.for(root_comment.reload).size) %>');
 
   } else {
-    component.addThread(commentHtml, true);
+    component.addThread(commentHtml, alignment, true);
   }
 
   Rails.fire(document, "comments:loaded", {
@@ -21,4 +22,11 @@
 
   // Update the comments count
   $(".comments-count", $comments).text(<%== t("decidim.components.comments.title", count: @comments_count).to_json %>);
+
+  var $addCommentCard = $("#add-comment-anchor");
+
+  if ($addCommentCard.hasClass("fullscreen")) {
+    $addCommentCard.addClass("hidden");
+    $addCommentCard.removeClass("fullscreen");
+  }
 }());

data/app/views/decidim/comments/comments/index.js.erb

@@ -5,7 +5,6 @@
   var component = $comments.data("comments");
 
   $(".loading-comments").addClass("hidden");
-
   var commentsIds = [];
 <% @comments.each do |comment| %>
   var commentId = <%= comment.id.to_json %>;
@@ -23,8 +22,6 @@
   }
 <% end %>
   if (commentsIds.length) {
-    component.lastCommentId = <%= @comments.last&.id || 0 %>;
-
     Rails.fire(document, "comments:loaded", {
       commentsIds: commentsIds
     });

data/app/views/decidim/comments/comments/reload.js.erb

@@ -5,12 +5,16 @@
   var component = $comments.data("comments");
   component.unmountComponent();
 
-  var commentsHtml = '<%== j(inline_comments_for(commentable, order:).inline).strip %>';
+  var commentsHtml = '<%== j(render partial: "comments").strip %>';
   $(".loading-comments").addClass("hidden");
-  $comments.html(commentsHtml);
+  $comments.replaceWith(commentsHtml);
 
-  // Re-mount the component
+  $comments = $("#" + rootCommentableId);
+
+  // Re-create the component
+  component = new Decidim.CommentsComponent($comments, $comments.data("decidim-comments"));
   component.mountComponent();
+  $comments.data("comments", component);
 
   // Update the comments count
   $(".comments-count", $comments).text(<%== t("decidim.components.comments.title", count: @comments_count).to_json %>);

data/app/views/decidim/comments/comments/update.js.erb

@@ -2,8 +2,8 @@ $(() => {
   var rootCommentableId = <%== "comments-for-#{@commentable.class.name.demodulize}-#{@commentable.id}".to_json %>;
   var $comments = $("#" + rootCommentableId);
   var config = $comments.data("decidim-comments");
-  var component = $comments.data("comments");
 
+  component = new Decidim.CommentsComponent($comments, config);
   component.unmountComponent();
 
   var commentHtml = '<%== j(render partial: "edited_comment", locals: { comment: @comment }).strip %>';
@@ -19,7 +19,9 @@ $(() => {
   $comment.replaceWith(commentHtml);
 
   // Re-create the component
+  component = new Decidim.CommentsComponent($comments, $comments.data("decidim-comments"));
   component.mountComponent();
+  $comments.data("comments", component);
 
   Rails.fire(document, "comments:loaded", {
     commentsIds: [commentId]

data/config/locales/ar.yml

@@ -92,7 +92,6 @@ ar:
       comments:
         blocked_comments_for_unauthorized_user_warning: يجب أن تكون عضوا محققا من أجل التعليق حالياً، ولكن يمكنك قراءة ما سبق.
         blocked_comments_for_user_warning: لا يمكنك التعليق في هذه اللحظة ، ولكن يمكنك قراءة التعليقات السابقة.
-        blocked_comments_warning: التعليقات معطلة في هذا الوقت ، لكن يمكنك قراءة التعليقات السابقة.
         comment_details_title: تفاصيل التعليق
         loading: جارٍ تحميل التعليقات ...
         single_comment_warning: <a href="%{url}"> عرض جميع التعليقات</a>

data/config/locales/bg.yml

@@ -103,7 +103,6 @@ bg:
       comments:
         blocked_comments_for_unauthorized_user_warning: Трябва да сте верифицирани, за да коментирате в този момент, но можете да прочетете предишните.
         blocked_comments_for_user_warning: Понастоящем не можете да коментирате, но можете да прочетете предходните коментари.
-        blocked_comments_warning: Коментарите в момента са деактивирани, но можете да прочетете предишните.
         comment_details_title: Детайли за коментара
         loading: Коментарите се зареждат...
         single_comment_warning: <a href="%{url}">Вижте всички коментари</a>