revert front end changes

app/assets/javascripts/awards_handler.coffee

 class @AwardsHandler
-  constructor: ->
-    @aliases = emojiAliases()
-
-    $(document)
-      .off "click", ".js-add-award"
-      .on "click", ".js-add-award", (event) =>
+  constructor: (@getEmojisUrl, @postEmojiUrl, @noteableType, @noteableId, @unicodes) ->
+    $('.js-add-award').on 'click', (event) =>
       event.stopPropagation()
       event.preventDefault()
 
-        @showEmojiMenu $(event.currentTarget)
+      @showEmojiMenu()
+
+    $('html').on 'click', (event) ->
+      if !$(event.target).closest('.emoji-menu').length
+        if $('.emoji-menu').is(':visible')
+          $('.emoji-menu').removeClass 'is-visible'
 
-    $("html").on 'click', (event) ->
-      if !$(event.target).closest(".emoji-menu").length
-        if $(".emoji-menu").is(":visible")
-          $('.js-add-award.is-active').removeClass 'is-active'
-          $(".emoji-menu").removeClass "is-visible"
+    $('.awards')
+      .off 'click'
+      .on 'click', '.js-emoji-btn', @handleClick
 
-    $(document)
-      .off "click", ".js-emoji-btn"
-      .on "click", ".js-emoji-btn", @handleClick
+    @renderFrequentlyUsedBlock()
 
-  handleClick: (e) =>
+  handleClick: (e) ->
     e.preventDefault()
-    $emojiBtn = $(e.currentTarget)
-    $addAwardBtn = $('.js-add-award.is-active')
-    $votesBlock = $($addAwardBtn.closest('.js-award-holder').data('target'))
-
-    if $addAwardBtn.length is 0
-      $votesBlock = $emojiBtn.closest('.js-awards-block')
-    else if $votesBlock.length is 0
-      $votesBlock = $addAwardBtn.closest('.js-awards-block')
-
-    $votesBlock.addClass 'js-awards-block-current'
-    awardUrl = $votesBlock.data 'award-url'
-    emoji = $emojiBtn
-      .find(".icon")
-      .data "emoji"
-    @addAward awardUrl, emoji
-
-  showEmojiMenu: ($addBtn) ->
-    $menu = $('.emoji-menu')
-
-    if $menu.length
-      $holder = $addBtn.closest('.js-award-holder')
-
-      if $menu.is ".is-visible"
-        $addBtn.removeClass "is-active"
-        $menu.removeClass "is-visible"
-        $("#emoji_search").blur()
-      else
-        $addBtn.addClass "is-active"
-        @positionMenu($menu, $addBtn)
+    emoji = $(this)
+      .find('.icon')
+      .data 'emoji'
 
-        $menu.addClass "is-visible"
-        $("#emoji_search").focus()
-    else
-      $addBtn.addClass "is-loading is-active"
-      $.get $addBtn.data('award-menu-url'), (response) =>
-        $addBtn.removeClass "is-loading"
-        $('body').append response
+    if emoji is 'thumbsup' and awardsHandler.didUserClickEmoji $(this), 'thumbsdown'
+      awardsHandler.addAward 'thumbsdown'
 
-        $menu = $(".emoji-menu")
+    else if emoji is 'thumbsdown' and awardsHandler.didUserClickEmoji $(this), 'thumbsup'
+      awardsHandler.addAward 'thumbsup'
 
-        @positionMenu($menu, $addBtn)
+    awardsHandler.addAward emoji
 
-        @renderFrequentlyUsedBlock()
+    $(this).trigger 'blur'
+
+  didUserClickEmoji: (that, emoji) ->
+    if $(that).siblings("button:has([data-emoji=#{emoji}])").attr('data-original-title')
+      $(that).siblings("button:has([data-emoji=#{emoji}])").attr('data-original-title').indexOf('me') > -1
 
