diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss index 320248ffe..1430b8ff4 100644 --- a/app/assets/stylesheets/articles.scss +++ b/app/assets/stylesheets/articles.scss @@ -82,7 +82,7 @@ width: 27%; padding: 9px 0px; text-align: center; - color: $black; + @include themeable(color, theme-secondary-color, $medium-gray); margin: 1%; } .query-filter-button { @@ -111,7 +111,11 @@ theme-container-accent-background, lighten($bold-blue, 8%) ); - color: white; + @include themeable( + color, + theme-color, + white + ); } } } diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss index 4557fd29d..d9a8fad8e 100644 --- a/app/assets/stylesheets/comments.scss +++ b/app/assets/stylesheets/comments.scss @@ -181,7 +181,7 @@ a.header-link { } .top-level-actions { - margin: 0px 8px 85px; + margin: 0px 0px 85px; padding: 3px 0px; z-index: 4; position: relative; @@ -194,6 +194,7 @@ a.header-link { background: $black; color: white; margin: 2px 0px 2px; + margin-right: 5px; vertical-align: 2px; } } @@ -210,8 +211,8 @@ a.header-link { color: $black; font-family: $helvetica-condensed; font-stretch: condensed; - padding: 4px 12px; - font-size: 0.8em; + padding: 4px 8px; + font-size: 0.77em; vertical-align: 1px; margin: 8px 0px 2px; } @@ -450,6 +451,17 @@ a.header-link { } .root-comment { margin-top: -80px; + .comment-parent-link { + @include themeable(background, theme-container-background, white); + @include themeable(border, theme-container-border, 1px solid $medium-gray); + display: block; + padding: 9px 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.8em; + @include themeable(background, theme-container-accent-background, lighten($lightest-gray, 1%)); + } } } .comment-view-parent { @@ -787,6 +799,7 @@ a.header-link { font-family: $helvetica-condensed; font-stretch: condensed; font-size: 0.78em; + border-radius: 3px; } } a { diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss index 557afc871..2371d8c75 100644 --- a/app/assets/stylesheets/notifications.scss +++ b/app/assets/stylesheets/notifications.scss @@ -175,13 +175,27 @@ border-radius: 3px; @include themeable(color, theme-color, $black); position: relative; + .comment-text-header { + display: block; + padding: 5px 10px; + margin-left: -10px; + margin-top: -10px; + margin-bottom: 8px; + border-bottom: 1px solid lighten($dark-gray, 18%); + width: 100%; + font-weight: bold; + font-size: 0.76em; + position: relative; + z-index:6; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + @include themeable(background, theme-container-accent-background, lighten($lightest-gray, 1%)); + } &:hover { border: 1px solid $black; - @include themeable( - background, - theme-container-background-hover, - #fff - ); } h1, h2, diff --git a/app/models/comment.rb b/app/models/comment.rb index 733c4df1b..5a38e69ad 100644 --- a/app/models/comment.rb +++ b/app/models/comment.rb @@ -165,10 +165,10 @@ class Comment < ApplicationRecord end.join end - def title + def title(length = 80) return "[deleted]" if deleted - ActionController::Base.helpers.truncate(ActionController::Base.helpers.strip_tags(processed_html), length: 80) + ActionController::Base.helpers.truncate(ActionController::Base.helpers.strip_tags(processed_html).strip, length: length) end def video diff --git a/app/views/comments/index.html.erb b/app/views/comments/index.html.erb index 9f4f646cd..01efdc0d7 100644 --- a/app/views/comments/index.html.erb +++ b/app/views/comments/index.html.erb @@ -72,9 +72,9 @@

re: <%= @commentable.title %> VIEW POST

<% unless @root_comment.is_root? %> - VIEW PARENT COMMENT + TOP OF THREAD <% end %> - VIEW FULL DISCUSSION + FULL DISCUSSION <% else %> @@ -85,6 +85,11 @@
<% if @root_comment.present? %>
+ <% if @root_comment.depth > 0 && parent = @root_comment.parent %> + + re: <%= parent.title(150).strip %> + + <% end %> <% cache ["comment_root-view-root_#{user_signed_in?}", @root_comment] do %> <%= tree_for(@root_comment, @root_comment.subtree.includes(:user).arrange[@root_comment], @commentable) %> <% end %> diff --git a/app/views/notifications/_comment.html.erb b/app/views/notifications/_comment.html.erb index 568430e01..2aae7d826 100644 --- a/app/views/notifications/_comment.html.erb +++ b/app/views/notifications/_comment.html.erb @@ -12,7 +12,11 @@
<% if notification.action.blank? %> "><%= json_data["user"]["name"] %> + <% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %> + replied to a thread in + <% else %> commented on + <% end %> "> <%= sanitize(json_data["comment"]["commentable"]["title"]) %> diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb index 81c09168f..40190df96 100644 --- a/app/views/notifications/index.html.erb +++ b/app/views/notifications/index.html.erb @@ -56,7 +56,7 @@ <% @organizations.each do |org| %> diff --git a/app/views/notifications/shared/_comment_box.html.erb b/app/views/notifications/shared/_comment_box.html.erb index a35425ea7..118685108 100644 --- a/app/views/notifications/shared/_comment_box.html.erb +++ b/app/views/notifications/shared/_comment_box.html.erb @@ -1,6 +1,11 @@ <% cache "comment-box-#{@last_user_reaction}-#{@last_user_comment}-#{json_data['comment']['updated_at']}-#{json_data['comment']['id']}" do %> <% if json_data["comment"]["commentable"] %>
+ <% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %> + " class="comment-text-header"> + re: <%= json_data["comment"]["ancestors"].last["title"].strip %> + + <% end %> " class="comment-link-wrapper"> <%= json_data["comment"]["processed_html"].html_safe %>
diff --git a/spec/models/comment_spec.rb b/spec/models/comment_spec.rb index bee3c92d2..87beacde7 100644 --- a/spec/models/comment_spec.rb +++ b/spec/models/comment_spec.rb @@ -171,6 +171,11 @@ RSpec.describe Comment, type: :model do expect(comment.title.length).to be <= 80 end + it "is allows title of greater length if passed" do + expect(comment.title(5).length).to eq(5) + end + + it "retains content from #processed_html" do text = comment.title.gsub("...", "").delete("\n") expect(comment.processed_html).to include CGI.unescapeHTML(text) diff --git a/spec/requests/comments_spec.rb b/spec/requests/comments_spec.rb index 0a7de0554..c340c5e70 100644 --- a/spec/requests/comments_spec.rb +++ b/spec/requests/comments_spec.rb @@ -29,6 +29,32 @@ RSpec.describe "Comments", type: :request do expect(response.body).to include(comment.processed_html) end + it "displays full discussion text" do + get comment.path + expect(response.body).to include("FULL DISCUSSION") + end + + context "when the comment a root" do + it "does not display top of thread button" do + get comment.path + expect(response.body).not_to include("TOP OF THREAD") + end + end + + context "when the a child comment" do + it "displays proper button and text for child comment" do + child = create(:comment, + parent_id: comment.id, + commentable_id: article.id, + commentable_type: "Article", + user_id: user.id) + get child.path + expect(response.body).to include("TOP OF THREAD") + expect(response.body).to include(comment.title(150)) + expect(response.body).to include(child.processed_html) + end + end + context "when the comment is for a podcast's episode" do it "works" do get podcast_comment.path diff --git a/spec/requests/notifications_spec.rb b/spec/requests/notifications_spec.rb index b55466f67..40f7c4eee 100644 --- a/spec/requests/notifications_spec.rb +++ b/spec/requests/notifications_spec.rb @@ -155,6 +155,10 @@ RSpec.describe "NotificationsIndex", type: :request do expect(response.body).to include "commented on" end + it "does not render incorrect message" do + expect(response.body).not_to include "replied to a thread in" + end + it "does not render the moderation message" do expect(response.body).not_to include "As a trusted member" end @@ -178,6 +182,33 @@ RSpec.describe "NotificationsIndex", type: :request do end end + context "when a user has a new second level comment notification" do + let(:user2) { create(:user) } + let(:article) { create(:article, :with_notification_subscription, user_id: user.id) } + let(:comment) { create(:comment, user_id: user2.id, commentable_id: article.id, commentable_type: "Article") } + let(:second_comment) { create(:comment, user_id: user2.id, commentable_id: article.id, commentable_type: "Article", parent_id: comment.id) } + let(:third_comment) { create(:comment, user_id: user2.id, commentable_id: article.id, commentable_type: "Article", parent_id: second_comment.id) } + + before do + sign_in user + Notification.send_new_comment_notifications_without_delay(comment) + Notification.send_new_comment_notifications_without_delay(second_comment) + Notification.send_new_comment_notifications_without_delay(third_comment) + get "/notifications" + end + + it "contextual comment notification text properly" do + expect(response.body).to include "replied to a thread in" + end + + it "contextual comment notification text properly" do + expect(response.body).to include "re: #{comment.title}" + end + + + end + + context "when a user has a new moderation notification" do let(:user2) { create(:user) } let(:article) { create(:article, user_id: user.id) }