Restyle revisions#index: sticky diff bar, computation button style, pre-selected defaults

Adds a fourth button category, .computation -- teal, matching Preview's
existing color -- for actions that compute a view without changing state,
the first case in the app that didn't fit reversible/state-changing/
destructive. Diff revisions now starts disabled and only enables once two
distinct revisions are selected, matching the disabled-state pattern
already used for Unlock + Back.

The header row is wrapped in a real <thead> (previously flat inside the
table alongside data rows) so a sticky diff bar can sit above the fold on
long revision lists -- selecting a comparison pair no longer requires
scrolling back up to find the button, or back down to confirm what's
selected, both surfaced live via one shared JS function.

The two most recent revisions are pre-selected by default, covering the
most common comparison (current against previous) with no extra clicks.
Deliberately scoped to numbered revisions only -- comparing draft/head or
autosave/draft was raised and set aside, since neither exists as a row in
this table by design and extending the comparison to them is a separate
feature, not a default on this one.

Also drops the dead "Edit" subnav link, redundant with nodes#show's
Status section covering the same action with state-aware labeling this
static link could never have.

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;
 }