diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -148,7 +148,7 @@ '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' => 'cd93f227', + 'rsrc/css/phui/phui-timeline-view.css' => '23d72d35', 'rsrc/css/phui/phui-workboard-view.css' => 'bf70dd2e', 'rsrc/css/phui/phui-workpanel-view.css' => '97b69459', 'rsrc/css/sprite-actions.css' => '969ad0e5', @@ -764,7 +764,7 @@ 'phui-status-list-view-css' => '2f562399', 'phui-tag-view-css' => '295d81c4', 'phui-text-css' => '23e9b4b7', - 'phui-timeline-view-css' => 'cd93f227', + 'phui-timeline-view-css' => '23d72d35', 'phui-workboard-view-css' => 'bf70dd2e', 'phui-workpanel-view-css' => '97b69459', 'policy-css' => '957ea14c', diff --git a/src/applications/uiexample/examples/PHUITimelineExample.php b/src/applications/uiexample/examples/PHUITimelineExample.php --- a/src/applications/uiexample/examples/PHUITimelineExample.php +++ b/src/applications/uiexample/examples/PHUITimelineExample.php @@ -29,17 +29,27 @@ $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) + ->setIcon('love') ->setTitle('A minor event.'); $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) + ->setIcon('comment') ->appendChild('A major event with no title.'); $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) + ->setIcon('dislike') ->setTitle('Another minor event.'); $events[] = id(new PHUITimelineEventView()) + ->setIcon('like') + ->setToken('medal-1') + ->setUserHandle($handle); + + $events[] = id(new PHUITimelineEventView()) + ->setIcon('dislike') + ->setToken('medal-1', true) ->setUserHandle($handle); $events[] = id(new PHUITimelineEventView()) @@ -51,30 +61,39 @@ $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) + ->setIcon('love') ->setTitle('Minor Red Event') ->setColor(PhabricatorTransactions::COLOR_RED); $events[] = id(new PHUITimelineEventView()) + ->setIcon('like') ->setUserHandle($handle) - ->setTitle('Minor Not-Red Event'); + ->setTitle('Minor Not-Red Event') + ->setColor(PhabricatorTransactions::COLOR_GREEN); $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) + ->setIcon('love') ->setTitle('Minor Red Event') ->setColor(PhabricatorTransactions::COLOR_RED); $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) - ->setTitle('Minor Not-Red Event'); + ->setIcon('dislike') + ->setTitle('Minor Not-Red Event') + ->setColor(PhabricatorTransactions::COLOR_BLACK); + $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) + ->setIcon('tag') ->setTitle('Major Green Event') ->appendChild('This event is green!') ->setColor(PhabricatorTransactions::COLOR_GREEN); $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) + ->setIcon('tag') ->setTitle(str_repeat('Long Text Title ', 64)) ->appendChild(str_repeat('Long Text Body ', 64)) ->setColor(PhabricatorTransactions::COLOR_ORANGE); diff --git a/src/view/phui/PHUITimelineEventView.php b/src/view/phui/PHUITimelineEventView.php --- a/src/view/phui/PHUITimelineEventView.php +++ b/src/view/phui/PHUITimelineEventView.php @@ -16,6 +16,8 @@ private $isPreview; private $eventGroup = array(); private $hideByDefault; + private $token; + private $tokenRemoved; public function setHideByDefault($hide_by_default) { $this->hideByDefault = $hide_by_default; @@ -114,6 +116,12 @@ return $this; } + public function setToken($token, $removed=false) { + $this->token = $token; + $this->tokenRemoved = $removed; + return $this; + } + public function getEventGroup() { return array_merge(array($this), $this->eventGroup); } @@ -178,12 +186,23 @@ '')); } + $token = null; + if ($this->token) { + $token = id(new PHUIIconView()) + ->addClass('phui-timeline-token') + ->setSpriteSheet(PHUIIconView::SPRITE_TOKENS) + ->setSpriteIcon($this->token); + if ($this->tokenRemoved) { + $token->addClass('strikethrough'); + } + } + $title = phutil_tag( 'div', array( 'class' => implode(' ', $title_classes), ), - array($icon, $title, $extra)); + array($icon, $token, $title, $extra)); } return $title; diff --git a/webroot/rsrc/css/phui/phui-timeline-view.css b/webroot/rsrc/css/phui/phui-timeline-view.css --- a/webroot/rsrc/css/phui/phui-timeline-view.css +++ b/webroot/rsrc/css/phui/phui-timeline-view.css @@ -61,7 +61,7 @@ } .phui-timeline-title { - line-height: 18px; + line-height: 17px; min-height: 18px; position: relative; color: {$bluetext}; @@ -125,6 +125,30 @@ padding-left: 38px; } +.phui-timeline-token { + display: inline-block; +} + +.phui-timeline-token.strikethrough { + position: relative; +} + +.phui-timeline-token.strikethrough:before { + position: absolute; + content: ""; + left: 0; + top: 50%; + right: 0; + border-top: 3px solid; + border-color: {$darkbluetext}; + + -webkit-transform:rotate(-40deg); + -moz-transform:rotate(-40deg); + -ms-transform:rotate(-40deg); + -o-transform:rotate(-40deg); + transform:rotate(-40deg); +} + .phui-timeline-major-event .phui-timeline-content .phui-timeline-core-content { padding: 16px 12px;