Like with emoji

app/controllers/comment_controller.rb

@@ -181,15 +181,17 @@ def make_answer
   def like_comment
     @comment_id = params["comment_id"].to_i
     @user_id = params["user_id"].to_i
+    @emoji_type = params["emoji_type"]
     comment = Comment.where(cid: @comment_id).first
-    like = comment.likes.where(user_id: @user_id)
+    like = comment.likes.where(user_id: @user_id, emoji_type: @emoji_type)
     @is_liked = like.count.positive?
     if like.count.positive?
       like.first.destroy
     else
-      comment.likes.create(user_id: @user_id)
+      comment.likes.create(user_id: @user_id, emoji_type: @emoji_type)
     end
 
+    @likes = comment.likes.group(:emoji_type).count
     respond_with do |format|
       format.js {
        render template: 'comment/like_comment'

app/helpers/application_helper.rb

@@ -39,6 +39,20 @@ def emoji_names_list
     { emojis: emojis, image_map: image_map }
   end
 
+  def emoji_info
+    emoji_names = ["thumbs-up", "thumbs-down", "laugh",
+                   "hooray", "confused", "heart"]
+    emoji_image_map = {
+      "thumbs-up" => "https://assets-cdn.github.com/images/icons/emoji/unicode/1f44d.png",
+      "thumbs-down" => "https://assets-cdn.github.com/images/icons/emoji/unicode/1f44e.png",
+      "laugh" => "https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png",
+      "hooray" => "https://assets-cdn.github.com/images/icons/emoji/unicode/1f389.png",
+      "confused" => "https://assets-cdn.github.com/images/icons/emoji/unicode/1f615.png",
+      "heart" => "https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png"
+    }
+    [emoji_names, emoji_image_map]
+  end
+
   def feature(title)
     features = Node.where(type: 'feature', title: title)
     if !features.empty?

app/models/comment.rb

@@ -200,6 +200,10 @@ def likers
     User.where(id: likes.pluck(:user_id))
   end
 
+  def emoji_likes
+    likes.group(:emoji_type).count
+  end
+
   def self.receive_mail(message)
     node_id = message.subject[/#([\d]+)/, 1] #This took out the node ID from the subject line
     unless node_id.nil?

app/views/comment/like_comment.js.erb

@@ -1,14 +1,12 @@
-<% comment_star = "#comment-like-star-#{@comment_id}-#{@user_id}" %>
-<% comment_count = "#comment-like-count-#{@comment_id}-#{@user_id}" %>
-
-<% if @is_liked %>
-	$("<%= comment_star %>").removeClass("fa fa-star").addClass("fa fa-star-o");
-	oldValue = parseInt($("<%= comment_count %>").html());
-	newValue = oldValue-1;
-	$("<%= comment_count %>").html(newValue);
-<% else %>
-	$("<%= comment_star %>").removeClass("fa fa-star-o").addClass("fa fa-star");
-	oldValue = parseInt($("<%= comment_count %>").html());
-	newValue = oldValue+1;
-	$("<%= comment_count %>").html(newValue);	
-<% end %>
+<% str="##{@comment_id}-like-emojis button" %>
+<% emoji_names = ["thumbs-up", "thumbs-down", "laugh",
+                   "hooray", "confused", "heart"] %>
+$("<%= str %>").css("display","none");
+<% emoji_names.each do |e| %>
+  <% str="##{@comment_id}-emoji-button-#{e}" %>
+  <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
+  <% if @likes.has_key? capitalized_emoji_name %>
+    $("<%= str %>").css("display","flex");
+    $("<%= str %> div").first().html("<%= @likes[capitalized_emoji_name] %>");
+  <% end %>
+<% end %>

app/views/notes/_comment.html.erb

@@ -1,6 +1,6 @@
-<div id="c<%= comment.cid %>" class="comment">
+<div id="c<%= comment.cid %>" class="comment" style="margin-top: 38px;padding-bottom: 9px;">
 
-  <div class="navbar navbar-default">
+  <div style="margin-bottom: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom: 0;" class="navbar navbar-default">
 
     <div class="navbar-text pull-left visible-xs">&nbsp;&nbsp;</div>
 
@@ -34,24 +34,6 @@
       -->
       <% end %>
 
-        <ul class="btn-group" style="margin-top: 10px;">
-          <% if !current_user %>
-              <li rel="tooltip" title="Helpful? Like it and get updates!" class="btn btn-default btn-sm btn-like">
-                <%= link_to  new_user_session_path( return_to: request.path ), style: "text-decoration: none; color: black;" do %>
-                    <span class="fa fa-star-o"></span>
-                    <span><%= comment.likers.count %></span>
-                <% end %>
-          <% else %>
-              <% str = "/comment/like?comment_id=#{comment.cid}&user_id=#{current_user.uid}" %>
-              <li rel="tooltip" title="Helpful? Like it and get updates!" class="btn btn-default btn-sm btn-like">
-                <%= link_to str, data: { method: "post", remote: true }, style: "text-decoration: none; color: black;" do %>
-                    <span id="comment-like-star-<%= comment.cid %>-<%= current_user.uid %>" class="fa fa-star<% if !comment.liked_by(current_user.uid) %>-o<% end %>"></span>
-                    <span id="comment-like-count-<%= comment.cid %>-<%= current_user.uid %>"><%= comment.likers.count %></span>
-                <% end %>
-          <% end %>
-          </li>
-        </ul>
-
       <% if current_user && comment.uid == current_user.uid %>
         <a class="btn btn-default btn-sm" href="javascript:void(0)" onClick="$('#c<%= comment.cid %>edit').toggle();$('#c<%= comment.cid %>show').toggle();setInit(<%= comment.cid %>);">
           <i class="fa fa-pencil"></i>
@@ -68,6 +50,24 @@
           <i class='icon fa fa-trash'></i>
         </a>
       <% end %>
+      <% if current_user %>
+          <button style="background: white;border: 1px solid #ccc;padding: 4px 6px;" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class='icon fa fa-smile-o'></i>
+            <sup style="font-size: 12px;">+</sup>
+          </button>
+          <ul id="emoji-dropdown" style="background: #f8f8f8" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <% emoji_names, emoji_image_map = emoji_info %>
+            <% emoji_names.each do |e| %>
+              <li class="grow">
+                <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
+                <% str = "/comment/like?comment_id=#{comment.cid}&user_id=#{current_user.uid}&emoji_type=#{capitalized_emoji_name}" %>
+                <%= link_to str, data: { method: "post", remote: true }, style: "padding: 0;" do %>
+                  <img class="emoji" height="20" width="20" src="<%= emoji_image_map[e] %>">
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
+      <% end %>
     </div>
 
   </div>
@@ -87,7 +87,7 @@
     })
   </script>
 
