Clean up Phriction History View

Summary: Fixes T4028, makes the table a bit easier to read and navigate changesets.

Test Plan: Tested a big history, back to original and latest.

Reviewers: epriestley, btrahan

CC: Korvin, epriestley, aran

Maniphest Tasks: T4028

Differential Revision: https://secure.phabricator.com/D7438

src/__celerity_resource_map__.php

@@ -3804,7 +3804,7 @@ celerity_register_resource_map(array(
   ),
   'phriction-document-css' =>
   array(
-    'uri' => '/res/7ae003b1/rsrc/css/application/phriction/phriction-document-css.css',
+    'uri' => '/res/97cbd7c6/rsrc/css/application/phriction/phriction-document-css.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/phriction/controller/PhrictionDiffController.php

@@ -113,7 +113,7 @@ final class PhrictionDiffController
         ->setHref(PhrictionDocument::getSlugURI($slug, 'history')));
 
 
-    $title = "Version $l vs $r";
+    $title = pht("Version %s vs %s", $l, $r);
 
     $header = id(new PHUIHeaderView())
       ->setHeader($title);
@@ -142,10 +142,17 @@ final class PhrictionDiffController
           'a',
           array(
             'href' => $uri->alter('l', $l - 1)->alter('r', $r - 1),
+            'class' => 'button',
           ),
           pht("\xC2\xAB Previous Change"));
       } else {
-        $link_l = pht('Original Change');
+        $link_l = phutil_tag(
+          'a',
+          array(
+            'href' => '#',
+            'class' => 'button grey disabled',
+          ),
+          pht('Original Change'));
       }
 
       $link_r = null;
@@ -154,10 +161,17 @@ final class PhrictionDiffController
           'a',
           array(
             'href' => $uri->alter('l', $l + 1)->alter('r', $r + 1),
+            'class' => 'button',
           ),
           pht("Next Change \xC2\xBB"));
       } else {
-        $link_r = pht('Most Recent Change');
+        $link_r = phutil_tag(
+          'a',
+          array(
+            'href' => '#',
+            'class' => 'button grey disabled',
+          ),
+          pht('Most Recent Change'));
       }
 
       $navigation_table = hsprintf(
@@ -174,7 +188,7 @@ final class PhrictionDiffController
 
     $output = hsprintf(
       '<br><div class="phriction-document-history-diff">'.
-        '%s<br /><br />%s'.
+        '%s%s'.
         '<table class="phriction-revert-table">'.
           '<tr><td>%s</td><td>%s</td>'.
         '</table>'.
@@ -187,11 +201,14 @@ final class PhrictionDiffController
       $output);
 
 
+    $object_box = id(new PHUIObjectBoxView())
+      ->setHeader($header)
+      ->appendChild($output);
+
     return $this->buildApplicationPage(
       array(
         $crumbs,
-        $header,
+        $object_box,
-        $output,
       ),
       array(
         'title'     => pht('Document History'),
@@ -223,7 +240,7 @@ final class PhrictionDiffController
         'a',
         array(
           'href'  => '/phriction/edit/'.$document_id.'/',
-          'class' => 'button',
+          'class' => 'button grey',
         ),
         pht('Edit Current Version'));
     }
@@ -233,7 +250,7 @@ final class PhrictionDiffController
       'a',
       array(
         'href'  => '/phriction/edit/'.$document_id.'/?revert='.$version,
-        'class' => 'button',
+        'class' => 'button grey',
       ),
       pht('Revert to Version %s...', $version));
   }
@@ -247,6 +264,7 @@ final class PhrictionDiffController
     $handles = $this->loadViewerHandles($phids);
 
     $list = new PHUIObjectItemListView();
+    $list->setFlush(true);
 
     $first = true;
     foreach ($content as $c) {

webroot/rsrc/css/application/phriction/phriction-document-css.css

@@ -43,8 +43,8 @@
   text-shadow: 0 1px 2px #fff;
 }
 
-.phriction-document-history-diff {
+.phriction-document-history-diff .phui-object-item-list-view {
-  padding: 0 2em 2em;
+  padding: 0 16px;
 }
 
 .phriction-revert-table {
@@ -54,11 +54,15 @@
 .phriction-revert-table td {
   text-align: center;
   width: 50%;
-  padding: .5em 0;
+  padding: 8px 0;
+  margin: 0 16px;
+  background-color: {$lightbluebackground};
+  border-top: 1px solid {$lightblueborder};
 }
 
 .phriction-history-nav-table {
   width: 100%;
+  margin-bottom: 20px;
 }
 
 .phriction-history-nav-table td {
@@ -66,6 +70,10 @@
   color: {$darkgreytext};
 }
 
+.phriction-history-nav-table td {
+  padding: 8px 16px;
+}
+
 .phriction-history-nav-table td.nav-next {
   text-align: right;
 }