Design update to comments (decidim#13205)

Co-authored-by: Andrés Pereira de Lucena <andreslucena@gmail.com>

decidim-comments/app/cells/decidim/comments/comment/actions.erb

@@ -1,12 +1,4 @@
 <div class="comment__actions">
-  <% if depth.zero? && has_replies_in_children? %>
-    <button class="button button__sm button__text-secondary" data-comment-hide data-controls="comment-<%= model.id %>-replies" data-open="true" id="comment-<%= model.id %>-replies-trigger">
-      <%= icon "arrow-down-s-line" %>
-      <span data-show-comment-reply class="font-normal"><%= t("decidim.components.comment.show_replies", count: replies.size) %></span>
-      <%= icon "arrow-up-s-line" %>
-      <span data-hide-comment-reply class="font-normal"><%= t("decidim.components.comment.hide_replies", count: replies.size) %></span>
-    </button>
-  <% end %>
   <% if can_reply? %>
     <button class="button button__sm button__text-secondary" data-controls="panel-<%= reply_id %>" id="panel-<%= reply_id %>-trigger">
       <%= icon "chat-1-line" %>

decidim-comments/app/cells/decidim/comments/comment/show.erb

@@ -72,10 +72,26 @@
       </div>
     </div>
 
-    <div data-comment-footer data-component="accordion" id="accordion-<%= model.id %>">
+    <div data-comment-footer data-component="accordion" id="accordion-<%= model.id %>" class="relative">
       <div class="comment__footer-grid">
-        <%= render :actions %>
-        <%= votes %>
+        <div class="comment__votes-actions">
+          <%= render :actions %>
+          <%= votes %>
+        </div>
+      </div>
+      <div class="comment__reply-button">
+        <% if depth.zero? && has_replies_in_children? %>
+          <button class="button button__xs button__transparent-secondary border-white absolute top-4" data-comment-hide data-controls="comment-<%= model.id %>-replies" data-open="false" id="comment-<%= model.id %>-replies-trigger">
+            <span data-show-comment-reply class="font-normal" aria-label="<%= t("decidim.components.comment.show_replies", count: replies.size) %>">
+              <%= t("decidim.components.comment.answers", count: replies.size) %>
+            </span>
+            <%= icon "arrow-down-s-line" %>
+            <span data-hide-comment-reply class="font-normal" aria-label="<%= t("decidim.components.comment.hide_replies", count: replies.size) %>">
+              <%= t("decidim.components.comment.answers", count: replies.size) %>
+            </span>
+            <%= icon "arrow-up-s-line" %>
+          </button>
+        <% end %>
       </div>
       <% if can_reply? %>
         <div id="panel-<%= reply_id %>" class="add-comment" data-additional-reply>

decidim-comments/app/cells/decidim/comments/comments/order_control.erb

@@ -1,13 +1,15 @@
 <div class="comment-order-by">
-  <% available_orders.each do | order_value| %>
-    <div class="text-center">
-      <%= link_to(
-        t("decidim.components.comment_order_selector.order.#{order_value}"),
-        decidim_comments.comments_path(commentable_gid: model.to_signed_global_id.to_s, order: order_value, reload: 1),
-        class: "button button__sm button__text-secondary only:m-auto comment-order-by__item inline-block #{order_value == order ? "underline font-bold" : ""}",
-        remote: true,
-        aria: { controls: threads_node_id }
-      ) %>
-    </div>
+  <%= form_with url: "#" do %>
+    <label for="order" class="comments-label-dropdown"><%= t("decidim.components.comment.sort_by") %></label>
+    <select id="order" aria-label="Order" data-order-comment-select="true">
+       <% available_orders.each do |order_value| %>
+        <option
+           value="<%= order_value %>"
+           <%= "selected" if order_value == order %>
+           data-order-comment-url="<%= decidim_comments.comments_path(commentable_gid: model.to_signed_global_id.to_s, order: order_value, reload: 1) %>">
+           <%= t("decidim.components.comment_order_selector.order.#{order_value}") %>
+        </option>
+       <% end %>
+    </select>
   <% end %>
 </div>

decidim-comments/app/packs/src/decidim/comments/comments.component.js

@@ -43,6 +43,7 @@ export default class CommentsComponent {
           $(".add-comment textarea", this.$element).prop("disabled", false);
         });
       }
+      this._initializeSortDropdown();
     }
   }
 
@@ -317,4 +318,30 @@ export default class CommentsComponent {
       $submit.attr("disabled", "disabled");
     }
   }
+
+  /**
+  * Adds the behaviour for the drop down order section within comments.
+  * @private
+  * @returns {Void} - Returns nothing
+  */
+  _initializeSortDropdown() {
+    const orderSelect = document.querySelector("[data-order-comment-select]");
+
+    if (!orderSelect) {
+      return;
+    }
+    orderSelect.style.fontWeight = "bold";
+    orderSelect.style.borderColor = "black";
+
+    orderSelect.addEventListener("change", function(event) {
+      const selectedOption = orderSelect.querySelector(`[value=${event.target.value}`);
+      const orderUrl = selectedOption.dataset.orderCommentUrl;
+
+      Rails.ajax({
+        url: orderUrl,
+        type: "GET",
+        error: (data) => (console.error(data))
+      });
+    });
+  }
 }

decidim-comments/app/packs/stylesheets/comments.scss

