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
2024-11-27 01:02:42 +01:00 · 2013-03-09 17:55:01 -08:00 · 2013-03-09 17:55:01 -08:00 · b41b1b43db
commit b41b1b43db
parent cd5038e973
10 changed files with 515 additions and 73 deletions
--- a/src/__celerity_resource_map__.php
+++ b/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-dialog-view-css' => 'fdd3bb5f',
-    'aphront-error-view-css' => 'fdd3bb5f',
-    'aphront-form-view-css' => 'fdd3bb5f',
-    'aphront-list-filter-view-css' => 'fdd3bb5f',
-    'aphront-pager-view-css' => 'fdd3bb5f',
-    'aphront-panel-view-css' => 'fdd3bb5f',
-    'aphront-table-view-css' => 'fdd3bb5f',
-    'aphront-tokenizer-control-css' => 'fdd3bb5f',
-    'aphront-tooltip-css' => 'fdd3bb5f',
-    'aphront-typeahead-control-css' => 'fdd3bb5f',
+    'aphront-crumbs-view-css' => 'aa0dfc66',
+    'aphront-dialog-view-css' => 'aa0dfc66',
+    'aphront-error-view-css' => 'aa0dfc66',
+    'aphront-form-view-css' => 'aa0dfc66',
+    'aphront-list-filter-view-css' => 'aa0dfc66',
+    'aphront-pager-view-css' => 'aa0dfc66',
+    'aphront-panel-view-css' => 'aa0dfc66',
+    'aphront-table-view-css' => 'aa0dfc66',
+    'aphront-tokenizer-control-css' => 'aa0dfc66',
+    'aphront-tooltip-css' => 'aa0dfc66',
+    '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-css' => 'fdd3bb5f',
-    'phabricator-crumbs-view-css' => 'fdd3bb5f',
-    'phabricator-directory-css' => 'fdd3bb5f',
+    'phabricator-core-buttons-css' => 'aa0dfc66',
+    'phabricator-core-css' => 'aa0dfc66',
+    'phabricator-crumbs-view-css' => 'aa0dfc66',
+    '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-flag-css' => 'fdd3bb5f',
-    'phabricator-form-view-css' => 'fdd3bb5f',
-    'phabricator-header-view-css' => 'fdd3bb5f',
-    'phabricator-jump-nav' => 'fdd3bb5f',
+    'phabricator-filetree-view-css' => 'aa0dfc66',
+    'phabricator-flag-css' => 'aa0dfc66',
+    'phabricator-form-view-css' => 'aa0dfc66',
+    'phabricator-header-view-css' => 'aa0dfc66',
+    '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-menu-css' => 'fdd3bb5f',
-    'phabricator-object-item-list-view-css' => 'fdd3bb5f',
+    'phabricator-notification-css' => 'aa0dfc66',
+    'phabricator-notification-menu-css' => 'aa0dfc66',
+    '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-standard-page-view' => 'fdd3bb5f',
+    'phabricator-side-menu-view-css' => 'aa0dfc66',
+    'phabricator-standard-page-view' => 'aa0dfc66',
    'phabricator-textareautils' => '95ceba95',
    'phabricator-tooltip' => '95ceba95',
-    'phabricator-transaction-view-css' => 'fdd3bb5f',
-    'phabricator-zindex-css' => 'fdd3bb5f',
-    'sprite-apps-large-css' => 'fdd3bb5f',
-    'sprite-gradient-css' => 'fdd3bb5f',
-    'sprite-icon-css' => 'fdd3bb5f',
-    'sprite-menu-css' => 'fdd3bb5f',
-    'syntax-highlighting-css' => 'fdd3bb5f',
+    'phabricator-transaction-view-css' => 'aa0dfc66',
+    'phabricator-zindex-css' => 'aa0dfc66',
+    'sprite-apps-large-css' => 'aa0dfc66',
+    'sprite-gradient-css' => 'aa0dfc66',
+    'sprite-icon-css' => 'aa0dfc66',
+    'sprite-menu-css' => 'aa0dfc66',
+    'syntax-highlighting-css' => 'aa0dfc66',
  ),
 ));
--- a/src/__phutil_library_map__.php
+++ b/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',
--- a/src/applications/config/controller/PhabricatorConfigGroupController.php
+++ b/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');

--- a/src/applications/config/controller/PhabricatorConfigIssueListController.php
+++ b/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) {
--- a/src/applications/config/controller/PhabricatorConfigListController.php
+++ b/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())
--- a/src/applications/project/controller/PhabricatorProjectListController.php
+++ b/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])
--- a/src/applications/uiexample/examples/PhabricatorObjectItemListExample.php
+++ b/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;
+  }
+}
--- a/src/view/layout/PhabricatorObjectItemListView.php
+++ b/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() {
-    $this->stackable = true;
+  public function setStackable($stackable) {
+    $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',
--- a/src/view/layout/PhabricatorObjectItemView.php
+++ b/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();
-    $classes[] = 'phabricator-object-item';
-    if ($this->barColor) {
-      $classes[] = 'phabricator-object-item-bar-color-'.$this->barColor;
+    $foot = array();
+
+    if ($this->handleIcons) {
+      $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,
+        ),
+      ),
+      '');
+  }
+
+
+
 }
--- a/webroot/rsrc/css/layout/phabricator-object-item-list-view.css
+++ b/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;
 }