Merge branch 'notes-are-awardables' into 'master'

Notes are awardables

## What does this MR do?

Makes sure we can :thunder_cloud_rain: comments/notes.

## What are the relevant issue numbers?
Follows up upon !2901, depends on !3785

Closes #3655 

## Screenshots (if relevant)
TODO



See merge request !4291

13 files changed, 230 insertions, 123 deletions

diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee
index 766c653111a..efa8f6cd010 100644
--- a/app/assets/javascripts/awards_handler.coffee
+++ b/app/assets/javascripts/awards_handler.coffee
@@ -2,39 +2,47 @@ class @AwardsHandler
 
   constructor: ->
 
-    @aliases = emojiAliases()
+    @aliases = gl.emojiAliases()
 
     $(document)
       .off 'click', '.js-add-award'
-      .on  'click', '.js-add-award', (event) =>
-        event.stopPropagation()
-        event.preventDefault()
+      .on  'click', '.js-add-award', (e) =>
+        e.stopPropagation()
+        e.preventDefault()
 
-        @showEmojiMenu $(event.currentTarget)
+        @showEmojiMenu $(e.currentTarget)
 
-    $('html').on 'click', (event) ->
-      unless $(event.target).closest('.emoji-menu').length
+    $('html').on 'click', (e) ->
+      $target = $ e.target
+
+      unless $target.closest('.emoji-menu-content').length
+        $('.js-awards-block.current').removeClass 'current'
+
+      unless $target.closest('.emoji-menu').length
         if $('.emoji-menu').is(':visible')
           $('.js-add-award.is-active').removeClass 'is-active'
           $('.emoji-menu').removeClass 'is-visible'
 
     $(document)
       .off 'click', '.js-emoji-btn'
-      .on  'click', '.js-emoji-btn', @handleClick
-
+      .on  'click', '.js-emoji-btn', (e) =>
+        e.preventDefault()
 
-  handleClick: (e) =>
+        $target = $ e.currentTarget
+        emoji   = $target.find('.icon').data 'emoji'
 
-    e.preventDefault()
-
-    emoji = $(e.currentTarget).find('.icon').data 'emoji'
-    @getVotesBlock().addClass 'js-awards-block'
-    @addAward @getAwardUrl(), emoji
+        $target.closest('.js-awards-block').addClass 'current'
+        @addAward @getVotesBlock(), @getAwardUrl(), emoji
 
 
   showEmojiMenu: ($addBtn) ->
 
-    $menu = $('.emoji-menu')
+    $menu = $ '.emoji-menu'
+
+    if $addBtn.hasClass 'js-note-emoji'
+      $addBtn.parents('.note').find('.js-awards-block').addClass 'current'
+    else
+      $addBtn.closest('.js-awards-block').addClass 'current'
 
     if $menu.length
       $holder = $addBtn.closest('.js-award-holder')
@@ -51,7 +59,7 @@ class @AwardsHandler
         $('#emoji_search').focus()
     else
       $addBtn.addClass 'is-loading is-active'
-      url = $addBtn.data 'award-menu-url'
+      url = @getAwardMenuUrl()
 
       @createEmojiMenu url, =>
         $addBtn.removeClass 'is-loading'
@@ -68,12 +76,13 @@ class @AwardsHandler
 
   createEmojiMenu: (awardMenuUrl, callback) ->
 
-    $.get awardMenuUrl, (response) =>
+    $.get awardMenuUrl, (response) ->
       $('body').append response
       callback()
 
 
   positionMenu: ($menu, $addBtn) ->
+
     position = $addBtn.data('position')
 
     # The menu could potentially be off-screen or in a hidden overflow element
@@ -91,88 +100,114 @@ class @AwardsHandler
     $menu.css(css)
 
 
-  addAward: (awardUrl, emoji, checkMutuality = yes) ->
+  addAward: (votesBlock, awardUrl, emoji, checkMutuality = yes, callback) ->
 
-    emoji = @normilizeEmojiName(emoji)
-    @postEmoji awardUrl, emoji, =>
-      @addAwardToEmojiBar(emoji, checkMutuality)
+    emoji = @normilizeEmojiName emoji
 
-      $('.js-awards-block-current').removeClass 'js-awards-block-current'
+    @postEmoji awardUrl, emoji, =>
+      @addAwardToEmojiBar votesBlock, emoji, checkMutuality
+      callback?()
 
     $('.emoji-menu').removeClass 'is-visible'
 
 
