Updated UI of award emoji

Closes #13878

app/assets/javascripts/awards_handler.coffee

 class @AwardsHandler
   constructor: (@post_emoji_url, @noteable_type, @noteable_id, @aliases) ->
-    $(".add-award").click (event) =>
+    $(".js-add-award").click (event) =>
       event.stopPropagation()
       event.preventDefault()
 
@@ -11,18 +11,28 @@ class @AwardsHandler
         if $(".emoji-menu").is(":visible")
           $(".emoji-menu").hide()
 
+    $(".awards").off "click"
+    $(".awards").on "click", ".js-emoji-btn", @handleClick
+
     @renderFrequentlyUsedBlock()
-    @setupSearch()
+
+  handleClick: (e) ->
+    e.preventDefault()
+    emoji = $(this).find(".icon").data "emoji"
+    awards_handler.addAward emoji
 
   showEmojiMenu: ->
     if $(".emoji-menu").length
       $(".emoji-menu").show()
       $("#emoji_search").focus()
     else
-      $.get "/emojis", (response) ->
-        $(".add-award").after response
+      $('.js-add-award').addClass "is-loading"
+      $.get "/emojis", (response) =>
+        $('.js-add-award').removeClass "is-loading"
+        $(".js-award-holder").append response
         $(".emoji-menu").show()
         $("#emoji_search").focus()
+        @setupSearch()
 
   addAward: (emoji) ->
     emoji = @normilizeEmojiName(emoji)
@@ -39,7 +49,7 @@ class @AwardsHandler
       if @isActive(emoji)
         @decrementCounter(emoji)
       else
-        counter = @findEmojiIcon(emoji).siblings(".counter")
+        counter = @findEmojiIcon(emoji).siblings(".js-counter")
         counter.text(parseInt(counter.text()) + 1)
         counter.parent().addClass("active")
         @addMeToAuthorList(emoji)
@@ -53,7 +63,7 @@ class @AwardsHandler
     @findEmojiIcon(emoji).parent().hasClass("active")
 
   decrementCounter: (emoji) ->
-    counter = @findEmojiIcon(emoji).siblings(".counter")
+    counter = @findEmojiIcon(emoji).siblings(".js-counter")
     emojiIcon = counter.parent()
     if parseInt(counter.text()) > 1
       counter.text(parseInt(counter.text()) - 1)
@@ -98,14 +108,13 @@ class @AwardsHandler
     emojiCssClass = @resolveNameToCssClass(emoji)
 
     nodes = []
-    nodes.push("<div class='award active' title='me'>")
-    nodes.push("<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>")
-    nodes.push("<div class='counter'>1</div>")
-    nodes.push("</div>")
-
-    emoji_node = $(nodes.join("\n")).insertBefore(".awards-controls").find(".emoji-icon").data("emoji", emoji)
+    nodes.push "<button class='btn award-control js-emoji-btn has_tooltip active' title='me'>"
+    nodes.push "<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>"
+    nodes.push "<span class='award-control-text js-counter'>1</span>"
+    nodes.push "</button>"
 
-    $(".award").tooltip()
+    emoji_node = $(nodes.join("\n")).insertBefore(".js-award-holder").find(".emoji-icon").data("emoji", emoji)
+    $('.award-control').tooltip()
 
   resolveNameToCssClass: (emoji) ->
     emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']")
@@ -128,7 +137,7 @@ class @AwardsHandler
         callback.call()
 
   findEmojiIcon: (emoji) ->
-    $(".award [data-emoji='#{emoji}']")
+    $(".awards > .js-emoji-btn [data-emoji='#{emoji}']")
 
   scrollToAwards: ->
     $('body, html').animate({

app/assets/stylesheets/framework/blocks.scss

@@ -157,3 +157,7 @@
     float: right;
   }
 }
+
+.content-block-small {
+  padding: 10px 0;
+}

app/assets/stylesheets/pages/awards.scss

 .awards {
-  @include clearfix;
   line-height: 34px;
 
   .emoji-icon {
     width: 20px;
     height: 20px;
-    margin: 7px 0 0 5px;
   }
+}
 