+  showEmojiMenu: ->
+    if $('.emoji-menu').length
+      if $('.emoji-menu').is '.is-visible'
+        $('.emoji-menu').removeClass 'is-visible'
+        $('#emoji_search').blur()
+      else
+        $('.emoji-menu').addClass 'is-visible'
+        $('#emoji_search').focus()
+    else
+      $('.js-add-award').addClass 'is-loading'
+      $.get @getEmojisUrl, (response) =>
+        $('.js-add-award').removeClass 'is-loading'
+        $('.js-award-holder').append response
         setTimeout =>
-          $menu.addClass "is-visible"
-          $("#emoji_search").focus()
+          $('.emoji-menu').addClass 'is-visible'
+          $('#emoji_search').focus()
           @setupSearch()
         , 200
 
-  positionMenu: ($menu, $addBtn) ->
-    position = $addBtn.data('position')
-
-    # The menu could potentially be off-screen or in a hidden overflow element
-    # So we position the element absolute in the body
-    css =
-      top: "#{$addBtn.offset().top + $addBtn.outerHeight()}px"
-
-    if position? and position is 'right'
-      css.left = "#{($addBtn.offset().left - $menu.outerWidth()) + 20}px"
-      $menu.addClass "is-aligned-right"
-    else
-      css.left = "#{$addBtn.offset().left}px"
-      $menu.removeClass "is-aligned-right"
-
-    $menu.css(css)
-
-  addAward: (awardUrl, emoji) ->
-    emoji = @normalizeEmojiName(emoji)
-    @postEmoji awardUrl, emoji, =>
+  addAward: (emoji) ->
+    @postEmoji emoji, =>
       @addAwardToEmojiBar(emoji)
 
-      $('.js-awards-block-current').removeClass 'js-awards-block-current'
-
-    $(".emoji-menu").removeClass "is-visible"
+    $('.emoji-menu').removeClass 'is-visible'
 
   addAwardToEmojiBar: (emoji) ->
     @addEmojiToFrequentlyUsedList(emoji)
 
-    emoji = @normalizeEmojiName(emoji)
-    $emojiBtn = @findEmojiIcon(emoji).parent()
-
-    if $emojiBtn.length > 0
-      if @isActive($emojiBtn)
-        @decrementCounter($emojiBtn, emoji)
+    if @exist(emoji)
+      if @isActive(emoji)
+        @decrementCounter(emoji)
       else
-        $counter = $emojiBtn.find('.js-counter')
-        $counter.text(parseInt($counter.text()) + 1)
-        $emojiBtn.addClass("active")
-        @addMeToUserList(emoji)
+        counter = @findEmojiIcon(emoji).siblings('.js-counter')
+        counter.text(parseInt(counter.text()) + 1)
+        counter.parent().addClass('active')
+        @addMeToAuthorList(emoji)
     else
       @createEmoji(emoji)
 
-  isActive: ($emojiBtn) ->
-    $emojiBtn.hasClass("active")
-
-  decrementCounter: ($emojiBtn, emoji) ->
-    $awardsBlock = $emojiBtn.closest('.js-awards-block')
-    isntNoteBody = $emojiBtn.closest('.note-body').length is 0
-    counter = $('.js-counter', $emojiBtn)
-    counterNumber = parseInt(counter.text())
-
-    if counterNumber > 1
-      counter.text(counterNumber - 1)
-      @removeMeFromUserList($emojiBtn, emoji)
-    else if (emoji == "thumbsup" || emoji == "thumbsdown") && isntNoteBody
-      $emojiBtn.tooltip("destroy")
-      counter.text('0')
-      @removeMeFromUserList($emojiBtn, emoji)
+  exist: (emoji) ->
+    @findEmojiIcon(emoji).length > 0
+
+  isActive: (emoji) ->
+    @findEmojiIcon(emoji).parent().hasClass('active')
+
+  decrementCounter: (emoji) ->
+    counter = @findEmojiIcon(emoji).siblings('.js-counter')
+    emojiIcon = counter.parent()
+    if parseInt(counter.text()) > 1
+      counter.text(parseInt(counter.text()) - 1)
+      emojiIcon.removeClass('active')
+      @removeMeFromAuthorList(emoji)
+    else if emoji == 'thumbsup' || emoji == 'thumbsdown'
+      emojiIcon.tooltip('destroy')
+      counter.text(0)
+      emojiIcon.removeClass('active')
+      @removeMeFromAuthorList(emoji)
     else
