Add "via", timestamps and anchors to new timeline/transaction view

Summary: I got rid of the "#4" and just linked the timestamps.

Test Plan: {F26826}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2104

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

src/applications/pholio/controller/PholioMockViewController.php

@@ -196,16 +196,23 @@ final class PholioMockViewController extends PholioController {
 
     $view = new PhabricatorTimelineView();
 
+    $anchor_name = 0;
     foreach ($xactions as $xaction) {
       if ($xaction->shouldHide()) {
         continue;
       }
 
+      $anchor_name++;
+
       $event = id(new PhabricatorTimelineEventView())
+        ->setViewer($this->getRequest()->getUser())
         ->setUserHandle($xaction->getHandle($xaction->getAuthorPHID()))
         ->setIcon($xaction->getIcon())
         ->setColor($xaction->getColor())
-        ->setTitle($xaction->getTitle());
+        ->setTitle($xaction->getTitle())
+        ->setDateCreated($xaction->getDateCreated())
+        ->setContentSource($xaction->getContentSource())
+        ->setAnchor($anchor_name);
 
       if ($xaction->getComment()) {
         $event->appendChild(

src/applications/uiexample/examples/PhabricatorTimelineExample.php

@@ -97,6 +97,13 @@ final class PhabricatorTimelineExample extends PhabricatorUIExample {
         ->setColor($color);
     }
 
+    $anchor = 0;
+    foreach ($events as $event) {
+      $event->setViewer($user);
+      $event->setDateCreated(time() + ($anchor * 60 * 8));
+      $event->setAnchor(++$anchor);
+    }
+
     $timeline = id(new PhabricatorTimelineView());
     foreach ($events as $event) {
       $timeline->addEvent($event);

src/view/layout/PhabricatorTimelineEventView.php

@@ -7,12 +7,48 @@ final class PhabricatorTimelineEventView extends AphrontView {
   private $icon;
   private $color;
   private $classes = array();
+  private $contentSource;
+  private $dateCreated;
+  private $viewer;
+  private $anchor;
+
+  public function setViewer(PhabricatorUser $viewer) {
+    $this->viewer = $viewer;
+    return $this;
+  }
+
+  public function getViewer() {
+    return $this->viewer;
+  }
+
+  public function setDateCreated($date_created) {
+    $this->dateCreated = $date_created;
+    return $this;
+  }
+
+  public function getDateCreated() {
+    return $this->dateCreated;
+  }
+
+  public function setContentSource(PhabricatorContentSource $content_source) {
+    $this->contentSource = $content_source;
+    return $this;
+  }
+
+  public function getContentSource() {
+    return $this->contentSource;
+  }
 
   public function setUserHandle(PhabricatorObjectHandle $handle) {
     $this->userHandle = $handle;
     return $this;
   }
 
+  public function setAnchor($anchor) {
+    $this->anchor = $anchor;
+    return $this;
+  }
+
   public function setTitle($title) {
     $this->title = $title;
     return $this;
@@ -41,7 +77,48 @@ final class PhabricatorTimelineEventView extends AphrontView {
       $title = '';
     }
 
-    if ($title !== null) {
+    $extra = array();
+
+    $source = $this->getContentSource();
+    if ($source) {
+      $extra[] = id(new PhabricatorContentSourceView())
+        ->setContentSource($source)
+        ->setUser($this->getViewer())
+        ->render();
+    }
+
+    if ($this->getDateCreated()) {
+      $date = phabricator_datetime(
+        $this->getDateCreated(),
+        $this->getViewer());
+      if ($this->anchor) {
+        Javelin::initBehavior('phabricator-watch-anchor');
+
+        $anchor = id(new PhabricatorAnchorView())
+          ->setAnchorName($this->anchor)
+          ->render();
+
+        $date = $anchor.phutil_render_tag(
+            'a',
+            array(
+              'href' => '#'.$this->anchor,
+            ),
+            $date);
+      }
+      $extra[] = $date;
+    }
+
+    $extra = implode(' · ', $extra);
+    if ($extra) {
+      $extra = phutil_render_tag(
+        'span',
+        array(
+          'class' => 'phabricator-timeline-extra',
+        ),
+        $extra);
+    }
+
+    if ($title !== null || $extra !== null) {
       $title_classes = array();
       $title_classes[] = 'phabricator-timeline-title';
 
@@ -68,7 +145,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
         array(
           'class' => implode(' ', $title_classes),
         ),
-        $icon.$title);
+        $icon.$title.$extra);
     }
 
     $wedge = phutil_render_tag(
@@ -124,6 +201,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
     }
 
     $outer_classes = $this->classes;
+    $outer_classes[] = 'phabricator-timeline-shell';
     if ($this->color) {
       $outer_classes[] = 'phabricator-timeline-'.$this->color;
     }
@@ -132,6 +210,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
       'div',
       array(
         'class' => implode(' ', $outer_classes),
+        'id' => $this->anchor ? 'anchor-'.$this->anchor : null,
       ),
       phutil_render_tag(
         'div',

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

@@ -36,6 +36,7 @@
 }
 
 .phabricator-timeline-content {
+  background: #ffffff;
   border-style: solid;
   border-color: #c0c5d1;
   border-width: 1px 0;
@@ -136,6 +137,21 @@
   width: 14px;
 }
 
+.phabricator-timeline-extra, .phabricator-timeline-extra a {
+  font-size: 11px;
+  color: #888888;
+}
+
+.device-desktop .phabricator-timeline-extra {
+  float: right;
+}
+
+.device .phabricator-timeline-extra {
+  display: block;
+  text-align: right;
+  line-height: 16px;
+}
+
 .phabricator-timeline-red .phabricator-timeline-border {
   border-color: #cc0000;
 }
@@ -176,7 +192,6 @@
   border-color: #333333;
 }
 
-
 .phabricator-timeline-red .phabricator-timeline-icon-fill {
   background-color: #cc0000;
 }
@@ -216,3 +231,8 @@
 .phabricator-timeline-black .phabricator-timeline-icon-fill {
   background-color: #333333;
 }
+
+.phabricator-timeline-shell.anchor-target {
+  background: rgba(255, 255, 0, 0.50);
+  box-shadow: 0 0 3px 6px rgba(255, 255, 0, 0.50);
+}