Redesign the progress_bar html

Do not use a table layout anymore. Also the progress_bar helper
is documented now.

app/assets/stylesheets/legacy/_01_tables.sass

@@ -106,9 +106,6 @@ tr.issue
   td
     &.subject
       text-align: left
-    &.done_ratio table.progress
-      margin-left: auto
-      margin-right: auto
   &.idnt td.subject a
     background: image-url("bullet_arrow_right.png") no-repeat 0 50%
     padding-left: 16px

app/assets/stylesheets/legacy/_06_progress_bar.sass

@@ -28,35 +28,25 @@
 
 /***** Progress bar ****
 
-#content table.progress
-  border-spacing: 0pt
-  empty-cells: show
-  text-align: center
-  float: left
+.progress-bar
+  display: inline-block
   margin: 3px 6px 1px 0px
+  height: 0.9em
   border: 1px solid #BBBBBB
-  border-collapse: separate
   -moz-border-radius: 3px
   -webkit-border-radius: 3px
   border-radius: 3px
-  td
-    min-width: 0
-    max-width: 0
-    height: 0.9em
-    &.closed
-      background: #BAE0BA none repeat scroll 0%
+  background: #FFFFFF none repeat scroll 0%
+
+  .inner-progress
+    display: inline-block
+    float: left
+    height: 100%
     &.done
       background: #DEF0DE none repeat scroll 0%
-    &.open
-      background: #FFF none repeat scroll 0%
+    &.closed
+      background: #BAE0BA none repeat scroll 0%
+
+.progress-bar-legend
+  font-size: 80%
 
-p
-  &.percent
-    font-size: 80%
-  &.progress-bar-legend
-    font-size: 80%
-    float: left
-  &.progress-info
-    clear: left
-    font-style: italic
-    font-size: 80%

app/helpers/application_helper.rb

@@ -453,27 +453,30 @@ module ApplicationHelper
     link_to_function(l(:button_uncheck_all), "checkAll('#{form_name}', false)")
   end
 
+  # Generates the HTML for a progress bar
+  # Params:
+  # * pcts:
+  #   * a number indicating the percentage done
+  #   * or an array of two numbers -> [percentage_closed, percentage_done]
+  #     where percentage_closed <= percentage_done
+  #     and   percentage_close + percentage_done <= 100
+  # * options:
+  #   A hash containing the following keys:
+  #   * width: (default '100px') the css-width for the progress bar
+  #   * legend: (default: '') the text displayed alond with the progress bar
   def progress_bar(pcts, options={})
-    pcts = [pcts, pcts] unless pcts.is_a?(Array)
-    pcts = pcts.collect(&:round)
-    pcts[1] = pcts[1] - pcts[0]
-    pcts << (100 - pcts[1] - pcts[0])
+    pcts = Array(pcts).map(&:round)
+    closed = pcts[0]
+    done   = (pcts[1] || closed) - closed
     width = options[:width] || '100px;'
     legend = options[:legend] || ''
 
-    bar = content_tag 'table', { :class => 'progress', :style => "width: #{width};" } do
-      row = content_tag 'tr' do
-        ((pcts[0] > 0 ? content_tag('td', '', :style => "width: #{pcts[0]}%;", :class => 'closed') : '') +
-        (pcts[1] > 0 ? content_tag('td', '', :style => "width: #{pcts[1]}%;", :class => 'done') : '') +
-        (pcts[2] > 0 ? content_tag('td', '', :style => "width: #{pcts[2]}%;", :class => 'todo') : '')).html_safe
-      end
-    end
-
-    number = content_tag 'p', :class => 'percent' do
-      legend + '% ' + l(:total_progress)
+    content_tag :span do
+      content_tag :span, {class: 'progress-bar', style: "width: #{width}"} do
+        content_tag(:span, '', class: 'inner-progress closed', style: "width: #{closed}%") +
+        content_tag(:span, '', class: 'inner-progress done',   style: "width: #{done}%")
+      end.<<(content_tag :span, "#{legend}% #{l(:total_progress)}", class: 'progress-bar-legend')
     end
-
-    bar + number
   end
 
   def checked_image(checked=true)

public/templates/components/progress_bar.html

@@ -1,11 +1,7 @@
-<div>
-  <table class="progress" ng-style="{width: width}">
-    <tbody>
-      <tr>
-        <td class="closed" ng-if="progressInPercent > 0" ng-style="{width: progressInPercent + '%'}"></td>
-        <td class="todo" ng-style="{width: (scaleLength - progressInPercent) + '%'}"></td>
-      </tr>
-    </tbody>
-  </table>
-  <p class="progress-bar-legend">{{ I18n.t('js.label_total_progress', { percent: progressInPercent || 0 }) }}</p>
-</div>
+<span>
+  <span ng-style="{width: width}" class="progress-bar">
+    <span ng-style="{width: progressInPercent + '%'}" class="inner-progress closed"></span>
+    <span style="width: 0%" class="inner-progress done"></span>
+  </span>
+  <span class="progress-bar-legend">{{ I18n.t('js.label_total_progress', { percent: progressInPercent || 0 }) }}</span>
+</span>