Commit d84ca3e8 authored by Valery Sizov's avatar Valery Sizov

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
parents 1f9633d6 44cf1cba
...@@ -3,6 +3,7 @@ Please view this file on the master branch, on stable branches it's out of date. ...@@ -3,6 +3,7 @@ Please view this file on the master branch, on stable branches it's out of date.
v 8.4.0 (unreleased) v 8.4.0 (unreleased)
- Fix Error 500 when doing a search in dashboard before visiting any project (Stan Hu) - Fix Error 500 when doing a search in dashboard before visiting any project (Stan Hu)
- Implement new UI for group page - Implement new UI for group page
- Implement search inside emoji picker
- Add project permissions to all project API endpoints (Stan Hu) - Add project permissions to all project API endpoints (Stan Hu)
v 8.3.1 (unreleased) v 8.3.1 (unreleased)
......
...@@ -10,6 +10,8 @@ class @AwardsHandler ...@@ -10,6 +10,8 @@ class @AwardsHandler
if $(".emoji-menu").is(":visible") if $(".emoji-menu").is(":visible")
$(".emoji-menu").hide() $(".emoji-menu").hide()
@setupSearch()
addAward: (emoji) -> addAward: (emoji) ->
emoji = @normilizeEmojiName(emoji) emoji = @normilizeEmojiName(emoji)
@postEmoji emoji, => @postEmoji emoji, =>
...@@ -114,3 +116,23 @@ class @AwardsHandler ...@@ -114,3 +116,23 @@ class @AwardsHandler
normilizeEmojiName: (emoji) -> normilizeEmojiName: (emoji) ->
@aliases[emoji] || 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()
...@@ -101,6 +101,10 @@ ...@@ -101,6 +101,10 @@
overflow: auto; overflow: auto;
} }
input.emoji-search{
background: image-url("icon-search.png") 240px no-repeat;
}
li { li {
cursor: pointer; cursor: pointer;
width: 30px; width: 30px;
......
...@@ -4,7 +4,7 @@ The source: gemojione gem. ...@@ -4,7 +4,7 @@ The source: gemojione gem.
*/ */
.emoji-icon{ .emoji-icon{
background-image: url(emoji.png); background-image: image-url("emoji.png");
background-repeat: no-repeat; background-repeat: no-repeat;
} }
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
= icon('smile-o') = icon('smile-o')
.emoji-menu .emoji-menu
.emoji-menu-content .emoji-menu-content
= text_field_tag :emoji_search, "", class: "emoji-search search-input form-control"
- AwardEmoji.emoji_by_category.each do |category, emojis| - AwardEmoji.emoji_by_category.each do |category, emojis|
%h5= AwardEmoji::CATEGORIES[category] %h5= AwardEmoji::CATEGORIES[category]
%ul %ul
...@@ -32,11 +33,11 @@ ...@@ -32,11 +33,11 @@
aliases aliases
) )
$(".emoji-menu-content li").click (e)-> $(".awards").on "click", ".emoji-menu-content li", (e) ->
emoji = $(this).find(".emoji-icon").data("emoji") emoji = $(this).find(".emoji-icon").data("emoji")
awards_handler.addAward(emoji) awards_handler.addAward(emoji)
$(".awards").on "click", ".award", (e)-> $(".awards").on "click", ".award", (e) ->
emoji = $(this).find(".icon").data("emoji") emoji = $(this).find(".icon").data("emoji")
awards_handler.addAward(emoji) awards_handler.addAward(emoji)
......
...@@ -18,6 +18,12 @@ Feature: Award Emoji ...@@ -18,6 +18,12 @@ Feature: Award Emoji
Given I click to emoji-picker Given I click to emoji-picker
Then I can see the activity and food categories 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 @javascript
Scenario: I add award emoji using regular comment Scenario: I add award emoji using regular comment
Given I leave comment with a single emoji Given I leave comment with a single emoji
......
...@@ -52,4 +52,16 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps ...@@ -52,4 +52,16 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps
click_button 'Add Comment' click_button 'Add Comment'
end end
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 end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment