Collapsable-divs-History-and-roadmap.patch

Collapsable issue history and versions in roadmap - RM 3.1.0 - Olivier Houdas, 2015-08-11 17:18

Download (9.91 KB)

View differences:

app/views/issues/_history.html.erb Tue Aug 11 17:18:07 2015 +0200
1 1
<% reply_links = authorize_for('issues', 'edit') -%>
2
<div class="expander">
2 3
<% for journal in journals %>
3 4
  <div id="change-<%= journal.id %>" class="<%= journal.css_classes %>">
4 5
    <div id="note-<%= journal.indice %>">
5
    <h4><a href="#note-<%= journal.indice %>" class="journal-link">#<%= journal.indice %></a>
6
      <div class="expander-item group open">
7
        <h4><a href="#note-<%= journal.indice %>" class="journal-link">#<%= journal.indice %></a>
6 8
    <%= avatar(journal.user, :size => "24") %>
9
        <span class="expander" onclick="toggleExpanderDiv(this);">&nbsp;</span>
7 10
    <%= authoring journal.created_on, journal.user, :label => :label_updated_time_by %>
11
    <%= link_to_function("#{l(:button_collapse_all)}/#{l(:button_expand_all)}",
12
                         "toggleAllExpanderDivs(this)", :class => 'toggle-all') %> 
13

  
8 14
    <%= content_tag('span', l(:field_is_private), :class => 'private') if journal.private_notes? %></h4>
9 15

  
16
      </div>
17
      <div class="expander-item">
10 18
    <% if journal.details.any? %>
11
    <ul class="details">
19
        <ul class="details">
12 20
      <% details_to_strings(journal.visible_details).each do |string| %>
13
       <li><%= string %></li>
21
          <li><%= string %></li>
14 22
      <% end %>
15
    </ul>
23
        </ul>
16 24
    <% end %>
17 25
    <%= render_notes(issue, journal, :reply_links => reply_links) unless journal.notes.blank? %>
26
      </div>
18 27
    </div>
19 28
  </div>
20 29
  <%= call_hook(:view_issues_history_journal_bottom, { :journal => journal }) %>
21 30
<% end %>
31
</div>
22 32

  
23 33
<% heads_for_wiki_formatter if User.current.allowed_to?(:edit_issue_notes, issue.project) || User.current.allowed_to?(:edit_own_issue_notes, issue.project) %>
app/views/issues/show.html.erb Tue Aug 11 17:18:07 2015 +0200
75 75
<% if @issue.description? || @issue.attachments.any? -%>
76 76
<hr />
77 77
<% if @issue.description? %>
78
<div class="description">
79
  <div class="contextual">
80
  <%= link_to l(:button_quote), quoted_issue_path(@issue), :remote => true, :method => 'post', :class => 'icon icon-comment' if authorize_for('issues', 'edit') %>
81
  </div>
82

  
83
  <p><strong><%=l(:field_description)%></strong></p>
84
  <div class="wiki">
85
  <%= textilizable @issue, :description, :attachments => @issue.attachments %>
86
  </div>
87
</div>
78
    <div class="expander">
79
      <div class="description">
80
        <div class="expander-item group open">
81
          <div class="contextual">
82
          <%= link_to l(:button_quote), quoted_issue_path(@issue), :remote => true, :method => 'post', :class => 'icon icon-comment' if authorize_for('issues', 'edit') %>
83
          </div>
84
        
85
          <p>
86
            <span class="expander" onclick="toggleExpanderDiv(this);">&nbsp;</span>
87
            <strong><%=l(:field_description)%></strong>
88
          </p>
89
        </div>
90
        <div class="expander-item open">
91
          <div class="wiki">
92
          <%= textilizable @issue, :description, :attachments => @issue.attachments %>
93
          </div>
94
        </div>
95
      </div>
96
    </div>
88 97
<% end %>
89 98
<%= link_to_attachments @issue, :thumbnails => true %>
90 99
<% end -%>
app/views/versions/index.html.erb Tue Aug 11 17:18:07 2015 +0200
9 9
  <p class="nodata"><%= l(:label_no_data) %></p>
10 10
<% else %>
11 11
  <div id="roadmap">
12
  <% #[OHO-2015-08-07] changes to make issue description collapsable: added DIV levels %>
13
    <div class="expander">
12 14
  <% @versions.each do |version| %>
13
  <article class="version-article <%= version.completed? ? 'version-completed' : 'version-incompleted' %>">
14
    <header>
15
      <h3 class="version"><%= link_to_version version, :name => version_anchor(version) %></h3>
16
    </header>
15
      <article class="version-article <%= version.completed? ? 'version-completed' : 'version-incompleted' %>">
16
        <div class="expander-item group open">
17
          <header>
18
            <h3 class="version">
19
              <span class="expander" onclick="toggleExpanderDiv(this);">&nbsp;</span>
20
              <%= link_to_version version, :name => version_anchor(version) %>
21
              <%= link_to_function("#{l(:button_collapse_all)}/#{l(:button_expand_all)}",
22
                         "toggleAllExpanderDivs(this)", :class => 'toggle-all') %> 
23
            </h3>
24
          </header>
25
        </div>
26
        <div class="expander-item">
17 27
    <%= render :partial => 'versions/overview', :locals => {:version => version} %>
18 28
    <%= render(:partial => "wiki/content",
19 29
               :locals => {:content => version.wiki_page.content}) if version.wiki_page %>