-      $emojiBtn.tooltip("destroy")
-      $emojiBtn.remove()
-
-    $emojiBtn.removeClass("active")
-
-    if !isntNoteBody and $awardsBlock.children('.js-emoji-btn').length is 0
-      # If this is a note body, we just hide the award emoji row like the initial state
-      $awardsBlock.addClass 'hidden'
-
-  removeMeFromUserList: ($emojiBtn, emoji) ->
-    award_block = $emojiBtn
-    authors = award_block
-      .attr("data-original-title")
-      .split(", ")
-    authors.splice(authors.indexOf("me"),1)
-    award_block
-      .closest(".js-emoji-btn")
-      .attr("data-original-title", authors.join(", "))
-    @resetTooltip(award_block)
-
-  addMeToUserList: (emoji) ->
-    award_block = @findEmojiIcon(emoji).parent()
-    origTitle = award_block.attr("data-original-title").trim()
-    users = []
+      emojiIcon.tooltip('destroy')
+      emojiIcon.remove()
+
+  removeMeFromAuthorList: (emoji) ->
+    awardBlock = @findEmojiIcon(emoji).parent()
+    authors = awardBlock
+      .attr('data-original-title')
+      .split(', ')
+    authors.splice(authors.indexOf('me'),1)
+    awardBlock
+      .closest('.js-emoji-btn')
+      .attr('data-original-title', authors.join(', '))
+    @resetTooltip(awardBlock)
+
+  addMeToAuthorList: (emoji) ->
+    awardBlock = @findEmojiIcon(emoji).parent()
+    origTitle = awardBlock.attr('data-original-title').trim()
+    authors = []
     if origTitle
-      users = origTitle.split(', ')
-    users.push("me")
-    award_block.attr("title", users.join(", "))
-    @resetTooltip(award_block)
+      authors = origTitle.split(', ')
+    authors.push('me')
+    awardBlock.attr('data-original-title', authors.join(', '))
+    @resetTooltip(awardBlock)
 
   resetTooltip: (award) ->
