diff --git a/app/assets/javascripts/comments.js b/app/assets/javascripts/comments.js index 44d70bb38..4e9012f1e 100644 --- a/app/assets/javascripts/comments.js +++ b/app/assets/javascripts/comments.js @@ -2,11 +2,8 @@ "use strict"; App.Comments = { add_comment: function(parent_selector, response_html) { - $(parent_selector + " .comment-list:first").prepend($(response_html)); - var hidden_responses = $(parent_selector + " .comment-list:first").is(":hidden"); - if (parent_selector && hidden_responses) { - $(parent_selector).find(".comment-list:first").toggle("slow"); - } + $(parent_selector + " .comment-list:first").prepend($(response_html)).show("slow"); + $(parent_selector + " .responses-count:first").removeClass("collapsed"); this.update_comments_count(); }, update_comments_count: function() { @@ -45,8 +42,7 @@ $("body").on("click", ".js-toggle-children", function() { $(this).closest(".comment").find(".comment-list:first").toggle("slow"); - $(this).children(".far").toggleClass("fa-minus-square fa-plus-square"); - $(this).children(".js-child-toggle").toggle(); + $(this).closest(".responses-count").toggleClass("collapsed"); return false; }); } diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 3c195b1d8..9eb5c734b 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2121,14 +2121,6 @@ table { padding-left: rem-calc(18); } - .far { - font-size: $small-font-size; - left: 0; - position: absolute; - text-decoration: none; - top: 2px; - } - .divider { color: $text-light; display: inline-block; @@ -2139,6 +2131,35 @@ table { } } + .responses-count { + .far { + @extend .fa-minus-square; + font-size: $small-font-size; + left: 0; + position: absolute; + text-decoration: none; + top: 2px; + } + + .show-children { + display: none; + } + + &.collapsed { + .far { + @extend .fa-plus-square; + } + + .collapse-children { + display: none; + } + + .show-children { + display: inline; + } + } + } + .comment-user { margin-top: $line-height / 4; padding: $line-height / 4 0; diff --git a/app/views/comments/_responses_count.html.erb b/app/views/comments/_responses_count.html.erb index 62b4103ac..3915b5495 100644 --- a/app/views/comments/_responses_count.html.erb +++ b/app/views/comments/_responses_count.html.erb @@ -1,8 +1,8 @@ <% if count > 0 %> <%= link_to "", class: "js-toggle-children relative" do %> - - - <%= t("comments.comment.responses_collapse", count: count) %> + + <%= t("comments.comment.responses_show", count: count) %> + <%= t("comments.comment.responses_collapse", count: count) %> <% end %> <% else %> <%= t("comments.comment.responses", count: 0) %> diff --git a/spec/system/comments/debates_spec.rb b/spec/system/comments/debates_spec.rb index 740258b8b..ceaeede4f 100644 --- a/spec/system/comments/debates_spec.rb +++ b/spec/system/comments/debates_spec.rb @@ -91,8 +91,7 @@ describe "Commenting debates" do end scenario "can collapse comments after adding a reply", :js do - parent_comment = create(:comment, body: "Main comment", commentable: debate) - create(:comment, body: "First subcomment", commentable: debate, parent: parent_comment) + create(:comment, body: "Main comment", commentable: debate) login_as(user) visit debate_path(debate) @@ -104,7 +103,7 @@ describe "Commenting debates" do expect(page).to have_content("It will be done next week.") - find(".fa-minus-square").click + click_link text: "1 response (collapse)" expect(page).not_to have_content("It will be done next week.") end