End Cap for Timeline

Summary: End-cap for timeline. Fixes T4438

Test Plan: Tested on a timeline with and without endcap.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: aran, epriestley, Korvin, chad, btrahan

Maniphest Tasks: T4438

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

resources/celerity/map.php

@@ -148,7 +148,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '2f562399',
     'rsrc/css/phui/phui-tag-view.css' => '295d81c4',
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
-    'rsrc/css/phui/phui-timeline-view.css' => 'd3ccba00',
+    'rsrc/css/phui/phui-timeline-view.css' => 'cd93f227',
     'rsrc/css/phui/phui-workboard-view.css' => 'bf70dd2e',
     'rsrc/css/phui/phui-workpanel-view.css' => '97b69459',
     'rsrc/css/sprite-actions.css' => '969ad0e5',
@@ -765,7 +765,7 @@ return array(
     'phui-status-list-view-css' => '2f562399',
     'phui-tag-view-css' => '295d81c4',
     'phui-text-css' => '23e9b4b7',
-    'phui-timeline-view-css' => 'd3ccba00',
+    'phui-timeline-view-css' => 'cd93f227',
     'phui-workboard-view-css' => 'bf70dd2e',
     'phui-workpanel-view-css' => '97b69459',
     'policy-css' => '957ea14c',

src/applications/project/controller/PhabricatorProjectEditMainController.php

@@ -55,6 +55,7 @@ final class PhabricatorProjectEditMainController
     $timeline = id(new PhabricatorApplicationTransactionView())
       ->setUser($viewer)
       ->setObjectPHID($project->getPHID())
+      ->setShouldTerminate(true)
       ->setTransactions($xactions);
 
     return $this->buildApplicationPage(

src/applications/transactions/view/PhabricatorApplicationTransactionView.php

@@ -11,6 +11,7 @@ class PhabricatorApplicationTransactionView extends AphrontView {
   private $showEditActions = true;
   private $isPreview;
   private $objectPHID;
+  private $shouldTerminate = false;
 
   public function setObjectPHID($object_phid) {
     $this->objectPHID = $object_phid;
@@ -51,6 +52,11 @@ class PhabricatorApplicationTransactionView extends AphrontView {
     return $this;
   }
 
+  public function setShouldTerminate($term) {
+    $this->shouldTerminate = $term;
+    return $this;
+  }
+
   public function buildEvents($with_hiding = false) {
     $user = $this->getUser();
 
@@ -126,6 +132,7 @@ class PhabricatorApplicationTransactionView extends AphrontView {
     }
 
     $view = new PHUITimelineView();
+    $view->setShouldTerminate($this->shouldTerminate);
     $events = $this->buildEvents($with_hiding = true);
     foreach ($events as $event) {
       $view->addEvent($event);

src/view/phui/PHUITimelineView.php

@@ -4,12 +4,18 @@ final class PHUITimelineView extends AphrontView {
 
   private $events = array();
   private $id;
+  private $shouldTerminate = false;
 
   public function setID($id) {
     $this->id = $id;
     return $this;
   }
 
+  public function setShouldTerminate($term) {
+    $this->shouldTerminate = $term;
+    return $this;
+  }
+
   public function addEvent(PHUITimelineEventView $event) {
     $this->events[] = $event;
     return $this;
@@ -91,6 +97,10 @@ final class PHUITimelineView extends AphrontView {
       $events = array($spacer);
     }
 
+    if ($this->shouldTerminate) {
+      $events[] = self::renderEnder(true);
+    }
+
     return phutil_tag(
       'div',
       array(
@@ -109,4 +119,15 @@ final class PHUITimelineView extends AphrontView {
       ),
       '');
   }
+
+  public static function renderEnder() {
+    return phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-timeline-event-view '.
+                   'the-worlds-end',
+      ),
+      '');
+  }
+
 }

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

@@ -34,7 +34,14 @@
 
 .device-desktop .phui-timeline-spacer {
   min-height: 16px;
-  border-width: 0 0 0 1px;
+}
+
+.device-desktop .phui-timeline-event-view.the-worlds-end {
+  background: {$lightblueborder};
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  margin-left: 74px;
 }
 
 .device-desktop .phui-timeline-wedge {
@@ -267,5 +274,4 @@
   text-align: center;
   padding: 12px;
   color: {$darkgreytext};
-  margin-top: 16px;
 }