From efe98067da478a61a2d5e673b381c43eaace9d83 Mon Sep 17 00:00:00 2001
From: Valery Sizov <vsv2711@gmail.com>
Date: Wed, 23 Dec 2015 12:01:31 +0200
Subject: emoji picker search

---
 CHANGELOG                                    |  1 +
 app/assets/javascripts/awards_handler.coffee | 22 ++++++++++++++++++++++
 app/assets/stylesheets/pages/awards.scss     |  4 ++++
 app/views/votes/_votes_block.html.haml       |  3 ++-
 features/project/issues/award_emoji.feature  |  6 ++++++
 features/steps/project/issues/award_emoji.rb | 12 ++++++++++++
 6 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG b/CHANGELOG
index 851a8ed0145..5ccf657445a 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -2,6 +2,7 @@ Please view this file on the master branch, on stable branches it's out of date.
 
 v 8.4.0 (unreleased)
   - Implement new UI for group page
+  - Implement search inside emoji picker
 
 v 8.3.0
   - Add CAS support (tduehr)
diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee
index 84e7287e48d..99b9e281259 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, =>
@@ -108,3 +110,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..842d73acaa6 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: url(/assets/icon-search.png) 240px no-repeat;
+        }
+
         li {
           cursor: pointer;
           width: 30px;
diff --git a/app/views/votes/_votes_block.html.haml b/app/views/votes/_votes_block.html.haml
index 8c660ba16cc..5cd0c5f60f0 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,7 +33,7 @@
       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)
 
diff --git a/features/project/issues/award_emoji.feature b/features/project/issues/award_emoji.feature
index cbf2e7104ab..a996ae603fc 100644
--- a/features/project/issues/award_emoji.feature
+++ b/features/project/issues/award_emoji.feature
@@ -18,6 +18,12 @@ Feature: Award Emoji
     Given I click to emoji-picker
     Then I can see the activity and food categories
 
+   @javascript
+  Scenario: I can search emoji
+    Given I click to emoji-picker
+    And I search "hand"
+    Then I see search result for "hand"
+
   @javascript
   Scenario: I add award emoji using regular comment
   Given I leave comment with a single emoji
diff --git a/features/steps/project/issues/award_emoji.rb b/features/steps/project/issues/award_emoji.rb
index c94d0ba7306..a7e15398819 100644
--- a/features/steps/project/issues/award_emoji.rb
+++ b/features/steps/project/issues/award_emoji.rb
@@ -52,4 +52,16 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps
       click_button 'Add Comment'
     end
   end
+
+  step 'I search "hand"' do
+    page.within('.emoji-menu-content') do
+      fill_in 'emoji_search', with: 'hand'
+    end
+  end
+
+  step 'I see search result for "hand"' do
+    page.within '.emoji-menu-content' do
+      expect(page).to have_selector '[data-emoji="raised_hand"]'
+    end
+  end
 end
-- 
cgit v1.2.1