-  addAwardToEmojiBar: (emoji, checkForMutuality = yes) ->
+  addAwardToEmojiBar: (votesBlock, emoji, checkForMutuality = yes) ->
 
-    @checkMutuality emoji  if checkForMutuality
-    @addEmojiToFrequentlyUsedList(emoji)
+    @checkMutuality votesBlock, emoji  if checkForMutuality
+    @addEmojiToFrequentlyUsedList emoji
 
-    emoji = @normilizeEmojiName(emoji)
-    $emojiBtn = @findEmojiIcon(emoji).parent()
+    emoji        = @normilizeEmojiName emoji
+    $emojiButton = @findEmojiIcon(votesBlock, emoji).parent()
 
-    if $emojiBtn.length > 0
-      if @isActive($emojiBtn)
-        @decrementCounter($emojiBtn, emoji)
+    if $emojiButton.length > 0
+      if @isActive $emojiButton
+        @decrementCounter $emojiButton, emoji
       else
-        counter = $emojiBtn.find('.js-counter')
-        counter.text(parseInt(counter.text()) + 1)
-        $emojiBtn.addClass('active')
-        @addMeToUserList(emoji)
+        counter = $emojiButton.find '.js-counter'
+        counter.text parseInt(counter.text()) + 1
+        $emojiButton.addClass 'active'
+        @addMeToUserList votesBlock, emoji
+        @animateEmoji $emojiButton
     else
-      @createEmoji(emoji)
+      votesBlock.removeClass 'hidden'
+      @createEmoji votesBlock, emoji
 
 
-  getVotesBlock: -> return $ '.awards.js-awards-block'
+  getVotesBlock: ->
 
+    currentBlock = $ '.js-awards-block.current'
+    return if currentBlock.length then currentBlock else $('.js-awards-block').eq 0
 
-  getAwardUrl: -> @getVotesBlock().data 'award-url'
 
+  getAwardUrl: -> return @getVotesBlock().data 'award-url'
 
-  checkMutuality: (emoji) ->
+
+  checkMutuality: (votesBlock, emoji) ->
 
     awardUrl = @getAwardUrl()
 
     if emoji in [ 'thumbsup', 'thumbsdown' ]
-      mutualVote = if emoji is 'thumbsup' then 'thumbsdown' else 'thumbsup'
+      mutualVote     = if emoji is 'thumbsup' then 'thumbsdown' else 'thumbsup'
+      $emojiButton   = votesBlock.find("[data-emoji=#{mutualVote}]").parent()
+      isAlreadyVoted = $emojiButton.hasClass 'active'
+
+      if isAlreadyVoted
+        @showEmojiLoader $emojiButton
+        @addAward votesBlock, awardUrl, mutualVote, no, ->
+          $emojiButton.removeClass 'is-loading'
 
-      isAlreadyVoted = $("[data-emoji=#{mutualVote}]").parent().hasClass 'active'
-      @addAward awardUrl, mutualVote, no if isAlreadyVoted
 
+  showEmojiLoader: ($emojiButton) ->
 
-  isActive: ($emojiBtn) -> $emojiBtn.hasClass 'active'
+    $loader = $emojiButton.find '.fa-spinner'
 
+    unless $loader.length
+      $emojiButton.append '<i class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"></i>'
 
-  decrementCounter: ($emojiBtn, emoji) ->
-    isntNoteBody = $emojiBtn.closest('.note-body').length is 0
-    counter = $('.js-counter', $emojiBtn)
-    counterNumber = parseInt(counter.text())
+    $emojiButton.addClass 'is-loading'
 
-    if !isntNoteBody
-      # If this is a note body, we just hide the award emoji row like the initial state
-      $emojiBtn.closest('.js-awards-block').addClass 'hidden'
+
+  isActive: ($emojiButton) -> $emojiButton.hasClass 'active'
+
+
+  decrementCounter: ($emojiButton, emoji) ->
+
+    counter       = $ '.js-counter', $emojiButton
+    counterNumber = parseInt counter.text(), 10
 
     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)
+      counter.text counterNumber - 1
+      @removeMeFromUserList $emojiButton, emoji
+    else if emoji is 'thumbsup' or emoji is 'thumbsdown'
+      $emojiButton.tooltip 'destroy'
+      counter.text '0'
+      @removeMeFromUserList $emojiButton, emoji
+      @removeEmoji $emojiButton if $emojiButton.parents('.note').length
     else
-      $emojiBtn.tooltip('destroy')
-      $emojiBtn.remove()
+      @removeEmoji $emojiButton
+
+    $emojiButton.removeClass 'active'
 
