Replaces legacy magnifier icon with SVG icon in project jump and in search field from mobile view (#41714).

git-svn-id: https://svn.redmine.org/redmine/trunk@23368 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/assets/images/icons.svg

@@ -331,6 +331,10 @@
       <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
       <path d="M14 4l0 4l-6 0l0 -4"/>
     </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--search">
+      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/>
+      <path d="M21 21l-6 -6"/>
+    </symbol>
     <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--server-authentication">
       <path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"/>
       <path d="M3 12m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"/>

app/assets/stylesheets/application.css

@@ -268,7 +268,9 @@ a#toggle-completed-versions {color:#999;}
 }
 .drdn.expanded .drdn-content {display:block;}
 
-.drdn-content .quick-search {margin:8px;}
+.drdn-content .quick-search {margin:8px; display: flex; align-items: center;}
+.drdn-content .quick-search svg {margin-left: 5px; position: absolute;}
+.drdn-content .quick-search input.autocomplete {background: none; padding-left: 24px !important;}
 .drdn-content .autocomplete {box-sizing: border-box; width:100% !important; height:28px;}
 .drdn-content .autocomplete:focus {border-color:#5ad;}
 .drdn-items {max-height:400px; overflow:auto;}

app/assets/stylesheets/responsive.css

@@ -184,9 +184,14 @@
     font-size:0.9375rem;
     font-weight:normal;
   }
+  #project-jump .drdn-content svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
   #project-jump .drdn-content .autocomplete {
     height:40px;
     font-size:1.25rem;
+    padding-left: 28px !important;
   }
   #project-jump .drdn-content a {
     padding:8px;
@@ -259,21 +264,7 @@
     content: '\2261';
   }
 
-  /* search magnifier icon */
-  .search-magnifier {
-    font-family: var(--fonts-main);
-    color: #bbb;
-
-    cursor: pointer;
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(45deg);
-    -o-transform: rotate(45deg);
-  }
-
   .search-magnifier--flyout {
-    font-size: 1.5625rem;
-    line-height: 54px;
-
     position: absolute;
     z-index: 1;
     left: 12px;

app/helpers/application_helper.rb

@@ -610,7 +610,7 @@ module ApplicationHelper
                   :class => (@project.nil? && controller.class.main_menu ? 'selected' : nil))
     content =
       content_tag('div',
-                  content_tag('div', q, :class => 'quick-search') +
+                  content_tag('div', sprite_icon('search', icon_only: true, size: 18) + q, :class => 'quick-search') +
                     content_tag('div', render_projects_for_jump_box(projects, selected: @project),
                                 :class => 'drdn-items projects selection') +
                     content_tag('div', all, :class => 'drdn-items all-projects selection'),

app/views/layouts/base.html.erb

@@ -27,7 +27,7 @@
         <div class="flyout-menu__search">
             <%= form_tag(search_path(id: @project), :method => :get ) do %>
             <%= hidden_field_tag(controller.default_search_scope, 1, :id => nil) if controller.default_search_scope %>
-            <%= label_tag 'flyout-search', '&#9906;'.html_safe, :class => 'search-magnifier search-magnifier--flyout' %>
+            <%= label_tag 'flyout-search', sprite_icon('search', l(:label_search), icon_only: true), :class => 'search-magnifier search-magnifier--flyout' %>
             <%= text_field_tag 'q', @question, :id => 'flyout-search', :class => 'small js-search-input', :placeholder => l(:label_search) %>
             <% end %>
         </div>

config/icon_source.yml

@@ -197,3 +197,5 @@
   svg: chevrons-left
 - name: key
   svg: key
+- name: search
+  svg: search