Make timeline view prettier

Summary: Aligns the timeline view more closely with the `diff_full_view.png` mock.

Test Plan:
Desktop:

{F26822}

Mobile:

{F26823}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Maniphest Tasks: T2104

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

Author: epriestley

resources/sprite/manifest/icon.json

@@ -201,11 +201,11 @@ private function buildTransactionView(
         continue;
       }
 
-      $title = $xaction->getTitle();
-
       $event = id(new PhabricatorTimelineEventView())
         ->setUserHandle($xaction->getHandle($xaction->getAuthorPHID()))
-        ->setTitle($title);
+        ->setIcon($xaction->getIcon())
+        ->setColor($xaction->getColor())
+        ->setTitle($xaction->getTitle());
 
       if ($xaction->getComment()) {
         $event->appendChild(

src/applications/pholio/controller/PholioMockViewController.php

@@ -7,4 +7,15 @@ final class PhabricatorTransactions {
   const TYPE_VIEW_POLICY  = 'core:view-policy';
   const TYPE_EDIT_POLICY  = 'core:edit-policy';
 
+  const COLOR_RED         = 'red';
+  const COLOR_ORANGE      = 'orange';
+  const COLOR_YELLOW      = 'yellow';
+  const COLOR_GREEN       = 'green';
+  const COLOR_SKY         = 'sky';
+  const COLOR_BLUE        = 'blue';
+  const COLOR_INDIGO      = 'indigo';
+  const COLOR_VIOLET      = 'violet';
+  const COLOR_GREY        = 'grey';
+  const COLOR_BLACK       = 'black';
+
 }

src/applications/transactions/constants/PhabricatorTransactions.php

@@ -119,6 +119,14 @@ protected function renderHandleList(array $phids) {
     return implode(', ', $links);
   }
 
+  public function getIcon() {
+    return null;
+  }
+
+  public function getColor() {
+    return null;
+  }
+
   public function shouldHide() {
     switch ($this->getTransactionType()) {
       case PhabricatorTransactions::TYPE_VIEW_POLICY:

src/applications/transactions/storage/PhabricatorApplicationTransaction.php

@@ -43,13 +43,14 @@ public function renderExample() {
     $events[] = id(new PhabricatorTimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Major Red Event')
+      ->setIcon('love')
       ->appendChild('This event is red!')
-      ->addClass('phabricator-timeline-red');
+      ->setColor(PhabricatorTransactions::COLOR_RED);
 
     $events[] = id(new PhabricatorTimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Minor Red Event')
-      ->addClass('phabricator-timeline-red');
+      ->setColor(PhabricatorTransactions::COLOR_RED);
 
     $events[] = id(new PhabricatorTimelineEventView())
       ->setUserHandle($handle)
@@ -58,24 +59,43 @@ public function renderExample() {
     $events[] = id(new PhabricatorTimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Minor Red Event')
-      ->addClass('phabricator-timeline-red');
+      ->setColor(PhabricatorTransactions::COLOR_RED);
 
     $events[] = id(new PhabricatorTimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Minor Not-Red Event');
 
     $events[] = id(new PhabricatorTimelineEventView())
       ->setUserHandle($handle)
-      ->setTitle('Unstyled event')
-      ->appendChild('This event disables standard title and content styling.')
-      ->setDisableStandardTitleStyle(true)
-      ->setDisableStandardContentStyle(true);
+      ->setTitle('Major Green Event')
+      ->appendChild('This event is green!')
+      ->setColor(PhabricatorTransactions::COLOR_GREEN);
+
+    $colors = array(
+      PhabricatorTransactions::COLOR_RED,
+      PhabricatorTransactions::COLOR_ORANGE,
+      PhabricatorTransactions::COLOR_YELLOW,
+      PhabricatorTransactions::COLOR_GREEN,
+      PhabricatorTransactions::COLOR_SKY,
+      PhabricatorTransactions::COLOR_BLUE,
+      PhabricatorTransactions::COLOR_INDIGO,
+      PhabricatorTransactions::COLOR_VIOLET,
+      PhabricatorTransactions::COLOR_GREY,
+      PhabricatorTransactions::COLOR_BLACK,
+    );
 
     $events[] = id(new PhabricatorTimelineEventView())
       ->setUserHandle($handle)
-      ->setTitle('Major Green Event')
-      ->appendChild('This event is green!')
-      ->addClass('phabricator-timeline-green');
+      ->setTitle(phutil_escape_html("Colorless"))
+      ->setIcon('lock');
+
+    foreach ($colors as $color) {
+      $events[] = id(new PhabricatorTimelineEventView())
+        ->setUserHandle($handle)
+        ->setTitle(phutil_escape_html("Color '{$color}'"))
+        ->setIcon('lock')
+        ->setColor($color);
+    }
 
     $timeline = id(new PhabricatorTimelineView());
     foreach ($events as $event) {

src/applications/uiexample/examples/PhabricatorTimelineExample.php

@@ -37,6 +37,7 @@ public function buildIconSheet() {
 
         if ($color == 'white') {
           $sprite->setTargetCSS(
+            '.action-'.$icon.$suffix.', '.
             '.device-desktop .phabricator-action-view:hover .action-'.$icon);
         } else {
           $sprite->setTargetCSS('.action-'.$icon.$suffix);

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -4,9 +4,9 @@ final class PhabricatorTimelineEventView extends AphrontView {
 
   private $userHandle;
   private $title;
+  private $icon;
+  private $color;
   private $classes = array();
-  private $disableStandardTitleStyle;
-  private $disableStandardContentStyle;
 
   public function setUserHandle(PhabricatorObjectHandle $handle) {
     $this->userHandle = $handle;
@@ -23,13 +23,13 @@ public function addClass($class) {
     return $this;
   }
 
-  public function setDisableStandardTitleStyle($disable) {
-    $this->disableStandardTitleStyle = $disable;
+  public function setIcon($icon) {
+    $this->icon = $icon;
     return $this;
   }
 
-  public function setDisableStandardContentStyle($disable) {
-    $this->disableStandardContentStyle = $disable;
+  public function setColor($color) {
+    $this->color = $color;
     return $this;
   }
 
@@ -44,16 +44,31 @@ public function render() {
     if ($title !== null) {
       $title_classes = array();
       $title_classes[] = 'phabricator-timeline-title';
-      if (!$this->disableStandardTitleStyle) {
-        $title_classes[] = 'phabricator-timeline-standard-title';
+
+      $icon = null;
+      if ($this->icon) {
+        $title_classes[] = 'phabricator-timeline-title-with-icon';
+
+        $icon = phutil_render_tag(
+          'span',
+          array(
+            'class' => 'phabricator-timeline-icon-fill',
+          ),
+          phutil_render_tag(
+            'span',
+            array(
+              'class' => 'phabricator-timeline-icon sprite-icon '.
+                         'action-'.$this->icon.'-white',
+            ),
+            ''));
       }
 
       $title = phutil_render_tag(
         'div',
         array(
           'class' => implode(' ', $title_classes),
         ),
-        $title);
+        $icon.$title);
     }
 
     $wedge = phutil_render_tag(
@@ -74,9 +89,6 @@ public function render() {
 
     $content_classes = array();
     $content_classes[] = 'phabricator-timeline-content';
-    if (!$this->disableStandardContentStyle) {
-      $content_classes[] = 'phabricator-timeline-standard-content';
-    }
 
     $classes = array();
     $classes[] = 'phabricator-timeline-event-view';
@@ -111,10 +123,15 @@ public function render() {
         $image.$wedge.$title);
     }
 
+    $outer_classes = $this->classes;
+    if ($this->color) {
+      $outer_classes[] = 'phabricator-timeline-'.$this->color;
+    }
+
     return phutil_render_tag(
       'div',
       array(
-        'class' => implode(' ', $this->classes),
+        'class' => implode(' ', $outer_classes),
       ),
       phutil_render_tag(
         'div',