Hovercard - add project images

Summary:
adds project images. Also fiddles with HTML + CSS just a bit so we have a "picture" column and a "details" column if a picture exists.

This keeps the details all in a nice column even if there are many details that end up being taller than the picture UI.

Fixes T3991.

Test Plan: looked at a task (no pic), project (pic w/ no details), and user (pic w/ many details) hovercard and all looked good on Chrome and Safari

Reviewers: epriestley, chad

CC: chad, Korvin, epriestley, aran

Maniphest Tasks: T3991

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

resources/celerity/map.php

@@ -121,7 +121,7 @@ return array(
     'rsrc/css/layout/phabricator-action-list-view.css' => '81383e25',
     'rsrc/css/layout/phabricator-crumbs-view.css' => '2d9db584',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'a8c86ace',
-    'rsrc/css/layout/phabricator-hovercard-view.css' => '67c12b16',
+    'rsrc/css/layout/phabricator-hovercard-view.css' => '46a13cf0',
     'rsrc/css/layout/phabricator-side-menu-view.css' => '503699d0',
     'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => 'de035c8a',
@@ -696,7 +696,7 @@ return array(
     'phabricator-filetree-view-css' => 'a8c86ace',
     'phabricator-flag-css' => '5337623f',
     'phabricator-hovercard' => '4f344388',
-    'phabricator-hovercard-view-css' => '67c12b16',
+    'phabricator-hovercard-view-css' => '46a13cf0',
     'phabricator-jump-nav' => 'f0c5e726',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',

src/applications/project/phid/PhabricatorProjectPHIDTypeProject.php

@@ -25,7 +25,8 @@ final class PhabricatorProjectPHIDTypeProject extends PhabricatorPHIDType {
     array $phids) {
 
     return id(new PhabricatorProjectQuery())
-      ->withPHIDs($phids);
+      ->withPHIDs($phids)
+      ->needImages(true);
   }
 
   public function loadHandles(
@@ -42,6 +43,7 @@ final class PhabricatorProjectPHIDTypeProject extends PhabricatorPHIDType {
       $handle->setName($name);
       $handle->setObjectName('#'.rtrim($project->getPhrictionSlug(), '/'));
       $handle->setURI("/project/view/{$id}/");
+      $handle->setImageURI($project->getProfileImageURI());
 
       if ($project->isArchived()) {
         $handle->setStatus(PhabricatorObjectHandleStatus::STATUS_CLOSED);

src/view/widget/hovercard/PhabricatorHovercardView.php

@@ -18,7 +18,6 @@ final class PhabricatorHovercardView extends AphrontView {
   private $actions = array();
 
   private $color = 'blue';
-
   public function setObjectHandle(PhabricatorObjectHandle $handle) {
     $this->handle = $handle;
     return $this;
@@ -109,11 +108,21 @@ final class PhabricatorHovercardView extends AphrontView {
       $body = phutil_tag(
         'div',
         array(
-          'class' => 'profile-header-picture-frame',
-          'style' => 'background-image: url('.$handle->getImageURI().');',
-        ),
-        '')
-        ->appendHTML($body);
+          'class' => 'phabricator-hovercard-body-image'),
+          phutil_tag(
+            'div',
+            array(
+              'class' => 'profile-header-picture-frame',
+              'style' => 'background-image: url('.$handle->getImageURI().');',
+            ),
+            ''))
+        ->appendHTML(
+          phutil_tag(
+            'div',
+            array(
+              'class' => 'phabricator-hovercard-body-details',
+            ),
+            $body));
     }
 
     $buttons = array();

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

@@ -7,6 +7,7 @@
 }
 
 .phabricator-hovercard-wrapper {
+  float: left;
   border-radius: 5px;
   width: 400px;
   padding: 6px;
@@ -14,10 +15,13 @@
 }
 
 .device-phone .phabricator-hovercard-wrapper {
+  float: left;
   width: 300px;
 }
 
 .phabricator-hovercard-container {
+  float: left;
+  width: 100%;
   border: 1px solid {$greytext};
 }
 
@@ -27,22 +31,39 @@
 }
 
 .phabricator-hovercard-body {
-  padding: 8px;
+  float: left;
+  width: 100%;
+  padding: 8px 0px 8px 0px;
   background-color: white;
   color: {$darkgreytext};
 }
 
+.phabricator-hovercard-body-header,
+.phabricator-hovercard-body-item {
+  margin: 0px 0px 0px 8px;
+}
+
 .phabricator-hovercard-body-header {
   font-size: 13px;
   padding-bottom: 2px;
   color: {$darkgreytext};
 }
 
+.phabricator-hovercard-body .phabricator-hovercard-body-image {
+  clear: left;
+  float: left;
+  width: 58px;
+}
+
+.phabricator-hovercard-body .phabricator-hovercard-body-details {
+  clear: right;
+  float: left;
+  width: 342px;
+}
+
 .phabricator-hovercard-body .profile-header-picture-frame {
   float: left;
-  margin: 0;
-  margin-right: 10px;
-  margin-bottom: 5px;
+  margin: 0px 8px 0px 8px;
   width: 50px;
   height: 50px;
   background-position: center;
@@ -50,6 +71,8 @@
 }
 
 .phabricator-hovercard-tail {
+  width: 396px;
+  float: left;
   padding: 3px 2px;
   background-color: #eeeeee;
   border-bottom-left-radius: 2px;