-  <div id="c<%= comment.cid %>show">
+  <div style="border: 1px solid #e7e7e7;padding: 18px;" id="c<%= comment.cid %>show">
     <p class="comment-body" id="comment-body-<%= comment.cid %>"><%= raw render_comment_body(comment) %></p>
     <% if comment.body.include?('?') %>
       <p class="alert alert-info">Is this a question? <a href="/questions/new?title=<%= comment.body %>">Click here</a> to post it to the <a href="/questions">Questions page</a>.
@@ -97,10 +97,48 @@
       <div class="alert alert-info">Have you attempted or completed this activity? Consider <a href="/post?n=15798&tags=replication:<%= comment.nid %>,<%= comment.parent.tagnames.join(',') %>">sharing how it went</a> to help refine and improve it.</div>
     <% end %>
   </div>
+  <% str = "#{comment.id}-like-emojis" %>
+  <div id=<%= str %> class="navbar-text navbar-right pull-right" style="margin: 0;width: 100%;display: flex;border: 1px solid #e7e7e7;border-top: 0;">
+    <% emoji_names, emoji_image_map = emoji_info %>
+    <% emoji_like_map = comment.emoji_likes %>
+    <% emoji_names.each do |e| %>
+      <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
+      <% str = "#{comment.id}-emoji-button-#{e}" %>
+      <% display = (emoji_like_map.has_key? capitalized_emoji_name) ? "display: flex;" : "display: none;" %>
+      <button id="<%= str %>" style="border: 0;background: #f1f8ff;border-radius: 0;border-right: 1px solid #e7e7e7;<%= display %>" type="button" class="btn btn-default btn-sm">
+        <img height="20" width="20" src="<%= emoji_image_map[e] %>">
+        <div style="margin-left: 6px;font-size: 14px;"><%= emoji_like_map[capitalized_emoji_name] %></div>
+      </button>
+    <% end %>
+  </div>
 
   <% if current_user %>
      <%=  render :partial => "comments/edit", :locals => { title: I18n.t('notes._comment.edit_comment'), comment: comment, placeholder: I18n.t('notes._comment.edit_placeholder') } %>
   <% end %>
   <br />
 
 </div>
+
+<style>
+  .open>#emoji-dropdown.dropdown-menu {
+    display: flex;
+    justify-content: space-around;
+    padding: 6px;
+  }
+
+  #emoji-dropdown .dropdown-menu {
+    min-width: 196px;
+  }
+
+  .grow {
+    transition: all .1s ease-in-out;
+  }
+
+  .grow:hover {
+    transform: scale(1.2);
+  }
+
+  .grow:active {
+    transform: scale(1);
+  }
+</style>

app/views/notes/_comments.html.erb

@@ -4,7 +4,7 @@
 
     <h3><span id="comment-count"><%= @node.comments.length %></span> <%= t('notes._comments.comments') %></h3>
 
-    <div id="comments-container">
+    <div style="margin-bottom: 50px;" id="comments-container">
       <% @node.comments.order('timestamp ASC').each do |comment| %>
         <% if comment.cid == @node.comments.first.cid %><a id="last" name="last"></a><% end %>
 

db/migrate/20180618184048_add_emoji_type_to_like.rb

@@ -0,0 +1,5 @@
+class AddEmojiTypeToLike < ActiveRecord::Migration[5.0]
+  def change
+  	add_column :likes, :emoji_type, :string
+  end
+end

db/schema.rb.example

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20180605010014) do
+ActiveRecord::Schema.define(version: 20180618184048) do
 
   create_table "answer_selections", force: true do |t|
     t.integer "user_id"
@@ -207,6 +207,7 @@ ActiveRecord::Schema.define(version: 20180605010014) do
     t.string   "likeable_type"
     t.datetime "created_at"
     t.datetime "updated_at"
+    t.string   "emoji_type"
   end
 
   create_table "node", primary_key: "nid", force: true do |t|