diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => '71fa60fc', + 'core.pkg.css' => '1716a671', 'core.pkg.js' => 'a590b451', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '9451634c', @@ -126,7 +126,7 @@ 'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893', 'rsrc/css/phui/phui-action-list.css' => 'c5eba19d', 'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5', - 'rsrc/css/phui/phui-badge.css' => 'd6603d7f', + 'rsrc/css/phui/phui-badge.css' => '9be0c352', 'rsrc/css/phui/phui-box.css' => 'a5bb366d', 'rsrc/css/phui/phui-button.css' => 'cf529a01', 'rsrc/css/phui/phui-crumbs-view.css' => 'd842f867', @@ -151,7 +151,7 @@ 'rsrc/css/phui/phui-status.css' => '888cedb8', 'rsrc/css/phui/phui-tag-view.css' => '402691cc', 'rsrc/css/phui/phui-text.css' => 'cf019f54', - 'rsrc/css/phui/phui-timeline-view.css' => '47b18876', + 'rsrc/css/phui/phui-timeline-view.css' => 'fc23e7b7', 'rsrc/css/phui/phui-workboard-view.css' => '935b19d6', 'rsrc/css/phui/phui-workpanel-view.css' => '00558537', 'rsrc/css/sprite-login.css' => '1365fee0', @@ -775,7 +775,7 @@ 'phrequent-css' => 'ffc185ad', 'phriction-document-css' => 'd1861e06', 'phui-action-panel-css' => '3ee9afd5', - 'phui-badge-view-css' => 'd6603d7f', + 'phui-badge-view-css' => '9be0c352', 'phui-box-css' => 'a5bb366d', 'phui-button-css' => 'cf529a01', 'phui-calendar-css' => 'ccabe893', @@ -807,7 +807,7 @@ 'phui-tag-view-css' => '402691cc', 'phui-text-css' => 'cf019f54', 'phui-theme-css' => '6b451f24', - 'phui-timeline-view-css' => '47b18876', + 'phui-timeline-view-css' => 'fc23e7b7', 'phui-workboard-view-css' => '935b19d6', 'phui-workpanel-view-css' => '00558537', 'phuix-action-list-view' => 'b5c256b8', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -1288,6 +1288,7 @@ 'PHUIActionPanelView' => 'view/phui/PHUIActionPanelView.php', 'PHUIBadgeBoxView' => 'view/phui/PHUIBadgeBoxView.php', 'PHUIBadgeExample' => 'applications/uiexample/examples/PHUIBadgeExample.php', + 'PHUIBadgeMiniView' => 'view/phui/PHUIBadgeMiniView.php', 'PHUIBadgeView' => 'view/phui/PHUIBadgeView.php', 'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php', 'PHUIBoxView' => 'view/phui/PHUIBoxView.php', @@ -4937,6 +4938,7 @@ 'PHUIActionPanelView' => 'AphrontTagView', 'PHUIBadgeBoxView' => 'AphrontTagView', 'PHUIBadgeExample' => 'PhabricatorUIExample', + 'PHUIBadgeMiniView' => 'AphrontTagView', 'PHUIBadgeView' => 'AphrontTagView', 'PHUIBoxExample' => 'PhabricatorUIExample', 'PHUIBoxView' => 'AphrontTagView', diff --git a/src/applications/uiexample/examples/PHUIBadgeExample.php b/src/applications/uiexample/examples/PHUIBadgeExample.php --- a/src/applications/uiexample/examples/PHUIBadgeExample.php +++ b/src/applications/uiexample/examples/PHUIBadgeExample.php @@ -113,6 +113,34 @@ ->addByline(pht('Dec 31, 1969')) ->addByline('1 Awarded (0.4%)'); + $badges3 = array(); + $badges3[] = id(new PHUIBadgeMiniView()) + ->setIcon('fa-book') + ->setHeader(pht('Documenter')); + + $badges3[] = id(new PHUIBadgeMiniView()) + ->setIcon('fa-star') + ->setHeader(pht('Contributor')); + + $badges3[] = id(new PHUIBadgeMiniView()) + ->setIcon('fa-bug') + ->setHeader(pht('Bugmeister')); + + $badges3[] = id(new PHUIBadgeMiniView()) + ->setIcon('fa-heart') + ->setHeader(pht('Funder')) + ->setQuality(PHUIBadgeView::UNCOMMON); + + $badges3[] = id(new PHUIBadgeMiniView()) + ->setIcon('fa-user') + ->setHeader(pht('Administrator')) + ->setQuality(PHUIBadgeView::RARE); + + $badges3[] = id(new PHUIBadgeMiniView()) + ->setIcon('fa-camera-retro') + ->setHeader(pht('Designer')) + ->setQuality(PHUIBadgeView::EPIC); + $flex1 = new PHUIBadgeBoxView(); $flex1->addItems($badges1); @@ -127,6 +155,15 @@ ->setHeaderText(pht('Acheivements')) ->appendChild($flex2); - return array($box1, $box2); + $flex3 = new PHUIBadgeBoxView(); + $flex3->addItems($badges3); + $flex3->setCollapsed(true); + $flex3->addClass('ml'); + + $box3 = id(new PHUIObjectBoxView()) + ->setHeaderText(pht('PHUIBadgeMiniView')) + ->appendChild($flex3); + + return array($box1, $box2, $box3); } } 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 @@ -21,12 +21,24 @@ ->withPHIDs(array($user->getPHID())) ->executeOne(); + $designer = id(new PHUIBadgeMiniView()) + ->setIcon('fa-camera-retro') + ->setHeader(pht('Designer')) + ->setQuality(PHUIBadgeView::EPIC); + + $admin = id(new PHUIBadgeMiniView()) + ->setIcon('fa-user') + ->setHeader(pht('Administrator')) + ->setQuality(PHUIBadgeView::RARE); + $events = array(); $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) ->setTitle(pht('A major event.')) - ->appendChild(pht('This is a major timeline event.')); + ->appendChild(pht('This is a major timeline event.')) + ->addBadge($designer) + ->addBadge($admin); $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) @@ -44,21 +56,12 @@ ->setTitle(pht('Another minor event.')); $events[] = id(new PHUITimelineEventView()) - ->setIcon('fa-trophy') - ->setToken('medal-1') - ->setUserHandle($handle); - - $events[] = id(new PHUITimelineEventView()) - ->setIcon('fa-quote-left') - ->setToken('medal-1', true) - ->setUserHandle($handle); - - $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) ->setTitle(pht('Major Red Event')) ->setIcon('fa-heart-o') ->appendChild(pht('This event is red!')) - ->setColor(PhabricatorTransactions::COLOR_RED); + ->setColor(PhabricatorTransactions::COLOR_RED) + ->addBadge($designer); $events[] = id(new PHUITimelineEventView()) ->setUserHandle($handle) diff --git a/src/view/phui/PHUIBadgeBoxView.php b/src/view/phui/PHUIBadgeBoxView.php --- a/src/view/phui/PHUIBadgeBoxView.php +++ b/src/view/phui/PHUIBadgeBoxView.php @@ -3,12 +3,18 @@ final class PHUIBadgeBoxView extends AphrontTagView { private $items = array(); + private $collapsed; public function addItem($item) { $this->items[] = $item; return $this; } + public function setCollapsed($collapsed) { + $this->collapsed = $collapsed; + return $this; + } + public function addItems($items) { foreach ($items as $item) { $this->items[] = $item; @@ -26,6 +32,9 @@ $classes = array(); $classes[] = 'phui-badge-flex-view'; $classes[] = 'grouped'; + if ($this->collapsed) { + $classes[] = 'flex-view-collapsed'; + } return array( 'class' => implode(' ', $classes), diff --git a/src/view/phui/PHUIBadgeMiniView.php b/src/view/phui/PHUIBadgeMiniView.php new file mode 100644 --- /dev/null +++ b/src/view/phui/PHUIBadgeMiniView.php @@ -0,0 +1,65 @@ +icon = $icon; + return $this; + } + + public function setHref($href) { + $this->href = $href; + return $this; + } + + public function setQuality($quality) { + $this->quality = $quality; + return $this; + } + + public function setHeader($header) { + $this->header = $header; + return $this; + } + + protected function getTagName() { + if ($this->href) { + return 'a'; + } else { + return 'span'; + } + } + + protected function getTagAttributes() { + require_celerity_resource('phui-badge-view-css'); + Javelin::initBehavior('phabricator-tooltips'); + + $classes = array(); + $classes[] = 'phui-badge-mini'; + if ($this->quality) { + $classes[] = 'phui-badge-mini-'.$this->quality; + } + + return array( + 'class' => implode(' ', $classes), + 'sigil' => 'has-tooltip', + 'href' => $this->href, + 'meta' => array( + 'tip' => $this->header, + ), + ); + } + + protected function getTagContent() { + + return id(new PHUIIconView()) + ->setIconFont($this->icon); + + } + +} 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 @@ -26,6 +26,7 @@ private $quoteRef; private $reallyMajorEvent; private $hideCommentOptions = false; + private $badges = array(); public function setQuoteRef($quote_ref) { $this->quoteRef = $quote_ref; @@ -150,6 +151,11 @@ return $this; } + public function addBadge(PHUIBadgeMiniView $badge) { + $this->badges[] = $badge; + return $this; + } + public function setIcon($icon) { $this->icon = $icon; return $this; @@ -355,6 +361,7 @@ ''); $image = null; + $badges = null; if ($image_uri) { $image = phutil_tag( 'div', @@ -363,6 +370,17 @@ 'class' => 'phui-timeline-image', ), ''); + if ($this->badges) { + $flex = new PHUIBadgeBoxView(); + $flex->addItems($this->badges); + $flex->setCollapsed(true); + $badges = phutil_tag( + 'div', + array( + 'class' => 'phui-timeline-badges', + ), + $flex); + } } $content_classes = array(); @@ -404,7 +422,7 @@ array( 'class' => implode(' ', $content_classes), ), - array($image, $wedge, $content)); + array($image, $badges, $wedge, $content)); $outer_classes = $this->classes; $outer_classes[] = 'phui-timeline-shell'; diff --git a/webroot/rsrc/css/phui/phui-badge.css b/webroot/rsrc/css/phui/phui-badge.css --- a/webroot/rsrc/css/phui/phui-badge.css +++ b/webroot/rsrc/css/phui/phui-badge.css @@ -13,6 +13,14 @@ padding: 4px 8px; } +.phui-badge-flex-view.flex-view-collapsed { + padding: 0; +} + +.flex-view-collapsed .phui-badge-flex-item { + padding: 1px; +} + .phui-badge-view { display: inline-block; position: relative; @@ -157,3 +165,53 @@ background-color: {$sh-yellowbackground}; border-color: {$sh-lightyellowborder}; } + +/** Mini View ****************************************************************/ + +.phui-badge-mini { + background-color: {$greyborder}; + border-radius: 18px; + height: 25px; + width: 25px; + line-height: 24px; + text-align: center; + display: inline-block; + opacity: 0.7; +} + +.phui-badge-mini:hover { + opacity: 1; +} + +.phui-badge-mini .phui-icon-view { + color: #fff; + font-size: 12px; +} + +.phui-badge-mini-grey { + background-color: {$greyborder}; +} + +.phui-badge-mini-white { + background-color: {$lightblueborder}; +} + +.phui-badge-mini-green { + background-color: {$sh-greenicon}; +} + +.phui-badge-mini-blue { + background-color: {$blue}; +} + +.phui-badge-mini-indigo { + background-color: {$sh-indigoicon}; +} + +.phui-badge-mini-orange { + background-color: {$sh-orangeicon}; +} + +.phui-badge-mini-yellow { + background-color: {$sh-yellowicon}; +} 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 @@ -388,3 +388,10 @@ .phui-timeline-view + .phui-object-box { margin-top: 0; } + +.phui-timeline-badges { + position: absolute; + left: -64px; + top: 52px; + width: 54px; +}