From d3f24a22219c1706ff580cd00ad9fa519d40a9c9 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Thu, 21 Jan 2016 21:18:03 -0500 Subject: [PATCH] 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. --- app/assets/javascripts/application.js.coffee | 9 +++++ app/assets/stylesheets/framework/forms.scss | 33 ++++++++++++++++++- app/assets/stylesheets/framework/header.scss | 6 ---- app/assets/stylesheets/pages/issues.scss | 5 --- app/helpers/application_helper.rb | 2 +- .../shared/issuable/_search_form.html.haml | 2 +- features/steps/project/wiki.rb | 2 +- 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