Icons for TagView

Summary: Adds the ability to set icons into Tags.

Test Plan: tested on UIExamples page.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '5c4061d8',
+    'core.pkg.css' => 'a35f9047',
     'core.pkg.js' => 'c907bd96',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '827749c1',
@@ -124,7 +124,7 @@ return array(
     'rsrc/css/layout/phabricator-hovercard-view.css' => '67c12b16',
     'rsrc/css/layout/phabricator-side-menu-view.css' => '503699d0',
     'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814',
-    'rsrc/css/layout/phabricator-tag-view.css' => 'c0363c26',
+    'rsrc/css/layout/phabricator-tag-view.css' => '4c983c74',
     'rsrc/css/layout/phabricator-timeline-view.css' => 'f4f846c4',
     'rsrc/css/phui/phui-box.css' => '21da4d8c',
     'rsrc/css/phui/phui-button.css' => '8106a67a',
@@ -707,7 +707,7 @@ return array(
     'phabricator-slowvote-css' => '266df6a1',
     'phabricator-source-code-view-css' => '62a99814',
     'phabricator-standard-page-view' => '517cdfb1',
-    'phabricator-tag-view-css' => 'c0363c26',
+    'phabricator-tag-view-css' => '4c983c74',
     'phabricator-textareautils' => 'b3ec3cfc',
     'phabricator-timeline-view-css' => 'f4f846c4',
     'phabricator-tooltip' => '0a81ea29',

src/applications/uiexample/examples/PhabricatorTagExample.php

@@ -80,9 +80,7 @@ final class PhabricatorTagExample extends PhabricatorUIExample {
 
     $intro = id(new PHUIBoxView())
       ->appendChild($intro)
-      ->setShadow(true)
+      ->addPadding(PHUI::PADDING_LARGE);
-      ->addPadding(PHUI::PADDING_LARGE)
-      ->addMargin(PHUI::MARGIN_LARGE);
 
     $header1 = id(new PHUIHeaderView())
       ->setHeader('Colors');
@@ -99,13 +97,7 @@ final class PhabricatorTagExample extends PhabricatorUIExample {
 
     $content1 = id(new PHUIBoxView())
       ->appendChild($tags)
-      ->setShadow(true)
+      ->addPadding(PHUI::PADDING_LARGE);
-      ->addPadding(PHUI::PADDING_LARGE)
-      ->addMargin(PHUI::MARGIN_LARGE);
-
-    $header2 = id(new PHUIHeaderView())
-      ->setHeader('Holidays?');
-
 
     $tags = array();
     $tags[] = id(new PhabricatorTagView())
@@ -131,10 +123,59 @@ final class PhabricatorTagExample extends PhabricatorUIExample {
 
     $content2 = id(new PHUIBoxView())
       ->appendChild($tags)
-      ->setShadow(true)
+      ->addPadding(PHUI::PADDING_LARGE);
-      ->addPadding(PHUI::PADDING_LARGE)
-      ->addMargin(PHUI::MARGIN_LARGE);
 
-    return array($intro, $header1, $content1, $header2, $content2);
+    $icons = array();
+    $icons[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_GREEN)
+      ->setIcon('check-white')
+      ->setName('Passed');
+    $icons[] = hsprintf('<br /><br />');
+    $icons[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_RED)
+      ->setIcon('delete-white')
+      ->setName('Failed');
+    $icons[] = hsprintf('<br /><br />');
+    $icons[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_BLUE)
+      ->setIcon('refresh-white')
+      ->setName('Running');
+    $icons[] = hsprintf('<br /><br />');
+    $icons[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_GREY)
+      ->setIcon('pause-white')
+      ->setName('Paused');
+    $icons[] = hsprintf('<br /><br />');
+    $icons[] = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_BLACK)
+      ->setIcon('stop-white')
+      ->setName('Stopped');
+
+    $content3 = id(new PHUIBoxView())
+      ->appendChild($icons)
+      ->addPadding(PHUI::PADDING_LARGE);
+
+    $box = id(new PHUIObjectBoxView())
+      ->setHeaderText('Inline')
+      ->appendChild($intro);
+
+    $box1 = id(new PHUIObjectBoxView())
+      ->setHeaderText('Colors')
+      ->appendChild($content1);
+
+    $box2 = id(new PHUIObjectBoxView())
+      ->setHeaderText('Holidays')
+      ->appendChild($content2);
+
+    $box3 = id(new PHUIObjectBoxView())
+      ->setHeaderText('Icons')
+      ->appendChild($content3);
+
+    return array($box, $box1, $box2, $box3);
   }
 }

src/view/layout/PhabricatorTagView.php

@@ -30,6 +30,7 @@ final class PhabricatorTagView extends AphrontView {
   private $closed;
   private $external;
   private $id;
+  private $icon;
 
   public function setID($id) {
     $this->id = $id;
@@ -88,6 +89,14 @@ final class PhabricatorTagView extends AphrontView {
     return $this;
   }
 
+  public function setIcon($icon) {
+    $icon_view = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
+      ->setSpriteIcon($icon);
+    $this->icon = $icon_view;
+    return $this;
+  }
+
   public function render() {
     if (!$this->type) {
       throw new Exception(pht("You must call setType() before render()!"));
@@ -120,6 +129,13 @@ final class PhabricatorTagView extends AphrontView {
       $dot = null;
     }
 
+    if ($this->icon) {
+      $icon = $this->icon;
+      $classes[] = 'phabricator-tag-icon-view';
+    } else {
+      $icon = null;
+    }
+
     $content = phutil_tag(
       'span',
       array(
@@ -155,7 +171,7 @@ final class PhabricatorTagView extends AphrontView {
           ),
           'target' => $this->external ? '_blank' : null,
         ),
-        array($bar, $content));
+        array($bar, $icon, $content));
     } else {
       return phutil_tag(
         $this->href ? 'a' : 'span',
@@ -165,7 +181,7 @@ final class PhabricatorTagView extends AphrontView {
           'class' => implode(' ', $classes),
           'target' => $this->external ? '_blank' : null,
         ),
-        array($bar, $content));
+        array($bar, $icon, $content));
     }
   }
 

webroot/rsrc/css/layout/phabricator-tag-view.css

@@ -6,6 +6,7 @@
   font-weight: bold;
   text-decoration: none;
   display: inline-block;
+  position: relative;
 }
 
 a.phabricator-tag-view:hover {
@@ -23,6 +24,21 @@ a.phabricator-tag-view:hover {
   padding: 0 4px;
 }
 
+.phabricator-tag-type-state .phabricator-tag-core {
+  padding: 0 6px;
+}
+
+.phabricator-tag-view .phui-icon-view {
+  position: absolute;
+  display: inline-block;
+  top: 1px;
+  left: 5px;
+}
+
+.phabricator-tag-icon-view .phabricator-tag-core {
+  padding-left: 22px;
+}
+
 .phabricator-tag-view-has-bar .phabricator-tag-core {
   border-radius: 0 3px 3px 0;
   border-width: 1px 1px 1px 0;