Add header icons to PHUIPropertyListView

Summary: Adds summary (description) and test plan icons to make these area's more unique and differentiated over general sections.

Test Plan: Test a diff, a commit, a task

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

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

resources/sprite/manifest/status.json

@@ -246,6 +246,16 @@
       "rule" : ".status-open-white",
       "hash" : "169dc0e8f36444ea30163181f9c88dc2"
     },
+    "status-pl-summary"           : {
+      "name" : "status-pl-summary",
+      "rule" : ".status-pl-summary",
+      "hash" : "0abd0eab8617fb88f9b8f4d2f00e17b8"
+    },
+    "status-pl-testplan"          : {
+      "name" : "status-pl-testplan",
+      "rule" : ".status-pl-testplan",
+      "hash" : "03dbb3c53bfddfb553d49c6f27a76765"
+    },
     "status-policy-admin"         : {
       "name" : "status-policy-admin",
       "rule" : ".status-policy-admin",

src/__celerity_resource_map__.php

@@ -716,15 +716,15 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/sprite-status-X2.png' =>
   array(
-    'hash' => '2d2f0ae88ee9397faab05d4898106b73',
+    'hash' => 'bb0d9cc2fec8e852c69790cbb626c6b1',
-    'uri' => '/res/2d2f0ae8/rsrc/image/sprite-status-X2.png',
+    'uri' => '/res/bb0d9cc2/rsrc/image/sprite-status-X2.png',
     'disk' => '/rsrc/image/sprite-status-X2.png',
     'type' => 'png',
   ),
   '/rsrc/image/sprite-status.png' =>
   array(
-    'hash' => '63be108f9a82f29126d35929ee1384a4',
+    'hash' => 'b78e998cb34964052b17a8777651ecbd',
-    'uri' => '/res/63be108f/rsrc/image/sprite-status.png',
+    'uri' => '/res/b78e998c/rsrc/image/sprite-status.png',
     'disk' => '/rsrc/image/sprite-status.png',
     'type' => 'png',
   ),
@@ -3933,7 +3933,7 @@ celerity_register_resource_map(array(
   ),
   'phui-property-list-view-css' =>
   array(
-    'uri' => '/res/68275e2c/rsrc/css/phui/phui-property-list-view.css',
+    'uri' => '/res/e1e6674b/rsrc/css/phui/phui-property-list-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4284,7 +4284,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-status-css' =>
   array(
-    'uri' => '/res/b95c6a1c/rsrc/css/sprite-status.css',
+    'uri' => '/res/f08fd1e1/rsrc/css/sprite-status.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4321,7 +4321,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'ef078368' =>
+    'cbf6df8c' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4370,7 +4370,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-tag-view-css',
         42 => 'phui-list-view-css',
       ),
-      'uri' => '/res/pkg/ef078368/core.pkg.css',
+      'uri' => '/res/pkg/cbf6df8c/core.pkg.css',
       'type' => 'css',
     ),
     '2c1dba03' =>
@@ -4562,15 +4562,15 @@ celerity_register_resource_map(array(
   ),
   'reverse' =>
   array(
-    'aphront-dialog-view-css' => 'ef078368',
+    'aphront-dialog-view-css' => 'cbf6df8c',
-    'aphront-error-view-css' => 'ef078368',
+    'aphront-error-view-css' => 'cbf6df8c',
-    'aphront-list-filter-view-css' => 'ef078368',
+    'aphront-list-filter-view-css' => 'cbf6df8c',
-    'aphront-pager-view-css' => 'ef078368',
+    'aphront-pager-view-css' => 'cbf6df8c',
-    'aphront-panel-view-css' => 'ef078368',
+    'aphront-panel-view-css' => 'cbf6df8c',
-    'aphront-table-view-css' => 'ef078368',
+    'aphront-table-view-css' => 'cbf6df8c',
-    'aphront-tokenizer-control-css' => 'ef078368',
+    'aphront-tokenizer-control-css' => 'cbf6df8c',
-    'aphront-tooltip-css' => 'ef078368',
+    'aphront-tooltip-css' => 'cbf6df8c',
-    'aphront-typeahead-control-css' => 'ef078368',
+    'aphront-typeahead-control-css' => 'cbf6df8c',
     'differential-changeset-view-css' => '1084b12b',
     'differential-core-view-css' => '1084b12b',
     'differential-inline-comment-editor' => '5e9e5c4e',
@@ -4584,7 +4584,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '1084b12b',
     'diffusion-commit-view-css' => '7aa115b4',
     'diffusion-icons-css' => '7aa115b4',
-    'global-drag-and-drop-css' => 'ef078368',
+    'global-drag-and-drop-css' => 'cbf6df8c',
     'inline-comment-summary-css' => '1084b12b',
     'javelin-aphlict' => '2c1dba03',
     'javelin-behavior' => '3e3be199',
@@ -4659,56 +4659,56 @@ celerity_register_resource_map(array(
     'javelin-util' => '3e3be199',
     'javelin-vector' => '3e3be199',
     'javelin-workflow' => '3e3be199',
-    'lightbox-attachment-css' => 'ef078368',
+    'lightbox-attachment-css' => 'cbf6df8c',
     'maniphest-task-summary-css' => '49898640',
-    'phabricator-action-list-view-css' => 'ef078368',
+    'phabricator-action-list-view-css' => 'cbf6df8c',
-    'phabricator-application-launch-view-css' => 'ef078368',
+    'phabricator-application-launch-view-css' => 'cbf6df8c',
     'phabricator-busy' => '2c1dba03',
     'phabricator-content-source-view-css' => '1084b12b',
-    'phabricator-core-css' => 'ef078368',
+    'phabricator-core-css' => 'cbf6df8c',
-    'phabricator-crumbs-view-css' => 'ef078368',
+    'phabricator-crumbs-view-css' => 'cbf6df8c',
     'phabricator-drag-and-drop-file-upload' => '5e9e5c4e',
     'phabricator-dropdown-menu' => '2c1dba03',
     'phabricator-file-upload' => '2c1dba03',
-    'phabricator-filetree-view-css' => 'ef078368',
+    'phabricator-filetree-view-css' => 'cbf6df8c',
-    'phabricator-flag-css' => 'ef078368',
+    'phabricator-flag-css' => 'cbf6df8c',
     'phabricator-hovercard' => '2c1dba03',
-    'phabricator-jump-nav' => 'ef078368',
+    'phabricator-jump-nav' => 'cbf6df8c',
     'phabricator-keyboard-shortcut' => '2c1dba03',
     'phabricator-keyboard-shortcut-manager' => '2c1dba03',
-    'phabricator-main-menu-view' => 'ef078368',
+    'phabricator-main-menu-view' => 'cbf6df8c',
     'phabricator-menu-item' => '2c1dba03',
-    'phabricator-nav-view-css' => 'ef078368',
+    'phabricator-nav-view-css' => 'cbf6df8c',
     'phabricator-notification' => '2c1dba03',
-    'phabricator-notification-css' => 'ef078368',
+    'phabricator-notification-css' => 'cbf6df8c',
-    'phabricator-notification-menu-css' => 'ef078368',
+    'phabricator-notification-menu-css' => 'cbf6df8c',
     'phabricator-object-selector-css' => '1084b12b',
     'phabricator-phtize' => '2c1dba03',
     'phabricator-prefab' => '2c1dba03',
     'phabricator-project-tag-css' => '49898640',
-    'phabricator-remarkup-css' => 'ef078368',
+    'phabricator-remarkup-css' => 'cbf6df8c',
     'phabricator-shaped-request' => '5e9e5c4e',
-    'phabricator-side-menu-view-css' => 'ef078368',
+    'phabricator-side-menu-view-css' => 'cbf6df8c',
-    'phabricator-standard-page-view' => 'ef078368',
+    'phabricator-standard-page-view' => 'cbf6df8c',
-    'phabricator-tag-view-css' => 'ef078368',
+    'phabricator-tag-view-css' => 'cbf6df8c',
     'phabricator-textareautils' => '2c1dba03',
     'phabricator-tooltip' => '2c1dba03',
-    'phabricator-transaction-view-css' => 'ef078368',
+    'phabricator-transaction-view-css' => 'cbf6df8c',
-    'phabricator-zindex-css' => 'ef078368',
+    'phabricator-zindex-css' => 'cbf6df8c',
-    'phui-button-css' => 'ef078368',
+    'phui-button-css' => 'cbf6df8c',
-    'phui-form-css' => 'ef078368',
+    'phui-form-css' => 'cbf6df8c',
-    'phui-form-view-css' => 'ef078368',
+    'phui-form-view-css' => 'cbf6df8c',
-    'phui-header-view-css' => 'ef078368',
+    'phui-header-view-css' => 'cbf6df8c',
-    'phui-icon-view-css' => 'ef078368',
+    'phui-icon-view-css' => 'cbf6df8c',
-    'phui-list-view-css' => 'ef078368',
+    'phui-list-view-css' => 'cbf6df8c',
-    'phui-object-item-list-view-css' => 'ef078368',
+    'phui-object-item-list-view-css' => 'cbf6df8c',
-    'phui-property-list-view-css' => 'ef078368',
+    'phui-property-list-view-css' => 'cbf6df8c',
-    'phui-spacing-css' => 'ef078368',
+    'phui-spacing-css' => 'cbf6df8c',
-    'sprite-apps-large-css' => 'ef078368',
+    'sprite-apps-large-css' => 'cbf6df8c',
-    'sprite-gradient-css' => 'ef078368',
+    'sprite-gradient-css' => 'cbf6df8c',
-    'sprite-icons-css' => 'ef078368',
+    'sprite-icons-css' => 'cbf6df8c',
-    'sprite-menu-css' => 'ef078368',
+    'sprite-menu-css' => 'cbf6df8c',
-    'sprite-status-css' => 'ef078368',
+    'sprite-status-css' => 'cbf6df8c',
-    'syntax-highlighting-css' => 'ef078368',
+    'syntax-highlighting-css' => 'cbf6df8c',
   ),
 ));

src/applications/differential/view/DifferentialRevisionDetailView.php

@@ -115,7 +115,9 @@ final class DifferentialRevisionDetailView extends AphrontView {
     $properties->invokeWillRenderEvent();
 
     if (strlen($revision->getSummary())) {
-      $properties->addSectionHeader(pht('Summary'));
+      $properties->addSectionHeader(
+        pht('Summary'),
+        PHUIPropertyListView::ICON_SUMMARY);
       $properties->addTextContent(
         PhabricatorMarkupEngine::renderOneObject(
           id(new PhabricatorMarkupOneOff())
@@ -126,7 +128,9 @@ final class DifferentialRevisionDetailView extends AphrontView {
     }
 
     if (strlen($revision->getTestPlan())) {
-      $properties->addSectionHeader(pht('Test Plan'));
+      $properties->addSectionHeader(
+        pht('Test Plan'),
+        PHUIPropertyListView::ICON_TESTPLAN);
       $properties->addTextContent(
         PhabricatorMarkupEngine::renderOneObject(
           id(new PhabricatorMarkupOneOff())

src/applications/diffusion/controller/DiffusionCommitController.php

@@ -131,7 +131,9 @@ final class DiffusionCommitController extends DiffusionController {
       $property_list->setActionList($headsup_actions);
 
       $detail_list = new PHUIPropertyListView();
-      $detail_list->addSectionHeader(pht('Description'));
+      $detail_list->addSectionHeader(
+        pht('Description'),
+        PHUIPropertyListView::ICON_SUMMARY);
       $detail_list->addTextContent(
         phutil_tag(
           'div',

src/applications/maniphest/controller/ManiphestTaskDetailController.php

@@ -648,7 +648,9 @@ final class ManiphestTaskDetailController extends ManiphestController {
     $section = null;
     if (strlen($task->getDescription())) {
       $section = new PHUIPropertyListView();
-      $section->addSectionHeader(pht('Description'));
+      $section->addSectionHeader(
+        pht('Description'),
+        PHUIPropertyListView::ICON_SUMMARY);
       $section->addTextContent(
         phutil_tag(
           'div',

src/view/phui/PHUIPropertyListView.php

@@ -9,6 +9,9 @@ final class PHUIPropertyListView extends AphrontView {
   private $actionList;
   private $classes = array();
 
+  const ICON_SUMMARY = 'pl-summary';
+  const ICON_TESTPLAN = 'pl-testplan';
+
   protected function canAppendChild() {
     return false;
   }
@@ -55,10 +58,11 @@ final class PHUIPropertyListView extends AphrontView {
     return $this;
   }
 
-  public function addSectionHeader($name) {
+  public function addSectionHeader($name, $icon=null) {
     $this->parts[] = array(
       'type' => 'section',
       'name' => $name,
+      'icon' => $icon,
     );
     return $this;
   }
@@ -193,12 +197,25 @@ final class PHUIPropertyListView extends AphrontView {
   }
 
   private function renderSectionPart(array $part) {
+    $name = $part['name'];
+    if ($part['icon']) {
+      $icon = id(new PHUIIconView())
+        ->setSpriteSheet(PHUIIconView::SPRITE_STATUS)
+        ->setSpriteIcon($part['icon']);
+      $name = phutil_tag(
+        'span',
+        array(
+          'class' => 'phui-property-list-section-header-icon',
+        ),
+        array($icon, $name));
+    }
+
     return phutil_tag(
       'div',
       array(
         'class' => 'phui-property-list-section-header',
       ),
-      $part['name']);
+      $name);
   }
 
   private function renderTextPart(array $part) {

webroot/rsrc/css/phui/phui-property-list-view.css

@@ -94,6 +94,11 @@
   padding-left: 8px;
 }
 
+.phui-property-list-section-header-icon .sprite-status {
+  display: inline-block;
+  margin: -2px 4px -2px 0;
+}
+
 .phui-property-list-text-content {
   padding: 12px 16px;
   background: #fff;

webroot/rsrc/css/sprite-status.css

@@ -214,162 +214,170 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -120px -60px;
 }
 
-.status-policy-admin-white, .dropdown-menu-item:hover .status-policy-admin {
+.status-pl-summary {
   background-position: -135px -60px;
 }
 
-.status-policy-admin {
+.status-pl-testplan {
   background-position: 0px -75px;
 }
 
-.status-policy-all-white, .dropdown-menu-item:hover .status-policy-all {
+.status-policy-admin-white, .dropdown-menu-item:hover .status-policy-admin {
   background-position: -15px -75px;
 }
 
-.status-policy-all {
+.status-policy-admin {
   background-position: -30px -75px;
 }
 
-.status-policy-custom-white, .dropdown-menu-item:hover .status-policy-custom {
+.status-policy-all-white, .dropdown-menu-item:hover .status-policy-all {
   background-position: -45px -75px;
 }
 
-.status-policy-custom {
+.status-policy-all {
   background-position: -60px -75px;
 }
 
-.status-policy-noone-white, .dropdown-menu-item:hover .status-policy-noone {
+.status-policy-custom-white, .dropdown-menu-item:hover .status-policy-custom {
   background-position: -75px -75px;
 }
 
-.status-policy-noone {
+.status-policy-custom {
   background-position: -90px -75px;
 }
 
-.status-policy-project-white, .dropdown-menu-item:hover .status-policy-project {
+.status-policy-noone-white, .dropdown-menu-item:hover .status-policy-noone {
   background-position: -105px -75px;
 }
 
-.status-policy-project {
+.status-policy-noone {
   background-position: -120px -75px;
 }
 
-.status-policy-public-white, .dropdown-menu-item:hover .status-policy-public {
+.status-policy-project-white, .dropdown-menu-item:hover .status-policy-project {
   background-position: -135px -75px;
 }
 
-.status-policy-public {
+.status-policy-project {
   background-position: 0px -90px;
 }
 
-.status-policy-unknown-white, .dropdown-menu-item:hover .status-policy-unknown {
+.status-policy-public-white, .dropdown-menu-item:hover .status-policy-public {
   background-position: -15px -90px;
 }
 
-.status-policy-unknown {
+.status-policy-public {
   background-position: -30px -90px;
 }
 
-.status-question-blue {
+.status-policy-unknown-white, .dropdown-menu-item:hover .status-policy-unknown {
   background-position: -45px -90px;
 }
 
-.status-question-dark {
+.status-policy-unknown {
   background-position: -60px -90px;
 }
 
-.status-question-green {
+.status-question-blue {
   background-position: -75px -90px;
 }
 
-.status-question-red {
+.status-question-dark {
   background-position: -90px -90px;
 }
 
-.status-question-white {
+.status-question-green {
   background-position: -105px -90px;
 }
 
-.status-question {
+.status-question-red {
   background-position: -120px -90px;
 }
 
-.status-reject-blue {
+.status-question-white {
   background-position: -135px -90px;
 }
 
-.status-reject-dark {
+.status-question {
   background-position: 0px -105px;
 }
 
-.status-reject-green {
+.status-reject-blue {
   background-position: -15px -105px;
 }
 
-.status-reject-red {
+.status-reject-dark {
   background-position: -30px -105px;
 }
 
-.status-reject-white {
+.status-reject-green {
   background-position: -45px -105px;
 }
 
-.status-reject {
+.status-reject-red {
   background-position: -60px -105px;
 }
 
-.status-right-blue {
+.status-reject-white {
   background-position: -75px -105px;
 }
 
-.status-right-dark {
+.status-reject {
   background-position: -90px -105px;
 }
 
-.status-right-green {
+.status-right-blue {
   background-position: -105px -105px;
 }
 
-.status-right-red {
+.status-right-dark {
   background-position: -120px -105px;
 }
 
-.status-right-white {
+.status-right-green {
+  background-position: -135px -105px;
+}
+
+.status-right-red {
   background-position: 0px -120px;
 }
 
-.status-right {
+.status-right-white {
   background-position: -15px -120px;
 }
 
-.status-time-green {
+.status-right {
   background-position: -30px -120px;
 }
 
-.status-time-orange {
+.status-time-green {
   background-position: -45px -120px;
 }
 
-.status-time-red {
+.status-time-orange {
   background-position: -60px -120px;
 }
 
-.status-time-yellow {
+.status-time-red {
   background-position: -75px -120px;
 }
 
-.status-up-blue {
+.status-time-yellow {
   background-position: -90px -120px;
 }
 
-.status-up-dark {
+.status-up-blue {
   background-position: -105px -120px;
 }
 
-.status-up-green {
+.status-up-dark {
   background-position: -120px -120px;
 }
 
+.status-up-green {
+  background-position: -135px -120px;
+}
+
 .status-up-red {
   background-position: 0px -135px;
 }