Replaces icon-expanded and icon-collapsed with SVG icons (#23980).

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

app/assets/javascripts/application.js

@@ -35,12 +35,32 @@ function toggleRowGroup(el) {
   var n = tr.next();
   tr.toggleClass('open');
   $(el).toggleClass('icon-expanded icon-collapsed');
+  toggleExpendCollapseIcon(el)
   while (n.length && !n.hasClass('group')) {
     n.toggle();
     n = n.next('tr');
   }
 }
 
+function toggleExpendCollapseIcon(el) {
+  if (el.classList.contains('icon-expanded')) {
+    updateSVGIcon(el, 'angle-down')
+  } else {
+    updateSVGIcon(el, 'angle-right')
+  }
+}
+
+function updateSVGIcon(element, icon) {
+  const iconElement = element.getElementsByTagName("use").item(0)
+
+  if (iconElement === null) {
+    return false;
+  }
+
+  const iconPath = iconElement.getAttribute('href');
+  iconElement.setAttribute('href', iconPath.replace(/#.*$/g, "#icon--" + icon))
+}
+
 function collapseAllRowGroups(el) {
   var tbody = $(el).parents('tbody').first();
   tbody.children('tr').each(function(index) {
@@ -78,6 +98,7 @@ function toggleFieldset(el) {
   var fieldset = $(el).parents('fieldset').first();
   fieldset.toggleClass('collapsed');
   fieldset.children('legend').toggleClass('icon-expanded icon-collapsed');
+  toggleExpendCollapseIcon(fieldset.children('legend')[0])
   fieldset.children('div').toggle();
 }
 
@@ -552,27 +573,20 @@ function expandScmEntry(id) {
   $('#'+id).addClass('open');
 }
 
-function switchScmFolderIcon(el, from, to) {
-  var iconEl = el.find('svg use')
-  var iconHref = iconEl.attr('href')
-
-  iconEl.attr('href', iconHref.replace(from, to))
-}
-
 function scmEntryClick(id, url) {
     var el = $('#'+id);
     if (el.hasClass('open')) {
         collapseScmEntry(id);
         el.find('.expander').switchClass('icon-expanded', 'icon-collapsed');
         el.addClass('collapsed');
-        switchScmFolderIcon(el, 'icon--folder-open', 'icon--folder')
+        updateSVGIcon(el[0], 'folder')
 
         return false;
     } else if (el.hasClass('loaded')) {
         expandScmEntry(id);
         el.find('.expander').switchClass('icon-collapsed', 'icon-expanded');
         el.removeClass('collapsed');
-        switchScmFolderIcon(el, 'icon--folder', 'icon--folder-open')
+        updateSVGIcon(el[0], 'folder-open')
 
         return false;
     }
@@ -585,7 +599,7 @@ function scmEntryClick(id, url) {
       success: function(data) {
         el.after(data);
         el.addClass('open').addClass('loaded').removeClass('loading');
-        switchScmFolderIcon(el, 'icon--folder', 'icon--folder-open')
+        updateSVGIcon(el[0], 'folder-open')
         el.find('.expander').switchClass('icon-collapsed', 'icon-expanded');
       }
     });

app/assets/stylesheets/application.css

@@ -1771,8 +1771,8 @@ span.icon-label {
 .icon-shared:not(:has(svg)) { background-image: url(/link.png); }
 .icon-actions:not(:has(svg)) { background-image: url(/3_bullets.png); }
 .icon-sort-handle:not(:has(svg)) { background-image: url(/reorder.png); }
-.icon-expanded { background-image: url(/arrow_down.png); }
-.icon-collapsed { background-image: url(/arrow_right.png); }
+.icon-expanded:not(:has(svg)) { background-image: url(/arrow_down.png); }
+.icon-collapsed:not(:has(svg)) { background-image: url(/arrow_right.png); }
 .icon-bookmark:not(:has(svg)) { background-image: url(/tag_blue_delete.png); }
 .icon-bookmark-off:not(:has(svg)) { background-image: url(/tag_blue_add.png); }
 .icon-bookmarked-project:not(:has(svg)) { background-image: url(/tag_blue.png); }

app/views/calendars/show.html.erb

@@ -9,7 +9,10 @@
 <div id="query_form_with_buttons" class="hide-when-print">
 <div id="query_form_content">
   <fieldset id="filters" class="collapsible <%= @query.new_record? ? "" : "collapsed" %>">
-    <legend onclick="toggleFieldset(this);" class="icon icon-<%= @query.new_record? ? "expanded" : "collapsed" %>"><%= l(:label_filter_plural) %></legend>
+    <legend onclick="toggleFieldset(this);" class="icon icon-<%= @query.new_record? ? "expanded" : "collapsed" %>">
+      <%= sprite_icon(@query.new_record? ? "angle-down" : "angle-right") %>
+      <%= l(:label_filter_plural) %>
+    </legend>
     <div style="<%= @query.new_record? ? "" : "display: none;" %>">
       <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
     </div>

app/views/gantts/show.html.erb

@@ -15,14 +15,20 @@
 <div id="query_form_with_buttons" class="hide-when-print">
 <div id="query_form_content">
   <fieldset id="filters" class="collapsible <%= @query.new_record? ? "" : "collapsed" %>">
-    <legend onclick="toggleFieldset(this);" class="icon icon-<%= @query.new_record? ? "expanded" : "collapsed" %>"><%= l(:label_filter_plural) %></legend>
+    <legend onclick="toggleFieldset(this);" class="icon icon-<%= @query.new_record? ? "expanded" : "collapsed" %>">
+      <%= sprite_icon(@query.new_record? ? "angle-down" : "angle-right") %>
+      <%= l(:label_filter_plural) %>
+    </legend>
     <div style="<%= @query.new_record? ? "" : "display: none;" %>">
       <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
     </div>
   </fieldset>
 
   <fieldset id="options" class="collapsible collapsed">
-    <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_options) %></legend>
+    <legend onclick="toggleFieldset(this);" class="icon icon-collapsed">
+      <%= sprite_icon("angle-right") %>
+      <%= l(:label_options) %>
+    </legend>
     <div style="display: none;">
       <div>
             <fieldset>

app/views/imports/_issues_mapping.html.erb

@@ -6,7 +6,10 @@
 </fieldset>
 
 <fieldset class="box tabular collapsible collapsed">
-  <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_relations_mapping) %></legend>
+  <legend onclick="toggleFieldset(this);" class="icon icon-collapsed">
+    <%= sprite_icon("angle-right") %>
+    <%= l(:label_relations_mapping) %>
+  </legend>
   <div id="relations-mapping" style="display: none;">
     <%= render :partial => 'issues_relations_mapping' %>
   </div>

app/views/issues/_list.html.erb

@@ -24,7 +24,7 @@
     <% reset_cycle %>
     <tr class="group open">
       <td colspan="<%= query.inline_columns.size + 2 %>">
-        <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
+        <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);"><%= sprite_icon("angle-down") %></span>
         <span class="name"><%= group_name %></span> <span class="badge badge-count count"><%= group_count %></span> <span class="totals"><%= group_totals %></span>
         <%= link_to_function("#{l(:button_collapse_all)}/#{l(:button_expand_all)}",
                              "toggleAllRowGroups(this)", :class => 'toggle-all') %>

app/views/projects/_list.html.erb

@@ -26,7 +26,7 @@
     <% reset_cycle %>
     <tr class="group open">
       <td colspan="<%= @query.inline_columns.size %>">
-        <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
+        <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);"><%= sprite_icon("angle-down") %></span>
         <span class="name"><%= group_name %></span>
         <% if group_count %>
         <span class="count"><%= group_count %></span>

app/views/queries/_query_form.html.erb

@@ -5,7 +5,10 @@
 <div id="query_form_with_buttons" class="hide-when-print">
 <div id="query_form_content">
   <fieldset id="filters" class="collapsible <%= @query.new_record? ? "" : "collapsed" %>">
-    <legend onclick="toggleFieldset(this);" class="icon icon-<%= @query.new_record? ? "expanded" : "collapsed" %>"><%= l(:label_filter_plural) %></legend>
+    <legend onclick="toggleFieldset(this);" class="icon icon-<%= @query.new_record? ? "expanded" : "collapsed" %>">
+      <%= sprite_icon(@query.new_record? ? "angle-down" : "angle-right") %>
+      <%= l(:label_filter_plural) %>
+    </legend>
     <div style="<%= @query.new_record? ? "" : "display: none;" %>">
       <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
     </div>
@@ -13,7 +16,10 @@
 
   <% if @query.available_columns.any? %>
     <fieldset id="options" class="collapsible collapsed">
-      <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_options) %></legend>
+      <legend onclick="toggleFieldset(this);" class="icon icon-collapsed">
+        <%= sprite_icon("angle-right") %>
+        <%= l(:label_options) %>
+      </legend>
         <div class="hidden">
           <% if @query.available_display_types.size > 1 %>
           <div>

app/views/repositories/_dir_list_content.html.erb

@@ -14,7 +14,7 @@
                        :path   => to_path_param(ent_path),
                        :rev    => @rev,
                        :depth  => (depth + 1),
-                       :parent_id => tr_id)) %>');">&nbsp;</span>
+                       :parent_id => tr_id)) %>');"><%= sprite_icon('angle-right') %></span>
 <% end %>
 <%=  link_to icon_for_file(entry, ent_name),
           {:action => (entry.is_dir? ? 'show' : 'entry'), :id => @project, :repository_id => @repository.identifier_param, :path => to_path_param(ent_path), :rev => @rev},

