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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'a520d619',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => '0d7ecd3b',
+    'core.pkg.css' => 'cc0250e8',
     'core.pkg.js' => '1fa7c0c5',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '4815647b',
@@ -96,7 +96,7 @@ return array(
     'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
     'rsrc/css/application/policy/policy.css' => '957ea14c',
     'rsrc/css/application/ponder/ponder-view.css' => 'fbd45f96',
-    'rsrc/css/application/project/project-card-view.css' => 'f25746f5',
+    'rsrc/css/application/project/project-card-view.css' => '77219296',
     'rsrc/css/application/project/project-view.css' => '9f6ce0e1',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
@@ -130,7 +130,7 @@ return array(
     'rsrc/css/phui/object-item/phui-oi-simple-ui.css' => 'a8beebea',
     'rsrc/css/phui/phui-action-list.css' => 'f980c059',
     'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
-    'rsrc/css/phui/phui-badge.css' => '3baef8db',
+    'rsrc/css/phui/phui-badge.css' => '22fe77f8',
     'rsrc/css/phui/phui-basic-nav-view.css' => 'a0705f53',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
     'rsrc/css/phui/phui-box.css' => '269cbc99',
@@ -150,9 +150,9 @@ return array(
     'rsrc/css/phui/phui-form.css' => '5815af7b',
     'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
     'rsrc/css/phui/phui-header-view.css' => 'fef6a54e',
-    'rsrc/css/phui/phui-hovercard.css' => 'e904f5dc',
+    'rsrc/css/phui/phui-hovercard.css' => 'ae091fc5',
     'rsrc/css/phui/phui-icon-set-selector.css' => '87db8fee',
-    'rsrc/css/phui/phui-icon.css' => '09f46dd9',
+    'rsrc/css/phui/phui-icon.css' => '12b387a1',
     'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
@@ -837,7 +837,7 @@ return array(
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => '4282e4ad',
     'phui-action-panel-css' => '91c7b835',
-    'phui-badge-view-css' => '3baef8db',
+    'phui-badge-view-css' => '22fe77f8',
     'phui-basic-nav-view-css' => 'a0705f53',
     'phui-big-info-view-css' => 'bd903741',
     'phui-box-css' => '269cbc99',
@@ -863,9 +863,9 @@ return array(
     'phui-head-thing-view-css' => 'fd311e5f',
     'phui-header-view-css' => 'fef6a54e',
     'phui-hovercard' => '1bd28176',
-    'phui-hovercard-view-css' => 'e904f5dc',
+    'phui-hovercard-view-css' => 'ae091fc5',
     'phui-icon-set-selector-css' => '87db8fee',
-    'phui-icon-view-css' => '09f46dd9',
+    'phui-icon-view-css' => '12b387a1',
     'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => 'ec92802a',
@@ -905,7 +905,7 @@ return array(
     'policy-edit-css' => '815c66f7',
     'policy-transaction-detail-css' => '82100a43',
     'ponder-view-css' => 'fbd45f96',
-    'project-card-view-css' => 'f25746f5',
+    'project-card-view-css' => '77219296',
     'project-view-css' => '9f6ce0e1',
     'releeph-core' => '9b3c5733',
     'releeph-preview-branch' => 'b7a6f4a5',

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));
   }
 
 }

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

@@ -9,7 +9,8 @@
   border: 1px solid {$lightblueborder};
   border-radius: 3px;
   box-shadow: {$dropshadow};
-  width: 380px;
+  width: 420px;
+  position: relative;
 }
 
 .project-card-view .phui-header-shell {
@@ -35,6 +36,53 @@
   display: block;
 }
 
+.project-card-view .project-card-image {
+  height: 140px;
+  width: 140px;
+  margin: 6px;
+  border-radius: 3px;
+}
+
+.project-card-view .project-card-item div {
+  display: inline;
+}
+
+.project-card-view .project-card-item {
+  margin-bottom: 2px;
+}
+
+.project-card-view .project-card-item-text {
+  color: {$greytext};
+}
+
+.project-card-view .project-card-item-icon {
+  width: 20px;
+}
+
+.project-card-view .project-card-header {
+  position: absolute;
+  top: 12px;
+  left: 158px;
+}
+
+.project-card-header .project-card-name {
+  font-size: 20px;
+  font-family: 'Aleo', {$fontfamily};
+  font-weight: bold;
+  color: #000;
+  margin-bottom: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 250px;
+  overflow: hidden;
+}
+
+.project-card-header .project-card-username {
+  font-size: 14px;
+  color: {$bluetext};
+  margin-bottom: 12px;
+}
+
 .project-card-view .phui-header-shell .phui-header-col1 {
   vertical-align: top;
   width: 64px;
@@ -65,7 +113,7 @@
 }
 
 .project-card-view .project-card-body {
-  padding: 0 12px 12px 76px;
+  padding: 0 12px 12px 12px;
   color: {$darkbluetext};
 }
 

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

@@ -183,11 +183,6 @@
   line-height: 24px;
   text-align: center;
   display: inline-block;
-  opacity: 0.7;
-}
-
-.phui-badge-mini:hover {
-  opacity: 1;
 }
 
 .phui-badge-mini .phui-icon-view {

webroot/rsrc/css/phui/phui-hovercard.css

@@ -81,7 +81,11 @@
 }
 
 .hovercard-badges {
-  margin: 8px 0 0 0;
+  margin: 6px 0 0 0;
+  padding: 4px;
+  background: {$page.background};
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
 .hovercard-badges .phui-badge-flex-item {

webroot/rsrc/css/phui/phui-icon.css

@@ -31,7 +31,7 @@
 }
 
 .phui-icon-has-text:before {
-  margin-right: 4px;
+  margin-right: 6px;
 }
 
 a.phui-icon-view:hover {
@@ -39,6 +39,12 @@ a.phui-icon-view:hover {
   color: {$sky};
 }
 
+img.phui-image-disabled {
+  opacity: .8;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
 /* - Icon in a Circle ------------------------------------------------------- */
 
 .phui-icon-circle {