Implement card style and extras for object item lists

Summary:
Initial pass at elements appearing on M10.

Glaring omissions:

  - I cut a single icon out of M10 in a haphazard way.
  - No linear graident texture on the cards.

Test Plan:
{F35248}
{F35249}

Reviewers: chad

Reviewed By: chad

CC: aran

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

src/__celerity_resource_map__.php

@@ -483,6 +483,13 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/sprite-apps.png',
     'type' => 'png',
   ),
+  '/rsrc/image/sprite-card.png' =>
+  array(
+    'hash' => 'b46c1d58a79a349bfd3eb669e38f009e',
+    'uri' => '/res/b46c1d58/rsrc/image/sprite-card.png',
+    'disk' => '/rsrc/image/sprite-card.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/sprite-conpher-X2.png' =>
   array(
     'hash' => '88f5bf563e90d99ebe1b4ec552a963fc',
@@ -2922,7 +2929,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-object-item-list-view-css' =>
   array(
-    'uri' => '/res/034774f8/rsrc/css/layout/phabricator-object-item-list-view.css',
+    'uri' => '/res/84cd78f7/rsrc/css/layout/phabricator-object-item-list-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3446,6 +3453,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/sprite-apps-xlarge.css',
   ),
+  'sprite-card-css' =>
+  array(
+    'uri' => '/res/3ba26022/rsrc/css/sprite-card.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/sprite-card.css',
+  ),
   'sprite-conpher-css' =>
   array(
     'uri' => '/res/6277b31f/rsrc/css/sprite-conpher.css',
@@ -3530,7 +3546,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'fdd3bb5f' =>
+    'aa0dfc66' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3573,7 +3589,7 @@ celerity_register_resource_map(array(
         35 => 'phabricator-object-item-list-view-css',
         36 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/fdd3bb5f/core.pkg.css',
+      'uri' => '/res/pkg/aa0dfc66/core.pkg.css',
       'type' => 'css',
     ),
     '95ceba95' =>
@@ -3764,17 +3780,17 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => 'eb35a026',
-    'aphront-crumbs-view-css' => 'fdd3bb5f',
+    'aphront-crumbs-view-css' => 'aa0dfc66',
-    'aphront-dialog-view-css' => 'fdd3bb5f',
+    'aphront-dialog-view-css' => 'aa0dfc66',
-    'aphront-error-view-css' => 'fdd3bb5f',
+    'aphront-error-view-css' => 'aa0dfc66',
-    'aphront-form-view-css' => 'fdd3bb5f',
+    'aphront-form-view-css' => 'aa0dfc66',
-    'aphront-list-filter-view-css' => 'fdd3bb5f',
+    'aphront-list-filter-view-css' => 'aa0dfc66',
-    'aphront-pager-view-css' => 'fdd3bb5f',
+    'aphront-pager-view-css' => 'aa0dfc66',
-    'aphront-panel-view-css' => 'fdd3bb5f',
+    'aphront-panel-view-css' => 'aa0dfc66',
-    'aphront-table-view-css' => 'fdd3bb5f',
+    'aphront-table-view-css' => 'aa0dfc66',
-    'aphront-tokenizer-control-css' => 'fdd3bb5f',
+    'aphront-tokenizer-control-css' => 'aa0dfc66',
-    'aphront-tooltip-css' => 'fdd3bb5f',
+    'aphront-tooltip-css' => 'aa0dfc66',
-    'aphront-typeahead-control-css' => 'fdd3bb5f',
+    'aphront-typeahead-control-css' => 'aa0dfc66',
     'differential-changeset-view-css' => '8aaacd1b',
     'differential-core-view-css' => '8aaacd1b',
     'differential-inline-comment-editor' => '322728f3',
@@ -3788,7 +3804,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '8aaacd1b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'fdd3bb5f',
+    'global-drag-and-drop-css' => 'aa0dfc66',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => '95ceba95',
     'javelin-behavior' => 'cd1d650a',
@@ -3860,48 +3876,48 @@ celerity_register_resource_map(array(
     'javelin-util' => 'cd1d650a',
     'javelin-vector' => 'cd1d650a',
     'javelin-workflow' => 'cd1d650a',
-    'lightbox-attachment-css' => 'fdd3bb5f',
+    'lightbox-attachment-css' => 'aa0dfc66',
     'maniphest-task-summary-css' => 'eb35a026',
     'maniphest-transaction-detail-css' => 'eb35a026',
     'phabricator-busy' => '95ceba95',
     'phabricator-content-source-view-css' => '8aaacd1b',
-    'phabricator-core-buttons-css' => 'fdd3bb5f',
+    'phabricator-core-buttons-css' => 'aa0dfc66',
-    'phabricator-core-css' => 'fdd3bb5f',
+    'phabricator-core-css' => 'aa0dfc66',
-    'phabricator-crumbs-view-css' => 'fdd3bb5f',
+    'phabricator-crumbs-view-css' => 'aa0dfc66',
-    'phabricator-directory-css' => 'fdd3bb5f',
+    'phabricator-directory-css' => 'aa0dfc66',
     'phabricator-drag-and-drop-file-upload' => '322728f3',
     'phabricator-dropdown-menu' => '95ceba95',
     'phabricator-file-upload' => '95ceba95',
-    'phabricator-filetree-view-css' => 'fdd3bb5f',
+    'phabricator-filetree-view-css' => 'aa0dfc66',
-    'phabricator-flag-css' => 'fdd3bb5f',
+    'phabricator-flag-css' => 'aa0dfc66',
-    'phabricator-form-view-css' => 'fdd3bb5f',
+    'phabricator-form-view-css' => 'aa0dfc66',
-    'phabricator-header-view-css' => 'fdd3bb5f',
+    'phabricator-header-view-css' => 'aa0dfc66',
-    'phabricator-jump-nav' => 'fdd3bb5f',
+    'phabricator-jump-nav' => 'aa0dfc66',
     'phabricator-keyboard-shortcut' => '95ceba95',
     'phabricator-keyboard-shortcut-manager' => '95ceba95',
-    'phabricator-main-menu-view' => 'fdd3bb5f',
+    'phabricator-main-menu-view' => 'aa0dfc66',
     'phabricator-menu-item' => '95ceba95',
-    'phabricator-nav-view-css' => 'fdd3bb5f',
+    'phabricator-nav-view-css' => 'aa0dfc66',
     'phabricator-notification' => '95ceba95',
-    'phabricator-notification-css' => 'fdd3bb5f',
+    'phabricator-notification-css' => 'aa0dfc66',
-    'phabricator-notification-menu-css' => 'fdd3bb5f',
+    'phabricator-notification-menu-css' => 'aa0dfc66',
-    'phabricator-object-item-list-view-css' => 'fdd3bb5f',
+    'phabricator-object-item-list-view-css' => 'aa0dfc66',
     'phabricator-object-selector-css' => '8aaacd1b',
     'phabricator-paste-file-upload' => '95ceba95',
     'phabricator-prefab' => '95ceba95',
     'phabricator-project-tag-css' => 'eb35a026',
-    'phabricator-remarkup-css' => 'fdd3bb5f',
+    'phabricator-remarkup-css' => 'aa0dfc66',
     'phabricator-shaped-request' => '322728f3',
-    'phabricator-side-menu-view-css' => 'fdd3bb5f',
+    'phabricator-side-menu-view-css' => 'aa0dfc66',
-    'phabricator-standard-page-view' => 'fdd3bb5f',
+    'phabricator-standard-page-view' => 'aa0dfc66',
     'phabricator-textareautils' => '95ceba95',
     'phabricator-tooltip' => '95ceba95',
-    'phabricator-transaction-view-css' => 'fdd3bb5f',
+    'phabricator-transaction-view-css' => 'aa0dfc66',
-    'phabricator-zindex-css' => 'fdd3bb5f',
+    'phabricator-zindex-css' => 'aa0dfc66',
-    'sprite-apps-large-css' => 'fdd3bb5f',
+    'sprite-apps-large-css' => 'aa0dfc66',
-    'sprite-gradient-css' => 'fdd3bb5f',
+    'sprite-gradient-css' => 'aa0dfc66',
-    'sprite-icon-css' => 'fdd3bb5f',
+    'sprite-icon-css' => 'aa0dfc66',
-    'sprite-menu-css' => 'fdd3bb5f',
+    'sprite-menu-css' => 'aa0dfc66',
-    'syntax-highlighting-css' => 'fdd3bb5f',
+    'syntax-highlighting-css' => 'aa0dfc66',
   ),
 ));

src/__phutil_library_map__.php

@@ -1108,6 +1108,7 @@ phutil_register_library_map(array(
     'PhabricatorObjectHandleConstants' => 'applications/phid/handle/const/PhabricatorObjectHandleConstants.php',
     'PhabricatorObjectHandleData' => 'applications/phid/handle/PhabricatorObjectHandleData.php',
     'PhabricatorObjectHandleStatus' => 'applications/phid/handle/const/PhabricatorObjectHandleStatus.php',
+    'PhabricatorObjectItemListExample' => 'applications/uiexample/examples/PhabricatorObjectItemListExample.php',
     'PhabricatorObjectItemListView' => 'view/layout/PhabricatorObjectItemListView.php',
     'PhabricatorObjectItemView' => 'view/layout/PhabricatorObjectItemView.php',
     'PhabricatorObjectListView' => 'view/control/PhabricatorObjectListView.php',
@@ -2607,6 +2608,7 @@ phutil_register_library_map(array(
     'PhabricatorOAuthServerTokenController' => 'PhabricatorAuthController',
     'PhabricatorOAuthUnlinkController' => 'PhabricatorAuthController',
     'PhabricatorObjectHandleStatus' => 'PhabricatorObjectHandleConstants',
+    'PhabricatorObjectItemListExample' => 'PhabricatorUIExample',
     'PhabricatorObjectItemListView' => 'AphrontView',
     'PhabricatorObjectItemView' => 'AphrontView',
     'PhabricatorObjectListView' => 'AphrontView',

src/applications/config/controller/PhabricatorConfigGroupController.php

@@ -72,7 +72,7 @@ final class PhabricatorConfigGroupController
     $engine->process();
 
     $list = new PhabricatorObjectItemListView();
-    $list->setStackable();
+    $list->setStackable(true);
     foreach ($options as $option) {
       $summary = $engine->getOutput($option, 'summary');
 

src/applications/config/controller/PhabricatorConfigIssueListController.php

@@ -48,7 +48,7 @@ final class PhabricatorConfigIssueListController
   private function buildIssueList(array $issues) {
     assert_instances_of($issues, 'PhabricatorSetupIssue');
     $list = new PhabricatorObjectItemListView();
-    $list->setStackable();
+    $list->setStackable(true);
     $ignored_items = array();
 
     foreach ($issues as $issue) {

src/applications/config/controller/PhabricatorConfigListController.php

@@ -46,7 +46,7 @@ final class PhabricatorConfigListController
     assert_instances_of($groups, 'PhabricatorApplicationConfigOptions');
 
     $list = new PhabricatorObjectItemListView();
-    $list->setStackable();
+    $list->setStackable(true);
     $groups = msort($groups, 'getName');
     foreach ($groups as $group) {
       $item = id(new PhabricatorObjectItemView())

src/applications/project/controller/PhabricatorProjectListController.php

@@ -108,7 +108,7 @@ final class PhabricatorProjectListController
     }
 
     $list = new PhabricatorObjectItemListView();
-    $list->setStackable();
+    $list->setStackable(true);
     foreach ($rows as $row) {
       $item = id(new PhabricatorObjectItemView())
         ->setHeader($row[0])

src/applications/uiexample/examples/PhabricatorObjectItemListExample.php

@@ -0,0 +1,190 @@
+<?php
+
+final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Object Item List';
+  }
+
+  public function getDescription() {
+    return hsprintf(
+      'Use <tt>PhabricatorObjectItemListView</tt> to render lists of objects.');
+  }
+
+  public function renderExample() {
+    $request = $this->getRequest();
+    $user = $request->getUser();
+
+    $handle = PhabricatorObjectHandleData::loadOneHandle(
+      $user->getPHID(),
+      $user);
+
+    $out = array();
+
+    $head = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Basic List'));
+
+    $list = new PhabricatorObjectItemListView();
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Apple'))
+        ->setHref('#'));
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Banana'))
+        ->setHref('#'));
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Cherry'))
+        ->setHref('#'));
+
+    $out[] = array($head, $list);
+
+
+    $head = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Empty List'));
+    $list = new PhabricatorObjectItemListView();
+
+    $list->setNoDataString(pht('This list is empty.'));
+
+    $out[] = array($head, $list);
+
+
+    $head = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Stacked List'));
+    $list = new PhabricatorObjectItemListView();
+    $list->setStackable(true);
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Monday'))
+        ->setHref('#'));
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Tuesday'))
+        ->setHref('#'));
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Wednesday'))
+        ->setHref('#'));
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Thursday'))
+        ->setHref('#'));
+
+    $out[] = array($head, $list);
+
+
+    $head = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Card List'));
+    $list = new PhabricatorObjectItemListView();
+    $list->setCards(true);
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Business Card')));
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Playing Card')));
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('House of Cards')));
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Cardigan')));
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Cardamom'))
+        ->addFootIcon('highlight-white', 'Spice'));
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht(
+          'The human cardiovascular system includes the heart, lungs, and '.
+          'some other parts; most of these parts are pretty squishy'))
+        ->addFootIcon('search-white', pht('Respiration!'))
+        ->addHandleIcon($handle, pht('You have a cardiovascular system!')));
+
+
+    $out[] = array($head, $list);
+
+
+    $head = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Extras'));
+
+    $list = new PhabricatorObjectItemListView();
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Ace of Hearts'))
+        ->setHref('#')
+        ->addAttribute(pht('Suit: Hearts'))
+        ->addAttribute(pht('Rank: Ace'))
+        ->addIcon('love', pht('Ace'))
+        ->addIcon('love-grey', pht('Hearts'))
+        ->addFootIcon('blame-white', pht('Ace'))
+        ->addFootIcon('love-white', pht('Heart'))
+        ->addHandleIcon($handle, pht('You hold all the cards.'))
+        ->addHandleIcon($handle, pht('You make all the rules.')));
+
+    $out[] = array($head, $list);
+
+
+    $head = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Effects'));
+
+    $list = new PhabricatorObjectItemListView();
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Normal'))
+        ->setHref('#'));
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Highlighted'))
+        ->setEffect('highlighted')
+        ->setHref('#'));
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Selected'))
+        ->setEffect('selected')
+        ->setHref('#'));
+
+    $out[] = array($head, $list);
+
+
+    $head = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Effects'));
+
+    $list = new PhabricatorObjectItemListView();
+
+    $bar_colors = array(
+      null      => pht('None'),
+      'red'     => pht('Red'),
+      'orange'  => pht('Orange'),
+      'yellow'  => pht('Yellow'),
+      'green'   => pht('Green'),
+      'sky'     => pht('Sky'),
+      'blue'    => pht('Blue'),
+      'indigo'  => pht('Indigo'),
+      'violet'  => pht('Violet'),
+      'grey'    => pht('Grey'),
+      'black'   => pht('Black'),
+    );
+
+    foreach ($bar_colors as $bar_color => $bar_label) {
+      $list->addItem(
+        id(new PhabricatorObjectItemView())
+          ->setHeader($bar_label)
+          ->setBarColor($bar_color));
+    }
+
+    $out[] = array($head, $list);
+
+    return $out;
+  }
+}

