decidim-comments 0.27.6 → 0.28.0.rc4

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

@@ -3,6 +3,6 @@
 import CommentsComponent from "./comments.component"
 
 // This module.exports is necessary for the tests to load
-// doesn't conflict with import/export
+// does not conflict with import/export
 module.exports = CommentsComponent;
 

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

@@ -1 +1,20 @@
-import "src/decidim/comments/comments.component"
+import CommentsComponent from "src/decidim/comments/comments.component"
+
+window.Decidim.CommentsComponent = CommentsComponent;
+
+const commentsInitializer = () => {
+  // Mount comments component
+  $("[data-decidim-comments]").each((_i, el) => {
+    const $el = $(el);
+    let comments = $(el).data("comments");
+    if (!comments) {
+      comments = new CommentsComponent($el, $el.data("decidim-comments"));
+    }
+    comments.mountComponent();
+    $(el).data("comments", comments);
+  });
+}
+
+// If no jQuery is used the Tribute feature used in comments to autocomplete
+// mentions stops working
+$(() => commentsInitializer());

data/app/packs/stylesheets/comments.scss

@@ -0,0 +1,327 @@
+.comments {
+  &__container {
+    @apply md:mt-12;
+  }
+
+  .add-comment {
+    @apply mt-12;
+
+    .remaining-character-count {
+      @apply block text-right text-sm text-gray-2;
+    }
+
+    .form__wrapper {
+      @apply pt-0;
+    }
+
+    a {
+      @apply text-secondary underline font-semibold;
+    }
+  }
+
+  &__header {
+    @apply flex flex-col md:flex-row md:items-center gap-x-2 mb-4;
+  }
+
+  .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;
+
+        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;
+      }
+
+      small {
+        @apply font-normal text-gray-2 text-xs;
+      }
+
+      svg {
+        @apply w-4 h-4 text-primary fill-current;
+      }
+
+      .is-group {
+        @apply ml-auto flex items-center gap-1;
+      }
+    }
+  }
+}
+
+.comment {
+  @apply rounded-lg border-2 border-background p-3 pl-6;
+
+  &__header {
+    @apply flex items-center gap-x-2 mb-2 -ml-10 relative;
+
+    a[href^="/profile"] > span:first-child {
+      @apply z-10;
+    }
+
+    &--edited {
+      @apply text-sm font-semibold;
+    }
+  }
+
+  /* overwrite default dropdown styles */
+  [data-target*="dropdown"] {
+    @apply md:flex w-auto cursor-pointer text-sm text-secondary;
+  }
+
+  /* overwrite default dropdown styles */
+  [id*="dropdown-menu"][aria-hidden="true"] {
+    @apply md:hidden;
+  }
+
+  &__footer-grid {
+    @apply grid grid-cols-2 items-center mt-4;
+  }
+
+  &-reply {
+    @apply rounded-lg border-2 border-background ml-3 relative;
+  }
+
+  &-reply:empty {
+    @apply hidden;
+  }
+
+  &-reply::after {
+    @apply bg-background-3 inline-block absolute top-8 h-4/5 w-px -z-10;
+
+    content: "";
+  }
+
+  &-reply &,
+  & &-reply {
+    @apply border-0 pr-0 mt-4;
+  }
+
+  &-thread {
+    @apply mb-8;
+
+    .button[aria-expanded="false"] {
+      svg:first-of-type {
+        @apply block;
+      }
+
+      svg:last-of-type {
+        @apply hidden;
+      }
+    }
+
+    .button[aria-expanded="true"] {
+      svg:first-of-type {
+        @apply hidden;
+      }
+
+      svg:last-of-type {
+        @apply block;
+      }
+    }
+  }
+
+  &__as {
+    @apply my-4;
+  }
+
+  .add-comment {
+    @apply w-full;
+  }
+
+  .comment__votes {
+    @apply justify-self-end;
+
+    .comment__votes--up {
+      @apply mr-2;
+    }
+
+    .button_to:first-child,
+    button:first-child,
+    button:nth-child(2),
+    .button_to:nth-child(2) {
+      svg:first-child {
+        @apply block;
+      }
+
+      svg:nth-child(2) {
+        @apply hidden;
+      }
+
+      .is-vote-selected {
+        svg:first-child {
+          @apply hidden;
+        }
+
+        svg:nth-child(2) {
+          @apply block;
+        }
+      }
+
+      .is-vote-notselected {
+        svg:first-child {
+          @apply block;
+        }
+
+        svg:nth-child(2) {
+          @apply hidden;
+        }
+      }
+    }
+
+    .button_to:nth-child(2) {
+      svg:first-child {
+        @apply block;
+      }
+
+      svg:nth-child(2) {
+        @apply hidden;
+      }
+
+      .is-vote-selected {
+        svg:first-child {
+          @apply hidden;
+        }
+
+        svg:nth-child(2) {
+          @apply block;
+        }
+      }
+
+      .is-vote-notselected {
+        svg:first-child {
+          @apply block;
+        }
+
+        svg:nth-child(2) {
+          @apply hidden;
+        }
+      }
+    }
+
+    .comment__votes--count {
+      @apply text-gray-2 text-sm;
+    }
+
+    .button_to {
+      @apply inline-block;
+    }
+
+    /* override button default styles */
+    .button[disabled] {
+      @apply border-0 bg-transparent;
+    }
+  }
+
+  &-order-by {
+    @apply ml-auto grid grid-cols-4 place-items-center mt-4 md:mt-0;
+  }
+
+  &__actions {
+    @apply flex items-center gap-4;
+
+    .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;
+      }
+    }
+  }
+
+  &__content {
+    &--label {
+      @apply inline-block mb-2;
+    }
+  }
+
+  &__form {
+    &-label {
+      @apply font-semibold text-lg text-gray-2;
+    }
+
+    &-submit {
+      @apply flex flex-col md:flex-row justify-between items-stretch md:items-end gap-4 mt-4;
+    }
+  }
+
+  &__opinion {
+    &-container {
+      @apply flex mt-2 w-full md:w-fit;
+
+      button {
+        @apply grow border border-gray first-of-type:rounded-l last-of-type:rounded-r inline-flex justify-center items-center gap-1 px-4 py-1.5 text-sm text-gray-2 -ml-px first:ml-0 transition-all;
+
+        svg {
+          @apply fill-current;
+        }
+
+        &:hover,
+        &.is-active {
+          @apply border-secondary text-secondary bg-background-4;
+        }
+      }
+    }
+
+    &-label {
+      @apply text-sm text-gray-2;
+    }
+  }
+
+  &__deleted,
+  &__moderated {
+    @apply font-bold;
+  }
+
+  .comment__content > * {
+    @apply text-md;
+  }
+}

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

