Status icons for pinboards.

Summary: Adds image count and token count under the pinboard image. Extended pinboard-item-view for any icon/count pair.

Test Plan: Review Pholio and Macro, tested Chrome and IE9.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2645

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

src/__celerity_resource_map__.php

@@ -2898,7 +2898,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-pinboard-view-css' =>
   array(
-    'uri' => '/res/b7425941/rsrc/css/layout/phabricator-pinboard-view.css',
+    'uri' => '/res/61ecd7cf/rsrc/css/layout/phabricator-pinboard-view.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/pholio/controller/PholioMockListController.php

@@ -19,6 +19,7 @@ final class PholioMockListController extends PholioController {
     $query = id(new PholioMockQuery())
       ->setViewer($user)
       ->needCoverFiles(true)
+      ->needImages(true)
       ->needTokenCounts(true);
 
     $nav = $this->buildSideNav();
@@ -53,19 +54,16 @@ final class PholioMockListController extends PholioController {
       $item->setHeader('M'.$mock->getID().' '.$mock->getName())
            ->setURI('/M'.$mock->getID())
            ->setImageURI($mock->getCoverFile()->getThumb280x210URI())
-           ->setImageSize(280, 210);
+           ->setImageSize(280, 210)
+           ->addIconCount('image', count($mock->getImages()))
+           ->addIconCount('like', $mock->getTokenCount());
 
       if ($mock->getAuthorPHID()) {
         $author_handle = $this->getHandle($mock->getAuthorPHID());
+        $datetime = phabricator_date($mock->getDateCreated(), $user);
         $item->appendChild(
-          pht('Created by %s', $author_handle->renderLink()));
+          pht('By %s on %s', $author_handle->renderLink(), $datetime));
       }
-      $datetime = phabricator_date($mock->getDateCreated(), $user);
-      $item->appendChild(
-        phutil_tag(
-          'div',
-          array(),
-          pht('Created on %s', $datetime)));
       $board->addItem($item);
     }
 

src/view/layout/PhabricatorPinboardItemView.php

@@ -5,6 +5,7 @@ final class PhabricatorPinboardItemView extends AphrontView {
   private $imageURI;
   private $uri;
   private $header;
+  private $iconBlock = array();
 
   private $imageWidth;
   private $imageHeight;
@@ -30,6 +31,11 @@ final class PhabricatorPinboardItemView extends AphrontView {
     return $this;
   }
 
+  public function addIconCount($icon, $count) {
+    $this->iconBlock[] = array($icon, $count);
+    return $this;
+  }
+
   public function render() {
     $header = null;
     if ($this->header) {
@@ -55,6 +61,33 @@ final class PhabricatorPinboardItemView extends AphrontView {
           'height'  => $this->imageHeight,
         )));
 
+    $icons = array();
+    if ($this->iconBlock) {
+      $icon_list = array();
+      foreach ($this->iconBlock as $block) {
+        $icon = phutil_tag(
+          'span',
+          array(
+            'class' =>
+              'phabricator-pinboard-icon sprite-icon action-'.$block[0].'-grey',
+          ),
+          '');
+        $count = phutil_tag('span', array(), $block[1]);
+        $icon_list[] = phutil_tag(
+          'span',
+          array(
+            'class' => 'phabricator-pinboard-item-count',
+          ),
+          array($icon, $count));
+      }
+      $icons = phutil_tag(
+        'div',
+        array(
+          'class' => 'phabricator-pinboard-icons',
+        ),
+        $icon_list);
+    }
+
     $content = $this->renderChildren();
     if ($content) {
       $content = phutil_tag(
@@ -74,6 +107,7 @@ final class PhabricatorPinboardItemView extends AphrontView {
         array(
           $header,
           $image,
+          $icons,
           $content,
         )));
   }

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

@@ -62,3 +62,23 @@
   color: #777;
   font-size: 11px;
 }
+
+.phabricator-pinboard-item-count {
+  float: left;
+  margin-left: 10px;
+}
+
+.phabricator-pinboard-icons {
+  padding: 0 10px 10px 0;
+  color: #aaa;
+  border-bottom: 1px solid #e7e7e7;
+  margin-bottom: 5px;
+  overflow: hidden;
+}
+
+.phabricator-pinboard-icon {
+  height: 14px;
+  width: 14px;
+  float: left;
+  padding-left: 2px;
+}