Add setProfileHeader to PHUIHeaderView for reuse

Summary: Moves some profile css into PHUI, cleans up mobile view and desktop spacing.

Test Plan: Test Project at desktop and mobile breakpoints.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

Author: chadlittle

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '8c8210a3',
+    'core.pkg.css' => '92f16374',
     'core.pkg.js' => '573e6664',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -93,7 +93,7 @@
     'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
     'rsrc/css/application/policy/policy.css' => '957ea14c',
     'rsrc/css/application/ponder/ponder-view.css' => '7b0df4da',
-    'rsrc/css/application/project/project-view.css' => 'efd02445',
+    'rsrc/css/application/project/project-view.css' => 'ea27bd1f',
     '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',
@@ -133,7 +133,7 @@
     'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
     'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
     'rsrc/css/phui/phui-form.css' => '0b98e572',
-    'rsrc/css/phui/phui-header-view.css' => '55bb32dd',
+    'rsrc/css/phui/phui-header-view.css' => '235f0d7d',
     'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
     'rsrc/css/phui/phui-icon.css' => '3f33ab57',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
@@ -808,7 +808,7 @@
     'phui-fontkit-css' => '9cda225e',
     'phui-form-css' => '0b98e572',
     'phui-form-view-css' => '4a1a0f5e',
-    'phui-header-view-css' => '55bb32dd',
+    'phui-header-view-css' => '235f0d7d',
     'phui-icon-set-selector-css' => '1ab67aad',
     'phui-icon-view-css' => '3f33ab57',
     'phui-image-mask-css' => '5a8b09c8',
@@ -842,7 +842,7 @@
     'policy-edit-css' => '815c66f7',
     'policy-transaction-detail-css' => '82100a43',
     'ponder-view-css' => '7b0df4da',
-    'project-view-css' => 'efd02445',
+    'project-view-css' => 'ea27bd1f',
     'raphael-core' => '51ee6b43',
     'raphael-g' => '40dde778',
     'raphael-g-line' => '40da039e',

src/applications/project/controller/PhabricatorProjectProfileController.php

@@ -22,7 +22,8 @@ public function handleRequest(AphrontRequest $request) {
       ->setHeader($project->getName())
       ->setUser($viewer)
       ->setPolicyObject($project)
-      ->setImage($picture);
+      ->setImage($picture)
+      ->setProfileHeader(true);
 
     if ($project->getStatus() == PhabricatorProjectStatus::STATUS_ACTIVE) {
       $header->setStatus('fa-check', 'bluegrey', pht('Active'));
@@ -77,13 +78,6 @@ public function handleRequest(AphrontRequest $request) {
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->setBorder(true);
 
-    $header = phutil_tag(
-      'div',
-      array(
-        'class' => 'project-view-header',
-      ),
-      $header);
-
     require_celerity_resource('project-view-css');
     $home = phutil_tag(
       'div',

src/view/phui/PHUIHeaderView.php

@@ -12,6 +12,7 @@ final class PHUIHeaderView extends AphrontTagView {
   private $headerIcon;
   private $noBackground;
   private $bleedHeader;
+  private $profileHeader;
   private $tall;
   private $properties = array();
   private $actionLinks = array();
@@ -66,6 +67,11 @@ public function setBleedHeader($bleed) {
     return $this;
   }
 
+  public function setProfileHeader($bighead) {
+    $this->profileHeader = $bighead;
+    return $this;
+  }
+
   public function setHeaderIcon($icon) {
     $this->headerIcon = $icon;
     return $this;
@@ -153,6 +159,10 @@ protected function getTagAttributes() {
       $classes[] = 'phui-bleed-header';
     }
 
+    if ($this->profileHeader) {
+      $classes[] = 'phui-profile-header';
+    }
+
     if ($this->properties || $this->policyObject ||
         $this->subheader || $this->tall) {
       $classes[] = 'phui-header-tall';

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

@@ -6,43 +6,15 @@
   background: #fff;
 }
 
-.project-view-header {
-  padding: 32px 24px 32px;
-}
-
-.project-view-header .phui-header-shell {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-.project-view-header .phui-header-image {
-  height: 80px;
-  width: 80px;
-}
-
-.project-view-header .phui-header-col1 {
-  width: 96px;
-}
-
-.project-view-header .phui-header-subheader {
-  margin-top: 12px;
-}
-
-.project-view-header .phui-header-shell .phui-header-header {
-  font-family: 'Aleo', {$fontfamily};
-  font-size: 24px;
-}
-
-.project-view-header .phui-header-col3 {
-  vertical-align: top;
-}
-
 .phui-box.phui-box-grey.project-view-properties {
   margin: 0 16px 0 16px;
   padding: 4px 12px;
 }
 
+.device-phone .phui-box.phui-box-grey.project-view-properties {
+  margin: 0 12px 0 12px;
+}
+
 .project-view-properties .phui-property-list-key {
   width: auto;
   margin-left: 4px;

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

@@ -253,3 +253,40 @@ body .phui-header-shell.phui-bleed-header
 .phui-header-subheader .phui-badge-flex-view:after {
   display: inline;
 }
+
+/*** Profile Header ***********************************************************/
+
+.phui-profile-header {
+  padding: 24px 20px 20px 24px;
+}
+
+.device-phone .phui-profile-header {
+  padding: 12px;
+}
+
+.phui-profile-header.phui-header-shell {
+  margin: 0;
+  border: none;
+}
+
+.phui-profile-header .phui-header-image {
+  height: 80px;
+  width: 80px;
+}
+
+.phui-profile-header .phui-header-col1 {
+  width: 96px;
+}
+
+.phui-profile-header .phui-header-subheader {
+  margin-top: 12px;
+}
+
+.phui-profile-header.phui-header-shell .phui-header-header {
+  font-family: 'Aleo', {$fontfamily};
+  font-size: 24px;
+}
+
+.phui-profile-header .phui-header-col3 {
+  vertical-align: top;
+}