Merge branch 'emoji-picker-search' into 'master'

Emoji picker search

depend on !2172

Issue https://gitlab.com/gitlab-org/gitlab-ce/issues/3576

!!! Should be merged after https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/2198

![Screenshot_2015-12-23_11.44.57](/uploads/01da0b62c3c234307142e2c4db68e53f/Screenshot_2015-12-23_11.44.57.png)

See merge request !2186

4 files changed, 30 insertions, 3 deletions

diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee
index b5432773713..392440a2b00 100644
--- a/app/assets/javascripts/awards_handler.coffee
+++ b/app/assets/javascripts/awards_handler.coffee
@@ -10,6 +10,8 @@ class @AwardsHandler
         if $(".emoji-menu").is(":visible")
           $(".emoji-menu").hide()
 
+    @setupSearch()
+
   addAward: (emoji) ->
     emoji = @normilizeEmojiName(emoji)
     @postEmoji emoji, =>
@@ -114,3 +116,23 @@ class @AwardsHandler
 
   normilizeEmojiName: (emoji) ->
     @aliases[emoji] || emoji
+
+  setupSearch: ->
+    $("input.emoji-search").keyup (ev) =>
+      term = $(ev.target).val()
+
+      # Clean previous search results
+      $("ul.emoji-search,h5.emoji-search").remove()
+
+      if term
+        # Generate search result block
+        h5 = $("<h5>").text("Search results").addClass("emoji-search")
+        found_emojis = @searchEmojis(term).show()
+        ul = $("<ul>").addClass("emoji-search").append(found_emojis)
+        $(".emoji-menu-content ul, .emoji-menu-content h5").hide()
+        $(".emoji-menu-content").append(h5).append(ul)
+      else
+        $(".emoji-menu-content").children().show()
+
+  searchEmojis: (term)->
+    $(".emoji-menu-content [data-emoji*='#{term}']").closest("li").clone()
diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss
index aa1a06b2fcc..87dd30f4111 100644
--- a/app/assets/stylesheets/pages/awards.scss
+++ b/app/assets/stylesheets/pages/awards.scss
@@ -101,6 +101,10 @@
           overflow: auto;
         }
 
+        input.emoji-search{
+          background: image-url("icon-search.png") 240px no-repeat;
+        }
+
         li {
           cursor: pointer;
           width: 30px;
diff --git a/app/assets/stylesheets/pages/emojis.scss b/app/assets/stylesheets/pages/emojis.scss
index 819ec9a2f5f..89a94c5a780 100644
--- a/app/assets/stylesheets/pages/emojis.scss
+++ b/app/assets/stylesheets/pages/emojis.scss
@@ -4,7 +4,7 @@ The source: gemojione gem.
 */
 
 .emoji-icon{
-  background-image: url(emoji.png);
+  background-image: image-url("emoji.png");
   background-repeat: no-repeat;
 }
 
diff --git a/app/views/votes/_votes_block.html.haml b/app/views/votes/_votes_block.html.haml
index 829f1664fba..e16187bb42f 100644
--- a/app/views/votes/_votes_block.html.haml
+++ b/app/views/votes/_votes_block.html.haml
@@ -11,6 +11,7 @@
         = icon('smile-o')
       .emoji-menu
         .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
@@ -32,11 +33,11 @@
       aliases
     )
 
-    $(".emoji-menu-content li").click (e)->
+    $(".awards").on "click", ".emoji-menu-content li", (e) ->
       emoji = $(this).find(".emoji-icon").data("emoji")
       awards_handler.addAward(emoji)
 
-    $(".awards").on "click", ".award", (e)->
+    $(".awards").on "click", ".award", (e) ->
       emoji = $(this).find(".icon").data("emoji")
       awards_handler.addAward(emoji)