Update people hovercard UI

Summary: Removes Badges, they felt awkward. Updates UI, larger image, better layout, more icons.

Test Plan: Review numerous layouts with fancy new search tool.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

src/applications/people/engineextension/PeopleHovercardEngineExtension.php

@@ -27,7 +27,6 @@ final class PeopleHovercardEngineExtension
       ->needAvailability(true)
       ->needProfileImage(true)
       ->needProfile(true)
-      ->needBadges(true)
       ->execute();
     $users = mpull($users, null, 'getPHID');
 

src/applications/people/menuitem/PhabricatorPeoplePictureProfileMenuItem.php

@@ -36,6 +36,13 @@ final class PhabricatorPeoplePictureProfileMenuItem
 
     $picture = $user->getProfileImageURI();
     $name = $user->getUsername();
+
+    $classes = array();
+    $classes[] = 'people-menu-image';
+    if ($user->getIsDisabled()) {
+      $classes[] = 'phui-image-disabled';
+    }
+
     $href = urisprintf(
       '/p/%s/',
       $user->getUsername());
@@ -44,7 +51,7 @@ final class PhabricatorPeoplePictureProfileMenuItem
       'img',
       array(
         'src' => $picture,
-        'class' => 'people-menu-image',
+        'class' => implode(' ', $classes),
       ));
 
     $can_edit = PhabricatorPolicyFilter::hasCapability(

src/applications/people/view/PhabricatorUserCardView.php

@@ -33,9 +33,7 @@ final class PhabricatorUserCardView extends AphrontTagView {
     $classes[] = 'project-card-view';
 
     if ($this->profile->getIsDisabled()) {
-      $classes[] = 'project-card-grey';
-    } else {
-      $classes[] = 'project-card-blue';
+      $classes[] = 'project-card-disabled';
     }
 
     return array(
@@ -56,10 +54,12 @@ final class PhabricatorUserCardView extends AphrontTagView {
     // the most important tag. Users can click through to the profile to get
     // more details.
 
+    $classes = array();
     if ($user->getIsDisabled()) {
       $tag_icon = 'fa-ban';
       $tag_title = pht('Disabled');
       $tag_shade = PHUITagView::COLOR_RED;
+      $classes[] = 'phui-image-disabled';
     } else if (!$user->getIsApproved()) {
       $tag_icon = 'fa-ban';
       $tag_title = pht('Unapproved Account');
@@ -87,47 +87,60 @@ final class PhabricatorUserCardView extends AphrontTagView {
       $tag->setShade($tag_shade);
     }
 
-    $header = id(new PHUIHeaderView())
-      ->setHeader($user->getFullName())
-      ->addTag($tag)
-      ->setUser($viewer)
-      ->setImage($picture);
-
     $body = array();
 
+    /* TODO: Replace with Conpherence Availability if we ship it */
     $body[] = $this->addItem(
-      pht('User Since'),
+      'fa-user-plus',
       phabricator_date($user->getDateCreated(), $viewer));
 
     if (PhabricatorApplication::isClassInstalledForViewer(
         'PhabricatorCalendarApplication',
         $viewer)) {
       $body[] = $this->addItem(
-        pht('Availability'),
+        'fa-calendar-o',
         id(new PHUIUserAvailabilityView())
           ->setViewer($viewer)
           ->setAvailableUser($user));
     }
 
-    $badges = $this->buildBadges($user, $viewer);
-    if ($badges) {
-      $badges = id(new PHUIBadgeBoxView())
-        ->addItems($badges)
-        ->setCollapsed(true);
-      $body[] = phutil_tag(
-        'div',
-        array(
-          'class' => 'phui-hovercard-body-item hovercard-badges',
-        ),
-        $badges);
-    }
+    $classes[] = 'project-card-image';
+    $image = phutil_tag(
+      'img',
+      array(
+        'src' => $picture,
+        'class' => implode(' ', $classes),
+      ));
 
-    $body = phutil_tag(
+    $href = urisprintf(
+      '/p/%s/',
+      $user->getUsername());
+
+    $image = phutil_tag(
+      'a',
+      array(
+        'href' => $href,
+      ),
+      $image);
+
+    $name = phutil_tag_div('project-card-name',
+      $user->getRealname());
+    $username = phutil_tag_div('project-card-username',
+      '@'.$user->getUsername());
+    $tag = phutil_tag_div('phui-header-subheader',
+      $tag);
+
+    $header = phutil_tag(
       'div',
       array(
-        'class' => 'project-card-body',
+        'class' => 'project-card-header',
       ),
-      $body);
+      array(
+        $name,
+        $username,
+        $tag,
+        $body,
+      ));
 
     $card = phutil_tag(
       'div',
@@ -135,47 +148,24 @@ final class PhabricatorUserCardView extends AphrontTagView {
         'class' => 'project-card-inner',
       ),
       array(
+        $image,
         $header,
-        $body,
       ));
 
     return $card;
   }
 
-  private function addItem($label, $value) {
-    $item = array(
-      phutil_tag('strong', array(), $label),
-      ': ',
-      phutil_tag('span', array(), $value),
-    );
-    return phutil_tag_div('project-card-item', $item);
-  }
-
-  private function buildBadges(
-    PhabricatorUser $user,
-    $viewer) {
-
-    $class = 'PhabricatorBadgesApplication';
-    $items = array();
-
-    if (PhabricatorApplication::isClassInstalledForViewer($class, $viewer)) {
-      $badge_phids = $user->getBadgePHIDs();
-      if ($badge_phids) {
-        $badges = id(new PhabricatorBadgesQuery())
-          ->setViewer($viewer)
-          ->withPHIDs($badge_phids)
-          ->withStatuses(array(PhabricatorBadgesBadge::STATUS_ACTIVE))
-          ->execute();
-
-        foreach ($badges as $badge) {
-          $items[] = id(new PHUIBadgeMiniView())
-            ->setIcon($badge->getIcon())
-            ->setHeader($badge->getName())
-            ->setQuality($badge->getQuality());
-        }
-      }
-    }
-    return $items;
+  private function addItem($icon, $value) {
+    $icon = id(new PHUIIconView())
+      ->addClass('project-card-item-icon')
+      ->setIcon($icon);
+    $text = phutil_tag(
+      'span',
+      array(
+        'class' => 'project-card-item-text',
+      ),
+      $value);
+    return phutil_tag_div('project-card-item', array($icon, $text));
   }
 
 }