[Redesign] PHUIHeaderView goes to table layout

Summary: Ref T8099. This changes makes flexible layouts easier, and aligns icons, buttons better vertically.

Test Plan: Test various header locations, Phriction, Conpherence, Dashboards, Workboards etc.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,12 +7,12 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'ce2c805f',
+    'core.pkg.css' => '6bad4591',
     'core.pkg.js' => 'f3e08b38',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
     'differential.pkg.js' => '895b8d62',
-    'diffusion.pkg.css' => '591664fa',
+    'diffusion.pkg.css' => '385e85b3',
     'diffusion.pkg.js' => '0115b37c',
     'maniphest.pkg.css' => 'ddf93c68',
     'maniphest.pkg.js' => 'df4aa49f',
@@ -51,7 +51,7 @@ return array(
     'rsrc/css/application/conpherence/notification.css' => '919974b6',
     'rsrc/css/application/conpherence/transaction.css' => '42a457f6',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
-    'rsrc/css/application/conpherence/widget-pane.css' => '93938744',
+    'rsrc/css/application/conpherence/widget-pane.css' => '77096740',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
     'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
@@ -65,7 +65,7 @@ return array(
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
     'rsrc/css/application/differential/table-of-contents.css' => '63f3ef4a',
-    'rsrc/css/application/diffusion/diffusion-icons.css' => '9c5828da',
+    'rsrc/css/application/diffusion/diffusion-icons.css' => '4ba18923',
     'rsrc/css/application/diffusion/diffusion-readme.css' => '2106ea08',
     'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661',
     'rsrc/css/application/feed/feed.css' => 'b490a135',
@@ -116,7 +116,7 @@ return array(
     'rsrc/css/font/font-source-sans-pro.css' => '8906c07b',
     'rsrc/css/font/phui-font-icon-base.css' => '3dad2ae3',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
-    'rsrc/css/layout/phabricator-hovercard-view.css' => 'b7a82459',
+    'rsrc/css/layout/phabricator-hovercard-view.css' => 'd2a28ca5',
     'rsrc/css/layout/phabricator-side-menu-view.css' => 'a440478a',
     'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => '38891735',
@@ -128,18 +128,18 @@ return array(
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
     'rsrc/css/phui/phui-button.css' => 'b995182d',
     'rsrc/css/phui/phui-crumbs-view.css' => 'aeff7a21',
-    'rsrc/css/phui/phui-document.css' => '27a9bb7e',
+    'rsrc/css/phui/phui-document.css' => '8be7a5e3',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
     'rsrc/css/phui/phui-fontkit.css' => 'b664ac96',
     'rsrc/css/phui/phui-form-view.css' => 'e1abbe8e',
     'rsrc/css/phui/phui-form.css' => 'f535f938',
-    'rsrc/css/phui/phui-header-view.css' => '3c91963d',
+    'rsrc/css/phui/phui-header-view.css' => '99066800',
     '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' => '33595731',
     'rsrc/css/phui/phui-list.css' => 'e448b6ba',
-    'rsrc/css/phui/phui-object-box.css' => 'c8d82bfe',
+    'rsrc/css/phui/phui-object-box.css' => '70285ee9',
     'rsrc/css/phui/phui-object-item-list-view.css' => '4be0645f',
     'rsrc/css/phui/phui-pinboard-view.css' => '22891c15',
     'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea',
@@ -149,8 +149,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' => 'a85542c8',
-    'rsrc/css/phui/phui-workboard-view.css' => '38446bc3',
+    'rsrc/css/phui/phui-workboard-view.css' => 'bc3e2e76',
-    'rsrc/css/phui/phui-workpanel-view.css' => 'e6435408',
+    'rsrc/css/phui/phui-workpanel-view.css' => '015a0cab',
     'rsrc/css/sprite-login.css' => 'a3526809',
     'rsrc/css/sprite-main-header.css' => '28d01b0b',
     'rsrc/css/sprite-menu.css' => '02aa815a',
@@ -499,7 +499,7 @@ return array(
     'conpherence-thread-manager' => 'b7342ddb',
     'conpherence-transaction-css' => '42a457f6',
     'conpherence-update-css' => '1099a660',
-    'conpherence-widget-pane-css' => '93938744',
+    'conpherence-widget-pane-css' => '77096740',
     'differential-changeset-view-css' => 'e19cfd6e',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => 'd4c87bf4',
@@ -509,7 +509,7 @@ return array(
     'differential-revision-history-css' => '0e8eb855',
     'differential-revision-list-css' => 'f3c47d33',
     'differential-table-of-contents-css' => '63f3ef4a',
-    'diffusion-icons-css' => '9c5828da',
+    'diffusion-icons-css' => '4ba18923',
     'diffusion-readme-css' => '2106ea08',
     'diffusion-source-css' => '66fdf661',
     'diviner-shared-css' => '38813222',
@@ -708,7 +708,7 @@ return array(
     'phabricator-filetree-view-css' => 'fccf9f82',
     'phabricator-flag-css' => '5337623f',
     'phabricator-hovercard' => '14ac66f5',
-    'phabricator-hovercard-view-css' => 'b7a82459',
+    'phabricator-hovercard-view-css' => 'd2a28ca5',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
     'phabricator-main-menu-view' => '680360ea',
@@ -759,20 +759,20 @@ return array(
     'phui-calendar-list-css' => 'c1d0ca59',
     'phui-calendar-month-css' => '75e6a2ee',
     'phui-crumbs-view-css' => 'aeff7a21',
-    'phui-document-view-css' => '27a9bb7e',
+    'phui-document-view-css' => '8be7a5e3',
     'phui-feed-story-css' => 'c9f3a0b5',
     'phui-font-icon-base-css' => '3dad2ae3',
     'phui-fontkit-css' => 'b664ac96',
     'phui-form-css' => 'f535f938',
     'phui-form-view-css' => 'e1abbe8e',
-    'phui-header-view-css' => '3c91963d',
+    'phui-header-view-css' => '99066800',
     'phui-icon-view-css' => '88ba9081',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '33595731',
     'phui-inline-comment-view-css' => '2174771a',
     'phui-list-view-css' => 'e448b6ba',
-    'phui-object-box-css' => 'c8d82bfe',
+    'phui-object-box-css' => '70285ee9',
     'phui-object-item-list-view-css' => '4be0645f',
     'phui-pinboard-view-css' => '22891c15',
     'phui-property-list-view-css' => 'd2d143ea',
@@ -782,8 +782,8 @@ return array(
     'phui-tag-view-css' => '402691cc',
     'phui-text-css' => 'cf019f54',
     'phui-timeline-view-css' => 'a85542c8',
-    'phui-workboard-view-css' => '38446bc3',
+    'phui-workboard-view-css' => 'bc3e2e76',
-    'phui-workpanel-view-css' => 'e6435408',
+    'phui-workpanel-view-css' => '015a0cab',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '8cf6d262',
     'phuix-dropdown-menu' => 'bd4c8dca',

src/applications/diffusion/controller/DiffusionBrowseController.php

@@ -48,6 +48,10 @@ abstract class DiffusionBrowseController extends DiffusionController {
         '#');
     }
 
+    $filter = id(new PHUIBoxView())
+      ->addClass('mlt mlb')
+      ->appendChild($filter);
+
     return $filter;
   }
 

src/applications/diffusion/controller/DiffusionRepositoryController.php

@@ -470,7 +470,7 @@ final class DiffusionRepositoryController extends DiffusionController {
     $header->addActionLink($button);
 
     $panel->setHeader($header);
-    $panel->appendChild($view);
+    $panel->setTable($view);
 
     return $panel;
   }
@@ -653,14 +653,15 @@ final class DiffusionRepositoryController extends DiffusionController {
             ->setID('locate-input')
             ->setLabel(pht('Locate File')));
       $form_box = id(new PHUIBoxView())
-        ->addClass('diffusion-locate-file-view')
         ->appendChild($form->buildLayoutView());
-      $browse_panel->appendChild($form_box);
+      $locate_panel = id(new PHUIObjectBoxView())
+        ->setHeaderText('Locate File')
+        ->appendChild($form_box);
     }
 
     $browse_panel->setTable($browse_table);
 
-    return $browse_panel;
+    return array($locate_panel, $browse_panel);
   }
 
   private function renderCloneCommand(

src/view/phui/PHUIHeaderView.php

@@ -151,10 +151,6 @@ final class PHUIHeaderView extends AphrontTagView {
       $classes[] = 'phui-header-tall';
     }
 
-    if ($this->image) {
-      $classes[] = 'phui-header-has-image';
-    }
-
     return array(
       'class' => $classes,
     );
@@ -173,7 +169,8 @@ final class PHUIHeaderView extends AphrontTagView {
         ' ');
     }
 
-    $header = array();
+    $left = array();
+    $right = array();
 
     if ($this->actionLinks) {
       $actions = array();
@@ -183,7 +180,7 @@ final class PHUIHeaderView extends AphrontTagView {
         $button->addClass('phui-header-action-link');
         $actions[] = $button;
       }
-      $header[] = phutil_tag(
+      $right[] = phutil_tag(
         'div',
         array(
           'class' => 'phui-header-action-links',
@@ -192,7 +189,7 @@ final class PHUIHeaderView extends AphrontTagView {
     }
 
     if ($this->buttonBar) {
-      $header[] = phutil_tag(
+      $right[] = phutil_tag(
         'div',
         array(
           'class' => 'phui-header-action-links',
@@ -220,7 +217,7 @@ final class PHUIHeaderView extends AphrontTagView {
           ),
           array_interleave(' ', $this->tags));
       }
-      $header[] = phutil_tag(
+      $right[] = phutil_tag(
         'ul',
           array(
             'class' => 'phui-header-icon-list',
@@ -231,13 +228,13 @@ final class PHUIHeaderView extends AphrontTagView {
     if ($this->headerIcon) {
       $icon = id(new PHUIIconView())
         ->setIconFont($this->headerIcon);
-      $header[] = $icon;
+      $left[] = $icon;
     }
-    $header[] = $this->header;
+    $left[] = $this->header;
 
     if ($this->objectName) {
       array_unshift(
-        $header,
+        $left,
         phutil_tag(
           'a',
           array(
@@ -248,7 +245,7 @@ final class PHUIHeaderView extends AphrontTagView {
     }
 
     if ($this->subheader) {
-      $header[] = phutil_tag(
+      $left[] = phutil_tag(
         'div',
         array(
           'class' => 'phui-header-subheader',
@@ -273,7 +270,7 @@ final class PHUIHeaderView extends AphrontTagView {
         $property_list[] = $this->renderPolicyProperty($this->policyObject);
       }
 
-      $header[] = phutil_tag(
+      $left[] = phutil_tag(
         'div',
         array(
           'class' => 'phui-header-subheader',
@@ -281,15 +278,50 @@ final class PHUIHeaderView extends AphrontTagView {
         $property_list);
     }
 
-    return array(
+    // We here at @phabricator
-      $image,
+    $header_image = null;
-      phutil_tag(
+    if ($image) {
-        'h1',
+    $header_image = phutil_tag(
-        array(
+      'div',
-          'class' => 'phui-header-view grouped',
+      array(
-        ),
+        'class' => 'phui-header-col1',
-        $header),
+      ),
-      );
+      $image);
+    }
+
+    // All really love
+    $header_left = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-header-col2',
+      ),
+      $left);
+
+    // Tables and Pokemon.
+    $header_right = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-header-col3',
+      ),
+      $right);
+
+    $header_row = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-header-row',
+      ),
+      array(
+        $header_image,
+        $header_left,
+        $header_right,
+      ));
+
+    return phutil_tag(
+      'h1',
+      array(
+        'class' => 'phui-header-view',
+      ),
+      $header_row);
   }
 
   private function renderPolicyProperty(PhabricatorPolicyInterface $object) {

webroot/rsrc/css/application/conpherence/widget-pane.css

@@ -46,7 +46,7 @@
   border: 0;
 }
 
-.conpherence-widget-pane .widgets-header .phui-header-view {
+.conpherence-widget-pane .widgets-header .phui-header-shell {
   padding: 8px;
   font-size: 14px;
 }
@@ -84,7 +84,7 @@
 }
 
 .device-desktop .conpherence-widget-pane .widgets-body {
-  top: 108px;
+  top: 111px;
   width: 240px;
 }
 

webroot/rsrc/css/application/diffusion/diffusion-icons.css

@@ -30,9 +30,6 @@
 input.diffusion-clone-uri {
   display: block;
   width: 100%;
-  border: 1px solid #efefef;
-  box-shadow: none;
-  height: 24px;
 }
 
 .diffusion-clone-extras {
@@ -40,7 +37,3 @@ input.diffusion-clone-uri {
   text-align: right;
   color: {$lightgreytext};
 }
-
-.diffusion-locate-file-view {
-  border-bottom: 1px solid {$thinblueborder};
-}

webroot/rsrc/css/layout/phabricator-hovercard-view.css

@@ -20,17 +20,13 @@
   float: left;
   width: 100%;
   box-shadow: {$dropshadow};
-  border: 1px solid {$blueborder};
+  border: 1px solid {$lightblueborder};
   border-radius: 3px;
   background-color: #fff;
 }
 
-.phabricator-hovercard-head {
+.phabricator-hovercard-head .phui-header-shell {
-  border-bottom: 1px solid {$thinblueborder};
+  padding: 8px 8px 8px 12px;
-}
-
-.phabricator-hovercard-head .phui-header-view {
-  padding: 8px;
 }
 
 .phabricator-hovercard-head .phui-tag-type-state {

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

@@ -9,7 +9,7 @@
 }
 
 .phui-document-view .phui-header-shell {
-  padding: 0 12px;
+  padding: 16px;
 }
 
 .phui-document-content {

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

@@ -5,6 +5,32 @@
 .phui-header-shell {
   border-bottom: 1px solid {$thinblueborder};
   overflow: hidden;
+  padding: 0 4px 12px;
+}
+
+.phui-header-view {
+  display: table;
+  width: 100%
+}
+
+.phui-header-row {
+  display: table-row;
+}
+
+.phui-header-col1 {
+  display: table-cell;
+  vertical-align: middle;
+  width: 62px;
+}
+
+.phui-header-col2 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.phui-header-col3 {
+  display: table-cell;
+  vertical-align: middle;
 }
 
 body .phui-header-shell.phui-header-no-backgound {
@@ -34,9 +60,8 @@ body .phui-header-shell.phui-bleed-header
 }
 
 .phui-header-view {
-  padding: 12px 4px 16px;
   font-size: 15px;
-  color: {$darkbluetext};
+  color: #000;
   font-weight: 500;
   position: relative;
 }
@@ -47,8 +72,8 @@ body .phui-header-shell.phui-bleed-header
   font-weight: 500;
 }
 
-.phui-header-view > a {
+.phui-header-view .phui-header-col2 > a {
-  color: {$darkbluetext};
+  color: #000;
 }
 
 .phui-header-view .phui-header-action-links {
@@ -56,8 +81,7 @@ body .phui-header-shell.phui-bleed-header
 }
 
 .phui-object-box .phui-header-view .phui-header-action-links {
-  margin-right: 12px;
+  margin-right: 4px;
-  margin-top: 4px;
 }
 
 .device-phone .phui-object-box .phui-header-view .phui-header-action-links {
@@ -94,18 +118,15 @@ body.device-phone .phui-header-view {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: 100%;
-  border: 2px solid white;
+  border: 1px solid {$lightblueborder};
   width: 50px;
   height: 50px;
-  margin: 12px;
-  float: left;
-  border-radius: 2px;
 }
 
 .phui-header-subheader {
   font-weight: normal;
   font-size: 14px;
-  margin-top: 6px;
+  margin-top: 8px;
 }
 
 .phui-header-subheader .phui-icon-view {

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

@@ -12,27 +12,13 @@
 }
 
 .phui-object-box.phui-object-box-collapsed .phui-header-shell {
-  padding: 0 4px 4px 16px;
+  padding: 0 8px 12px 16px;
 }
 
 div.phui-object-box.phui-object-box-flush {
   margin-top: 0;
 }
 
-.phui-object-box .phui-header-shell {
-  padding: 0 5px 4px 4px;
-  border-bottom: 1px solid {$thinblueborder};
-  border-top: none;
-}
-
-.phui-object-box .phui-header-image {
-  margin: 1px 8px -7px -7px;
-}
-
-.phui-object-box .phui-header-shell h1 {
-  padding: 0 0 8px 0;
-}
-
 .phui-object-box .phui-header-shell + .phui-info-view {
   margin: 12px 0 0 0;
 }

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

@@ -91,8 +91,8 @@
   margin-right: 8px;
 }
 
-.project-board-header {
+.project-board-header .phui-header-shell {
-  margin: 8px 12px;
+  padding: 20px 16px 20px 20px;
 }
 
 .project-board-header .phui-header-view {

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

@@ -9,7 +9,7 @@
   background-color: #fff;
 }
 
-.phui-workpanel-view .phui-header-shell .phui-header-view {
+.phui-workpanel-view .phui-header-shell {
   padding: 8px;
   font-size: 14px;
 }