Redesign the progress_bar html

Do not use a table layout anymore. Also the progress_bar helper
is documented now.
pull/2004/head
Philipp Tessenow 10 years ago
parent 62ea960327
commit fc46d41d01
  1. 3
      app/assets/stylesheets/legacy/_01_tables.sass
  2. 38
      app/assets/stylesheets/legacy/_06_progress_bar.sass
  3. 35
      app/helpers/application_helper.rb
  4. 18
      public/templates/components/progress_bar.html

@ -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

@ -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%

@ -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)

@ -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>

Loading…
Cancel
Save