comments: add scores, rework comment menu.

* Add comment scores.
* Rework voting buttons so that you can click the upvote/downvote
  buttons to toggle votes.
* Hide the edit, delete, undelete, and report buttons behind a popup menu.
* Show the upvote/downvote/reply buttons to logged out users. Redirect
  them to the login page instead.
This commit is contained in:
evazion
2021-01-20 03:10:59 -06:00
parent ccae422961
commit 5780ed5768
15 changed files with 149 additions and 64 deletions

View File

@@ -10,8 +10,10 @@
data-is-sticky="<%= comment.is_sticky? %>"
data-is-dimmed="<%= dimmed? %>"
data-is-thresholded="<%= thresholded? %>"
data-is-reported="<%= has_moderation_reports? %>"
data-is-voted="<%= comment.voted_by?(current_user) %>">
data-is-reported="<%= reported? %>"
data-is-upvoted="<%= upvoted? %>"
data-is-downvoted="<%= downvoted? %>">
<div class="author">
<div class="author-name">
<% if redact_deleted? %>
@@ -25,6 +27,7 @@
</div>
<%= link_to time_ago_in_words_tagged(comment.created_at), post_path(comment.post, anchor: "comment_#{comment.id}"), class: "message-timestamp" %>
</div>
<div class="content">
<% if thresholded? %>
<%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link" %>
@@ -41,42 +44,81 @@
<% end %>
<menu>
<% if votable? %>
<li class="comment-votes">
<% if current_user.is_anonymous? %>
<%= link_to "🡹", login_path(url: request.fullpath), class: "comment-upvote-link" %>
<% elsif upvoted? %>
<%= link_to "🡹", comment_comment_votes_path(comment_id: comment.id), class: "comment-upvote-link comment-unvote-link", method: :delete, remote: true %>
<% else %>
<%= link_to "🡹", comment_comment_votes_path(comment_id: comment.id, score: "up"), class: "comment-upvote-link", method: :post, remote: true %>
<% end %>
<span class="comment-score"><%= comment.score %></span>
<% if current_user.is_anonymous? %>
<%= link_to "🡻", login_path(url: request.fullpath), class: "comment-downvote-link" %>
<% elsif downvoted? %>
<%= link_to "🡻", comment_comment_votes_path(comment_id: comment.id), class: "comment-downvote-link comment-unvote-link", method: :delete, remote: true %>
<% else %>
<%= link_to "🡻", comment_comment_votes_path(comment_id: comment.id, score: "down"), class: "comment-downvote-link", method: :post, remote: true %>
<% end %>
</li>
<% end %>
<% if policy(comment).reply? %>
<% if context == :index_by_comment %>
<li><%= link_to "Reply", new_comment_path(id: comment, comment: { post_id: comment.post_id }), class: "reply-link" %></li>
<% else %>
<li><%= link_to "Reply", new_comment_path(id: comment, comment: { post_id: comment.post_id }), class: "reply-link", remote: true %></li>
<li class="comment-reply">
<% if current_user.is_anonymous? %>
<%= link_to "Reply", login_path(url: request.fullpath) %>
<% elsif context == :index_by_comment %>
<%= link_to "Reply", new_comment_path(id: comment, comment: { post_id: comment.post_id }) %>
<% else %>
<%= link_to "Reply", new_comment_path(id: comment, comment: { post_id: comment.post_id }), remote: true %>
<% end %>
</li>
<% end %>
<% if reported? %>
<li class="moderation-report-notice">
Reported (<%= link_to pluralize(comment.moderation_reports.length, "report"), moderation_reports_path(search: { model_type: "Comment", model_id: comment.id }) %>)
</li>
<% end %>
<% if policy(comment).update? || policy(comment).reportable? %>
<%= render PopupMenuComponent.new do |menu| %>
<% if policy(comment).update? %>
<%= menu.item do %>
<%= link_to edit_comment_path(comment.id), id: "edit_comment_link_#{comment.id}", class: "edit_comment_link" do %>
<i class="icon fas fa-edit"></i>
Edit
<% end %>
<% end %>
<%= menu.item do %>
<% if comment.is_deleted? %>
<%= link_to undelete_comment_path(comment.id), method: :post, remote: true do %>
<i class="icon fas fa-trash-restore-alt"></i>
Undelete
<% end %>
<% else %>
<%= link_to comment_path(comment.id), "data-confirm": "Are you sure you want to delete this comment?", method: :delete, remote: true do %>
<i class="icon fas fa-trash-alt"></i>
Delete
<% end %>
<% end %>
<% end %>
<% end %>
<% if policy(comment).reportable? %>
<%= menu.item do %>
<%= link_to new_moderation_report_path(moderation_report: { model_type: "Comment", model_id: comment.id }), remote: true do %>
<i class="icon fas fa-flag"></i>
Report
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% if policy(comment).update? %>
<% if comment.is_deleted? %>
<li><%= link_to "Undelete", undelete_comment_path(comment.id), method: :post, remote: true %></li>
<% else %>
<li><%= link_to "Delete", comment_path(comment.id), "data-confirm": "Are you sure you want to delete this comment?", method: :delete, remote: true %></li>
<% end %>
<li><%= link_to "Edit", edit_comment_path(comment.id), id: "edit_comment_link_#{comment.id}", class: "edit_comment_link" %></li>
<% end %>
<% if policy(comment).vote? %>
<li class="comment-vote-up-link">
<%= link_to "Vote up", comment_comment_votes_path(comment_id: comment.id, score: "up"), method: :post, remote: true %>
</li>
<li class="comment-vote-down-link">
<%= link_to "Vote down", comment_comment_votes_path(comment_id: comment.id, score: "down"), method: :post, remote: true %>
</li>
<li class="comment-unvote-link">
<%= link_to "Unvote", comment_comment_votes_path(comment_id: comment.id), method: :delete, remote: true %>
</li>
<% end %>
<% if policy(comment).reportable? %>
<li><%= link_to "Report", new_moderation_report_path(moderation_report: { model_type: "Comment", model_id: comment.id }), remote: true %></li>
<% end %>
<% if has_moderation_reports? %>
<li class="moderation-report-notice">This comment has been reported! (<%= link_to pluralize(comment.moderation_reports.length, "report"), moderation_reports_path(search: { model_type: "Comment", model_id: comment.id }) %>)</li>
<% end %>
</menu>
<% if policy(comment).update? %>