Add Badges to PHUIHeaderView

Summary: Adds the ability to add Badges to Headers

Test Plan: UIExamples.

Reviewers: epriestley, btrahan

Subscribers:

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '288cae1c',
+    'core.pkg.css' => '0e143972',
     'core.pkg.js' => 'a590b451',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '9451634c',
@@ -126,7 +126,7 @@ return array(
     'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
     'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
     'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
-    'rsrc/css/phui/phui-badge.css' => '9be0c352',
+    'rsrc/css/phui/phui-badge.css' => 'b6218fa8',
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
     'rsrc/css/phui/phui-button.css' => '16020a60',
     'rsrc/css/phui/phui-crumbs-view.css' => 'd842f867',
@@ -135,7 +135,7 @@ return array(
     'rsrc/css/phui/phui-fontkit.css' => 'cb8ae7ad',
     'rsrc/css/phui/phui-form-view.css' => '621b21c5',
     'rsrc/css/phui/phui-form.css' => 'afdb2c6e',
-    'rsrc/css/phui/phui-header-view.css' => '4d09d68f',
+    'rsrc/css/phui/phui-header-view.css' => '87fd6d74',
     'rsrc/css/phui/phui-icon.css' => 'b0a6b1b6',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
@@ -775,7 +775,7 @@ return array(
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => 'd1861e06',
     'phui-action-panel-css' => '3ee9afd5',
-    'phui-badge-view-css' => '9be0c352',
+    'phui-badge-view-css' => 'b6218fa8',
     'phui-box-css' => 'a5bb366d',
     'phui-button-css' => '16020a60',
     'phui-calendar-css' => 'ccabe893',
@@ -789,7 +789,7 @@ return array(
     'phui-fontkit-css' => 'cb8ae7ad',
     'phui-form-css' => 'afdb2c6e',
     'phui-form-view-css' => '621b21c5',
-    'phui-header-view-css' => '4d09d68f',
+    'phui-header-view-css' => '87fd6d74',
     'phui-icon-view-css' => 'b0a6b1b6',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',

src/applications/uiexample/examples/PHUIBoxExample.php

@@ -70,9 +70,21 @@ final class PHUIBoxExample extends PhabricatorUIExample {
         ->setText(pht('Such Wow'))
         ->addClass(PHUI::MARGIN_SMALL_RIGHT);
 
+    $badge1 = id(new PHUIBadgeMiniView())
+      ->setIcon('fa-bug')
+      ->setHeader(pht('Bugmeister'));
+
+    $badge2 = id(new PHUIBadgeMiniView())
+      ->setIcon('fa-heart')
+      ->setHeader(pht('Funder'))
+      ->setQuality(PHUIBadgeView::UNCOMMON);
+
     $header = id(new PHUIHeaderView())
       ->setHeader(pht('Fancy Box'))
-      ->addActionLink($button);
+      ->addActionLink($button)
+      ->setSubheader(pht('Much Features'))
+      ->addBadge($badge1)
+      ->addBadge($badge2);
 
     $obj4 = id(new PHUIObjectBoxView())
       ->setHeader($header)

src/view/phui/PHUIHeaderView.php

@@ -20,6 +20,7 @@ final class PHUIHeaderView extends AphrontTagView {
   private $policyObject;
   private $epoch;
   private $actionIcons = array();
+  private $badges = array();
 
   public function setHeader($header) {
     $this->header = $header;
@@ -46,6 +47,11 @@ final class PHUIHeaderView extends AphrontTagView {
     return $this;
   }
 
+  public function addBadge(PHUIBadgeMiniView $badge) {
+    $this->badges[] = $badge;
+    return $this;
+  }
+
   public function setImage($uri) {
     $this->image = $uri;
     return $this;
@@ -264,13 +270,23 @@ final class PHUIHeaderView extends AphrontTagView {
       ),
       $this->header);
 
-    if ($this->subheader) {
+    if ($this->subheader || $this->badges) {
+      $badges = null;
+      if ($this->badges) {
+        $badges = new PHUIBadgeBoxView();
+        $badges->addItems($this->badges);
+        $badges->setCollapsed(true);
+      }
+
       $left[] = phutil_tag(
         'div',
         array(
           'class' => 'phui-header-subheader',
         ),
-        $this->subheader);
+        array(
+          $badges,
+          $this->subheader,
+        ));
     }
 
     if ($this->properties || $this->policyObject) {

webroot/rsrc/css/phui/phui-badge.css

@@ -186,6 +186,7 @@
 .phui-badge-mini .phui-icon-view {
   color: #fff;
   font-size: 12px;
+  margin: 0;
 }
 
 .phui-badge-mini-grey {

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

@@ -239,3 +239,12 @@ body .phui-header-shell.phui-bleed-header
 .spaces-name .phui-handle {
   color: {$sh-redtext};
 }
+
+.phui-header-subheader .phui-badge-flex-view {
+  display: inline;
+  margin-right: 4px;
+}
+
+.phui-header-subheader .phui-badge-flex-view:after {
+  display: inline;
+}