src/view/layout/PhabricatorObjectItemListView.php

@@ -6,6 +6,7 @@ final class PhabricatorObjectItemListView extends AphrontView {
   private $items;
   private $pager;
   private $stackable;
+  private $cards;
   private $noDataString;
 
   public function setHeader($header) {
@@ -28,8 +29,13 @@ final class PhabricatorObjectItemListView extends AphrontView {
     return $this;
   }
 
-  public function setStackable() {
+  public function setStackable($stackable) {
-    $this->stackable = true;
+    $this->stackable = $stackable;
+    return $this;
+  }
+
+  public function setCards($cards) {
+    $this->cards = $cards;
     return $this;
   }
 
@@ -65,6 +71,9 @@ final class PhabricatorObjectItemListView extends AphrontView {
     if ($this->stackable) {
       $classes[] = 'phabricator-object-list-stackable';
     }
+    if ($this->cards) {
+      $classes[] = 'phabricator-object-list-cards';
+    }
 
     return phutil_tag(
       'ul',

src/view/layout/PhabricatorObjectItemView.php

@@ -5,12 +5,12 @@ final class PhabricatorObjectItemView extends AphrontView {
   private $header;
   private $href;
   private $attributes = array();
-  private $details = array();
-  private $dates = array();
   private $icons = array();
   private $barColor;
   private $object;
   private $effect;
+  private $footIcons = array();
+  private $handleIcons = array();
 
   public function setEffect($effect) {
     $this->effect = $effect;
@@ -57,6 +57,24 @@ final class PhabricatorObjectItemView extends AphrontView {
     return $this;
   }
 
+  public function addFootIcon($icon, $label = null) {
+    $this->footIcons[] = array(
+      'icon' => $icon,
+      'label' => $label,
+    );
+    return $this;
+  }
+
+  public function addHandleIcon(
+    PhabricatorObjectHandle $handle,
+    $label = null) {
+    $this->handleIcons[] = array(
+      'icon' => $handle,
+      'label' => $label,
+    );
+    return $this;
+  }
+
   public function setBarColor($bar_color) {
     $this->barColor = $bar_color;
     return $this;
@@ -72,8 +90,12 @@ final class PhabricatorObjectItemView extends AphrontView {
   }
 
   public function render() {
+    $content_classes = array();
+    $item_classes = array();
+    $content_classes[] = 'phabricator-object-item-content';
+
     $header = phutil_tag(
-      'a',
+      $this->href ? 'a' : 'div',
       array(
         'href' => $this->href,
         'class' => 'phabricator-object-item-name',
@@ -125,6 +147,7 @@ final class PhabricatorObjectItemView extends AphrontView {
           'class' => 'phabricator-object-item-icons',
         ),
         $icon_list);
+      $item_classes[] = 'phabricator-object-item-with-icons';
     }
 
     $attrs = null;
@@ -155,16 +178,58 @@ final class PhabricatorObjectItemView extends AphrontView {
           'class' => 'phabricator-object-item-attributes',
         ),
         $attrs);
+      $item_classes[] = 'phabricator-object-item-with-attrs';
     }
 
-    $classes = array();
+    $foot = array();
-    $classes[] = 'phabricator-object-item';
+
-    if ($this->barColor) {
+    if ($this->handleIcons) {
-      $classes[] = 'phabricator-object-item-bar-color-'.$this->barColor;
+      $handle_bar = array();
+      foreach ($this->handleIcons as $icon) {
+        $handle_bar[] = $this->renderHandleIcon($icon['icon'], $icon['label']);
+      }
+      $foot[] = phutil_tag(
+        'div',
+        array(
+          'class' => 'phabricator-object-item-handle-icons',
+        ),
+        $handle_bar);
+      $item_classes[] = 'phabricator-object-item-with-handle-icons';
     }
+
+    if ($this->footIcons) {
+      $foot_bar = array();
+      foreach ($this->footIcons as $icon) {
+        $foot_bar[] = $this->renderFootIcon($icon['icon'], $icon['label']);
+      }
+      $foot[] = phutil_tag(
+        'div',
+        array(
+          'class' => 'phabricator-object-item-foot-icons',
+        ),
+        $foot_bar);
+    }
+
+    if ($foot) {
+      $foot = phutil_tag(
+        'div',
+        array(
+          'class' => 'phabricator-object-item-foot',
+        ),
+        $foot);
+    }
+
+    $item_classes[] = 'phabricator-object-item';
+    if ($this->barColor) {
+      $item_classes[] = 'phabricator-object-item-bar-color-'.$this->barColor;
+    }
+
     switch ($this->effect) {
       case 'highlighted':
-        $classes[] = 'phabricator-object-item-highlighted';
+        $item_classes[] = 'phabricator-object-item-highlighted';
+        break;
+      case 'selected':
+        $item_classes[] = 'phabricator-object-item-selected';
         break;
       case null:
         break;
@@ -175,7 +240,7 @@ final class PhabricatorObjectItemView extends AphrontView {
     $content = phutil_tag(
       'div',
       array(
-        'class' => 'phabricator-object-item-content',
+        'class' => implode(' ', $content_classes),
       ),
       array(
         $header,
@@ -186,9 +251,56 @@ final class PhabricatorObjectItemView extends AphrontView {
     return phutil_tag(
       'li',
       array(
-        'class' => implode(' ', $classes),
+        'class' => implode(' ', $item_classes),
       ),
-      array($icons, $content));
+      array(
+        $icons,
+        $content,
+        $foot,
+      ));
   }
 
+  private function renderFootIcon($icon, $label) {
+    require_celerity_resource('sprite-icon-css');
+
+    $icon = phutil_tag(
+      'span',
+      array(
+        'class' => 'sprite-icon action-'.$icon,
+      ),
+      '');
+
+    $label = phutil_tag(
+      'span',
+      array(
+      ),
+      $label);
+
+    return phutil_tag(
+      'span',
+      array(
+        'class' => 'phabricator-object-item-foot-icon',
+      ),
+      array($icon, $label));
+  }
+
+
+  private function renderHandleIcon(PhabricatorObjectHandle $handle, $label) {
+    Javelin::initBehavior('phabricator-tooltips');
+
+    return javelin_tag(
+      'span',
+      array(
+        'class' => 'phabricator-object-item-handle-icon',
+        'sigil' => 'has-tooltip',
+        'style' => 'background: url('.$handle->getImageURI().')',
+        'meta' => array(
+          'tip' => $label,
+        ),
+      ),
+      '');
+  }
+
+
+
 }

webroot/rsrc/css/layout/phabricator-object-item-list-view.css

@@ -6,9 +6,6 @@
   padding: 8px 6px;
 }
 
-.phabricator-object-item-list-view.phabricator-object-list-stackable .phabricator-object-item {
-  margin: -1px 0 0 0;
-}
 
 .device-desktop .phabricator-object-item-list-view {
   padding: 20px;
@@ -25,30 +22,71 @@
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10);
 }
 
-.phabricator-object-list-stackable .phabricator-object-item {
-  border-width: 1px;
-}
-
-.device-desktop .phabricator-object-list-stackable .phabricator-object-item:hover {
-  border-width: 1px;
-  background: #e9ecf5;
-}
-
 .device-desktop .phabricator-object-item {
   margin: 0 0 5px 0;
 }
 
 .phabricator-object-item-name {
   display: block;
-  padding: 8px 10px 2px;
+  padding: 8px 10px 8px;
   font-weight: bold;
   font-size: 14px;
 }
 
+.phabricator-object-item-with-attrs .phabricator-object-item-name {
+  padding-bottom: 2px;
+}
+
 .phabricator-object-item-content {
   overflow: hidden;
 }
 
+
+/* - Stackable List ------------------------------------------------------------
+
+  Tighter, stacking list.
+
+*/
+
+.phabricator-object-item-list-view.phabricator-object-list-stackable
+  .phabricator-object-item {
+  margin: -1px 0 0 0;
+}
+
+.phabricator-object-list-stackable .phabricator-object-item {
+  border-width: 1px;
+}
+
+.device-desktop .phabricator-object-list-stackable
+  .phabricator-object-item:hover {
+  border-width: 1px;
+  background: #e9ecf5;
+}
+
+
+/* - Card List -----------------------------------------------------------------
+
+  Rounded card list.
+
+*/
+
+.phabricator-object-list-cards .phabricator-object-item {
+  border-radius: 3px;
+  border-left-width: 4px;
+  background: #f6f6f6;
+}
+
+
+.phabricator-object-list-cards .phabricator-object-item-name {
+  display: block;
+  padding: 6px 10px 6px;
+  font-weight: normal;
+  font-size: 13px;
+  color: #555555;
+  max-height: 2em;
+}
+
+
 /* - Attribute List ------------------------------------------------------------
 
   Object attributes, commonly used to render created date, etc.
@@ -91,7 +129,8 @@
   width: 120px;
 }
 
-.device-desktop .phabricator-object-item-content {
+.device-desktop .phabricator-object-item-with-icons
+  .phabricator-object-item-content {
   margin-right: 132px;
 }
 
@@ -99,7 +138,7 @@
   width: 18px;
 }
 
-.device .phabricator-object-item-content {
+.device .phabricator-object-item-with-icons .phabricator-object-item-content {
   margin-right: 30px;
 }
 
@@ -188,5 +227,79 @@
 */
 
 .phabricator-object-item-highlighted {
-  background: #ffff88;
+  background: #ffffb2;
+}
+
+.phabricator-object-item-selected {
+  background: #bfdcff;
+}
+
+
+/* - Foot ----------------------------------------------------------------------
+
+  This goes at the bottom.
+
+*/
+
+.phabricator-object-item-foot {
+  clear: both;
+  padding: 0;
+}
+
+
+/* - Foot Icons ----------------------------------------------------------------
+
+  Object counts shown in the footer.
+
+*/
+
+.phabricator-object-item-foot-icons {
+  margin-left: 10px;
+}
+
+.phabricator-object-item-foot-icon {
+  display: inline-block;
+  background: #909090;
+  color: #ffffff;
+  font-weight: bold;
+  margin-right: 3px;
+  padding: 1px 4px 0 22px;
+  height: 19px;
+  vertical-align: middle;
+  position: relative;
+}
+
+.phabricator-object-item-with-handle-icons .phabricator-object-item-foot-icon {
+  margin-top: 8px;
+}
+
+.phabricator-object-item-foot-icon .sprite-icon {
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  left: 4px;
+  top: 3px;
+}
+
+
+/* - Handle Icons --------------------------------------------------------------
+
+  Shows owners, reviewers, etc.
+
+*/
+
+.phabricator-object-item-handle-icons {
+  float: right;
+  height: 28px;
+  margin-right: 10px;
+}
+
+.phabricator-object-item-handle-icon {
+  margin-left: 3px;
+  width: 28px;
+  height: 28px;
+  display: inline-block;
+  background: #f3f3f3;
+  background-size: 28px 28px;
+  background-repeat: no-repeat;
 }