Adds base64 background search icon.

All inputs of type `search` will have the gray background
and search icon centered.
Because the search magnifier is a bg image,
I had to hide it with `[value=""]`.
I added a little javascript to make sure each input always has it's
own value.

7 files changed, 44 insertions, 15 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index eb18d32b25c..48c9890cfb5 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -203,4 +203,13 @@ $ ->
     form = btn.closest("form")
     new ConfirmDangerModal(form, text)
 
+  $('input[type="search"]').each ->
+    $this = $(this)
+    $this.attr 'value', $this.val()
+    return
+    
+  $(document).on 'keyup', 'input[type="search"]' , (e) ->
+    $this = $(this)
+    $this.attr 'value', $this.val()
+
   new Aside()
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 4dab806d50e..685dfa21ea5 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -2,13 +2,43 @@ textarea {
   resize: vertical;
 }
 
+input {
+  border-radius: 3px;
+}
+
+input[type='search'],
 input[type='search'].search-text-input {
-  background-image: image-url("icon-search.png");
   background-repeat: no-repeat;
   background-position: 10px;
+  background-size: 16px;
+  background-position-x: 30%;
   padding-left: 25px;
+  background-color: $gray-light;
+
+  &[value=""] {
+    background-image: url('data:image/png;base64,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
+');
+  }
+
+  &::-webkit-input-placeholder {
+    text-align: center;
+  }
+
+  &:-moz-placeholder { /* Firefox 18- */
+    text-align: center;  
+  }
+
+  &::-moz-placeholder {  /* Firefox 19+ */
+    text-align: center;  
+  }
+
+  &:-ms-input-placeholder {  
+    text-align: center; 
+  }
 }
 
+
+
 input[type='text'].danger {
   background: #F2DEDE!important;
   border-color: #D66;
@@ -74,6 +104,7 @@ label {
 
 .form-control {
   @include box-shadow(none);
+  border-radius: 3px;
 }
 
 .form-control-inline {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ba5e72c8c5a..f875b1460e7 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -108,16 +108,10 @@ header {
 
     .search-input {
       width: 220px;
-      background-image: image-url("icon-search.png");
-      background-repeat: no-repeat;
-      background-position: 195px;
-      @include input-big;
 
       &:focus {
         @include box-shadow(none);
         outline: none;
-        border-color: #DDD;
-        background-color: #FFF;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index ad92cc22815..dd6a251f811 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -49,11 +49,6 @@
 .issue-search-form {
   margin: 0;
   height: 24px;
-
-  .issue_search {
-    border: 1px solid #DDD !important;
-    background-color: #f4f4f4;
-  }
 }
 
 form.edit-issue {
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index f3a2723ee0d..a2458ad3be0 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -171,7 +171,7 @@ module ApplicationHelper
 
   def search_placeholder
     if @project && @project.persisted?
-      'Search in this project'
+      'Search'
     elsif @snippet || @snippets || @show_snippets
       'Search snippets'
     elsif @group && @group.persisted?
diff --git a/app/views/shared/issuable/_search_form.html.haml b/app/views/shared/issuable/_search_form.html.haml
index 3a5ad00aa91..da1ccf9c963 100644
--- a/app/views/shared/issuable/_search_form.html.haml
+++ b/app/views/shared/issuable/_search_form.html.haml
@@ -1,6 +1,6 @@
 = form_tag(path, method: :get, id: "issue_search_form", class: 'pull-left issue-search-form') do
   .append-right-10.hidden-xs.hidden-sm
-    = search_field_tag :issue_search, params[:issue_search], { placeholder: 'Filter by title or description', class: 'form-control issue_search search-text-input', spellcheck: false }
+    = search_field_tag :issue_search, params[:issue_search], { placeholder: 'Filter', class: 'form-control issue_search search-text-input', spellcheck: false }
     = hidden_field_tag :state, params['state']
     = hidden_field_tag :scope, params['scope']
     = hidden_field_tag :assignee_id, params['assignee_id']
diff --git a/features/steps/project/wiki.rb b/features/steps/project/wiki.rb
index d753ae14590..2a735afbe7b 100644
--- a/features/steps/project/wiki.rb
+++ b/features/steps/project/wiki.rb
@@ -163,7 +163,7 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
   end
 
   step 'I search for Wiki content' do
-    fill_in "Search in this project", with: "wiki_content"
+    fill_in "Search", with: "wiki_content"
     click_button "Search"
   end