[Redesign] Phriction UI Updates, Header tweaks

Summary: Ref T8099, walked through Phriction, updated PHUIHeader for more consistent layouts.

Test Plan: Test Phriction Document, Heirarchy, History, Diffs.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,10 +7,10 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'db211713',
+    'core.pkg.css' => '3bcbbf9c',
     'core.pkg.js' => 'fbf1d615',
     'darkconsole.pkg.js' => 'e7393ebb',
-    'differential.pkg.css' => '7d01bee8',
+    'differential.pkg.css' => 'f89b49b6',
     'differential.pkg.js' => '8c98ce21',
     'diffusion.pkg.css' => '385e85b3',
     'diffusion.pkg.js' => '0115b37c',
@@ -58,7 +58,7 @@ return array(
     'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
     'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
-    'rsrc/css/application/differential/changeset-view.css' => 'd9ff1f23',
+    'rsrc/css/application/differential/changeset-view.css' => '582b23ab',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
     'rsrc/css/application/differential/phui-inline-comment.css' => 'aa16f165',
     'rsrc/css/application/differential/results-table.css' => '181aa9d9',
@@ -109,7 +109,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => 'bbc7187b',
-    'rsrc/css/core/remarkup.css' => 'ea91b3ee',
+    'rsrc/css/core/remarkup.css' => '67a4ee29',
     'rsrc/css/core/syntax.css' => '6b7b24d9',
     'rsrc/css/core/z-index.css' => '63689f49',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
@@ -129,18 +129,18 @@ return array(
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
     'rsrc/css/phui/phui-button.css' => 'b995182d',
     'rsrc/css/phui/phui-crumbs-view.css' => 'ce840ec2',
-    'rsrc/css/phui/phui-document.css' => '88f0c90b',
+    'rsrc/css/phui/phui-document.css' => '08f33f08',
     'rsrc/css/phui/phui-feed-story.css' => '92f55311',
     'rsrc/css/phui/phui-fontkit.css' => 'b664ac96',
     'rsrc/css/phui/phui-form-view.css' => 'a0e8f168',
     'rsrc/css/phui/phui-form.css' => 'f535f938',
-    'rsrc/css/phui/phui-header-view.css' => '7716c613',
+    'rsrc/css/phui/phui-header-view.css' => '125a540c',
     'rsrc/css/phui/phui-icon.css' => '88ba9081',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '33e54618',
     'rsrc/css/phui/phui-list.css' => 'e448b6ba',
-    'rsrc/css/phui/phui-object-box.css' => '92f2ddcf',
+    'rsrc/css/phui/phui-object-box.css' => 'c57e6647',
     'rsrc/css/phui/phui-object-item-list-view.css' => '29ded459',
     'rsrc/css/phui/phui-pinboard-view.css' => '55b27bc3',
     'rsrc/css/phui/phui-property-list-view.css' => '1baf23eb',
@@ -150,8 +150,8 @@ return array(
     'rsrc/css/phui/phui-tag-view.css' => '402691cc',
     'rsrc/css/phui/phui-text.css' => 'cf019f54',
     'rsrc/css/phui/phui-timeline-view.css' => '07a1bd0f',
-    'rsrc/css/phui/phui-workboard-view.css' => '720efdde',
+    'rsrc/css/phui/phui-workboard-view.css' => '0cac51a4',
-    'rsrc/css/phui/phui-workpanel-view.css' => '01b6e9c6',
+    'rsrc/css/phui/phui-workpanel-view.css' => '4bdc2562',
     'rsrc/css/sprite-login.css' => 'a3526809',
     'rsrc/css/sprite-menu.css' => 'ab8f6356',
     'rsrc/css/sprite-projects.css' => 'b0d9e24f',
@@ -502,7 +502,7 @@ return array(
     'conpherence-transaction-css' => '42a457f6',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => '77096740',
-    'differential-changeset-view-css' => 'd9ff1f23',
+    'differential-changeset-view-css' => '582b23ab',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => 'd4c87bf4',
     'differential-results-table-css' => '181aa9d9',
@@ -724,7 +724,7 @@ return array(
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '6920d200',
     'phabricator-profile-css' => 'cb6f56b7',
-    'phabricator-remarkup-css' => 'ea91b3ee',
+    'phabricator-remarkup-css' => '67a4ee29',
     'phabricator-search-results-css' => 'ce897fb9',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => '4f2cd343',
@@ -763,20 +763,20 @@ return array(
     'phui-calendar-list-css' => 'c1c7f338',
     'phui-calendar-month-css' => '476be7e0',
     'phui-crumbs-view-css' => 'ce840ec2',
-    'phui-document-view-css' => '88f0c90b',
+    'phui-document-view-css' => '08f33f08',
     'phui-feed-story-css' => '92f55311',
     'phui-font-icon-base-css' => '3dad2ae3',
     'phui-fontkit-css' => 'b664ac96',
     'phui-form-css' => 'f535f938',
     'phui-form-view-css' => 'a0e8f168',
-    'phui-header-view-css' => '7716c613',
+    'phui-header-view-css' => '125a540c',
     'phui-icon-view-css' => '88ba9081',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '33e54618',
     'phui-inline-comment-view-css' => 'aa16f165',
     'phui-list-view-css' => 'e448b6ba',
-    'phui-object-box-css' => '92f2ddcf',
+    'phui-object-box-css' => 'c57e6647',
     'phui-object-item-list-view-css' => '29ded459',
     'phui-pinboard-view-css' => '55b27bc3',
     'phui-property-list-view-css' => '1baf23eb',
@@ -786,8 +786,8 @@ return array(
     'phui-tag-view-css' => '402691cc',
     'phui-text-css' => 'cf019f54',
     'phui-timeline-view-css' => '07a1bd0f',
-    'phui-workboard-view-css' => '720efdde',
+    'phui-workboard-view-css' => '0cac51a4',
-    'phui-workpanel-view-css' => '01b6e9c6',
+    'phui-workpanel-view-css' => '4bdc2562',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '8cf6d262',
     'phuix-dropdown-menu' => 'bd4c8dca',
@@ -1211,6 +1211,9 @@ return array(
       'javelin-request',
       'javelin-util',
     ),
+    '582b23ab' => array(
+      'phui-inline-comment-view-css',
+    ),
     58562350 => array(
       'javelin-dom',
       'javelin-util',
@@ -1844,9 +1847,6 @@ return array(
       'javelin-util',
       'phabricator-shaped-request',
     ),
-    'd9ff1f23' => array(
-      'phui-inline-comment-view-css',
-    ),
     'dbbf48b6' => array(
       'javelin-behavior',
       'javelin-stratcom',

src/applications/phriction/controller/PhrictionDiffController.php

@@ -126,7 +126,8 @@ final class PhrictionDiffController extends PhrictionController {
     $title = pht('Version %s vs %s', $l, $r);
 
     $header = id(new PHUIHeaderView())
-      ->setHeader($title);
+      ->setHeader($title)
+      ->setTall(true);
 
     $crumbs->addTextCrumb($title, $request->getRequestURI());
 

src/applications/phriction/controller/PhrictionDocumentController.php

@@ -422,12 +422,12 @@ final class PhrictionDocumentController
     $header = id(new PHUIHeaderView())
       ->setHeader(pht('Document Hierarchy'));
 
-    return id(new PHUIDocumentView())
+    $box = id(new PHUIObjectBoxView())
       ->setHeader($header)
       ->appendChild(phutil_tag(
         'div',
         array(
-          'class' => 'phabricator-remarkup',
+          'class' => 'phabricator-remarkup mlt mlb',
         ),
         phutil_tag(
           'ul',
@@ -435,6 +435,8 @@ final class PhrictionDocumentController
             'class' => 'remarkup-list',
           ),
           $list)));
+
+     return phutil_tag_div('phui-document-box', $box);
   }
 
   private function renderChildDocumentLink(array $info) {

src/applications/phriction/controller/PhrictionHistoryController.php

@@ -148,15 +148,15 @@ final class PhrictionHistoryController
       PhrictionDocument::getSlugURI($document->getSlug(), 'history'));
 
     $header = new PHUIHeaderView();
-    $header->setHeader(pht('Document History for %s',
+    $header->setHeader(phutil_tag(
-      phutil_tag(
         'a',
         array('href' => PhrictionDocument::getSlugURI($document->getSlug())),
-        head($history)->getTitle())));
+        head($history)->getTitle()));
+    $header->setSubheader(pht('Document History'));
 
     $obj_box = id(new PHUIObjectBoxView())
       ->setHeader($header)
-      ->appendChild($list)
+      ->setObjectList($list)
       ->appendChild($pager);
 
     return $this->buildApplicationPage(

webroot/rsrc/css/application/differential/changeset-view.css

@@ -267,6 +267,7 @@ td.cov-I {
   font-size: 15px;
   padding: 2px 0 12px 12px;
   line-height: 18px;
+  font-weight: 500;
 }
 
 .device-phone .differential-changeset h1 {

webroot/rsrc/css/core/remarkup.css

@@ -109,6 +109,10 @@
   margin: 4px 0 4px 24px;
 }
 
+.phabricator-remarkup .remarkup-list-item {
+  line-height: 1.55em;
+}
+
 .phabricator-remarkup li.phantom-item,
 .phabricator-remarkup li.phantom-item {
   list-style-type: none;

webroot/rsrc/css/phui/phui-document.css

@@ -23,6 +23,11 @@
   margin: 16px auto;
 }
 
+.device-desktop .phui-document-box {
+  max-width: 996px;
+  margin: 24px auto;
+}
+
 .device-desktop .phui-document-fluid .phui-document-view {
   max-width: none;
   margin: 16px;

webroot/rsrc/css/phui/phui-header-view.css

@@ -72,7 +72,7 @@ body .phui-header-shell.phui-bleed-header
   color: #000;
   font-size: 15px;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 24px;
 }
 
 .device-phone .phui-header-header {
@@ -128,7 +128,7 @@ body .phui-header-shell.phui-bleed-header
   display: inline-block;
   background-repeat: no-repeat;
   background-size: 100%;
-  border: 1px solid {$lightblueborder};
+  border: 1px solid rgba(0,0,0,.1);
   width: 50px;
   height: 50px;
 }

webroot/rsrc/css/phui/phui-object-box.css

@@ -93,7 +93,6 @@ div.phui-object-box.phui-object-box-flush {
 .phui-object-box-hidden-content {
   background: {$lightgreybackground};
   border-bottom: 1px solid {$thinblueborder};
-  margin-bottom: 4px;
 }
 
 .phui-object-box.phui-object-box-collapsed .phui-object-box-hidden-content {

webroot/rsrc/css/phui/phui-workboard-view.css

@@ -107,7 +107,7 @@
   padding: 8px;
 }
 
-.project-board-header .phui-header-view {
+.project-board-header .phui-header-header {
   font-size: 18px;
 }
 

webroot/rsrc/css/phui/phui-workpanel-view.css

@@ -10,8 +10,9 @@
   padding: 8px;
 }
 
-.phui-workpanel-view .phui-header-shell .phui-header-view {
+.phui-workpanel-view .phui-header-shell .phui-header-header {
   font-size: 14px;
+  line-height: 18px;
   color: {$darkbluetext};
 }