From 7341c74276fdebe7e38927cfa21b76a3c3e90e60 Mon Sep 17 00:00:00 2001 From: epriestley Date: Tue, 11 Dec 2012 13:59:51 -0800 Subject: [PATCH] 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 --- .../controller/PholioMockViewController.php | 9 +- .../examples/PhabricatorTimelineExample.php | 7 ++ .../layout/PhabricatorTimelineEventView.php | 83 ++++++++++++++++++- .../css/layout/phabricator-timeline-view.css | 22 ++++- 4 files changed, 117 insertions(+), 4 deletions(-) diff --git a/src/applications/pholio/controller/PholioMockViewController.php b/src/applications/pholio/controller/PholioMockViewController.php index 0d81192663..5a1bd4bfd6 100644 --- a/src/applications/pholio/controller/PholioMockViewController.php +++ b/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( diff --git a/src/applications/uiexample/examples/PhabricatorTimelineExample.php b/src/applications/uiexample/examples/PhabricatorTimelineExample.php index 12095969d6..903a074407 100644 --- a/src/applications/uiexample/examples/PhabricatorTimelineExample.php +++ b/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); diff --git a/src/view/layout/PhabricatorTimelineEventView.php b/src/view/layout/PhabricatorTimelineEventView.php index 7e20394178..54d1f3d99a 100644 --- a/src/view/layout/PhabricatorTimelineEventView.php +++ b/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', diff --git a/webroot/rsrc/css/layout/phabricator-timeline-view.css b/webroot/rsrc/css/layout/phabricator-timeline-view.css index 6072c751e7..47f1e8b282 100644 --- a/webroot/rsrc/css/layout/phabricator-timeline-view.css +++ b/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); +}