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

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 96a9986bbcc36d70ed509b6bed3312984a6a3d62..4560bff097cdc858d10f286e2645b4b078650f2d 100644 (file)
--- a/app/assets/javascripts/application.js
+++ b/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');
       }
     });

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 3667f19e8a90b7ea45e9eeaf8ca7584bb983cd35..c3ce852c230bd3b9ec0480b9214db4e519530395 100644 (file)
--- a/app/assets/stylesheets/application.css
+++ b/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); }

diff --git a/app/views/calendars/show.html.erb b/app/views/calendars/show.html.erb
index 950836a15b7590356fa83ace4aba235dd6dc2c82..fa0f1cbc87bc3d46a246745d344eab8c94880113 100644 (file)
--- a/app/views/calendars/show.html.erb
+++ b/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>

diff --git a/app/views/gantts/show.html.erb b/app/views/gantts/show.html.erb
index 3e73d9d7aba889408ac77710d7d5e88d3014a392..cf602e439985ae09a9afa06a4974961749ae5984 100644 (file)
--- a/app/views/gantts/show.html.erb
+++ b/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>

diff --git a/app/views/imports/_issues_mapping.html.erb b/app/views/imports/_issues_mapping.html.erb
index e1f01881e67670bc97e128e6563ef20af0384ef6..86e2dd89a8d435bde23074910589e063bf540fe4 100644 (file)
--- a/app/views/imports/_issues_mapping.html.erb
+++ b/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>

diff --git a/app/views/issues/_list.html.erb b/app/views/issues/_list.html.erb
index 74b6c94f82cdf7b6721670bbd58d5615c7340e16..df562c6f23be07e51e64cc01f6495f79dfacdcbd 100644 (file)
--- a/app/views/issues/_list.html.erb
+++ b/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') %>

diff --git a/app/views/projects/_list.html.erb b/app/views/projects/_list.html.erb
index f5eae37a6522d69e50525911cf1cfd5ac2011197..6bfd5eb01a0c0eeef0da0559c728260c419c2dfc 100644 (file)
--- a/app/views/projects/_list.html.erb
+++ b/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>

diff --git a/app/views/queries/_query_form.html.erb b/app/views/queries/_query_form.html.erb
index 2e9aa0f251dc6924aef08696d834b73a015afb6f..c28a4cab62ef86f854518b77f2776bfe168e674f 100644 (file)
--- a/app/views/queries/_query_form.html.erb
+++ b/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>

diff --git a/app/views/repositories/_dir_list_content.html.erb b/app/views/repositories/_dir_list_content.html.erb
index a46f9665bb22dc996d6593af51d499fd3c7c9241..e4da53c67a420b9378b3d61b3a46e0da0071da94 100644 (file)
--- a/app/views/repositories/_dir_list_content.html.erb
+++ b/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},

diff --git a/app/views/roles/permissions.html.erb b/app/views/roles/permissions.html.erb
index 30162450977680ebc3a16d5f0cbe7b5dd15e4a5c..07fb6f6156b845416c110e4d2c10e73135336c73 100644 (file)
--- a/app/views/roles/permissions.html.erb
+++ b/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| %>

diff --git a/app/views/search/index.html.erb b/app/views/search/index.html.erb
index 5902051ba3f7531df5a431b8f99a7097075a4cbd..ce7887a9d2fba3d23f751acf8ce8379bc06fc763 100644 (file)
--- a/app/views/search/index.html.erb
+++ b/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>

diff --git a/app/views/timelog/_list.html.erb b/app/views/timelog/_list.html.erb
index f0e14418fb82bc45ee9d1540b41106d40024aa52..602072203038bace78dbb78c98be73204fc58ad5 100644 (file)
--- a/app/views/timelog/_list.html.erb
+++ b/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>

diff --git a/app/views/trackers/fields.html.erb b/app/views/trackers/fields.html.erb
index 684e539d6b4a39af30438d8b65dee87055582a84..0b0fee3736fd2bfc29f86c7aa23641a1e6e3cec3 100644 (file)
--- a/app/views/trackers/fields.html.erb
+++ b/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>

diff --git a/app/views/users/_list.html.erb b/app/views/users/_list.html.erb
index d2b9fa0ee241e6fafab9dfba91b9056dbf36615f..04b4ddfb583b2de59bbf354e247e7e734fcf7bce 100644 (file)
--- a/app/views/users/_list.html.erb
+++ b/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>

diff --git a/app/views/versions/_sidebar.html.erb b/app/views/versions/_sidebar.html.erb
index 0ce93fe82b9dcb154112dc3d0020278f876c70cb..3f6a4a6e965a9cb6f55dc6ae266550a67de9ea9c 100644 (file)
--- a/app/views/versions/_sidebar.html.erb
+++ b/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;">

diff --git a/app/views/wiki/show.html.erb b/app/views/wiki/show.html.erb
index 8acb0abdcb5a0098c5b163e177fb7ac28a7c1fdd..4d26171b88f74e389f3ac004415b82db7b75e6a6 100644 (file)
--- a/app/views/wiki/show.html.erb
+++ b/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 %>

diff --git a/app/views/workflows/edit.html.erb b/app/views/workflows/edit.html.erb
index df4507be2eb4b982f2fa13d0b6d24584f9589105..defb521a3125fa659574f3e4eadeebf4748b03c1 100644 (file)
--- a/app/views/workflows/edit.html.erb
+++ b/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>
@@ -57,4 +63,4 @@
     </div>
     <%= submit_tag l(:button_save) %>
   <% end %>
-<% end %>
\ No newline at end of file
+<% end %>

diff --git a/app/views/workflows/permissions.html.erb b/app/views/workflows/permissions.html.erb
index c366a78380e26d33f27bb68d65829341085fe96a..9b326dea2960ab1b1f869b8ae1ef80e5615eec47 100644 (file)
--- a/app/views/workflows/permissions.html.erb
+++ b/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>

diff --git a/lib/redmine/wiki_formatting/macros.rb b/lib/redmine/wiki_formatting/macros.rb
index f2b8c297f865ba3f6b5944e52b263c25bf12d8cd..1baac34523361d9a8d51191fc96f68dddb25083a 100644 (file)
--- a/lib/redmine/wiki_formatting/macros.rb
+++ b/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;'