-    $emojiBtn.removeClass('active')
+
+  removeEmoji: ($emojiButton) ->
+
+    $emojiButton.tooltip('destroy')
+    $emojiButton.remove()
+
+    $votesBlock = @getVotesBlock()
+
+    if $votesBlock.find('.js-emoji-btn').length is 0
+      $votesBlock.addClass 'hidden'
 
 
   getAwardTooltip: ($awardBlock) ->
 
-    return $awardBlock.attr('data-original-title') or $awardBlock.attr('data-title')
+    return $awardBlock.attr('data-original-title') or $awardBlock.attr('data-title') or ''
 
 
-  removeMeFromUserList: ($emojiBtn, emoji) ->
+  removeMeFromUserList: ($emojiButton, emoji) ->
 
-    awardBlock    = $emojiBtn
+    awardBlock    = $emojiButton
     originalTitle = @getAwardTooltip awardBlock
 
     authors = originalTitle.split ', '
@@ -183,117 +218,134 @@ class @AwardsHandler
     awardBlock
       .closest '.js-emoji-btn'
       .removeData 'original-title'
-      .removeData 'title'
       .attr 'data-original-title', newAuthors
-      .attr 'data-title', newAuthors
 
-    @resetTooltip(awardBlock)
+    @resetTooltip awardBlock
 
 
-  addMeToUserList: (emoji) ->
+  addMeToUserList: (votesBlock, emoji) ->
 
-    awardBlock = @findEmojiIcon(emoji).parent()
+    awardBlock = @findEmojiIcon(votesBlock, emoji).parent()
     origTitle  = @getAwardTooltip awardBlock
     users      = []
 
     if origTitle
-      users = origTitle.trim().split(', ')
+      users = origTitle.trim().split ', '
 
-    users.push('me')
-    awardBlock.attr('title', users.join(', '))
+    users.push 'me'
+    awardBlock.attr 'title', users.join ', '
 
-    @resetTooltip(awardBlock)
+    @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 (->
-      award.tooltip()
-    ), 200
+    cb = -> award.tooltip()
+    setTimeout cb, 200
 
 
-  createEmoji_: (emoji) ->
+  createEmoji_: (votesBlock, emoji) ->
 
     emojiCssClass = @resolveNameToCssClass emoji
-
-    buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='me' data-placement='bottom'>
+    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 .js-award-holder:not(.js-award-action-btn)'
+    $emojiButton = $ buttonHtml
+    $emojiButton
+      .insertBefore votesBlock.find '.js-award-holder'
       .find '.emoji-icon'
       .data 'emoji', emoji
 
+    @animateEmoji $emojiButton
     $('.award-control').tooltip()
+    votesBlock.removeClass 'current'
+
+
+  animateEmoji: ($emoji) ->
 
-    $currentBlock = $ '.js-awards-block'
+    className = 'pulse animated'
 
-    if $currentBlock.is '.hidden'
-      $currentBlock.removeClass 'hidden'
+    $emoji.addClass className
+    setTimeout (-> $emoji.removeClass className), 321
 
 
-  createEmoji: (emoji) ->
+  createEmoji: (votesBlock, emoji) ->
 
-    return @createEmoji_ emoji if $('.emoji-menu').length
+    if $('.emoji-menu').length
+      return @createEmoji_ votesBlock, emoji
 
-    awardMenuUrl = gl.awardMenuUrl or '/emojis'
-    @createEmojiMenu awardMenuUrl, => @createEmoji emoji
+    @createEmojiMenu @getAwardMenuUrl(), => @createEmoji_ votesBlock, emoji
+
+
+  getAwardMenuUrl: -> return gl.awardMenuUrl
 
 
   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'
 
     return "emoji-#{unicodeName}"
 
 
   postEmoji: (awardUrl, emoji, callback) ->
+
     $.post awardUrl, { name: emoji }, (data) ->
-      if data.ok
-        callback.call()
+      callback() if data.ok
+
+
+  findEmojiIcon: (votesBlock, emoji) ->
+
+    return votesBlock.find ".js-emoji-btn [data-emoji='#{emoji}']"
 
-  findEmojiIcon: (emoji) ->
-    $(".js-awards-block.awards > .js-emoji-btn [data-emoji='#{emoji}']")
 
   scrollToAwards: ->
-    $('body, html').animate({
-      scrollTop: $('.awards').offset().top - 80
-    }, 200)
 
