Merge branch 'emoji_picker_frequently_used' into 'master'

Emoji picker: add "frequently used" category

depend on !2172

![Screen_Shot_2015-12-24_at_16.39.04](/uploads/7117173c6f519282054bcb1b7ba248f4/Screen_Shot_2015-12-24_at_16.39.04.png)


See merge request !2180

CHANGELOG

@@ -5,6 +5,8 @@ v 8.4.0 (unreleased)
   - Implement new UI for group page
   - Implement search inside emoji picker
   - Add project permissions to all project API endpoints (Stan Hu)
+  - Add "Frequently used" category to emoji picker
+
 
 v 8.3.1 (unreleased)
   - Fix Error 500 when global milestones have slashes (Stan Hu)

app/assets/javascripts/awards_handler.coffee

@@ -10,6 +10,7 @@ class @AwardsHandler
         if $(".emoji-menu").is(":visible")
           $(".emoji-menu").hide()
 
+    @renderFrequentlyUsedBlock()
     @setupSearch()
 
   addAward: (emoji) ->
@@ -20,6 +21,8 @@ class @AwardsHandler
     $(".emoji-menu").hide()
     
   addAwardToEmojiBar: (emoji) ->
+    @addEmojiToFrequentlyUsedList(emoji)
+
     emoji = @normilizeEmojiName(emoji)
     if @exist(emoji)
       if @isActive(emoji)
@@ -117,6 +120,29 @@ class @AwardsHandler
   normilizeEmojiName: (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 })
+
+  getFrequentlyUsedEmojis: ->
+    frequently_used_emojis = ($.cookie('frequently_used_emojis') || "").split(",")
+
+    frequently_used_emojis = ["thumbsup", "thumbsdown"].concat(frequently_used_emojis)
+
+    _.compact(_.uniq(frequently_used_emojis))
+
+  renderFrequentlyUsedBlock: ->
+    frequently_used_emojis = @getFrequentlyUsedEmojis()
+
+    ul = $("<ul>")
+
+    for emoji in frequently_used_emojis
+      do (emoji) ->
+        $(".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").keyup (ev) =>
       term = $(ev.target).val()
@@ -125,7 +151,7 @@ class @AwardsHandler
       $("ul.emoji-search,h5.emoji-search").remove()
 
       if term
-        # Generate search result block
+        # 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)

features/project/issues/award_emoji.feature

@@ -26,5 +26,5 @@ Feature: Award Emoji
 
   @javascript
   Scenario: I add award emoji using regular comment
-  Given I leave comment with a single emoji
-  Then I have award added
+    Given I leave comment with a single emoji
+    Then I have award added