Merge branch 'award-emoji-design-update' into 'master'

Updated UI of award emoji

Closes #13878 

See merge request !3028

app/assets/javascripts/awards_handler.coffee

 class @AwardsHandler
   constructor: (@post_emoji_url, @noteable_type, @noteable_id, @aliases) ->
-    $(".add-award").click (event) =>
+    $(".js-add-award").on "click", (event) =>
       event.stopPropagation()
       event.preventDefault()
 
@@ -9,27 +9,46 @@ class @AwardsHandler
     $("html").on 'click', (event) ->
       if !$(event.target).closest(".emoji-menu").length
         if $(".emoji-menu").is(":visible")
-          $(".emoji-menu").hide()
+          $(".emoji-menu").removeClass "is-visible"
+
+    $(".awards")
+      .off "click"
+      .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()
+      if $(".emoji-menu").is ".is-visible"
+        $(".emoji-menu").removeClass "is-visible"
+        $("#emoji_search").blur()
+      else
+        $(".emoji-menu").addClass "is-visible"
         $("#emoji_search").focus()
     else
-      $.get "/emojis", (response) ->
-        $(".add-award").after response
-        $(".emoji-menu").show()
+      $('.js-add-award').addClass "is-loading"
+      $.get "/emojis", (response) =>
+        $('.js-add-award').removeClass "is-loading"
+        $(".js-award-holder").append response
+        setTimeout =>
+          $(".emoji-menu").addClass "is-visible"
           $("#emoji_search").focus()
+          @setupSearch()
+        , 200
 
   addAward: (emoji) ->
     emoji = @normilizeEmojiName(emoji)
     @postEmoji emoji, =>
       @addAwardToEmojiBar(emoji)
 
-    $(".emoji-menu").hide()
+    $(".emoji-menu").removeClass "is-visible"
 
   addAwardToEmojiBar: (emoji) ->
     @addEmojiToFrequentlyUsedList(emoji)
@@ -39,7 +58,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 +72,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)
@@ -70,9 +89,13 @@ class @AwardsHandler
 
   removeMeFromAuthorList: (emoji) ->
     award_block = @findEmojiIcon(emoji).parent()
-    authors = award_block.attr("data-original-title").split(", ")
+    authors = award_block
+      .attr("data-original-title")
+      .split(", ")
     authors.splice(authors.indexOf("me"),1)
-    award_block.closest(".award").attr("data-original-title", authors.join(", "))
+    award_block
+      .closest(".js-emoji-btn")
+      .attr("data-original-title", authors.join(", "))
     @resetTooltip(award_block)
 
   addMeToAuthorList: (emoji) ->
@@ -98,14 +121,18 @@ 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)
-
-    $(".award").tooltip()
+    nodes.push(
+      "<button class='btn award-control js-emoji-btn has_tooltip active' title='me'>",
+      "<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>",
+      "<span class='award-control-text js-counter'>1</span>",
+      "</button>"
+    )
+
+    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 +155,7 @@ class @AwardsHandler
         callback.call()
 
   findEmojiIcon: (emoji) ->
-    $(".award [data-emoji='#{emoji}']")
+    $(".awards > .js-emoji-btn [data-emoji='#{emoji}']")
 
   scrollToAwards: ->
     $('body, html').animate({
@@ -164,13 +191,13 @@ class @AwardsHandler
       term = $(ev.target).val()
 
       # Clean previous search results
-      $("ul.emoji-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-search").append(found_emojis)
+        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)
       else

app/assets/stylesheets/framework/blocks.scss

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

app/assets/stylesheets/framework/variables.scss

@@ -152,3 +152,10 @@ $dropdown-toggle-border-color: #EAEAEA;
 $dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
 $dropdown-toggle-icon-color: #C4C4C4;
 $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
+
+/*
+ *  Award emoji
+ */
+$award-emoji-menu-bg: #FFF;
+$award-emoji-menu-border: #F1F2F4;
+$award-emoji-new-btn-icon-color: #DCDCDC;

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);
-
-    border: 1px solid;
-    padding: 0px 10px;
-    float: left;
-    margin-right: 5px;
-    border-color: $border-color;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #dce0e5;
-    }
-
-    &.active {
-      border-color: $border-gray-light;
-      background-color: $gray-light;
-
-      &:hover {
-        background-color: #dce0e5;
-      }
-
-      .counter {
-        font-weight: bold;
-      }
-    }
-
-    .icon {
-      float: left;
-      margin-right: 10px;
-    }
-
-    .counter {
-      float: left;
-    }
-  }
-
-  .awards-controls {
-    position: relative;
-    margin-left: 10px;
-    float: left;
-
-    .add-award {
-      font-size: 24px;
-      color: $gl-gray;
-      position: relative;
-      top: 2px;
-
-      &:hover,
-      &:link {
-        text-decoration: none;
-      }
   }
+}
 