@@ -18,7 +18,7 @@ module Decidim
             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,
-                                                           related_object_type: related_object_type, related_object_id: related_object_id)
+                                                           related_object_type:, related_object_id:)
             record.assign_attributes(cumulative: cumulative_value, quantity: quantity_value)
             record.save!
           end

data/app/queries/decidim/comments/sorted_comments.rb

@@ -45,11 +45,19 @@ module Decidim
         end
       end
 
+      def count_replies(comment)
+        if comment.comment_threads.size.positive?
+          comment.comment_threads.size + comment.comment_threads.sum { |reply| count_replies(reply) }
+        else
+          0
+        end
+      end
+
       private
 
       def base_scope
         id = @options[:id]
-        return Comment.where(root_commentable: commentable, id: id) if id.present?
+        return Comment.where(root_commentable: commentable, id:) if id.present?
 
         after = @options[:after]
         if after.present?
@@ -59,7 +67,7 @@ module Decidim
           )
         end
 
-        Comment.where(commentable: commentable)
+        Comment.where(commentable:)
       end
 
       def order_by_older(scope)
@@ -81,14 +89,6 @@ module Decidim
           count_replies(comment)
         end.reverse
       end
-
-      def count_replies(comment)
-        if comment.comment_threads.size.positive?
-          comment.comment_threads.size + comment.comment_threads.sum { |reply| count_replies(reply) }
-        else
-          0
-        end
-      end
     end
   end
 end

data/app/services/decidim/comments/comment_creation.rb

@@ -16,7 +16,7 @@ module Decidim
         ActiveSupport::Notifications.publish(
           EVENT_NAME,
           comment_id: comment.id,
-          metadatas: metadatas
+          metadatas:
         )
       end
 

data/app/services/decidim/comments/new_comment_notification_creator.rb

@@ -7,7 +7,7 @@ module Decidim
     #
     # - A user is mentioned in the comment
     # - My comment is replied
-    # - A user I'm following has created a comment/reply
+    # - A user I am following has created a comment/reply
     # - A new comment has been created on a resource, and I should be notified.
     #
     # A given user will only receive one of these notifications, for a given
@@ -46,7 +46,7 @@ module Decidim
         affected_users = mentioned_users - already_notified_users
         @already_notified_users += affected_users
 
-        notify(:user_mentioned, affected_users: affected_users)
+        notify(:user_mentioned, affected_users:)
       end
 
       def notify_mentioned_groups