-    award.tooltip("destroy")
+    award.tooltip('destroy')
 
     # "destroy" call is asynchronous and there is no appropriate callback on it, this is why we need to set timeout.
     setTimeout (->
@@ -174,84 +131,85 @@ class @AwardsHandler
   createEmoji: (emoji) ->
     emojiCssClass = @resolveNameToCssClass(emoji)
 
-    buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='me' data-placement='bottom'>
-      <div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>
-      <span class='award-control-text js-counter'>1</span>
-    </button>"
-
-    emoji_node = $(buttonHtml)
-      .insertBefore(".js-awards-block-current .js-award-holder:not(.js-award-action-btn)")
-      .find(".emoji-icon")
-      .data("emoji", emoji)
+    nodes = []
+    nodes.push(
+      "<button class='btn award-control js-emoji-btn has-tooltip active' data-original-title='me'>",
+      "<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>",
+      "<span class='award-control-text js-counter'>1</span>",
+      "</button>"
+    )
+
+    $(nodes.join("\n"))
+      .insertBefore('.js-award-holder')
+      .find('.emoji-icon')
+      .data('emoji', emoji)
     $('.award-control').tooltip()
 
-    $currentBlock = $('.js-awards-block-current')
-    if $currentBlock.is('.hidden')
-      $currentBlock.removeClass 'hidden'
-
   resolveNameToCssClass: (emoji) ->
-    emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']")
+    emojiIcon = $(".emoji-menu-content [data-emoji='#{emoji}']")
 
-    if emoji_icon.length > 0
-      unicodeName = emoji_icon.data("unicode-name")
+    if emojiIcon.length > 0
+      unicodeName = emojiIcon.data('unicode-name')
     else
       # Find by alias
-      unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data("unicode-name")
+      unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data('unicode-name')
 
     "emoji-#{unicodeName}"
 
-  postEmoji: (awardUrl, emoji, callback) ->
-    $.post awardUrl, { name: emoji }, (data) ->
+  postEmoji: (emoji, callback) ->
+    $.post @postEmojiUrl, { note: {
+      note: ":#{emoji}:"
+      noteable_type: @noteableType
+      noteable_id: @noteableId
+    }},(data) ->
       if data.ok
         callback.call()
 
   findEmojiIcon: (emoji) ->
-    $(".js-awards-block-current.awards > .js-emoji-btn [data-emoji='#{emoji}']")
+    $(".awards > .js-emoji-btn [data-emoji='#{emoji}']")
 
   scrollToAwards: ->
     $('body, html').animate({
       scrollTop: $('.awards').offset().top - 80
     }, 200)
 
-  normalizeEmojiName: (emoji) ->
-    @aliases[emoji] || emoji
-
   addEmojiToFrequentlyUsedList: (emoji) ->
-    frequently_used_emojis = @getFrequentlyUsedEmojis()
-    frequently_used_emojis.push(emoji)
-    $.cookie('frequently_used_emojis', frequently_used_emojis.join(","), { expires: 365 })
+    frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
+    frequentlyUsedEmojis.push(emoji)
+    $.cookie('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 })
 
   getFrequentlyUsedEmojis: ->
-    frequently_used_emojis = ($.cookie('frequently_used_emojis') || "").split(",")
-    _.compact(_.uniq(frequently_used_emojis))
+    frequentlyUsedEmojis = ($.cookie('frequently_used_emojis') || '').split(',')
+    _.compact(_.uniq(frequentlyUsedEmojis))
 
   renderFrequentlyUsedBlock: ->
     if $.cookie('frequently_used_emojis')
-      frequently_used_emojis = @getFrequentlyUsedEmojis()
+      frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
 
-      ul = $("<ul class='clearfix emoji-menu-list'>")
+      ul = $('<ul>')
 
-      for emoji in frequently_used_emojis
-        $(".emoji-menu-content [data-emoji='#{emoji}']").closest("li").clone().appendTo(ul)
+      for emoji in frequentlyUsedEmojis
+        do (emoji) ->
+          $(".emoji-menu-content [data-emoji='#{emoji}']").closest('li').clone().appendTo(ul)
 
-      $("input.emoji-search").after(ul).after($("<h5>").text("Frequently used"))
+      $('input.emoji-search').after(ul).after($('<h5>').text('Frequently used'))
 
   setupSearch: ->
-    $("input.emoji-search").on 'keyup', (ev) =>
+    $('input.emoji-search').keyup (ev) =>
       term = $(ev.target).val()
 
       # Clean previous search results
-      $("ul.emoji-menu-search, h5.emoji-search").remove()
+      $('ul.emoji-menu-search, h5.emoji-search').remove()
 
       if term
         # Generate a search result block
-        h5 = $("<h5>").text("Search results").addClass("emoji-search")
-        found_emojis = @searchEmojis(term).show()
-        ul = $("<ul>").addClass("emoji-menu-list emoji-menu-search").append(found_emojis)
-        $(".emoji-menu-content ul, .emoji-menu-content h5").hide()
-        $(".emoji-menu-content").append(h5).append(ul)
+        h5 = $('<h5>').text('Search results').addClass('emoji-search')
+        foundEmojis = @searchEmojis(term).show()
+        ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(foundEmojis)
+        $('.emoji-menu-content ul, .emoji-menu-content h5').hide()
+        $('.emoji-menu-content').append(h5).append(ul)
       else
-        $(".emoji-menu-content").children().show()
+        $('.emoji-menu-content').children().show()
 
   searchEmojis: (term)->
     $(".emoji-menu-content [data-emoji*='#{term}']").closest("li").clone()

app/assets/javascripts/dispatcher.js.coffee

@@ -23,7 +23,6 @@ class Dispatcher
         new Issue()
         shortcut_handler = new ShortcutsIssuable()
         new ZenMode()
-        awards_handler = new AwardsHandler()
       when 'projects:milestones:show', 'groups:milestones:show', 'dashboard:milestones:show'
         new Milestone()
       when 'dashboard:todos:index'
@@ -54,7 +53,6 @@ class Dispatcher
         new Diff()
         shortcut_handler = new ShortcutsIssuable(true)
         new ZenMode()
-        awards_handler = new AwardsHandler()
       when "projects:merge_requests:diffs"
         new Diff()
         new ZenMode()

app/assets/javascripts/lib/emoji_aliases.js.coffee.erb

-((w) ->
-
-  w.gl ?= {}
-  w.gl.emoji ?= {}
-
-  w.gl.emoji.emojiAliases = ->
-    JSON.parse('<%= Gitlab::AwardEmoji.aliases.to_json %>')
-
-) window
\ No newline at end of file

app/assets/javascripts/notes.js.coffee

@@ -162,13 +162,13 @@ class @Notes
   renderNote: (note) ->
     unless note.valid
       if note.award
-        flash = new Flash('You have already awarded this emoji, it has been removed', 'alert')
+        flash = new Flash('You have already used this award emoji!', 'alert')
         flash.pinTo('.header-content')
       return
 
     if note.award
-      awards_handler.addAwardToEmojiBar(note.name)
-      awards_handler.scrollToAwards()
+      awardsHandler.addAwardToEmojiBar(note.note)
+      awardsHandler.scrollToAwards()
 
     # render note if it not present in loaded list
     # or skip if rendered

app/assets/stylesheets/pages/awards.scss

 .awards {
+  line-height: 34px;
+
   .emoji-icon {
     width: 20px;
     height: 20px;
@@ -7,6 +9,8 @@
 
 .emoji-menu {
   position: absolute;
+  top: 100%;
+  left: 0;
   margin-top: 3px;
   z-index: 1000;
   min-width: 160px;
@@ -19,12 +23,7 @@
   opacity: 0;
   transform: scale(.2);
   transform-origin: 0 -45px;
-  transition: .3s cubic-bezier(.87,-.41,.19,1.44);
-  transition-property: transform, opacity;
-
-  &.is-aligned-right {
-    transform-origin: 100% -45px;
-  }
+  transition: all .3s cubic-bezier(.87,-.41,.19,1.44);
 
   &.is-visible {
     pointer-events: all;
@@ -108,7 +107,7 @@
   }
 
   &.is-loading {
-    .award-control-icon-normal {
+    .award-control-icon {
       display: none;
     }
 

app/assets/stylesheets/pages/notes.scss

@@ -63,8 +63,7 @@ ul.notes {
     &.is-editting {
       .note-header,
       .note-text,
-      .edited-text,
-      .note-awards {
+      .edited-text {
         display: none;
       }
 
@@ -74,6 +73,8 @@ ul.notes {
     }
 
     .note-body {
+      overflow: auto;
+
       .note-text {
         overflow: auto;
         word-wrap: break-word;
@@ -323,42 +324,6 @@ ul.notes {
   }
 }
 
-.note-award-control {
-  display: block;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-  }
-
-  .award-control-icon-loading {
-    display: none;
-  }
-
-  &.is-loading {
-    .award-control-icon-normal {
-      display: none;
-    }
-
-    .award-control-icon-loading {
-      display: block;
-    }
- }
-}
-
-.note-awards {
-  .awards {
-    padding-top: 10px;
-  }
-
-  .award-control {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    color: #8f8f8f;
-    font-size: 13px;
-  }
-}
-
 .disabled-comment {
   margin-left: -$gl-padding-top;
   margin-right: -$gl-padding-top;