-  .award {
-    @include border-radius(5px);
+.emoji-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  min-width: 160px;
+  font-size: 14px;
+  background-color: #fff;
+  border: 1px solid #F1F2F4;
+  border-radius: 2px;
+  box-shadow: 0 6px 12px rgba(0,0,0,.175);
+
+  .emoji-menu-content {
+    padding: $gl-padding;
+    width: 300px;
+    height: 300px;
+    overflow-y: scroll;
+
+    input.emoji-search{
+      background-image: url("data:image/png;base64,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");
+      background-repeat: no-repeat;
+      background-position: right 5px center;
+      background-size: 16px;
+    }
+  }
+}
 
-    border: 1px solid;
-    padding: 0px 10px;
-    float: left;
-    margin-right: 5px;
-    border-color: $border-color;
-    cursor: pointer;
+.emoji-menu-list {
+  list-style: none;
+  padding-left: 0;
+  margin-bottom: 0;
+}
 
-    &:hover {
-      background-color: #dce0e5;
-    }
+.emoji-menu-list-item {
+  padding: 3px;
+  margin-left: 1px;
+  margin-right: 1px;
+}
+
+.emoji-menu-btn {
+  display: block;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: #ededed;
+  }
+
+  .emoji-icon {
+    display: inline-block;
+    position: relative;
+    top: 3px;
+  }
+}
 
-    &.active {
-      border-color: $border-gray-light;
-      background-color: $gray-light;
+.award-menu-holder {
+  display: inline-block;
+  position: relative;
+}
 
-      &:hover {
-        background-color: #dce0e5;
-      }
+.award-control {
+  margin-right: 5px;
+  line-height: 20px;
+  outline: 0;
 
-      .counter {
-        font-weight: bold;
-      }
-    }
+  &.active,
+  &:active {
+    background-color: #ededed;
+    box-shadow: none;
+    outline: 0;
+  }
 
-    .icon {
-      float: left;
-      margin-right: 10px;
+  &.is-loading {
+    .award-control-icon {
+      display: none;
     }
 
-    .counter {
-      float: left;
+    .award-control-icon-loading {
+      display: block;
     }
   }
 
-  .awards-controls {
-    position: relative;
-    margin-left: 10px;
+  .icon,
+  .award-control-icon {
     float: left;
+    margin-right: 5px;
+    font-size: 20px;
+  }
 
-    .add-award {
-      font-size: 24px;
-      color: $gl-gray;
-      position: relative;
-      top: 2px;
-
-      &:hover,
-      &:link {
-        text-decoration: none;
-      }
-    }
+  .award-control-icon-loading {
+    display: none;
+  }
 
-    .emoji-menu{
-      position: absolute;
-      top: 100%;
-      left: 0;
-      z-index: 1000;
-      display: none;
-      float: left;
-      min-width: 160px;
-      padding: 5px 0;
-      margin: 2px 0 0;
-      font-size: 14px;
-      text-align: left;
-      list-style: none;
-      background-color: #fff;
-      -webkit-background-clip: padding-box;
-      background-clip: padding-box;
-      border: 1px solid #ccc;
-      border: 1px solid rgba(0,0,0,.15);
-      border-radius: 4px;
-      -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
-      box-shadow: 0 6px 12px rgba(0,0,0,.175);
-
-      .emoji-menu-content {
-        padding: $gl-padding;
-        width: 300px;
-        height: 300px;
-        overflow-y: scroll;
-
-        h5 {
-          clear: left;
-        }
-
-        ul {
-          list-style-type: none;
-          margin-left: -20px;
-          margin-bottom: 20px;
-          overflow: auto;
-        }
-
-        input.emoji-search{
-          background: image-url("icon-search.png") 240px no-repeat;
-        }
-
-        li {
-          cursor: pointer;
-          width: 30px;
-          height: 30px;
-          text-align: center;
-          float: left;
-          margin: 3px;
-          list-decorate: none;
-          @include border-radius(5px);
-
-          &:hover {
-            background-color: #ccc;
-          }
-        }
-      }
-    }
+  .award-control-icon {
+    color: #DCDCDC;
   }
 }

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"])

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

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

app/views/votes/_votes_block.html.haml

 .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});