app/views/roles/permissions.html.erb

@@ -2,7 +2,10 @@
 
 <div class="hide-when-print">
   <fieldset id="filters" class="collapsible collapsed">
-    <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_filter_plural) %></legend>
+    <legend onclick="toggleFieldset(this);" class="icon icon-collapsed">
+      <%= sprite_icon("angle-right") %>
+      <%= l(:label_filter_plural) %>
+    </legend>
     <div style="display: none;">
       <%= form_tag({}, :method => :get) do %>
         <fieldset>
@@ -49,7 +52,7 @@
     <% unless mod.blank? %>
         <tr class="group open">
           <td>
-            <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
+            <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);"><%= sprite_icon("angle-down") %></span>
             <%= l_or_humanize(mod, :prefix => 'project_module_') %>
           </td>
           <% @roles.each do |role| %>

app/views/search/index.html.erb

@@ -24,7 +24,10 @@
 </fieldset>
 
 <fieldset class="collapsible collapsed">
-  <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_options) %></legend>
+  <legend onclick="toggleFieldset(this);" class="icon icon-collapsed">
+    <%= sprite_icon("angle-right") %>
+    <%= l(:label_options) %>
+  </legend>
   <div id="options-content" style="display:none;">
     <p><label><%= check_box_tag 'open_issues', 1, @open_issues %> <%= l(:label_search_open_issues_only) %></label></p>
     <p>