@@ -22,7 +22,7 @@
   }
 
   &__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;
   }
 
   .author__avatar-container {
@@ -31,10 +31,10 @@
 }
 
 .comment {
-  @apply rounded-lg border-2 border-background p-3 pl-6;
+  @apply rounded-lg border-2 border-background-5 p-3 pl-6;
 
   &__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;
@@ -43,6 +43,13 @@
     &--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;
+      }
+    }
   }
 
   /* overwrite default dropdown styles */
@@ -60,19 +67,19 @@
   }
 
   &__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 {
     @apply hidden;
   }
 
   &-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: "";
   }
@@ -199,11 +206,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 {
@@ -242,6 +253,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;
@@ -290,3 +345,7 @@
     @apply text-md;
   }
 }
+
+.comments-label-dropdown {
+  @apply mr-2 mt-2;
+}

decidim-comments/config/locales/en.yml

@@ -64,6 +64,9 @@ en:
         alignment:
           against: Against
           in_favor: In favor
+        answers:
+          one: "%{count} answer"
+          other: "%{count} answers"
         cancel_reply: Cancel reply
         comment_label: Comment %{comment_id}
         comment_label_reply: Comment %{comment_id} (reply to comment %{parent_comment_id})
@@ -94,6 +97,7 @@ en:
           one: Show reply
           other: Show %{count} replies
         single_comment_link_title: Get link
+        sort_by: 'Sort by: '
       comment_order_selector:
         order:
           best_rated: Best rated

decidim-comments/spec/cells/decidim/comments/comments_cell_spec.rb

@@ -29,7 +29,7 @@ module Decidim::Comments
           older: "Older",
           most_discussed: "Most discussed"
         }.each do |key, title|
-          expect(subject).to have_css("a[href^='/comments?'][href$='&order=#{key}&reload=1']", text: title)
+          expect(subject).to have_css("select#order option[value='#{key}']", text: title)
         end
       end
 

decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb

@@ -51,7 +51,8 @@ module.exports = {
         DEFAULT: "#F3F4F7",
         2: "#FAFBFC",
         3: "#EFEFEF",
-        4: "#E4EEFF99" // 60% opacity
+        4: "#E4EEFF99", // 60% opacity
+        5: "#E9E9E9"
       }
     },
     container: {

decidim-core/lib/decidim/core/test/shared_examples/comments_examples.rb

@@ -38,7 +38,7 @@
     expect(page).to have_css(".comment", minimum: 1)
 
     within ".comment-order-by" do
-      click_on "Best rated"
+      select "Best rated", from: "order"
     end
 
     expect(page).to have_css(".comments > div:nth-child(2)", text: "Most Rated Comment")
@@ -54,7 +54,7 @@
       expect(page).to have_css(".comment", minimum: 1)
 
       within("#accordion-#{single_comment.id}") do
-        expect(page).to have_content "Hide reply"
+        expect(page).to have_content "1 answer"
       end
     end
 
@@ -560,19 +560,22 @@
         let(:new_reply_body) { "Hey, I just jumped inside the thread!" }
         let!(:new_reply) { create(:comment, commentable: thread, root_commentable: commentable, body: new_reply_body) }
 
-        it "displays the hide button" do
+        it "displays a way to to display content" do
           visit current_path
           within "#comment_#{thread.id}" do
-            expect(page).to have_content("Hide reply")
+            expect(page).to have_content("1 answer")
+            click_on "1 answer"
             expect(page).to have_content(new_reply_body)
           end
         end
 
-        it "displays the show button" do
+        it "displays a way hide content" do
           visit current_path
           within "#comment_#{thread.id}" do
-            click_on "Hide reply"
-            expect(page).to have_content("Show reply")
+            expect(page).to have_content("1 answer")
+            click_on "1 answer"
+            expect(page).to have_content("1 answer")
+            click_on "1 answer"
             expect(page).to have_no_content(new_reply_body)
           end
         end
@@ -583,9 +586,10 @@
           it "displays the show button" do
             visit current_path
             within "#comment_#{thread.id}" do
-              click_on "Hide 3 replies"
-              expect(page).to have_content("Show 3 replies")
+              expect(page).to have_content("3 answers")
               expect(page).to have_no_content(new_reply_body)
+              click_on "3 answers"
+              expect(page).to have_content(new_reply_body)
             end
           end
         end
@@ -852,10 +856,11 @@
             skip "Commentable comments has no votes" unless commentable.comments_have_votes?
 
             visit current_path
-            expect(page).to have_css("#comment_#{comments[0].id} > [data-comment-footer] > .comment__footer-grid .comment__votes .js-comment__votes--up", text: /0/)
+            expect(page).to have_css("#comment_#{comments[0].id} > [data-comment-footer] > .comment__footer-grid .comment__votes .js-comment__votes--up", text: /0/, visible: :all)
             page.find("#comment_#{comments[0].id} > [data-comment-footer] > .comment__footer-grid .comment__votes .js-comment__votes--up").click
-            expect(page).to have_css("#comment_#{comments[0].id} > [data-comment-footer] > .comment__footer-grid .comment__votes .js-comment__votes--up", text: /1/)
-            expect(page).to have_css("#comment_#{comment_on_comment.id} > [data-comment-footer] > .comment__footer-grid .comment__votes .js-comment__votes--up", text: /0/)
+            expect(page).to have_css("#comment_#{comments[0].id} > [data-comment-footer] > .comment__footer-grid .comment__votes .js-comment__votes--up", text: /1/, visible: :all)
+            expect(page).to have_css("#comment_#{comment_on_comment.id} > [data-comment-footer] >.comment__footer-grid .comment__votes .js-comment__votes--up", text: /0/,
+                                                                                                                                                                visible: :all)
           end
         end
       end