20 30
    <% if (issues = @issues_by_version[version]) && issues.size > 0 %>
21 31
      <%= form_tag({}) do -%>
22
        <table class="list related-issues">
23
        <caption><%= l(:label_related_issues) %></caption>
32
          <table class="list related-issues">
33
          <caption><%= l(:label_related_issues) %></caption>
24 34
        <% issues.each do |issue| -%>
25
          <tr class="hascontextmenu">
26
            <td class="checkbox"><%= check_box_tag 'ids[]', issue.id, false, :id => nil %></td>
27
            <td class="subject"><%= link_to_issue(issue, :project => (@project != issue.project)) %></td>
28
          </tr>
35
            <tr class="hascontextmenu">
36
              <td class="checkbox"><%= check_box_tag 'ids[]', issue.id, false, :id => nil %></td>
37
              <td class="subject"><%= link_to_issue(issue, :project => (@project != issue.project)) %></td>
38
            </tr>
29 39
        <% end -%>
30
        </table>
40
          </table>
31 41
      <% end %>
32 42
    <% end %>
33 43
    <%= call_hook :view_projects_roadmap_version_bottom, :version => version %>
34
  </article>
44
        </div>
45
      </article>
35 46
  <% end %>
47
    </div>
48
  <% #[OHO-end] %>
36 49
  </div>
37 50
<% end %>
38 51

  
......
83 96
  <%= link_to_function l(:label_completed_versions), 
84 97
                       '$("#toggle-completed-versions").toggleClass("collapsed"); $("#completed-versions").toggle()',
85 98
                       :id => 'toggle-completed-versions', :class => 'collapsible collapsed' %>
99
</p>
86 100
  <ul id = "completed-versions" style = "display:none;">
87 101
    <% @completed_versions.each do |version| %>
88 102
      <li><%= link_to_version version %></li>
89 103
    <% end %>  
90 104
  </ul>
91
</p>
92 105
<% end %>
93 106
<% end %>
94 107

  
public/javascripts/application.js Tue Aug 11 17:18:07 2015 +0200
62 62
  }
63 63
}
64 64

  
65
function toggleExpanderDiv(el) {
66
  var expItem = $(el).parents('div.expander-item').first();
67
  var n = expItem.next();
68
  expItem.toggleClass('open');
69
  while (n.length && !n.hasClass('group')) {
70
    n.toggle();
71
    n = n.next('expItem');
72
  }
73
}
74

  
75
function collapseAllExpanderDivs(el) {
76
  var exp = $(el).parents('div.expander').first();
77
  exp.find('div.expander-item').each(function(index) {
78
    if ($(this).hasClass('group')) {
79
      $(this).removeClass('open');
80
    } else {
81
      $(this).hide();
82
    }
83
  });
84
}
85
function expandAllExpanderDivs(el) {
86
  var exp = $(el).parents('div.expander').first();
87
  exp.find('div.expander-item').each(function(index) {
88
    if ($(this).hasClass('group')) {
89
      $(this).addClass('open');
90
    } else {
91
      $(this).show();
92
    }
93
  });
94
}
95

  
96
function toggleAllExpanderDivs(el) {
97
  var expItem = $(el).parents('div.expander-item').first();
98
  if (expItem.hasClass('open')) {
99
    collapseAllExpanderDivs(el);
100
  } else {
101
    expandAllExpanderDivs(el);
102
  }
103
}
104

  
65 105
function toggleFieldset(el) {
66 106
  var fieldset = $(el).parents('fieldset').first();
67 107
  fieldset.toggleClass('collapsed');
public/stylesheets/application.css Tue Aug 11 17:18:07 2015 +0200
183 183
tr.entry.file td.filename a { margin-left: 16px; }
184 184
tr.entry.file td.filename_no_report a { margin-left: 16px; }
185 185

  
186
tr span.expander {background-image: url(../images/bullet_toggle_plus.png); padding-left: 8px; margin-left: 0; cursor: pointer;}
187
tr.open span.expander {background-image: url(../images/bullet_toggle_minus.png);}
186
tr span.expander, div span.expander {background-image: url(../images/bullet_toggle_plus.png); background-repeat: no-repeat; padding-left: 8px; margin-left: 0; cursor: pointer;}
187
tr.open span.expander, div.open span.expander {background-image: url(../images/bullet_toggle_minus.png); background-repeat: no-repeat;}
188 188

  
189 189
tr.changeset { height: 20px }
190 190
tr.changeset ul, ol { margin-top: 0px; margin-bottom: 0px; }
......
233 233

  
234 234
table.list tbody tr.group td { padding: 0.8em 0 0.5em 0.3em; font-weight: bold; border-bottom: 1px solid #ccc; text-align:left; }
235 235
table.list tbody tr.group span.count {position:relative; top:-1px; color:#fff; font-size:10px; background:#9DB9D5; padding:0px 6px 1px 6px; border-radius:3px; margin-left:4px;}
236
tr.group a.toggle-all { color: #aaa; font-size: 80%; font-weight: normal; display:none;}
237
tr.group:hover a.toggle-all { display:inline;}
236
tr.group a.toggle-all, div.group a.toggle-all { color: #aaa; font-size: 80%; font-weight: normal; display:none;}
237
tr.group:hover a.toggle-all, div.group:hover a.toggle-all { display:inline;}
238 238
a.toggle-all:hover {text-decoration:none;}
239 239

  
240 240
table.list tbody tr:hover { background-color:#ffffdd; }