Collapsable-history-divs.patch

Version to use - Olivier Houdas, 2015-01-07 15:14

Download (6.15 KB)

View differences:

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

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

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

  
23 34
<% 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 Wed Jan 07 15:03:04 2015 +0100
71 71
<% if @issue.description? || @issue.attachments.any? -%>
72 72
<hr />
73 73
<% if @issue.description? %>
74
<div class="description">
75
  <div class="contextual">
76
  <%= link_to l(:button_quote), quoted_issue_path(@issue), :remote => true, :method => 'post', :class => 'icon icon-comment' if authorize_for('issues', 'edit') %>
74
  <div class="expander">
75
    <div class="description">
76
    <div class="expander-item group open">
77
    <div class="contextual">
78
    <%= link_to l(:button_quote), quoted_issue_path(@issue), :remote => true, :method => 'post', :class => 'icon icon-comment' if authorize_for('issues', 'edit') %>
79
    </div>
80
  
81
    <p>
82
      <span class="expander" onclick="toggleExpanderDiv(this);">&nbsp;</span>
83
      <strong><%=l(:field_description)%></strong>
84
    </p>
77 85
  </div>
78

  
79
  <p><strong><%=l(:field_description)%></strong></p>
80
  <div class="wiki">
81
  <%= textilizable @issue, :description, :attachments => @issue.attachments %>
86
  <div class="expander-item open">
87
    <div class="wiki">
88
    <%= textilizable @issue, :description, :attachments => @issue.attachments %>
89
    </div>
82 90
  </div>
83
</div>
91
  </div>
84 92
<% end %>
85 93
<%= link_to_attachments @issue, :thumbnails => true %>
86 94
<% end -%>
public/javascripts/application.js Wed Jan 07 15:03:04 2015 +0100
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 Wed Jan 07 15:03:04 2015 +0100
180 180
tr.entry.file td.filename a { margin-left: 16px; }
181 181
tr.entry.file td.filename_no_report a { margin-left: 16px; }
182 182

  
183
tr span.expander {background-image: url(../images/bullet_toggle_plus.png); padding-left: 8px; margin-left: 0; cursor: pointer;}
184
tr.open span.expander {background-image: url(../images/bullet_toggle_minus.png);}
183
tr span.expander, div span.expander {background-image: url(../images/bullet_toggle_plus.png); padding-left: 8px; margin-left: 0; cursor: pointer;}
184
tr.open span.expander, div.open span.expander {background-image: url(../images/bullet_toggle_minus.png);}
185 185

  
186 186
tr.changeset { height: 20px }
187 187
tr.changeset ul, ol { margin-top: 0px; margin-bottom: 0px; }
......
230 230

  
231 231
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; }
232 232
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;}
233
tr.group a.toggle-all { color: #aaa; font-size: 80%; font-weight: normal; display:none;}
234
tr.group:hover a.toggle-all { display:inline;}
233
tr.group a.toggle-all, div.group a.toggle-all { color: #aaa; font-size: 80%; font-weight: normal; display:none;}
234
tr.group:hover a.toggle-all, div.group:hover a.toggle-all { display:inline;}
235 235
a.toggle-all:hover {text-decoration:none;}
236 236

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