-  normilizeEmojiName: (emoji) ->
-    @aliases[emoji] || emoji
+    options = scrollTop: $('.awards').offset().top - 110
+    $('body, html').animate options, 200
+
+
+  normilizeEmojiName: (emoji) -> return @aliases[emoji] or 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') or '').split(',')
+    return _.compact _.uniq frequentlyUsedEmojis
+
 
   renderFrequentlyUsedBlock: ->
-    if $.cookie('frequently_used_emojis')
-      frequently_used_emojis = @getFrequentlyUsedEmojis()
+
+    if $.cookie 'frequently_used_emojis'
+      frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
 
       ul = $("<ul class='clearfix emoji-menu-list'>")
 
-      for emoji in frequently_used_emojis
+      for emoji in frequentlyUsedEmojis
         $(".emoji-menu-content [data-emoji='#{emoji}']").closest('li').clone().appendTo(ul)
 
       $('input.emoji-search').after(ul).after($('<h5>').text('Frequently used'))
 
+
   setupSearch: ->
+
     $('input.emoji-search').on 'keyup', (ev) =>
       term = $(ev.target).val()
 
@@ -310,5 +362,7 @@ class @AwardsHandler
       else
         $('.emoji-menu-content').children().show()
 
-  searchEmojis: (term)->
+
+  searchEmojis: (term) ->
+
     $(".emoji-menu-content [data-emoji*='#{term}']").closest('li').clone()
diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index bae67a2ebaf..ec540060457 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -23,7 +23,7 @@ class Dispatcher
         new Issue()
         shortcut_handler = new ShortcutsIssuable()
         new ZenMode()
-        window.awardsHandler = new AwardsHandler()
+        gl.awardsHandler = new AwardsHandler()
       when 'projects:milestones:show', 'groups:milestones:show', 'dashboard:milestones:show'
         new Milestone()
       when 'dashboard:todos:index'
@@ -54,7 +54,7 @@ class Dispatcher
         new Diff()
         shortcut_handler = new ShortcutsIssuable(true)
         new ZenMode()
-        window.awardsHandler = new AwardsHandler()
+        gl.awardsHandler = new AwardsHandler()
       when "projects:merge_requests:diffs"
         new Diff()
         new ZenMode()
diff --git a/app/assets/javascripts/lib/emoji_aliases.js.coffee.erb b/app/assets/javascripts/lib/emoji_aliases.js.coffee.erb
index 97be65116e2..80f9936b9c2 100644
--- a/app/assets/javascripts/lib/emoji_aliases.js.coffee.erb
+++ b/app/assets/javascripts/lib/emoji_aliases.js.coffee.erb
@@ -1,2 +1,2 @@
-window.emojiAliases = ->
+gl.emojiAliases = ->
   JSON.parse('<%= Gitlab::AwardEmoji.aliases.to_json %>')
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 7c3d57fc194..8e33e915ba5 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -162,13 +162,14 @@ class @Notes
   renderNote: (note) ->
     unless note.valid
       if note.award
-        flash = new Flash('You have already used this award emoji!', 'alert')
+        flash = new Flash('You have already awarded this emoji!', 'alert')
         flash.pinTo('.header-content')
       return
 
     if note.award
-      awardsHandler.addAwardToEmojiBar(note.name)
-      awardsHandler.scrollToAwards()
+      votesBlock = $('.js-awards-block').eq 0
+      gl.awardsHandler.addAwardToEmojiBar votesBlock, note.name
+      gl.awardsHandler.scrollToAwards()
 
     # render note if it not present in loaded list
     # or skip if rendered
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 29501069d27..0b0bd80c326 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -5,7 +5,7 @@
   padding: 0;
 
   .timeline-entry {
-    padding: $gl-padding $gl-btn-padding;
+    padding: $gl-padding $gl-btn-padding 11px;
     border-color: $table-border-color;
     color: $gl-gray;
     border-bottom: 1px solid $border-white-light;
diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss
index 07d40f40556..05d1ee5b998 100644
--- a/app/assets/stylesheets/pages/awards.scss
+++ b/app/assets/stylesheets/pages/awards.scss
@@ -95,6 +95,7 @@
 
 .award-control {
   margin-right: 5px;
+  margin-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
   line-height: 20px;
@@ -108,7 +109,8 @@
   }
 
   &.is-loading {
-    .award-control-icon-normal {
+    .award-control-icon-normal,
+    .emoji-icon {
       display: none;
     }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index a3e1ac13a43..4ebaf227279 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -69,6 +69,10 @@ ul.notes {
 
       .note-edit-form {
         display: block;
+
+        &.current-note-edit-form + .note-awards {
+          display: none;
+        }
       }
     }
 
@@ -116,10 +120,38 @@ ul.notes {
       }
     }
 
+    .note-awards {
+      .js-awards-block {
+        padding: 2px;
+        margin-top: 10px;
+      }
+
+      .award-control {
+        font-size: 13px;
+        padding: 2px 5px;
+      }
+    }
+
     .note-header {
       padding-bottom: 3px;
     }
 
+    .note-emoji-button {
+      .fa-spinner {
+        display: none;
+      }
+
+      &.is-loading {
+        .fa-smile-o {
+          display: none;
+        }
+
+        .fa-spinner {
+          display: inline-block;
+        }
+      }
+    }
+
   }
 }
 
