jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

views: change upvote/downvote icons to arrows.

Browse Source 
Change the upvote and downvote icons for posts, comments, and BURs from
thumbs-up / thumbs-down icons to up-arrow / down-arrow icons.
This commit is contained in:
evazion
2021-01-21 05:32:42 -06:00
parent 63e3b4b447
commit f4216b323f
4 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/comment_component.rb
View File

@@ -2,7 +2,7 @@
class CommentComponent < ApplicationComponent
attr_reader :comment, :context, :dtext_data, :current_user
delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, to: :helpers
delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, to: :helpers
def initialize(comment:, current_user:, context: nil, dtext_data: nil)
@comment = comment

12
app/components/comment_component/comment_component.html.erb
View File

@@ -47,21 +47,21 @@
<% if votable? %>
<li class="comment-votes">
<% if current_user.is_anonymous? %>
<%= link_to "🡹", login_path(url: request.fullpath), class: "comment-upvote-link" %>
<%= link_to upvote_icon, 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 %>
<%= link_to upvote_icon, 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: "1"), class: "comment-upvote-link", method: :post, remote: true %>
<%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "1"), 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" %>
<%= link_to downvote_icon, 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 %>
<%= link_to downvote_icon, 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: "-1"), class: "comment-downvote-link", method: :post, remote: true %>
<%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "-1"), class: "comment-downvote-link", method: :post, remote: true %>
<% end %>
</li>
<% end %>

14
app/helpers/icon_helper.rb
View File

@@ -4,12 +4,20 @@ module IconHelper
tag.i(class: "icon #{icon_class} #{klass}", **options)
end
def upvote_icon(**options)
icon_tag("far fa-thumbs-up", **options)
def svg_icon_tag(type, path, **options)
tag.svg(class: "icon svg-icon #{type}", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", **options) do
tag.path(fill: "currentColor", d: path)
end
end
# fontawesome.com/icons/arrow-alt-up
def upvote_icon(**options)
svg_icon_tag("upvote-icon", "M272 480h-96c-13.3 0-24-10.7-24-24V256H48.2c-21.4 0-32.1-25.8-17-41L207 39c9.4-9.4 24.6-9.4 34 0l175.8 176c15.1 15.1 4.4 41-17 41H296v200c0 13.3-10.7 24-24 24z", **options)
end
# fontawesome.com/icons/arrow-alt-down
def downvote_icon(**options)
icon_tag("far fa-thumbs-down", **options)
svg_icon_tag("downvote-icon", "M176 32h96c13.3 0 24 10.7 24 24v200h103.8c21.4 0 32.1 25.8 17 41L241 473c-9.4 9.4-24.6 9.4-34 0L31.3 297c-15.1-15.1-4.4-41 17-41H152V56c0-13.3 10.7-24 24-24z", **options)
end
def sticky_icon(**options)

6
app/javascript/src/styles/base/020_base.scss
View File

@@ -179,6 +179,12 @@ ul.list-inline {
height: auto !important;
}
.svg-icon {
display: inline-block;
vertical-align: middle;
height: 1em;
}
.mobile-only {
display: none;
@media (max-width: 660px) { display: initial; }