app/views/timelog/_list.html.erb

@@ -20,7 +20,7 @@
     <% reset_cycle %>
     <tr class="group open">
       <td colspan="<%= @query.inline_columns.size + 2 %>">
-        <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
+        <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);"><%= sprite_icon("angle-down") %></span>
         <span class="name"><%= group_name %></span>
         <% if group_count %>
         <span class="badge badge-count count"><%= group_count %></span>

app/views/trackers/fields.html.erb

@@ -20,7 +20,7 @@
     <tbody>
       <tr class="group open">
         <td colspan="<%= @trackers.size + 1 %>">
-          <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
+          <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);"><%= sprite_icon("angle-down") %></span>
           <%= l(:field_core_fields) %>
         </td>
       </tr>
@@ -44,7 +44,7 @@
       <% if @custom_fields.any? %>
         <tr class="group open">
           <td colspan="<%= @trackers.size + 1 %>">
-            <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
+            <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);"><%= sprite_icon("angle-down") %></span>
             <%= l(:label_custom_field_plural) %>
           </td>
         </tr>

app/views/users/_list.html.erb

@@ -20,7 +20,7 @@
     <% reset_cycle %>
     <tr class="group open">
       <td colspan="<%= @query.inline_columns.size + 2 %>">
-        <span class="expander" onclick="toggleRowGroup(this);">&nbsp;</span>
+        <span class="expander" onclick="toggleRowGroup(this);"><%= sprite_icon("angle-down") %></span>
         <span class="name"><%= group_name %></span>
         <% if group_count %>
         <span class="count"><%= group_count %></span>

