PHUIBadgeMiniView

Summary: Mini teeny little badges. With Timeline integration.

Test Plan:
Made some, UIExamples.

{F603564}

{F603565}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

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 @@ return array(
     '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 @@ return array(
     '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 @@ return array(
     '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 @@ return array(
     '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',

src/__phutil_library_map__.php

@@ -1288,6 +1288,7 @@ phutil_register_library_map(array(
     '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 @@ phutil_register_library_map(array(
     'PHUIActionPanelView' => 'AphrontTagView',
     'PHUIBadgeBoxView' => 'AphrontTagView',
     'PHUIBadgeExample' => 'PhabricatorUIExample',
+    'PHUIBadgeMiniView' => 'AphrontTagView',
     'PHUIBadgeView' => 'AphrontTagView',
     'PHUIBoxExample' => 'PhabricatorUIExample',
     'PHUIBoxView' => 'AphrontTagView',

src/applications/uiexample/examples/PHUIBadgeExample.php

@@ -113,6 +113,34 @@ final class PHUIBadgeExample extends PhabricatorUIExample {
       ->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 @@ final class PHUIBadgeExample extends PhabricatorUIExample {
       ->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);
   }
 }

src/applications/uiexample/examples/PHUITimelineExample.php

@@ -21,12 +21,24 @@ final class PHUITimelineExample extends PhabricatorUIExample {
       ->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)
@@ -43,22 +55,13 @@ final class PHUITimelineExample extends PhabricatorUIExample {
       ->setIcon('fa-star')
       ->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)

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 @@ final class PHUIBadgeBoxView extends AphrontTagView {
     $classes = array();
     $classes[] = 'phui-badge-flex-view';
     $classes[] = 'grouped';
+    if ($this->collapsed) {
+      $classes[] = 'flex-view-collapsed';
+    }
 
     return array(
       'class' => implode(' ', $classes),

src/view/phui/PHUIBadgeMiniView.php

@@ -0,0 +1,65 @@
+<?php
+
+final class PHUIBadgeMiniView extends AphrontTagView {
+
+  private $href;
+  private $icon;
+  private $quality;
+  private $header;
+
+  public function setIcon($icon) {
+    $this->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);
+
+  }
+
+}

src/view/phui/PHUITimelineEventView.php

@@ -26,6 +26,7 @@ final class PHUITimelineEventView extends AphrontView {
   private $quoteRef;
   private $reallyMajorEvent;
   private $hideCommentOptions = false;
+  private $badges = array();
 
   public function setQuoteRef($quote_ref) {
     $this->quoteRef = $quote_ref;
@@ -150,6 +151,11 @@ final class PHUITimelineEventView extends AphrontView {
     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 @@ final class PHUITimelineEventView extends AphrontView {
       '');
 
     $image = null;
+    $badges = null;
     if ($image_uri) {
       $image = phutil_tag(
         'div',
@@ -363,6 +370,17 @@ final class PHUITimelineEventView extends AphrontView {
           '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 @@ final class PHUITimelineEventView extends AphrontView {
       array(
         'class' => implode(' ', $content_classes),
       ),
-      array($image, $wedge, $content));
+      array($image, $badges, $wedge, $content));
 
     $outer_classes = $this->classes;
     $outer_classes[] = 'phui-timeline-shell';

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};
+}

webroot/rsrc/css/phui/phui-timeline-view.css

@@ -388,3 +388,10 @@ a.phui-timeline-menu .phui-icon-view {
 .phui-timeline-view + .phui-object-box {
   margin-top: 0;
 }
+
+.phui-timeline-badges {
+  position: absolute;
+  left: -64px;
+  top: 52px;
+  width: 54px;
+}