Add setHeader to PHUITwoColumnView for consistent page layouts

Summary: Working towards making PHUITwoColumnView into a page layout engine. Adds header support.

Test Plan: Use new header on Profile and Profiles. No visual changes, less duplicated code.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

Author: chadlittle

resources/celerity/map.php

@@ -94,7 +94,7 @@
     'rsrc/css/application/policy/policy.css' => '957ea14c',
     'rsrc/css/application/ponder/ponder-view.css' => '4486434b',
     'rsrc/css/application/project/project-card-view.css' => '9418c97d',
-    'rsrc/css/application/project/project-view.css' => '4c832c27',
+    'rsrc/css/application/project/project-view.css' => '83bb6654',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
     'rsrc/css/application/releeph/releeph-request-differential-create-dialog.css' => '8d8b92cd',
@@ -154,7 +154,7 @@
     'rsrc/css/phui/phui-status.css' => '888cedb8',
     'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
-    'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
+    'rsrc/css/phui/phui-two-column-view.css' => '0763177e',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
     'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
     'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
@@ -841,7 +841,7 @@
     'phui-tag-view-css' => '9d5d4400',
     'phui-theme-css' => 'ab7b848c',
     'phui-timeline-view-css' => '2efceff8',
-    'phui-two-column-view-css' => 'c75bfc5b',
+    'phui-two-column-view-css' => '0763177e',
     'phui-workboard-color-css' => 'ac6fe6a7',
     'phui-workboard-view-css' => 'e6d89647',
     'phui-workcard-view-css' => '3646fb96',
@@ -857,7 +857,7 @@
     'policy-transaction-detail-css' => '82100a43',
     'ponder-view-css' => '4486434b',
     'project-card-view-css' => '9418c97d',
-    'project-view-css' => '4c832c27',
+    'project-view-css' => '83bb6654',
     'releeph-core' => '9b3c5733',
     'releeph-preview-branch' => 'b7a6f4a5',
     'releeph-request-differential-create-dialog' => '8d8b92cd',

src/applications/people/controller/PhabricatorPeopleProfileViewController.php

@@ -56,9 +56,11 @@ public function handleRequest(AphrontRequest $request) {
 
     $projects = $this->buildProjectsView($user);
     $badges = $this->buildBadgesView($user);
+    require_celerity_resource('project-view-css');
 
-    $columns = id(new PHUITwoColumnView())
-      ->addClass('project-view-badges')
+    $home = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->addClass('project-view-home')
       ->setMainColumn(
         array(
           $properties,
@@ -76,17 +78,6 @@ public function handleRequest(AphrontRequest $request) {
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->setBorder(true);
 
-    require_celerity_resource('project-view-css');
-    $home = phutil_tag(
-      'div',
-      array(
-        'class' => 'project-view-home',
-      ),
-      array(
-        $header,
-        $columns,
-      ));
-
     return $this->newPage()
       ->setTitle($user->getUsername())
       ->setNavigation($nav)
@@ -217,6 +208,7 @@ private function buildBadgesView(PhabricatorUser $user) {
 
     $box = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Badges'))
+      ->addClass('project-view-badges')
       ->appendChild($flex)
       ->setBackground(PHUIObjectBoxView::GREY);
 

src/applications/project/controller/PhabricatorProjectProfileController.php

@@ -83,8 +83,11 @@ public function handleRequest(AphrontRequest $request) {
 
     $feed = $this->renderStories($stories);
     $feed = phutil_tag_div('project-view-feed', $feed);
+    require_celerity_resource('project-view-css');
 
-    $columns = id(new PHUITwoColumnView())
+    $home = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->addClass('project-view-home')
       ->setMainColumn(
         array(
           $properties,
@@ -101,17 +104,6 @@ public function handleRequest(AphrontRequest $request) {
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->setBorder(true);
 
-    require_celerity_resource('project-view-css');
-    $home = phutil_tag(
-      'div',
-      array(
-        'class' => 'project-view-home',
-      ),
-      array(
-        $header,
-        $columns,
-      ));
-
     return $this->newPage()
       ->setNavigation($nav)
       ->setCrumbs($crumbs)

src/view/phui/PHUITwoColumnView.php

@@ -5,6 +5,7 @@ final class PHUITwoColumnView extends AphrontTagView {
   private $mainColumn;
   private $sideColumn;
   private $display;
+  private $header;
 
   const DISPLAY_LEFT = 'phui-side-column-left';
   const DISPLAY_RIGHT = 'phui-side-column-right';
@@ -19,6 +20,11 @@ public function setSideColumn($side) {
     return $this;
   }
 
+  public function setHeader(PHUIHeaderView $header) {
+    $this->header = $header;
+    return $this;
+  }
+
   public function setDisplay($display) {
     $this->display = $display;
     return $this;
@@ -35,7 +41,6 @@ public function getDisplay() {
   protected function getTagAttributes() {
     $classes = array();
     $classes[] = 'phui-two-column-view';
-    $classes[] = 'grouped';
     $classes[] = $this->getDisplay();
 
     return array(
@@ -66,6 +71,14 @@ protected function getTagContent() {
       $order = array($main, $side);
     }
 
-    return phutil_tag_div('phui-two-column-row', $order);
+    $inner = phutil_tag_div('phui-two-column-row', $order);
+    $table = phutil_tag_div('phui-two-column-content', $inner);
+
+    $header = null;
+    if ($this->header) {
+      $header = phutil_tag_div('phui-two-column-header', $this->header);
+    }
+
+    return array($header, $table);
   }
 }

webroot/rsrc/css/application/project/project-view.css

@@ -51,7 +51,7 @@
 }
 
 .project-view-feed .phui-object-box.phui-box-border {
-  padding: 0 16px 8px 16px;
+  padding: 0 4px 8px 4px;
   border: none;
 }
 

webroot/rsrc/css/phui/phui-two-column-view.css

@@ -2,7 +2,7 @@
  * @provides phui-two-column-view-css
  */
 
-.phui-two-column-view {
+.phui-two-column-content {
   display: table;
   width: 100%;
 }