Try layering state icons on PHUICircleIconView

Summary: I think this is reasonable for my current use case, but stacking icons overally is pretty clunky.

Test Plan:
UIExamples

{F4978899}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'ff161f2d',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => 'b666574e',
+    'core.pkg.css' => '19f6f61f',
     'core.pkg.js' => '21d34805',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '7d4cfa59',
@@ -158,7 +158,7 @@ return array(
     'rsrc/css/phui/phui-header-view.css' => 'a3d1aecd',
     'rsrc/css/phui/phui-hovercard.css' => 'f0592bcf',
     'rsrc/css/phui/phui-icon-set-selector.css' => '87db8fee',
-    'rsrc/css/phui/phui-icon.css' => '12b387a1',
+    'rsrc/css/phui/phui-icon.css' => '4c6d624c',
     'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '6e217679',
@@ -862,7 +862,7 @@ return array(
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'f0592bcf',
     'phui-icon-set-selector-css' => '87db8fee',
-    'phui-icon-view-css' => '12b387a1',
+    'phui-icon-view-css' => '4c6d624c',
     'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '6e217679',

src/applications/uiexample/examples/PHUIIconExample.php

@@ -130,6 +130,23 @@ final class PHUIIconExample extends PhabricatorUIExample {
           ->addClass('mmr');
     }
 
+    $circles = array('fa-gear', 'fa-recycle');
+    $colors = array('green', 'pink', 'red', 'sky', 'violet');
+    foreach ($circles as $circle) {
+      $states = PHUIIconCircleView::getStateMap();
+      foreach ($states as $state => $name) {
+        $i = array_rand($colors);
+        $circleview[] =
+          id(new PHUIIconCircleView())
+            ->setIcon($circle)
+            ->setSize(PHUIIconCircleView::SMALL)
+            ->setState($state)
+            ->setColor($colors[$i])
+            ->setHref('#')
+            ->addClass('mmr');
+      }
+    }
+
     $squares = array('fa-briefcase', 'fa-code', 'fa-globe', 'fa-home');
     $squareview = array();
     foreach ($squares as $icon) {

src/view/phui/PHUIIconCircleView.php

@@ -6,10 +6,22 @@ final class PHUIIconCircleView extends AphrontTagView {
   private $icon;
   private $color;
   private $size;
+  private $state;
 
   const SMALL = 'circle-small';
   const MEDIUM = 'circle-medium';
 
+  const STATE_FAIL = 'fa-times-circle';
+  const STATE_INFO = 'fa-info-circle';
+  const STATE_STOP = 'fa-stop-circle';
+  const STATE_START = 'fa-play-circle';
+  const STATE_PAUSE = 'fa-pause-circle';
+  const STATE_SUCCESS = 'fa-check-circle';
+  const STATE_WARNING = 'fa-exclamation-circle';
+  const STATE_PLUS = 'fa-plus-circle';
+  const STATE_MINUS = 'fa-minus-circle';
+  const STATE_UNKNOWN = 'fa-question-circle';
+
   public function setHref($href) {
     $this->href = $href;
     return $this;
@@ -30,6 +42,11 @@ final class PHUIIconCircleView extends AphrontTagView {
     return $this;
   }
 
+  public function setState($state) {
+    $this->state = $state;
+    return $this;
+  }
+
   protected function getTagName() {
     $tag = 'span';
     if ($this->href) {
@@ -54,6 +71,10 @@ final class PHUIIconCircleView extends AphrontTagView {
       $classes[] = $this->size;
     }
 
+    if ($this->state) {
+      $classes[] = 'phui-icon-circle-state';
+    }
+
     return array(
       'href' => $this->href,
       'class' => $classes,
@@ -61,8 +82,32 @@ final class PHUIIconCircleView extends AphrontTagView {
   }
 
   protected function getTagContent() {
+    $state = null;
+    if ($this->state) {
+      $state = id(new PHUIIconView())
+        ->setIcon($this->state.' '.$this->color)
+        ->addClass('phui-icon-circle-state-icon');
+    }
+
     return id(new PHUIIconView())
-      ->setIcon($this->icon);
+      ->setIcon($this->icon)
+      ->addClass('phui-icon-circle-icon')
+      ->appendChild($state);
+  }
+
+  public static function getStateMap() {
+    return array(
+      self::STATE_FAIL => pht('Failure'),
+      self::STATE_INFO => pht('Information'),
+      self::STATE_STOP => pht('Stop'),
+      self::STATE_START => pht('Start'),
+      self::STATE_PAUSE => pht('Pause'),
+      self::STATE_SUCCESS => pht('Success'),
+      self::STATE_WARNING => pht('Warning'),
+      self::STATE_PLUS => pht('Plus'),
+      self::STATE_MINUS => pht('Minus'),
+      self::STATE_UNKNOWN => pht('Unknown'),
+    );
   }
 
 }

webroot/rsrc/css/phui/phui-icon.css

@@ -57,6 +57,7 @@ img.phui-image-disabled {
   cursor: pointer;
   background: transparent;
   padding: 0;
+  position: relative;
 }
 
 .phui-icon-circle.circle-medium {
@@ -65,7 +66,21 @@ img.phui-image-disabled {
   border-radius: 36px;
 }
 
-.phui-icon-circle .phui-icon-view {
+.phui-icon-circle.phui-icon-circle-state {
+  border-color: transparent;
+  background-color: {$bluebackground};
+}
+
+.phui-icon-circle.phui-icon-circle-state .phui-icon-circle-icon {
+  color: {$bluetext};
+  font-size: 16px;
+}
+
+a.phui-icon-circle.phui-icon-circle-state:hover {
+  border-color: transparent !important;
+}
+
+.phui-icon-circle .phui-icon-circle-icon {
   height: 24px;
   width: 24px;
   font-size: 11px;
@@ -74,7 +89,7 @@ img.phui-image-disabled {
   cursor: pointer;
 }
 
-.phui-icon-circle.circle-medium .phui-icon-view {
+.phui-icon-circle.circle-medium .phui-icon-circle-icon {
   font-size: 18px;
   line-height: 36px;
 }
@@ -129,6 +144,21 @@ a.phui-icon-circle.hover-red:hover .phui-icon-view {
   color: {$red};
 }
 
+a.phui-icon-circle .phui-icon-view.phui-icon-circle-state-icon {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  font-size: 12px;
+  right: -3px;
+  top: -4px;
+  text-shadow:
+    -1px -1px 0 #fff,
+    1px -1px 0 #fff,
+    -1px 1px 0 #fff,
+    1px 1px 0 #fff;
+}
+
 /* - Icon in a Square ------------------------------------------------------- */
 
 .phui-icon-view.phui-icon-square {