@@ -56,7 +56,7 @@ module Decidim
           affected_users = group.accepted_users - already_notified_users
           @already_notified_users += affected_users
 
-          notify(:user_group_mentioned, affected_users: affected_users, extra: { group_id: group.id })
+          notify(:user_group_mentioned, affected_users:, extra: { group_id: group.id })
         end
       end
 
@@ -68,14 +68,14 @@ module Decidim
         affected_users = [comment.commentable.author] - already_notified_users
         @already_notified_users += affected_users
 
-        notify(:reply_created, affected_users: affected_users)
+        notify(:reply_created, affected_users:)
       end
 
       def notify_author_followers
         followers = comment.author.followers - already_notified_users
         @already_notified_users += followers
 
-        notify(:comment_by_followed_user, followers: followers)
+        notify(:comment_by_followed_user, followers:)
       end
 
       def notify_user_group_followers
@@ -84,7 +84,7 @@ module Decidim
         followers = comment.user_group.followers - already_notified_users
         @already_notified_users += followers
 
-        notify(:comment_by_followed_user_group, followers: followers)
+        notify(:comment_by_followed_user_group, followers:)
       end
 
       # Notifies the users the `comment.commentable` resource implements as necessary.
@@ -92,7 +92,7 @@ module Decidim
         followers = comment.commentable.users_to_notify_on_comment_created - already_notified_users
         @already_notified_users += followers
 
-        notify(:comment_created, followers: followers)
+        notify(:comment_created, followers:)
       end
 
       # Creates the notifications for the given user IDS and the given event.
@@ -110,7 +110,7 @@ module Decidim
         event_class = "Decidim::Comments::#{event.to_s.camelcase}Event".constantize
         data = {
           event: "decidim.events.comments.#{event}",
-          event_class: event_class,
+          event_class:,
           resource: comment.root_commentable,
           extra: {
             comment_id: comment.id

data/app/views/decidim/comments/admin/shared/_availability_fields.html.erb

@@ -1,15 +1,10 @@
 <div class="row column">
-  <%= form.check_box :comments_enabled, label: t(".enabled"), :"data-toggle" => "customize_comments_times-div" %>
+  <%= form.check_box :comments_enabled, label: t(".enabled"), "data-toggle": "customize_comments_times-div" %>
 </div>
 
 <div id="customize_comments_times-div" data-toggler=".hide" class="row column <%= @form.comments_enabled ? nil : "hide" %>">
-  <div class="row">
-    <div class="columns xlarge-6">
-      <%= form.datetime_field :comments_start_time, label: t(".start_time") %>
-    </div>
-
-    <div class="columns xlarge-6">
-      <%= form.datetime_field :comments_end_time, label: t(".end_time") %>
-    </div>
+  <div class="mb-4">
+    <%= form.datetime_field :comments_start_time, label: t(".start_time") %>
   </div>
+    <%= form.datetime_field :comments_end_time, label: t(".end_time") %>
 </div>

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

@@ -1,5 +1,5 @@
 <% if reply?(comment) %>
-  <%= cell("decidim/comments/comment", comment, root_depth: root_depth) %>
+  <%= cell("decidim/comments/comment", comment, root_depth:) %>
 <% else %>
   <%= cell("decidim/comments/comment_thread", comment) %>
 <% end %>

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

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

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

@@ -1,5 +1,3 @@
-<div class="comment__header">
-  <div class="comment__deleted">
-    <%= t("decidim.components.comment.deleted_at", date: l(comment.deleted_at, format: :decidim_short)) %>
-  </div>
+<div class="comment__deleted">
+  <%= t("decidim.components.comment.deleted_at", date: l(comment.deleted_at, format: :decidim_short)) %>
 </div>

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

@@ -1,5 +1,3 @@
-<div class="comment__header">
-  <div class="comment__moderated">
-    <%= t("decidim.components.comment.moderated_at", date: l(comment.moderation.hidden_at, format: :decidim_short)) %>
-  </div>
+<div class="comment__moderated">
+  <%= t("decidim.components.comment.moderated_at", date: l(comment.moderation.hidden_at, format: :decidim_short)) %>
 </div>

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

@@ -10,13 +10,15 @@
 
     var hideButton = $("#comment_" + <%= root_comment.id %>).find(".comment__hide").first();
     hideButton.find(".show-comment-replies").first().html('<%= t("decidim.components.comment.show_replies", count: Decidim::Comments::SortedComments.for(root_comment.reload).size) %>');
-    hideButton.removeClass("hide");
+
   } else {
     component.addThread(commentHtml, true);
   }
 
+  Rails.fire(document, "comments:loaded", {
+    commentsIds: [<%= @comment.id %>, <%= @comment.commentable.id %>]
+  });
+
   // Update the comments count
   $(".comments-count", $comments).text(<%== t("decidim.components.comments.title", count: @comments_count).to_json %>);
-
-  Decidim.addInputEmoji();
 }());

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

