From d908e76733451026e7f46f8defd10fff41272b94 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Thu, 20 Nov 2014 16:33:31 -0800 Subject: [PATCH] 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 | 6 +-- .../examples/PHUITimelineExample.php | 25 +++++------ src/view/phui/PHUITimelineEventView.php | 41 ++++++++++++++----- webroot/rsrc/css/phui/phui-timeline-view.css | 9 ++++ 4 files changed, 55 insertions(+), 26 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index a0e5ef5c82..19d3fa6fa6 100644 --- a/resources/celerity/map.php +++ b/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', diff --git a/src/applications/uiexample/examples/PHUITimelineExample.php b/src/applications/uiexample/examples/PHUITimelineExample.php index ff7ac1a938..0ed81b01a3 100644 --- a/src/applications/uiexample/examples/PHUITimelineExample.php +++ b/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( diff --git a/src/view/phui/PHUITimelineEventView.php b/src/view/phui/PHUITimelineEventView.php index 9f308a0a4c..ff53875bac 100644 --- a/src/view/phui/PHUITimelineEventView.php +++ b/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,20 +407,33 @@ final class PHUITimelineEventView extends AphrontView { ); } - return javelin_tag( - 'div', - array( - 'class' => implode(' ', $outer_classes), - 'id' => $this->anchor ? 'anchor-'.$this->anchor : null, - 'sigil' => $sigil, - 'meta' => $meta, - ), - phutil_tag( + $major_event = null; + if ($this->reallyMajorEvent) { + $major_event = phutil_tag( 'div', array( - 'class' => implode(' ', $classes), + 'class' => 'phui-timeline-event-view '. + 'phui-timeline-spacer '. + 'phui-timeline-spacer-bold', + '',)); + } + + return array( + javelin_tag( + 'div', + array( + 'class' => implode(' ', $outer_classes), + 'id' => $this->anchor ? 'anchor-'.$this->anchor : null, + 'sigil' => $sigil, + 'meta' => $meta, ), - $content)); + phutil_tag( + 'div', + array( + 'class' => implode(' ', $classes), + ), + $content)), + $major_event,); } private function renderExtra(array $events) { diff --git a/webroot/rsrc/css/phui/phui-timeline-view.css b/webroot/rsrc/css/phui/phui-timeline-view.css index 1303dbcca9..5953d22b7c 100644 --- a/webroot/rsrc/css/phui/phui-timeline-view.css +++ b/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;