-    .emoji-menu{
+.emoji-menu {
   position: absolute;
   top: 100%;
   left: 0;
+  margin-top: 3px;
   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);
+  background-color: $award-emoji-menu-bg;
+  border: 1px solid $award-emoji-menu-border;
+  border-radius: $border-radius-base;
   box-shadow: 0 6px 12px rgba(0,0,0,.175);
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(.2);
+  transform-origin: 0 -45px;
+  transition: all .3s cubic-bezier(.87,-.41,.19,1.44);
+
+  &.is-visible {
+    pointer-events: all;
+    opacity: 1;
+    transform: scale(1);
+  }
 
   .emoji-menu-content {
     padding: $gl-padding;
@@ -90,36 +37,97 @@
     height: 300px;
     overflow-y: scroll;
 
-        h5 {
-          clear: left;
+    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;
     }
-
-        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;
-        }
+.emoji-menu-list {
+  list-style: none;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.emoji-menu-list-item {
+  padding: 3px;
+  margin-left: 1px;
+  margin-right: 1px;
+}
 
-        li {
+.emoji-menu-btn {
+  display: block;
   cursor: pointer;
   width: 30px;
   height: 30px;
-          text-align: center;
-          float: left;
-          margin: 3px;
-          list-decorate: none;
-          @include border-radius(5px);
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: $border-radius-base;
+  transition: transform .15s cubic-bezier(.3, 0, .2, 2);
 
   &:hover {
-            background-color: #ccc;
+    background-color: transparent;
+    outline: 0;
+    transform: scale(1.3);
   }
+
+  &:focus,
+  &:active {
+    outline: 0;
   }
+
+  .emoji-icon {
+    display: inline-block;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.award-menu-holder {
+  display: inline-block;
+  position: relative;
+}
+
+.award-control {
+  margin-right: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  line-height: 20px;
+  outline: 0;
+
+  &.active,
+  &:active {
+    background-color: $white-dark;
+    box-shadow: none;
+    outline: 0;
+  }
+
+  &.is-loading {
+    .award-control-icon {
+      display: none;
+    }
+
+    .award-control-icon-loading {
+      display: block;
     }
   }
+
+  .icon,
+  .award-control-icon {
+    float: left;
+    margin-right: 5px;
+    font-size: 20px;
+  }
+
+  .award-control-icon-loading {
+    display: none;
+  }
+
+  .award-control-icon {
+    color: $award-emoji-new-btn-icon-color;
   }
 }

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
+          %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});

features/steps/project/issues/award_emoji.rb

@@ -10,7 +10,7 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps
 
   step 'I click the thumbsup award Emoji' do
     page.within '.awards' do
-      thumbsup = page.find('.award .emoji-1F44D')
+      thumbsup = page.first('.award-control')
       thumbsup.click
       thumbsup.hover
       sleep 0.3
@@ -18,23 +18,23 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps
   end
 
   step 'I click to emoji-picker' do
-    page.within '.awards-controls' do
-      page.find('.add-award').click
+    page.within '.awards' do
+      page.find('.js-add-award').click
     end
   end
 
   step 'I click to emoji in the picker' do
     page.within '.emoji-menu-content' do
-      page.first('.emoji-icon').click
+      page.first('.js-emoji-btn').click
     end
   end
 
   step 'I can remove it by clicking to icon' do
     page.within '.awards' do
       expect do
-        page.find('.award.active').click
+        page.find('.js-emoji-btn.active').click
         sleep 0.3
-      end.to change{ page.all(".award").size }.from(3).to(2)
+      end.to change{ page.all(".award-control.js-emoji-btn").size }.from(3).to(2)
     end
   end
 
@@ -49,23 +49,23 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps
     sleep 0.2
 
     page.within '.awards' do
-      expect(page).to have_selector '.award'
-      expect(page.find('.award.active .counter')).to have_content '1'
-      expect(page.find('.award.active')['data-original-title']).to eq('me')
+      expect(page).to have_selector '.js-emoji-btn'
+      expect(page.find('.js-emoji-btn.active .js-counter')).to have_content '1'
+      expect(page.find('.js-emoji-btn.active')['data-original-title']).to eq('me')
     end
   end
 
   step 'I have no awards added' do
     page.within '.awards' do
-      expect(page).to have_selector '.award'
-      expect(page.all('.award').size).to eq(2)
+      expect(page).to have_selector '.award-control.js-emoji-btn'
+      expect(page.all('.award-control.js-emoji-btn').size).to eq(2)
 
       # Check tooltip data
-      page.all('.award').each do |element|
+      page.all('.award-control.js-emoji-btn').each do |element|
         expect(element['title']).to eq("")
       end
 
-      page.all('.award .counter').each do |element|
+      page.all('.award-control .js-counter').each do |element|
         expect(element).to have_content '0'
       end
     end