Add Badge support to Hovercards

Summary: Let's you add Badges to Hovercards

Test Plan: UIExamples

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T7992

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

resources/celerity/map.php

@@ -117,7 +117,7 @@ return array(
     'rsrc/css/font/font-roboto-slab.css' => 'f24a53cb',
     'rsrc/css/font/phui-font-icon-base.css' => '3dad2ae3',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
-    'rsrc/css/layout/phabricator-hovercard-view.css' => '3a8553e7',
+    'rsrc/css/layout/phabricator-hovercard-view.css' => '1239cd52',
     'rsrc/css/layout/phabricator-side-menu-view.css' => 'bec2458e',
     'rsrc/css/layout/phabricator-source-code-view.css' => '5e0178de',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => 'd1cf6f93',
@@ -732,7 +732,7 @@ return array(
     'phabricator-filetree-view-css' => 'fccf9f82',
     'phabricator-flag-css' => '5337623f',
     'phabricator-hovercard' => '14ac66f5',
-    'phabricator-hovercard-view-css' => '3a8553e7',
+    'phabricator-hovercard-view-css' => '1239cd52',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
     'phabricator-main-menu-view' => '2f670a96',

src/applications/uiexample/examples/PhabricatorHovercardUIExample.php

@@ -51,6 +51,14 @@ final class PhabricatorHovercardUIExample extends PhabricatorUIExample {
       ->addTag($tag));
     $elements[] = $panel;
 
+    $badge1 = id(new PHUIBadgeMiniView())
+      ->setIcon('fa-book')
+      ->setHeader(pht('Documenter'));
+
+    $badge2 = id(new PHUIBadgeMiniView())
+      ->setIcon('fa-star')
+      ->setHeader(pht('Contributor'));
+
     $user_handle = $this->createBasicDummyHandle(
       'gwashington',
       PhabricatorPeopleUserPHIDType::TYPECONST,
@@ -63,6 +71,8 @@ final class PhabricatorHovercardUIExample extends PhabricatorUIExample {
       ->addField(pht('Status'), pht('Available'))
       ->addField(pht('Member since'), '30. February 1750')
       ->addAction(pht('Send a Message'), '/dev/null')
+      ->addBadge($badge1)
+      ->addBadge($badge2)
       ->setUser($user));
     $elements[] = $panel;
 

src/view/widget/hovercard/PhabricatorHovercardView.php

@@ -17,6 +17,7 @@ final class PhabricatorHovercardView extends AphrontView {
   private $tags = array();
   private $fields = array();
   private $actions = array();
+  private $badges = array();
 
   public function setObjectHandle(PhabricatorObjectHandle $handle) {
     $this->handle = $handle;
@@ -64,6 +65,11 @@ final class PhabricatorHovercardView extends AphrontView {
     return $this;
   }
 
+  public function addBadge(PHUIBadgeMiniView $badge) {
+    $this->badges[] = $badge;
+    return $this;
+  }
+
   public function render() {
     if (!$this->handle) {
       throw new PhutilInvalidStateException('setObjectHandle');
@@ -106,12 +112,24 @@ final class PhabricatorHovercardView extends AphrontView {
     foreach ($this->fields as $field) {
       $item = array(
         phutil_tag('strong', array(), $field['label']),
-        ' ',
+        ': ',
         phutil_tag('span', array(), $field['value']),
       );
       $body[] = phutil_tag_div('phabricator-hovercard-body-item', $item);
     }
 
+    if ($this->badges) {
+      $badges = id(new PHUIBadgeBoxView())
+        ->addItems($this->badges)
+        ->setCollapsed(true);
+      $body[] = phutil_tag(
+        'div',
+        array(
+          'class' => 'phabricator-hovercard-body-item hovercard-badges',
+        ),
+        $badges);
+    }
+
     if ($handle->getImageURI()) {
       // Probably a user, we don't need to assume something else
       // "Prepend" the image by appending $body
@@ -163,8 +181,6 @@ final class PhabricatorHovercardView extends AphrontView {
       $tail = phutil_tag_div('phabricator-hovercard-tail', $buttons);
     }
 
-    // Assemble container
-    // TODO: Add color support
     $hovercard = phutil_tag_div(
       'phabricator-hovercard-container',
       array(
@@ -173,8 +189,6 @@ final class PhabricatorHovercardView extends AphrontView {
         $tail,
       ));
 
-    // Wrap for thick border
-    // and later the tip at the bottom
     return phutil_tag_div('phabricator-hovercard-wrapper', $hovercard);
   }
 

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

@@ -56,7 +56,7 @@
 }
 
 .phabricator-hovercard-body-item {
-  margin: 2px 0 0 0px;
+  margin: 4px 0 0 0;
 }
 
 .phabricator-hovercard-body-header {
@@ -82,6 +82,15 @@
   background-repeat: no-repeat;
   background-size: 100%;
 }
+
+.hovercard-badges {
+  margin: 8px 0 0 0;
+}
+
+.hovercard-badges .phui-badge-flex-item {
+  float: left;
+}
+
 .phabricator-hovercard-tail {
   width: 396px;
   float: left;