diff --git a/decidim-comments/app/cells/decidim/comments/comment/actions.erb b/decidim-comments/app/cells/decidim/comments/comment/actions.erb index c21e9970c47f4..f486841422812 100644 --- a/decidim-comments/app/cells/decidim/comments/comment/actions.erb +++ b/decidim-comments/app/cells/decidim/comments/comment/actions.erb @@ -1,12 +1,4 @@
- <% if depth.zero? && has_replies_in_children? %> - - <% end %> <% if can_reply? %>
-
+
- <%= render :actions %> - <%= votes %> +
+ <%= render :actions %> + <%= votes %> +
+
+
+ <% if depth.zero? && has_replies_in_children? %> + + <% end %>
<% if can_reply? %>
diff --git a/decidim-comments/app/cells/decidim/comments/comments/order_control.erb b/decidim-comments/app/cells/decidim/comments/comments/order_control.erb index 08a9f8a37e1f3..8f5730d497c3d 100644 --- a/decidim-comments/app/cells/decidim/comments/comments/order_control.erb +++ b/decidim-comments/app/cells/decidim/comments/comments/order_control.erb @@ -1,13 +1,15 @@
- <% available_orders.each do | order_value| %> -
- <%= 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 } - ) %> -
+ <%= form_with url: "#" do %> + + <% end %>
diff --git a/decidim-comments/app/packs/src/decidim/comments/comments.component.js b/decidim-comments/app/packs/src/decidim/comments/comments.component.js index aa598dc29be82..4ddd44ec0ce1d 100644 --- a/decidim-comments/app/packs/src/decidim/comments/comments.component.js +++ b/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)) + }); + }); + } } diff --git a/decidim-comments/app/packs/stylesheets/comments.scss b/decidim-comments/app/packs/stylesheets/comments.scss index a9fc700fc7b6d..73b5e262d0b4b 100644 --- a/decidim-comments/app/packs/stylesheets/comments.scss +++ b/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,11 +67,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 { @@ -72,7 +79,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: ""; } @@ -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; +} diff --git a/decidim-comments/config/locales/en.yml b/decidim-comments/config/locales/en.yml index eb9a5264b7ccc..168e5cc326a7d 100644 --- a/decidim-comments/config/locales/en.yml +++ b/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 diff --git a/decidim-comments/spec/cells/decidim/comments/comments_cell_spec.rb b/decidim-comments/spec/cells/decidim/comments/comments_cell_spec.rb index bf31d333972f2..f77d5e1b0a50c 100644 --- a/decidim-comments/spec/cells/decidim/comments/comments_cell_spec.rb +++ b/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 diff --git a/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb b/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb index 58aa02ee4bd02..de70a9059a9b0 100644 --- a/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb +++ b/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: { diff --git a/decidim-core/lib/decidim/core/test/shared_examples/comments_examples.rb b/decidim-core/lib/decidim/core/test/shared_examples/comments_examples.rb index 573bef51f83cc..13ead1fe4f884 100644 --- a/decidim-core/lib/decidim/core/test/shared_examples/comments_examples.rb +++ b/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