3 files changed, 101 insertions, 5 deletions

diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee
new file mode 100644
index 00000000000..aab3179f10e
--- /dev/null
+++ b/app/assets/javascripts/awards_handler.coffee
@@ -0,0 +1,55 @@
+class @AwardsHandler
+  constructor: (@post_emoji_url, @noteable_type, @noteable_id) ->
+
+  addAward: (emoji) ->
+    @postEmoji emoji, =>
+      if @exist(emoji)
+        if @isActive(emoji)
+          @decrementCounter(emoji)
+        else
+          counter = $(".icon." + emoji).siblings(".counter")
+          counter.text(parseInt(counter.text()) + 1)
+          counter.parent().addClass("active")
+      else
+        @createEmoji(emoji)
+    
+
+  exist: (emoji) ->
+    $(".icon").hasClass(emoji)
+
+  isActive: (emoji) ->
+    $(".icon." + emoji).parent().hasClass("active")
+
+  decrementCounter: (emoji) ->
+    counter = $(".icon." + emoji).siblings(".counter")
+
+    if parseInt(counter.text()) > 1
+      counter.text(parseInt(counter.text()) - 1)
+      counter.parent().removeClass("active")
+    else
+      counter.parent().remove()
+
+
+  createEmoji: (emoji) ->
+    nodes = []
+    nodes.push("<div class='award active'>")
+    nodes.push("<div class='icon " + emoji + "'>")
+    nodes.push(@getImage(emoji))
+    nodes.push("</div>")
+    nodes.push("<div class='counter'>1")
+    nodes.push("</div></div>")
+
+    $(".awards").append(nodes.join("\n"))
+
+  getImage: (emoji) ->
+    $("li." + emoji).html()
+
+  postEmoji: (emoji, callback) ->
+    emoji = emoji.replace("emoji-", "")
+    $.post @post_emoji_url, {
+      emoji: emoji
+      noteable_type: @noteable_type
+      noteable_id: @noteable_id
+    },(data) ->
+      if data.ok
+        callback.call()
\ No newline at end of file
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index ea75c656bcc..cd27b20dd7c 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -113,13 +113,16 @@ class @Notes
   renderNote: (note) ->
     # render note if it not present in loaded list
     # or skip if rendered
-    if @isNewNote(note)
+    if @isNewNote(note) && !note.award
       @note_ids.push(note.id)
       $('ul.main-notes-list').
         append(note.html).
         syntaxHighlight()
       @initTaskList()
 
+    if note.award
+      awards_handler.addAward("emoji-" + note.note)
+
   ###
   Check if note does not exists on page
   ###
@@ -255,7 +258,6 @@ class @Notes
   ###
   addNote: (xhr, note, status) =>
     @renderNote(note)
-    @updateVotes()
 
   ###
   Called in response to the new note form being submitted
@@ -473,9 +475,6 @@ class @Notes
     form = $(e.target).closest(".js-discussion-note-form")
     @removeDiscussionNoteForm(form)
 
-  updateVotes: ->
-    true
-
   ###
   Called after an attachment file has been selected.
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index abc27a19e32..efeb2393165 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -101,3 +101,45 @@
     background-color: $background-color;
   }
 }
+
+.awards {
+  .award {
+    border: 1px solid;
+    padding: 1px 3px;
+    width: 50px;
+    border-radius: 5px;
+    float:left;
+    margin: 0 3px;
+    border-color: #ccc;
+    cursor: pointer;
+
+    &.active {
+      border-color: rgba(79,176,252,.4);
+      background-color: rgba(79,176,252,.08);
+
+      .counter {
+        font-weight: bold;
+      }
+    }
+
+    .icon {
+      float: left;
+      margin-right: 10px;
+    }
+  }
+
+  #add-award {
+    font-size: 20px;
+    border-radius: 5px;
+    float: left;
+    width: 50px;
+    font-weight: bold;
+  }
+  
+  .awards-menu{
+    li {
+      float: left;
+      margin: 3px;
+    }
+  }
+}