progress_bar_recreate.diff

Bernhard Rohloff, 2019-09-27 17:49

Download (7.76 KB)

View differences:

app/helpers/application_helper.rb
1445 1445
      content_tag('p', legend, :class => 'percent').html_safe
1446 1446
  end
1447 1447

  
1448

  
1449
  def bar_graph(pcts, options={})
1450
    pcts = [pcts] unless pcts.is_a?(Array)
1451
    case pcts[0]
1452
    when Integer, Float
1453
      pcts = pcts.sort.reverse
1454
      bar = content_tag :div, :class => "bar-graph" do
1455
        content = pcts.each_with_index.collect do |p, index|
1456
          content_tag( 'span', '',
1457
                      :style => "width: #{p}%",
1458
                      :title => "#{p.floor}%" )
1459
        end.join.html_safe
1460
      end
1461
    when Hash
1462
      pcts = pcts.sort_by{ |k| k[:pcts] }.reverse
1463
      bar = content_tag :div, :class => "bar-graph" do
1464
        content = pcts.each_with_index.collect do |p, index|
1465
          concat content_tag( 'span', '',
1466
                             :style => "width: #{p[:pcts].floor}%",
1467
                             :title => "#{p[:label] || ''}: #{p[:pcts].floor}%" )
1468
        end.join.html_safe
1469
      end
1470
    end
1471
    legend = content_tag( 'p', options[:legend] || '', :class => 'legend' ).html_safe
1472
    content_tag( 'div', bar + legend, :class => "#{options[:class] || ''}" )
1473
  end
1474

  
1475

  
1448 1476
  def checked_image(checked=true)
1449 1477
    if checked
1450 1478
      @checked_image_tag ||= content_tag(:span, nil, :class => 'icon-only icon-checked')
app/helpers/issues_helper.rb
117 117
             content_tag('td', link_to_issue(child, :project => (issue.project_id != child.project_id)), :class => 'subject', :style => 'width: 50%') +
118 118
             content_tag('td', h(child.status), :class => 'status') +
119 119
             content_tag('td', link_to_user(child.assigned_to), :class => 'assigned_to') +
120
             content_tag('td', child.disabled_core_fields.include?('done_ratio') ? '' : progress_bar(child.done_ratio), :class=> 'done_ratio') +
120
             content_tag('td', child.disabled_core_fields.include?('done_ratio') ? '' : bar_graph(child.done_ratio, :class => 'progress-bar'), :class=> 'done_ratio') +
121 121
             content_tag('td', buttons, :class => 'buttons'),
122 122
             :class => css)
123 123
    end
......
154 154
             content_tag('td', other_issue.status, :class => 'status') +
155 155
             content_tag('td', format_date(other_issue.start_date), :class => 'start_date') +
156 156
             content_tag('td', format_date(other_issue.due_date), :class => 'due_date') +
157
             content_tag('td', other_issue.disabled_core_fields.include?('done_ratio') ? '' : progress_bar(other_issue.done_ratio), :class=> 'done_ratio') +
157
             content_tag('td', other_issue.disabled_core_fields.include?('done_ratio') ? '' : bar_graph(other_issue.done_ratio, :class => 'progress-bar'), :class=> 'done_ratio') +
158 158
             content_tag('td', buttons, :class => 'buttons'),
159 159
             :id => "relation-#{relation.id}",
160 160
             :class => css)
app/helpers/queries_helper.rb
223 223
    when :last_notes
224 224
      item.last_notes.present? ? content_tag('div', textilizable(item, :last_notes), :class => "wiki") : ''
225 225
    when :done_ratio
226
      progress_bar(value)
226
      bar_graph(value, :class => 'progress-bar')
227 227
    when :relations
