Uses icon font instead of expand/collapse image

app/assets/javascripts/application.js.erb

@@ -162,42 +162,42 @@ function showAndScrollTo(id, focus) {
 }
 
 function setGroupRowStatus(el) {
-  var tr = jQuery(el).closest("tr");
-  var isOpen = tr.hasClass("open")
-  var toggleButton = tr.find("img").first();
-  var toggleButtonAltText = isOpen ? I18n.t('js.label_collapse') : I18n.t('js.label_expand');
-  var toggleButtonImage = isOpen ? "<%= asset_path 'bullet_toggle_minus.png' %>" : "<%= asset_path 'bullet_toggle_plus.png' %>"; 
-  var toggleAllLink = tr.find(".toggle-all")
+  var collapseExpandButton = jQuery(el);
+  var row = jQuery(el).closest("tr");
+  var isOpen = row.hasClass("open")
+  var toggleAllLink = row.find(".toggle-all")
   var toggleAllLinkText = isOpen ? I18n.t('js.label_collapse_all') : I18n.t('js.label_expand_all');
 
-  toggleButton.attr("alt", toggleButtonAltText);
-  toggleButton.attr("src", toggleButtonImage);
-
+  collapseExpandButton.toggleClass("icon-minus")
+  collapseExpandButton.toggleClass("icon-plus")
   toggleAllLink.text(toggleAllLinkText);
 }
 
 function toggleRowGroup(el) {
-  var tr = jQuery(el).closest("tr");
+  var row = jQuery(el).closest("tr");
   
-  tr.toggleClass("open");
+  row.toggleClass("open closed");
 
   setGroupRowStatus(el);
 
-  tr.nextUntil("tr.group").each(function(index) {
+  row.nextUntil("tr.group").each(function(index) {
     jQuery(this).toggle();
   });
 }
 
 function toggleAllRowGroups(el) {
-  var tr = jQuery(el).closest("tr");
-  var isOpen = tr.hasClass("open");
+  var row = jQuery(el).closest("tr");
+  var collapseExpandButton = jQuery(row).find(".expander");
+  var isOpen = row.hasClass("open");
 
-  toggleRowGroup(el);
+  toggleRowGroup(collapseExpandButton);
 
-  tr.siblings("tr.group").each(function(index) {
+  row.siblings("tr.group").each(function(index) {
     var currentGroupOpen = jQuery(this).hasClass("open");
+    var collapseExpandButton = jQuery(this).find(".expander");
+
     if (isOpen == currentGroupOpen) {
-      toggleRowGroup(this);
+      toggleRowGroup(collapseExpandButton);
     }
   });
 }

app/assets/stylesheets/default/main.css.erb

@@ -99,9 +99,9 @@ tr.entry td.revision, tr.entry td.author { text-align: center; }
 tr.entry td.age { text-align: right; }
 tr.entry.file td.filename a { margin-left: 16px; }
 
-tr span.expander {padding-left: 2px; cursor: pointer;}
-tr span.expander img {vertical-align:middle;}
-tr.open span.expander {}
+tr span.expander {cursor: pointer;}
+tr.open span .expand { display:none; }
+tr.closed span .collapse { display:none; }
 
 tr.changeset td.author { text-align: center; width: 15%; }
 tr.changeset td.committed_on { text-align: center; width: 15%; }

app/views/work_packages/_list.html.erb

@@ -59,8 +59,9 @@ See doc/COPYRIGHT.rdoc for more details.
       <% reset_cycle %>
       <tr class="group open">
         <td colspan="<%= query.columns.size + 2 %>">
-          <span class="expander" onclick="toggleRowGroup(this); return false;">
-            <img src="<%= asset_path 'bullet_toggle_minus.png' %>" alt="<%= I18n.t('label_collapse') %>" />
+          <span class="expander icon-context icon-minus" onclick="toggleRowGroup(this); return false;">
+            <span class="hidden-for-sighted expand"><%= I18n.t('label_expand') %></span>
+            <span class="hidden-for-sighted collapse"><%= I18n.t('label_collapse') %></span>
           </span>
 
           <span>