Updated UI of award emoji

Closes #13878

4 files changed, 16 insertions, 25 deletions

diff --git a/app/views/emojis/index.html.haml b/app/views/emojis/index.html.haml
index b66e513e4d2..3443a8e2307 100644
--- a/app/views/emojis/index.html.haml
+++ b/app/views/emojis/index.html.haml
@@ -2,8 +2,10 @@
   .emoji-menu-content
     = text_field_tag :emoji_search, "", class: "emoji-search search-input form-control"
     - AwardEmoji.emoji_by_category.each do |category, emojis|
-      %h5= AwardEmoji::CATEGORIES[category]
-      %ul
+      %h5.emoji-menu-title
+        = AwardEmoji::CATEGORIES[category]
+      %ul.clearfix.emoji-menu-list
         - emojis.each do |emoji|
-          %li
-            = emoji_icon(emoji["name"], emoji["unicode"], emoji["aliases"])
\ No newline at end of file
+          %li.pull-left.text-center.emoji-menu-list-item
+            %button.emoji-menu-btn.text-center.js-emoji-btn{type: "button"}
+              = emoji_icon(emoji["name"], emoji["unicode"], emoji["aliases"])
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 617b0437807..eedeff2bed6 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -71,7 +71,7 @@
       .merge-requests
         = render 'merge_requests'
 
-    .content-block
+    .content-block.content-block-small
       = render 'votes/votes_block', votable: @issue
 
     .row
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index b262892ac65..ee5b9fd95a8 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -68,7 +68,7 @@
 
       .tab-content
         #notes.notes.tab-pane.voting_notes
-          .content-block.oneline-block
+          .content-block.content-block-small.oneline-block
             = render 'votes/votes_block', votable: @merge_request
 
           .row
diff --git a/app/views/votes/_votes_block.html.haml b/app/views/votes/_votes_block.html.haml
index 176fd29cb57..20d2d5f317b 100644
--- a/app/views/votes/_votes_block.html.haml
+++ b/app/views/votes/_votes_block.html.haml
@@ -1,14 +1,17 @@
 .awards.votes-block
   - awards_sort(votable.notes.awards.grouped_awards).each do |emoji, notes|
-    .award{class: (note_active_class(notes, current_user)), title: emoji_author_list(notes, current_user)}
+    %button.btn.award-control.js-emoji-btn.has_tooltip{class: (note_active_class(notes, current_user)), title: emoji_author_list(notes, current_user), data: {placement: "top"}}
       = emoji_icon(emoji)
-      .counter
+      %span.award-control-text.js-counter
         = notes.count
 
   - if current_user
-    .awards-controls
-      %a.add-award{"href" => "#"}
-        = icon('smile-o')
+    %div.award-menu-holder.js-award-holder
+      %a.btn.award-control.js-add-award{"href" => "#"}
+        = icon('smile-o', {class: "award-control-icon"})
+        = icon('spinner spin', {class: "award-control-icon award-control-icon-loading"})
+        %span.award-control-text
+          Add
 
 - if current_user
   :javascript
@@ -23,17 +26,3 @@
       noteable_id,
       aliases
     );
-
-    $(".awards").on("click", ".emoji-menu-content li", function(e) {
-      var emoji = $(this).find(".emoji-icon").data("emoji");
-      awards_handler.addAward(emoji);
-    });
-
-    $(".awards").on("click", ".award", function(e) {
-      var emoji = $(this).find(".icon").data("emoji");
-      awards_handler.addAward(emoji);
-    });
-
-    $(".award").tooltip();
-
-    $(".emoji-menu-content").niceScroll({cursorwidth: "7px", autohidemode: false});