228 228
      content_tag('span',
229 229
        value.to_s(item) {|other| link_to_issue(other, :subject => false, :tracker => false)}.html_safe,
app/views/issues/show.html.erb
62 62
    rows.right l(:field_due_date), issue_due_date_details(@issue), :class => 'due-date'
63 63
  end
64 64
  unless @issue.disabled_core_fields.include?('done_ratio')
65
    rows.right l(:field_done_ratio), progress_bar(@issue.done_ratio, :legend => "#{@issue.done_ratio}%"), :class => 'progress'
65
    rows.right l(:field_done_ratio), bar_graph(@issue.done_ratio, :legend => "#{@issue.done_ratio}%", :class => 'progress-bar'), :class => 'progress'
66 66
  end
67 67
  unless @issue.disabled_core_fields.include?('estimated_hours')
68 68
    rows.right l(:field_estimated_hours), issue_estimated_hours_details(@issue), :class => 'estimated-hours'
app/views/versions/_issue_counts.html.erb
21 21
          <% end %>
22 22
        </td>
23 23
        <td style="width:240px;">
24
            <%= progress_bar((count[:closed].to_f / count[:total])*100,
25
                  :legend => "#{count[:closed]}/#{count[:total]}") %>
24
            <%= bar_graph((count[:closed].to_f / count[:total])*100,
25
                  :legend => "#{count[:closed]}/#{count[:total]}", :class => 'progress-bar') %>
26 26
        </td>
27 27
    </tr>
28 28
    <% end %>
app/views/versions/_overview.html.erb
15 15
<% end %>
16 16

  
17 17
<% if version.visible_fixed_issues.count > 0 %>
18
    <%= progress_bar([version.visible_fixed_issues.closed_percent, version.visible_fixed_issues.completed_percent],
19
                     :titles =>
20
                       ["%s: %i%%" % [l(:label_closed_issues_plural), version.visible_fixed_issues.closed_percent],
21
                        "%s: %i%%" % [l(:field_done_ratio), version.visible_fixed_issues.completed_percent]],
22
                     :legend => ('%i%%' % version.visible_fixed_issues.completed_percent)) %>
18
    <%= bar_graph([
19
      {:pcts => version.visible_fixed_issues.closed_percent, :label => l(:label_closed_issues_plural)},
20
      {:pcts => version.visible_fixed_issues.completed_percent, :label => l(:field_done_ratio)}
21
    ],
22
    :legend => ('%i%%' % version.visible_fixed_issues.completed_percent), :class => 'progress-bar') %>
23

  
23 24
    <p class="progress-info">
24 25
      <%= link_to(l(:label_x_issues, :count => version.visible_fixed_issues.count),
25 26
                  version_filtered_issues_path(version, :status_id => '*')) %>
public/stylesheets/application.css
1069 1069
}
1070 1070

  
1071 1071
/***** Progress bar *****/
1072
@keyframes graph {
1073
  0% { transform: scaleX(0); transform-origin: 0;}
1074
  100% { transform: scaleX(1); transform-origin: 0;}
1075
}
1076

  
1077
#relations .progress-bar { min-width: 100px; max-width: 150px; }
1078
.version-overview .progress-bar { width: 30vw }
1079
.attributes .progress-bar { width: 35%; height: 1em; }
1080
.done-ratio .label { display: none; margin: 0; }
1081
.progress-bar { display: flex; align-items: center; min-width: 50px; }
1082
.progress-bar .legend { margin-left: 6px; }
1083
.bar-graph { flex: 1 0 auto; position: relative; height: 7px; background: #ccc; }
1084
.bar-graph span { transform: scaleX(0); animation: graph 500ms ease 100ms 1 forwards; height: inherit; position: absolute; top: 0; left: 0; transition: opacity 300ms ease; opacity: 1; }
1085
.bar-graph span:nth-child(1) { background: #628db6; }
1086
.bar-graph span:nth-child(2) { background: #3e5b76; }
1087
.bar-graph span:nth-child(3) { background: #303030; }
1088
.bar-graph:hover span:not(:hover) { opacity: 0.3; }
1089

  
1072 1090
table.progress {
1073 1091
  border-collapse: collapse;
1074 1092
  border-spacing: 0pt;