Allow ObjectItemListView to show profile images

Summary: Ref T4400. Adds `setImageURI()` for object card/items.

Test Plan:
{F132229}

Also tested mobile.

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley, chad

Maniphest Tasks: T4400

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '4b8e980c',
+    'core.pkg.css' => 'b548faff',
     'core.pkg.js' => '264721e1',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => 'cb97e095',
@@ -141,7 +141,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => '2edb76cf',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '4e4e3d4c',
+    'rsrc/css/phui/phui-object-item-list-view.css' => 'a8131782',
     'rsrc/css/phui/phui-pinboard-view.css' => '4b346c2a',
     'rsrc/css/phui/phui-property-list-view.css' => 'dbf53b12',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -758,7 +758,7 @@ return array(
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => '2edb76cf',
     'phui-object-box-css' => 'ce92d8ec',
-    'phui-object-item-list-view-css' => '4e4e3d4c',
+    'phui-object-item-list-view-css' => 'a8131782',
     'phui-pinboard-view-css' => '4b346c2a',
     'phui-property-list-view-css' => 'dbf53b12',
     'phui-remarkup-preview-css' => '19ad512b',

src/applications/uiexample/examples/PHUIObjectItemListExample.php

@@ -332,6 +332,34 @@ final class PHUIObjectItemListExample extends PhabricatorUIExample {
 
     $out[] = array($head, $list);
 
+
+    $head = id(new PHUIHeaderView())
+      ->setHeader(pht('Images'));
+
+    $list = new PHUIObjectItemListView();
+
+    $default_profile = PhabricatorFile::loadBuiltin($user, 'profile.png');
+    $default_project = PhabricatorFile::loadBuiltin($user, 'project.png');
+
+    $list->addItem(
+      id(new PHUIObjectItemView())
+        ->setImageURI($default_profile->getViewURI())
+        ->setHeader(pht('Default User Profile Image'))
+        ->setBarColor('violet')
+        ->addAction(
+          id(new PHUIListItemView())
+            ->setHref('#')
+            ->setIcon('create')));
+
+    $list->addItem(
+      id(new PHUIObjectItemView())
+        ->setImageURI($default_project->getViewURI())
+        ->setHeader(pht('Default Project Profile Image'))
+        ->setGrippable(true)
+        ->addAttribute(pht('This is the default project profile image.')));
+
+    $out[] = array($head, $list);
+
     return $out;
   }
 }

src/view/phui/PHUIObjectItemView.php

@@ -18,6 +18,7 @@ final class PHUIObjectItemView extends AphrontTagView {
   private $actions = array();
   private $headIcons = array();
   private $disabled;
+  private $imageURI;
 
   const AGE_FRESH = 'fresh';
   const AGE_STALE = 'stale';
@@ -97,6 +98,15 @@ final class PHUIObjectItemView extends AphrontTagView {
     return $this;
   }
 
+  public function setImageURI($image_uri) {
+    $this->imageURI = $image_uri;
+    return $this;
+  }
+
+  public function getImageURI() {
+    return $this->imageURI;
+  }
+
   public function setEpoch($epoch, $age = self::AGE_FRESH) {
     $date = phabricator_datetime($epoch, $this->getUser());
 
@@ -241,6 +251,10 @@ final class PHUIObjectItemView extends AphrontTagView {
       $item_classes[] = 'phui-object-item-grippable';
     }
 
+    if ($this->getImageuRI()) {
+      $item_classes[] = 'phui-object-item-with-image';
+    }
+
     return array(
       'class' => $item_classes,
     );
@@ -469,6 +483,17 @@ final class PHUIObjectItemView extends AphrontTagView {
         $foot,
       ));
 
+    $image = null;
+    if ($this->getImageURI()) {
+      $image = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-object-item-image',
+          'style' => 'background-image: url('.$this->getImageURI().')',
+        ),
+        '');
+    }
+
     $box = phutil_tag(
       'div',
       array(
@@ -505,6 +530,7 @@ final class PHUIObjectItemView extends AphrontTagView {
       ),
       array(
         $actions,
+        $image,
         $box,
       ));
   }

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -568,3 +568,19 @@
   padding-left: 0;
   padding-top: 0;
 }
+
+.phui-object-item-image {
+  width: 50px;
+  height: 50px;
+  margin: 4px 4px 4px 8px;
+  position: absolute;
+  background-color: {$lightbluebackground};
+}
+
+.phui-object-item-with-image .phui-object-item-frame {
+  min-height: 58px;
+}
+
+.phui-object-item-with-image .phui-object-item-content-box {
+  margin-left: 58px;
+}