app/views/versions/_sidebar.html.erb

@@ -42,7 +42,7 @@
 </ul>
 <% if @completed_versions.present? %>
 <p>
-  <%= link_to_function l(:label_completed_versions),
+  <%= link_to_function icon_with_label('angle-right', l(:label_completed_versions)),
                        '$("#toggle-completed-versions").toggleClass("icon-collapsed icon-expanded"); $("#completed-versions").toggle()',
                        :id => 'toggle-completed-versions', :class => 'icon icon-collapsed collapsible' %>
   <ul id = "completed-versions" style = "display:none;">

app/views/wiki/show.html.erb

@@ -62,7 +62,10 @@
 <%= render(:partial => "wiki/content", :locals => {:content => @content}) %>
 
 <fieldset class="collapsible collapsed hide-when-print">
-  <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_attachment_plural) %> (<%= @page.attachments.length %>)</legend>
+  <legend onclick="toggleFieldset(this);" class="icon icon-collapsed">
+    <%= sprite_icon("angle-right") %>
+    <%= l(:label_attachment_plural) %> (<%= @page.attachments.length %>)
+  </legend>
   <div style="display: none;">
 
   <%= link_to_attachments @page, :thumbnails => true %>

app/views/workflows/edit.html.erb

@@ -40,7 +40,10 @@
       <%= render :partial => 'form', :locals => {:name => 'always', :workflows => @workflows['always']} %>
 
       <fieldset class="collapsible" style="padding: 0; margin-top: 0.5em;">
-        <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_additional_workflow_transitions_for_author) %></legend>
+        <legend onclick="toggleFieldset(this);" class="icon icon-collapsed">
+          <%= sprite_icon("angle-right") %>
+          <%= l(:label_additional_workflow_transitions_for_author) %>
+        </legend>
         <div id="author_workflows" style="margin: 0.5em 0 0.5em 0;">
           <%= render :partial => 'form', :locals => {:name => 'author', :workflows => @workflows['author']} %>
         </div>
@@ -48,7 +51,10 @@
       <%= javascript_tag "hideFieldset($('#author_workflows'))" unless @workflows['author'].present? %>
 
       <fieldset class="collapsible" style="padding: 0;">
-        <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_additional_workflow_transitions_for_assignee) %></legend>
+        <legend onclick="toggleFieldset(this);" class="icon icon-collapsed">
+          <%= sprite_icon("angle-right") %>
+          <%= l(:label_additional_workflow_transitions_for_assignee) %>
+        </legend>
         <div id="assignee_workflows" style="margin: 0.5em 0 0.5em 0;">
       <%= render :partial => 'form', :locals => {:name => 'assignee', :workflows => @workflows['assignee']} %>
         </div>

app/views/workflows/permissions.html.erb

@@ -54,7 +54,7 @@
     <tbody>
       <tr class="group open">
         <td colspan="<%= @statuses.size + 1 %>">
-          <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
+          <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);"><%= sprite_icon("angle-down") %></span>
           <%= l(:field_core_fields) %>
         </td>
       </tr>
@@ -74,7 +74,7 @@
       <% if @custom_fields.any? %>
         <tr class="group open">
           <td colspan="<%= @statuses.size + 1 %>">
-            <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
+            <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);"><%= sprite_icon("angle-down") %></span>
             <%= l(:label_custom_field_plural) %>
           </td>
         </tr>

lib/redmine/wiki_formatting/macros.rb

@@ -248,10 +248,10 @@ module Redmine
         hide_label = args[1] || args[0] || l(:button_hide)
         js = "$('##{html_id}-show, ##{html_id}-hide').toggle(); $('##{html_id}').fadeToggle(150);"
         out = ''.html_safe
-        out << link_to_function(show_label, js, :id => "#{html_id}-show", :class => 'icon icon-collapsed collapsible')
+        out << link_to_function(icon_with_label('angle-right', show_label), js, :id => "#{html_id}-show", :class => 'icon icon-collapsed collapsible')
         out <<
           link_to_function(
-            hide_label, js,
+            icon_with_label('angle-down', hide_label), js,
             :id => "#{html_id}-hide",
             :class => 'icon icon-expanded collapsible',
             :style => 'display:none;'