Add Pinboard Items to Timeline

Summary: This allows adding of pinboard items to a timeline. I'm hoping we can get this in for Maniphest (Pholio, Cover Image) and Macro (because, Macro), but unsure how to scalably do this. Anyways, here's the front end.

Test Plan:
Make some fake timeline items in UIExamples, test mobile, tablet, and desktop breakpoints.

{F4965798}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'ff161f2d',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '4937a7d7',
+    'core.pkg.css' => '0ab752b2',
     'core.pkg.js' => 'a0c8fb20',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '52b014e7',
@@ -173,7 +173,7 @@ return array(
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => 'd5263e49',
     'rsrc/css/phui/phui-tag-view.css' => 'cc4fd402',
-    'rsrc/css/phui/phui-timeline-view.css' => '1d7ef61d',
+    'rsrc/css/phui/phui-timeline-view.css' => '313c7f22',
     'rsrc/css/phui/phui-two-column-view.css' => 'ce9fa0b7',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5',
     'rsrc/css/phui/workboards/phui-workboard.css' => '3bc85455',
@@ -880,7 +880,7 @@ return array(
     'phui-status-list-view-css' => 'd5263e49',
     'phui-tag-view-css' => 'cc4fd402',
     'phui-theme-css' => '9f261c6b',
-    'phui-timeline-view-css' => '1d7ef61d',
+    'phui-timeline-view-css' => '313c7f22',
     'phui-two-column-view-css' => 'ce9fa0b7',
     'phui-workboard-color-css' => '783cdff5',
     'phui-workboard-view-css' => '3bc85455',

src/applications/uiexample/examples/PHUITimelineExample.php

@@ -80,13 +80,35 @@ final class PHUITimelineExample extends PhabricatorUIExample {
       ->setTitle(pht('Minor Red Event'))
       ->setColor(PhabricatorTransactions::COLOR_RED);
 
+    // Pinboard!!
+    $pin1 = id(new PHUIPinboardItemView())
+      ->setUser($user)
+      ->setHeader('user0.png')
+      ->setImageURI(celerity_get_resource_uri('/rsrc/image/people/user0.png'))
+      ->setURI(celerity_get_resource_uri('/rsrc/image/people/user0.png'))
+      ->setImageSize(280, 210);
+
+    $pin2 = id(new PHUIPinboardItemView())
+      ->setUser($user)
+      ->setHeader('user1.png')
+      ->setImageURI(celerity_get_resource_uri('/rsrc/image/people/user1.png'))
+      ->setURI(celerity_get_resource_uri('/rsrc/image/people/user1.png'))
+      ->setImageSize(280, 210);
+
+    $pin3 = id(new PHUIPinboardItemView())
+      ->setUser($user)
+      ->setHeader('user2.png')
+      ->setImageURI(celerity_get_resource_uri('/rsrc/image/people/user2.png'))
+      ->setURI(celerity_get_resource_uri('/rsrc/image/people/user1.png'))
+      ->setImageSize(280, 210);
+
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
-      ->setIcon('fa-check')
+      ->setIcon('fa-camera-retro')
-      ->setTitle(pht('Historically Important Action'))
+      ->setTitle(pht('Pinboard Image Event'))
-      ->setColor(PhabricatorTransactions::COLOR_BLACK)
+      ->addPinboardItem($pin1)
-      ->setReallyMajorEvent(true);
+      ->addPinboardItem($pin2)
-
+      ->addPinboardItem($pin3);
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
@@ -102,12 +124,6 @@ final class PHUITimelineExample extends PhabricatorUIExample {
       ->appendChild(str_repeat(pht('Long Text Body').' ', 64))
       ->setColor(PhabricatorTransactions::COLOR_ORANGE);
 
-    $events[] = id(new PHUITimelineEventView())
-      ->setUserHandle($handle)
-      ->setTitle(str_repeat('LongTextEventNoSpaces', 1024))
-      ->appendChild(str_repeat('LongTextNoSpaces', 1024))
-      ->setColor(PhabricatorTransactions::COLOR_RED);
-
     $colors = array(
       PhabricatorTransactions::COLOR_RED,
       PhabricatorTransactions::COLOR_ORANGE,

src/view/phui/PHUITimelineEventView.php

@@ -28,6 +28,7 @@ final class PHUITimelineEventView extends AphrontView {
   private $hideCommentOptions = false;
   private $authorPHID;
   private $badges = array();
+  private $pinboardItems = array();
 
   public function setAuthorPHID($author_phid) {
     $this->authorPHID = $author_phid;
@@ -190,6 +191,11 @@ final class PHUITimelineEventView extends AphrontView {
     return $this->hideCommentOptions;
   }
 
+  public function addPinboardItem(PHUIPinboardItemView $item) {
+    $this->pinboardItems[] = $item;
+    return $this;
+  }
+
   public function setToken($token, $removed = false) {
     $this->token = $token;
     $this->tokenRemoved = $removed;
@@ -441,12 +447,21 @@ final class PHUITimelineEventView extends AphrontView {
       ),
       $content);
 
+    // Image Events
+    $pinboard = null;
+    if ($this->pinboardItems) {
+      $pinboard = new PHUIPinboardView();
+      foreach ($this->pinboardItems as $item) {
+        $pinboard->addItem($item);
+      }
+    }
+
     $content = phutil_tag(
       'div',
       array(
         'class' => implode(' ', $content_classes),
       ),
-      array($image, $badges, $wedge, $content));
+      array($image, $badges, $wedge, $content, $pinboard));
 
     $outer_classes = $this->classes;
     $outer_classes[] = 'phui-timeline-shell';

webroot/rsrc/css/phui/phui-timeline-view.css

@@ -429,3 +429,9 @@ a.phui-timeline-menu .phui-icon-view {
 .phui-comment-preview-view {
   margin-bottom: 20px;
 }
+
+.phui-timeline-view .phui-pinboard-view {
+  margin: 8px 0 0 0;
+  padding: 0;
+  text-align: left;
+}