Replace legacy PNG icons with SVG icons for multiselect toggles (#42130).

Patch by Mizuki ISHIKAWA (user:ishikawa999).


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

app/assets/images/icons.svg

@@ -455,6 +455,15 @@
       <path d="M19 16v6"/>
       <path d="M12 7v5l3 3"/>
     </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--toggle-minus">
+      <path d="M9 12h6"/>
+      <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"/>
+    </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--toggle-plus">
+      <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"/>
+      <path d="M15 12h-6"/>
+      <path d="M12 9v6"/>
+    </symbol>
     <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--unlock">
       <path d="M5 11m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"/>
       <path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>

app/assets/javascripts/application.js

@@ -209,9 +209,20 @@ function buildFilterRow(field, operator, values) {
   case "list_optional_with_history":
   case "list_status":
   case "list_subprojects":
+    const iconType = values.length > 1 ? 'toggle-minus' : 'toggle-plus';
+    const clonedIcon = document.querySelector('#icon-copy-source svg').cloneNode(true);
+    updateSVGIcon(clonedIcon, iconType);
+
     tr.find('.values').append(
-      '<span style="display:none;"><select class="value" id="values_'+fieldId+'_1" name="v['+field+'][]"></select>' +
-      ' <span class="toggle-multiselect icon-only '+(values.length > 1 ? 'icon-toggle-minus' : 'icon-toggle-plus')+'">&nbsp;</span></span>'
+      $('<span>', { style: 'display:none;' }).append(
+        $('<select>', {
+          class: 'value',
+          id: `values_${fieldId}_1`,
+          name: `v[${field}][]`,
+        }),
+        '\n',
+        $('<span>', { class: `toggle-multiselect icon-only icon-${iconType}` }).append(clonedIcon)
+      )
     );
     select = tr.find('.values select');
     if (values.length > 1) { select.attr('multiple', true); }
@@ -1010,12 +1021,16 @@ function toggleDisabledInit() {
   $('input[data-disables], input[data-enables], input[data-shows]').each(toggleDisabledOnChange);
 }
 function toggleMultiSelectIconInit() {
-  $('.toggle-multiselect:not(.icon-toggle-minus), .toggle-multiselect:not(.icon-toggle-plus)').each(function(){
-    if ($(this).siblings('select').find('option:selected').length > 1){
-      $(this).addClass('icon-toggle-minus');
+  $('.toggle-multiselect:not(.icon-toggle-minus):not(.icon-toggle-plus)').each(function(){
+    let iconType;
+    if ($(this).siblings('select').find('option:selected').length > 1) {
+      iconType = 'toggle-minus';
     } else {
-      $(this).addClass('icon-toggle-plus');
+      iconType = 'toggle-plus';
     }
+
+    $(this).addClass(`icon-${iconType}`);
+    updateSVGIcon($(this).find('svg')[0], iconType);
   });
 }
 
@@ -1061,6 +1076,7 @@ $(document).ready(function(){
   $('#content').on('click', '.toggle-multiselect', function() {
     toggleMultiSelect($(this).siblings('select'));
     $(this).toggleClass('icon-toggle-plus icon-toggle-minus');
+    updateSVGIcon($(this).find('svg')[0], $(this).hasClass('icon-toggle-plus') ? 'toggle-plus' : 'toggle-minus');
   });
   toggleMultiSelectIconInit();
 

app/assets/stylesheets/application.css

@@ -1910,8 +1910,8 @@ span.icon-label {
 .icon-bookmarked-project:not(:has(svg)) { background-image: url(/tag_blue.png); }
 .icon-sorted-asc:not(:has(svg)) { background-image: url(/arrow_down.png); }
 .icon-sorted-desc:not(:has(svg)) { background-image: url(/arrow_up.png); }
-.icon-toggle-plus { background-image: url(/bullet_toggle_plus.png) }
-.icon-toggle-minus { background-image: url(/bullet_toggle_minus.png) }
+.icon-toggle-plus:not(:has(svg)) { background-image: url(/bullet_toggle_plus.png) }
+.icon-toggle-minus:not(:has(svg)) { background-image: url(/bullet_toggle_minus.png) }
 .icon-clear-query:not(:has(svg)) { background-image: url(/close_hl.png); }
 .icon-import:not(:has(svg)) { background-image: url(/database_go.png); }
 

app/assets/stylesheets/rtl.css

@@ -142,8 +142,6 @@ fieldset.collapsible.collapsed>legend { background-image: url(/arrow_left.png);
 
 fieldset#filters td.add-filter {text-align:left; }
 
-.toggle-multiselect {background: url(/bullet_toggle_plus.png) no-repeat right 40%; padding-left:0px; padding-right:8px; margin-right:0;}
-
 div#issue-changesets {float:left;  margin-left:0em; margin-right:1em; padding-left:0em; padding-right:1em;}
 
 .journal ul.details img {margin:0 4px -3px 0;}

app/views/queries/_filters.html.erb

@@ -22,5 +22,6 @@ $(document).ready(function(){
 <%= select_tag 'add_filter_select', filters_options_for_select(query), :name => nil %>
 </div>
 
+<div id="icon-copy-source" style="display: none;"><%= sprite_icon('') %></div>
 <%= hidden_field_tag 'f[]', '' %>
 <% include_calendar_headers_tags %>

app/views/workflows/edit.html.erb

@@ -15,12 +15,12 @@
 <p>
   <label><%=l(:label_role)%>:
   <%= options_for_workflow_select 'role_id[]', Role.sorted.select(&:consider_workflow?), @roles, :id => 'role_id', :class => 'expandable' %>
-  <span class="toggle-multiselect icon-only"></span>
+  <span class="toggle-multiselect icon-only"><%= sprite_icon('') %></span>
   </label>
 
   <label><%=l(:label_tracker)%>:
   <%= options_for_workflow_select 'tracker_id[]', Tracker.sorted, @trackers, :id => 'tracker_id', :class => 'expandable' %>
-  <span class="toggle-multiselect icon-only"></span>
+  <span class="toggle-multiselect icon-only"><%= sprite_icon('') %></span>
   </label>
 
   <%= submit_tag l(:button_edit), :name => nil %>

app/views/workflows/permissions.html.erb

@@ -15,12 +15,12 @@
 <p>
   <label><%=l(:label_role)%>:
   <%= options_for_workflow_select 'role_id[]', Role.sorted.select(&:consider_workflow?), @roles, :id => 'role_id', :class => 'expandable' %>
-  <span class="toggle-multiselect icon-only"></span>
+  <span class="toggle-multiselect icon-only"><%= sprite_icon('') %></span>
   </label>
 
   <label><%=l(:label_tracker)%>:
   <%= options_for_workflow_select 'tracker_id[]', Tracker.sorted, @trackers, :id => 'tracker_id', :class => 'expandable' %>
-  <span class="toggle-multiselect icon-only"></span>
+  <span class="toggle-multiselect icon-only"><%= sprite_icon('') %></span>
   </label>
   <%= submit_tag l(:button_edit), :name => nil %>
 

config/icon_source.yml

@@ -205,3 +205,7 @@
   svg: key
 - name: search
   svg: search
+- name: toggle-plus
+  svg: square-rounded-plus
+- name: toggle-minus
+  svg: square-rounded-minus