diff --git a/app/controllers/concerns/toggle_award_emoji.rb b/app/controllers/concerns/toggle_award_emoji.rb
index 09ff44f291b..036777c80c1 100644
--- a/app/controllers/concerns/toggle_award_emoji.rb
+++ b/app/controllers/concerns/toggle_award_emoji.rb
@@ -9,13 +9,22 @@ module ToggleAwardEmoji
     name = params.require(:name)
 
     awardable.toggle_award_emoji(name, current_user)
-    TodoService.new.new_award_emoji(awardable, current_user)
+    TodoService.new.new_award_emoji(to_todoable(awardable), current_user)
 
     render json: { ok: true }
   end
 
   private
 
+  def to_todoable(awardable)
+    case awardable
+    when Note
+      awardable.noteable
+    else
+      awardable
+    end
+  end
+
   def awardable
     raise NotImplementedError
   end
diff --git a/app/controllers/projects/notes_controller.rb b/app/controllers/projects/notes_controller.rb
index c205474e999..836f79ff080 100644
--- a/app/controllers/projects/notes_controller.rb
+++ b/app/controllers/projects/notes_controller.rb
@@ -1,4 +1,6 @@
 class Projects::NotesController < Projects::ApplicationController
+  include ToggleAwardEmoji
+
   # Authorize
   before_action :authorize_read_note!
   before_action :authorize_create_note!, only: [:create]
@@ -61,6 +63,7 @@ class Projects::NotesController < Projects::ApplicationController
   def note
     @note ||= @project.notes.find(params[:id])
   end
+  alias_method :awardable, :note
 
   def note_to_html(note)
     render_to_string(
diff --git a/app/models/note.rb b/app/models/note.rb
index 46c3f6e24af..585d8c4ad84 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -3,6 +3,7 @@ class Note < ActiveRecord::Base
   include Gitlab::CurrentSettings
   include Participable
   include Mentionable
+  include Awardable
 
   default_value_for :system, false
 
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index e9302c39753..84fd146a26b 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -11,7 +11,7 @@
       gl.awardMenuUrl = "#{emojis_path}"
 
     .award-menu-holder.js-award-holder
-      %button.btn.award-control.js-add-award{ type: "button", data: { award_menu_url: emojis_path } }
+      %button.btn.award-control.js-add-award{ type: "button" }
         = icon('smile-o', class: "award-control-icon award-control-icon-normal")
         = icon('spinner spin', class: "award-control-icon award-control-icon-loading")
         %span.award-control-text
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index a35c13fbd40..b2f14a54073 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -68,9 +68,9 @@
     #related-branches{ data: { url: related_branches_namespace_project_issue_url(@project.namespace, @project, @issue) } }
       // This element is filled in using JavaScript.
 
-    .content-block.content-block-small
-      = render 'new_branch'
-      = render 'award_emoji/awards_block', awardable: @issue, inline: true
+  .content-block.content-block-small
+    = render 'new_branch'
+    = render 'award_emoji/awards_block', awardable: @issue, inline: true
 
   %section.issuable-discussion
     = render 'projects/issues/discussion'
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index f1045bbd8c3..3a1aa35fa21 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -22,6 +22,9 @@
             %span.note-role
               = access
           - if note_editable
+            = link_to '#', title: 'Award Emoji', class: 'note-action-button note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do
+              = icon('spinner spin')
+              = icon('smile-o')
             = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
               = icon('pencil')
             = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
@@ -30,9 +33,11 @@
         .note-text
           = preserve do
             = markdown(note.note, pipeline: :note, cache_key: [note, "note"], author: note.author)
+          = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
         - if note_editable
           = render 'projects/notes/edit_form', note: note
-      = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
+        .note-awards
+          = render 'award_emoji/awards_block', awardable: note, inline: false
 
       - if note.attachment.url
         .note-attachment