2 files changed, 114 insertions, 52 deletions

diff --git a/app/views/revisions/index.html.erb b/app/views/revisions/index.html.erb
index 26a9ff4..a6a981a 100644
--- a/app/views/revisions/index.html.erb
+++ b/app/views/revisions/index.html.erb
@@ -1,46 +1,70 @@
-<% content_for :subnavigation do %>
-  <%= link_to 'Edit', edit_node_path(@node) %>
-<% end %>
-
 <h2>Revisions for Node: <%= @node.unique_name %></h2>
 
-<table id="revisions">
-  <tr class="header">
-    <th>First</th>
-    <th>Last</th>
-    <th>Rev.</th>
-    <th>Title</th>
-    <th>Editor</th>
-    <th>Date</th>
-    <th></th>
-    <th></th>
-  </tr>
-<% (@pages || @node.pages.all).reverse.each do |page| %>
-  <tr>
-    <td><%= radio_button_tag :start_revision, page.revision %></td>
-    <td><%= radio_button_tag :end_revision, page.revision %></td>
-    <td class="revision"><%= page.revision %></td>
-    <td class="title"><%= page.title %></td>
-    <td class="user"><%= page.editor.try(:login) %></td>
-    <td class="date"><%= page.updated_at %></td>
-    <td><%= link_to 'show', node_revision_path(@node, page) %></td>
-    <td>
-      <%= button_to 'restore', restore_node_revision_path(@node, page),
-            method: :put,
-            form: { data: { confirm: "Restore this revision?" }, class: 'button_to state_changing' } %>
-    </td>
-  </tr>
-<% end %>
-  <tr class="no_hover">
-    <td colspan="8" class="right">
-      <%= button_to 'Diff revisions', diff_node_revisions_path(@node),
-            method: :post,
-            form: { id: 'diff_form' } %>
-    </td>
-  </tr>
+<table id="revisions" class="revisions_table">
+  <thead>
+    <tr class="header">
+      <th>First</th>
+      <th>Last</th>
+      <th>Rev.</th>
+      <th>Title</th>
+      <th>Editor</th>
+      <th>Date</th>
+      <th></th>
+      <th></th>
+    </tr>
+    <tr class="no_hover diff_sticky_bar">
+      <td colspan="8">
+        <%= button_to 'Diff revisions', diff_node_revisions_path(@node),
+              method: :post,
+              form: { id: 'diff_form', class: 'button_to computation' },
+              disabled: true %>
+        <span id="diff_selection_label"></span>
+      </td>
+    </tr>
+  </thead>
+  <tbody>
+  <% pages = (@pages || @node.pages.all).reverse %>
+  <% pages.each_with_index do |page, index| %>
+    <tr>
+      <td><%= radio_button_tag :start_revision, page.revision, index == 1 %></td>
+      <td><%= radio_button_tag :end_revision, page.revision, index == 0 %></td>
+      <td class="revision"><%= page.revision %></td>
+      <td class="title"><%= page.title %></td>
+      <td class="user"><%= page.editor.try(:login) %></td>
+      <td class="date"><%= page.updated_at %></td>
+      <td><%= link_to 'show', node_revision_path(@node, page) %></td>
+      <td>
+        <%= button_to 'restore', restore_node_revision_path(@node, page),
+              method: :put,
+              form: { data: { confirm: "Restore this revision?" }, class: 'button_to state_changing' } %>
+      </td>
+    </tr>
+  <% end %>
+  </tbody>
 </table>
 
 <script>
+  function update_diff_button_state() {
+    var start = document.querySelector('input[name="start_revision"]:checked');
+    var end = document.querySelector('input[name="end_revision"]:checked');
+    var valid = start && end && start.value !== end.value;
+    document.querySelector('#diff_form button[type="submit"]').disabled = !valid;
+
+    var label = document.getElementById('diff_selection_label');
+    if (start && end) {
+      label.textContent = start.value + ' against ' + end.value;
+    } else if (start || end) {
+      label.textContent = (start || end).value + ' selected';
+    } else {
+      label.textContent = '';
+    }
+  }
+
+  document.querySelectorAll('input[name="start_revision"], input[name="end_revision"]')
+    .forEach(function(radio) { radio.addEventListener('change', update_diff_button_state); });
+
+  update_diff_button_state();
+
   document.getElementById('diff_form').addEventListener('submit', function(e) {
     var start = document.querySelector('input[name="start_revision"]:checked');
     var end = document.querySelector('input[name="end_revision"]:checked');
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index a6e8bf6..3607166 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -29,6 +29,7 @@ table.node_table a,
 table.assets_table a,
 table.events_table a,
 table.user_table a,
+table.revisions_table a,
 .add_child_links a,
 div#draft_list table td.actions a {
   text-decoration: underline;
@@ -297,6 +298,27 @@ form.button_to.destructive button[type="submit"]:hover {
   background-color: #cc0000;
 }
 
+form.button_to.computation input[type="submit"],
+form.button_to.computation button[type="submit"] {
+  color: #00838f;
+  background-color: #e0f2f1;
+  border-radius: 2px;
+  padding: 2px 8px;
+}
+
+form.button_to.computation input[type="submit"]:hover,
+form.button_to.computation button[type="submit"]:hover {
+  color: #ffffff;
+  background-color: #00838f;
+}
+
+form.button_to.computation input[type="submit"]:disabled,
+form.button_to.computation button[type="submit"]:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 /* Native (non-button_to) submit buttons -- Create/Save/Publish forms.
    Lower specificity than form.button_to's own rule, so button_to forms
    are correctly unaffected. If a button_to output ever loses its class
@@ -420,42 +442,58 @@ table.node_table tr:hover {
   content: "• ";
 }
 
-table#revisions {
+table.revisions_table {
   border-collapse: collapse;
 }
 
-table#revisions tr {
-  height: 45px;
+table.revisions_table thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
 }
 
-/* Redundant with the generic table tr.header rule above (identical
-   values) -- harmless, kept presumably for explicitness. */
-table#revisions tr.header {
-  height: 20px;
+table.revisions_table th,
+table.revisions_table td {
+  padding: 0.4rem 0.75rem;
   text-align: left;
 }
 
-table#revisions td {
-  padding-right: 25px;
+table.revisions_table thead tr.header,
+table.revisions_table thead tr.diff_sticky_bar {
+  background-color: #ffffff;
+}
+
+table.revisions_table .diff_sticky_bar td {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e8e8e8;
 }
 
-table#revisions td.title {
+#diff_selection_label {
+  margin-left: 0.75rem;
+  color: #969696;
+}
+table.revisions_table td.title {
   width: 450px;
 }
 
-table#revisions td.date {
+table.revisions_table td.date {
   width: 175px;
 }
 
-table#revisions tr.header:hover {
+table.revisions_table tr:not(.header):not(.no_hover) {
+  border-bottom: 1px solid #e8e8e8;
+}
+
+table.revisions_table tr.header:hover {
   background-color: #ffffff;
 }
 
-table#revisions tr.no_hover:hover {
+table.revisions_table tr.no_hover:hover {
   background-color: #ffffff;
 }
 
-table#revisions tr:hover {
+table.revisions_table tr:hover {
   background-color: #f1f1f1;
 }