@@ -5,13 +5,16 @@ $(() => {
   const $comment = $(`#comment_${commentId}`);
   const $commentReply = $(`#comment${commentId}-reply`);
   const $content = $("> .comment__content", $comment);
-  const sectionsToDelete = ["header", "footer", "additionalreply"];
+  const sectionsToDelete = ["header", "footer-grid", "reply", "additionalreply"];
 
   sectionsToDelete.forEach((section) => {
     $(`> .comment__${section}`, $comment).remove();
   });
   $commentReply.remove();
   $content.replaceWith(deleteDataHtml);
+  Rails.fire(document, "comments:loaded", {
+    commentsIds: [commentId]
+  });
 
   $(".comments-count", $(`#${rootCommentableId}`)).text(<%== t("decidim.components.comments.title", count: @comment.root_commentable.comments_count).to_json %>);
 });

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

@@ -4,9 +4,11 @@
   var $comments = $("#" + rootCommentableId);
   var component = $comments.data("comments");
 
-  $(".loading-comments").addClass("hide");
+  $(".loading-comments").addClass("hidden");
+  var commentsIds = [];
 <% @comments.each do |comment| %>
   var commentId = <%= comment.id.to_json %>;
+  commentsIds.push(commentId);
   var commentHtml = '<%== j(render comment).strip %>';
   var inReplyTo = <%== (reply?(comment) ? comment.commentable.id : nil).to_json %>;
 
@@ -19,6 +21,11 @@
     }
   }
 <% end %>
+  if (commentsIds.length) {
+    Rails.fire(document, "comments:loaded", {
+      commentsIds: commentsIds
+    });
+  }
 
   // Update the comments count
   $(".comments-count", $comments).text(<%== t("decidim.components.comments.title", count: @comments_count).to_json %>);

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

@@ -6,11 +6,10 @@
   component.unmountComponent();
 
   var commentsHtml = '<%== j(render partial: "comments").strip %>';
-  $(".loading-comments").addClass("hide");
+  $(".loading-comments").addClass("hidden");
   $comments.replaceWith(commentsHtml);
 
   $comments = $("#" + rootCommentableId);
-  $comments.foundation();
 
   // Re-create the component
   component = new Decidim.CommentsComponent($comments, $comments.data("decidim-comments"));

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

@@ -1,5 +1,5 @@
 $(() => {
-  var rootCommentableId = <%== "comments-for-#{@comment.commentable.commentable_type.demodulize}-#{@comment.commentable.id}".to_json %>;
+  var rootCommentableId = <%== "comments-for-#{@commentable.class.name.demodulize}-#{@commentable.id}".to_json %>;
   var $comments = $("#" + rootCommentableId);
   var config = $comments.data("decidim-comments");
 
@@ -12,11 +12,12 @@ $(() => {
 
   $comment.replaceWith(commentHtml);
 
-  $comments = $("#" + rootCommentableId);
-  $comments.foundation();
-
   // 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/app/views/decidim/comments/votes/create.js.erb

@@ -3,12 +3,12 @@
   var upVotes = <%= comment.up_votes.count.to_json %>;
   var downVotes = <%= comment.down_votes.count.to_json %>;
   var $comment = $("#comment_" + commentId);
-  var $votes = $("> .comment__footer .comment__votes", $comment);
-  var $upVote = $(".comment__votes--up", $votes);
-  var $downVote = $(".comment__votes--down", $votes);
+  var $votes = $("> .comment__footer > .comment__footer-grid .comment__votes", $comment);
+  var $upVote = $(".js-comment__votes--up", $votes);
+  var $downVote = $(".js-comment__votes--down", $votes);
 
-  $(".comment__votes--count", $upVote).text(upVotes);
-  $(".comment__votes--count", $downVote).text(downVotes);
+  $("span", $upVote).text(upVotes);
+  $("span", $downVote).text(downVotes);
 
   $upVote.removeClass("is-vote-selected is-vote-notselected").removeAttr("disabled");
   $downVote.removeClass("is-vote-selected is-vote-notselected").removeAttr("disabled");

data/config/assets.rb

@@ -3,3 +3,6 @@
 base_path = File.expand_path("..", __dir__)
 
 Decidim::Webpacker.register_path("#{base_path}/app/packs")
+Decidim::Webpacker.register_entrypoints(
+  decidim_comments: "#{base_path}/app/packs/entrypoints/decidim_comments.js"
+)