Add ReallyMajorEvent to PHUITimelineView

Summary: For actions like "Close" that are in theory stopping the timeline, we should display some disruption to the line itself.

Test Plan:
Tested in UIExamples

{F236077}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '0784ef1d',
+    'core.pkg.css' => '673d0a25',
     'core.pkg.js' => 'e5f7f2ba',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '8af45893',
@@ -142,7 +142,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '888cedb8',
     'rsrc/css/phui/phui-tag-view.css' => 'b0c282e0',
     'rsrc/css/phui/phui-text.css' => 'cf019f54',
-    'rsrc/css/phui/phui-timeline-view.css' => '8c6fefe7',
+    'rsrc/css/phui/phui-timeline-view.css' => '26bb3fd4',
     'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
     'rsrc/css/phui/phui-workpanel-view.css' => '198c7e6c',
     'rsrc/css/sprite-apps-large.css' => '20ec0cc0',
@@ -791,7 +791,7 @@ return array(
     'phui-status-list-view-css' => '888cedb8',
     'phui-tag-view-css' => 'b0c282e0',
     'phui-text-css' => 'cf019f54',
-    'phui-timeline-view-css' => '8c6fefe7',
+    'phui-timeline-view-css' => '26bb3fd4',
     'phui-workboard-view-css' => '2bf82d00',
     'phui-workpanel-view-css' => '198c7e6c',
     'phuix-action-list-view' => 'b5c256b8',

src/applications/uiexample/examples/PHUITimelineExample.php

@@ -79,21 +79,22 @@ final class PHUITimelineExample extends PhabricatorUIExample {
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
-      ->setIcon('fa-random')
-      ->setTitle('Minor Not-Red Event')
-      ->setColor(PhabricatorTransactions::COLOR_BLACK);
+      ->setIcon('fa-check')
+      ->setTitle('Historically Important Action')
+      ->setColor(PhabricatorTransactions::COLOR_BLACK)
+      ->setReallyMajorEvent(true);
 
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
-      ->setIcon('tag')
-      ->setTitle('Major Green Event')
+      ->setIcon('fa-circle-o')
+      ->setTitle('Major Green Disagreement Action')
       ->appendChild('This event is green!')
       ->setColor(PhabricatorTransactions::COLOR_GREEN);
 
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
-      ->setIcon('tag')
+      ->setIcon('fa-tag')
       ->setTitle(str_repeat('Long Text Title ', 64))
       ->appendChild(str_repeat('Long Text Body ', 64))
       ->setColor(PhabricatorTransactions::COLOR_ORANGE);
@@ -120,13 +121,13 @@ final class PHUITimelineExample extends PhabricatorUIExample {
     $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Colorless')
-      ->setIcon('lock');
+      ->setIcon('fa-lock');
 
     foreach ($colors as $color) {
       $events[] = id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle("Color '{$color}'")
-        ->setIcon('lock')
+        ->setIcon('fa-paw')
         ->setColor($color);
     }
 
@@ -141,21 +142,21 @@ final class PHUITimelineExample extends PhabricatorUIExample {
         ->setUserHandle($handle)
         ->setTitle(pht('%s bought an apple.', $vhandle))
         ->setColor('green')
-        ->setIcon('check'));
+        ->setIcon('fa-apple'));
 
     $group_event->addEventToGroup(
       id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle(pht('%s bought a banana.', $vhandle))
         ->setColor('yellow')
-        ->setIcon('check'));
+        ->setIcon('fa-check'));
 
     $group_event->addEventToGroup(
       id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle(pht('%s bought a cherry.', $vhandle))
         ->setColor('red')
-        ->setIcon('check'));
+        ->setIcon('fa-check'));
 
     $group_event->addEventToGroup(
       id(new PHUITimelineEventView())
@@ -166,7 +167,7 @@ final class PHUITimelineExample extends PhabricatorUIExample {
       id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle(pht('%s returned home.', $vhandle))
-        ->setIcon('home')
+        ->setIcon('fa-home')
         ->setColor('blue'));
 
     $group_event->addEventToGroup(

src/view/phui/PHUITimelineEventView.php

@@ -23,6 +23,7 @@ final class PHUITimelineEventView extends AphrontView {
   private $tokenRemoved;
   private $quoteTargetID;
   private $quoteRef;
+  private $reallyMajorEvent;
 
   public function setQuoteRef($quote_ref) {
     $this->quoteRef = $quote_ref;
@@ -148,6 +149,11 @@ final class PHUITimelineEventView extends AphrontView {
     return $this;
   }
 
+  public function setReallyMajorEvent($me) {
+    $this->reallyMajorEvent = $me;
+    return $this;
+  }
+
   public function setToken($token, $removed = false) {
     $this->token = $token;
     $this->tokenRemoved = $removed;
@@ -401,7 +407,19 @@ final class PHUITimelineEventView extends AphrontView {
       );
     }
 
-    return javelin_tag(
+    $major_event = null;
+    if ($this->reallyMajorEvent) {
+      $major_event = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-timeline-event-view '.
+                     'phui-timeline-spacer '.
+                     'phui-timeline-spacer-bold',
+        '',));
+    }
+
+    return array(
+      javelin_tag(
         'div',
         array(
           'class' => implode(' ', $outer_classes),
@@ -414,7 +432,8 @@ final class PHUITimelineEventView extends AphrontView {
           array(
             'class' => implode(' ', $classes),
           ),
-        $content));
+          $content)),
+      $major_event,);
   }
 
   private function renderExtra(array $events) {

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

@@ -187,6 +187,15 @@
   border-width: 0;
 }
 
+.phui-timeline-spacer.phui-timeline-spacer-bold {
+  border-bottom: 4px solid {$lightblueborder};
+  margin: 0;
+}
+
+.phui-timeline-spacer-bold + .phui-timeline-spacer {
+  background-color: #ebecee;
+}
+
 .phui-timeline-icon-fill {
   position: absolute;
   width: 30px;