maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add comment context for notifications and comment pages (#3262)

Browse source 
* Add comment context for notifications and comment pages

* Fix comment spec and adjust css
This commit is contained in:
Ben Halpern 2019-06-22 14:50:15 -04:00 • committed by GitHub
parent bfa1bdc37f
commit d48ad63aea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 122 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/stylesheets/articles.scss
View file

@ -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
);
}
}
}

19
app/assets/stylesheets/comments.scss
View file

@ -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 {

24
app/assets/stylesheets/notifications.scss
View file

@ -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,

4
app/models/comment.rb
View file

@ -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

9
app/views/comments/index.html.erb
View file

@ -72,9 +72,9 @@
<h3>re: <%= @commentable.title %> <a href="<%= @commentable.path %>">VIEW POST</a></h3>
<span class="comment-action-buttons">
<% unless @root_comment.is_root? %>
<a href="<%= @root_comment.parent.path %>">VIEW PARENT COMMENT</a>
<a href="<%= @root_comment.root.path %>">TOP OF THREAD</a>
<% end %>
<a href="<%= @commentable.path %>/comments">VIEW FULL DISCUSSION</a>
<a href="<%= @commentable.path %>/comments">FULL DISCUSSION</a>
</span>
</div>
<% else %>
@ -85,6 +85,11 @@
<div class="comment-trees" id="comment-trees-container">
<% if @root_comment.present? %>
<div class="root-comment">
<% if @root_comment.depth > 0 && parent = @root_comment.parent %>
<a href="<%= parent.path %>" class="comment-parent-link">
re: <%= parent.title(150).strip %>
</a>
<% 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 %>

4
app/views/notifications/_comment.html.erb
View file

@ -12,7 +12,11 @@
<div class="content notification-content comment-content">
<% if notification.action.blank? %>
<a href="<%= json_data["user"]["path"] %>"><%= json_data["user"]["name"] %></a>
<% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %>
replied to a thread in
<% else %>
commented on
<% end %>
<a href="<%= json_data["comment"]["commentable"]["path"] %>">
<%= sanitize(json_data["comment"]["commentable"]["title"]) %>
</a>

2
app/views/notifications/index.html.erb
View file

@ -56,7 +56,7 @@
<% @organizations.each do |org| %>
<div class="notifications-mobile-filters">
<hr>
<span class="organization-name"><%= org.name %></span>
<span class="organization-name">@<%= org.slug %>:</span>
<a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">ALL</a>
<a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">COMMENTS</a>
</div>

5
app/views/notifications/shared/_comment_box.html.erb
View file

@ -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"] %>
<div class="comment-text">
<% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %>
<a href="<%= json_data["comment"]["ancestors"].last["path"] %>" class="comment-text-header">
re: <%= json_data["comment"]["ancestors"].last["title"].strip %>
</a>
<% end %>
<a href="<%= json_data["comment"]["path"] %>" class="comment-link-wrapper"></a>
<%= json_data["comment"]["processed_html"].html_safe %>
</div>

5
spec/models/comment_spec.rb
View file

@ -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)

26
spec/requests/comments_spec.rb
View file

@ -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

31
spec/requests/notifications_spec.rb
View file

@ -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) }