Commit 1221eda459b3a82274ea4d744b88ac2a407a0345

Authored by Junior Silva
1 parent 2253cc66

versions-diff: included js to radio_button control and adjusts on look-and-feel

AI2822
app/controllers/public/content_viewer_controller.rb
... ... @@ -127,7 +127,7 @@ class ContentViewerController < ApplicationController
127 127 def versions_diff
128 128 path = params[:page].join('/')
129 129 @page = profile.articles.find_by_path(path)
130   - @v1, @v2 = @page.versions.find_by_version(params[:v1]).body, @page.versions.find_by_version(params[:v2]).body
  130 + @v1, @v2 = @page.versions.find_by_version(params[:v1]), @page.versions.find_by_version(params[:v2])
131 131 p params
132 132 end
133 133  
... ...
app/views/content_viewer/article_versions.rhtml
... ... @@ -2,20 +2,54 @@
2 2  
3 3 <p><%= _('This is the list of all versions of this content. Select a version to see it and then revert to it.') %>.</p>
4 4  
5   -<% form_tag({:controller => 'content_viewer', :action => 'versions_diff', :profile => profile.identifier, :page => @page.path.split('/')}) do %>
6   - <ul class='article-versions'>
  5 +<% form_tag({:controller => 'content_viewer', :action => 'versions_diff', :profile => profile.identifier, :page => @page.path.split('/')}, :method => 'get') do %>
  6 + <ul id="article-versions">
7 7 <% @versions.each do |v| %>
8   - <li>
9   - <%= radio_button_tag 'v1', v.version %>
10   - <%= radio_button_tag 'v2', v.version %>
  8 + <li>
  9 + <%= radio_button_tag 'v1', v.version, false, :onclick => 'versionInputClicked(this)' %>
  10 + <%= radio_button_tag 'v2', v.version, false, :onclick => 'versionInputClicked(this)' %>
11 11 <%= link_to(_("Version #{v.version}"), @page.url.merge(:version => v.version)) %>
12 12 <%= @page.version == v.version ? _('(current)') : '' %>
13 13 <span class='updated-by'><%= _('by %{author}') % {:author => link_to(@page.author_name(v.version), @page.author_url)} %></span>
14   - <div class='updated-on'><%= show_time(v.updated_at) %></div>
  14 + <span class='updated-on'><%= show_time(v.updated_at) %></span>
15 15 </li>
16 16 <% end %>
17 17 </ul>
18 18  
19   - <%= submit_button(:search, _('Show differences between selected versions')) %>
  19 +<script>
  20 + function versionInputClicked(input) {
  21 + var selectedColumn = input.name;
  22 + var sisterColumn = (selectedColumn == 'v1') ? 'v2' : 'v1';
  23 + var li = input.parentNode;
  24 + var checkedBrotherLi = jQuery('#article-versions input[name=' + sisterColumn + ']:checked').parent()[0];
  25 + updateColumn(selectedColumn, li);
  26 + updateColumn(sisterColumn, checkedBrotherLi);
  27 + }
  28 +
  29 + function updateColumn(selectedColumn, startLi){
  30 + var sisterColumn = (selectedColumn == 'v1') ? 'v2' : 'v1';
  31 + var walkMethod = (selectedColumn == 'v1') ? 'prev' : 'next';
  32 + var li = startLi;
  33 + var foundCheckedBrother = false;
  34 + while(li = jQuery(li)[walkMethod]()[0]) {
  35 + li.className = '';
  36 + if (!foundCheckedBrother){
  37 + li.className = 'selected';
  38 + foundCheckedBrother = jQuery('input[name=' + sisterColumn + ']', li)[0].checked;
  39 + }
  40 + jQuery('input[name=' + selectedColumn + ']', li)[0].disabled = foundCheckedBrother;
  41 + }
  42 + }
  43 +
  44 + var penultVersion = jQuery('#article-versions input[name=v1]')[1];
  45 + var lastVersion = jQuery('#article-versions input[name=v2]')[0];
  46 + jQuery('#article-versions input').attr('disabled', false);
  47 + if (penultVersion && lastVersion) {
  48 + penultVersion.checked = lastVersion.checked = true;
  49 + lastVersion.onclick();
  50 + }
  51 +</script>
  52 + <%= submit_button(:clock, _('Show differences between selected versions')) %>
20 53 <% end %>
21 54 <%= pagination_links @versions, :param_name => 'npage' %>
  55 +
... ...
public/stylesheets/application.css
... ... @@ -6539,7 +6539,71 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6539 6539 z-index: 1;
6540 6540 }
6541 6541  
6542   -ul.article-versions li {
6543   - font-size: 13px;
  6542 +#article-versions {
  6543 + margin: 0 0 15px 0;
  6544 + padding: 0;
  6545 +}
  6546 +
  6547 +#article-versions li {
  6548 + list-style: none;
  6549 + margin: 0;
6544 6550 padding: 3px 0px;
6545 6551 }
  6552 +
  6553 +#article-versions input:disabled {
  6554 + opacity: 0.3;
  6555 +}
  6556 +
  6557 +#article-versions .selected {
  6558 + background: #ff9;
  6559 +}
  6560 +
  6561 +.action-content_viewer-versions_diff .diff {
  6562 + text-align: justify;
  6563 +}
  6564 +
  6565 +.diff ul {
  6566 + list-style: none;
  6567 + margin: 0;
  6568 + padding: 0;
  6569 +}
  6570 +
  6571 +.diff del, .diff ins {
  6572 + display: block;
  6573 + text-decoration: none;
  6574 +}
  6575 +
  6576 +.diff li {
  6577 + padding: 5px 10px;
  6578 + margin: 0;
  6579 + line-height: 150%;
  6580 +}
  6581 +
  6582 +.diff li.ins {
  6583 + background: #dfd;
  6584 +}
  6585 +
  6586 +.diff li.del {
  6587 + background: #fee;
  6588 +}
  6589 +
  6590 +.diff li.ins:hover {
  6591 + background: #8f8;
  6592 +}
  6593 +
  6594 +.diff li.del:hover {
  6595 + background: #f99;
  6596 +}
  6597 +
  6598 +.diff strong {
  6599 + background: rgba(255, 255, 0, 0.2);
  6600 +}
  6601 +
  6602 +.diff li.diff-comment {
  6603 + display: none;
  6604 +}
  6605 +
  6606 +.diff li.diff-block-info {
  6607 + background: none repeat scroll 0 0 gray;
  6608 +}
  6609 +
... ...