Let PHUITagView colorize completely with "shades"

Summary: See D9710.

Test Plan: quack quack

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'fc4bf764',
+    'core.pkg.css' => 'd4378b92',
     'core.pkg.js' => '8c184823',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '4a93db37',
@@ -142,7 +142,7 @@ return array(
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => '2f562399',
-    'rsrc/css/phui/phui-tag-view.css' => 'ef0a9ca8',
+    'rsrc/css/phui/phui-tag-view.css' => '652934b3',
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
     'rsrc/css/phui/phui-timeline-view.css' => 'bbd990d0',
     'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
@@ -787,7 +787,7 @@ return array(
     'phui-remarkup-preview-css' => '19ad512b',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => '2f562399',
-    'phui-tag-view-css' => 'ef0a9ca8',
+    'phui-tag-view-css' => '652934b3',
     'phui-text-css' => '23e9b4b7',
     'phui-timeline-view-css' => 'bbd990d0',
     'phui-workboard-view-css' => '2bf82d00',

src/applications/uiexample/examples/PHUITagExample.php

@@ -156,6 +156,21 @@ final class PHUITagExample extends PhabricatorUIExample {
       ->appendChild($icons)
       ->addPadding(PHUI::PADDING_LARGE);
 
+    $shades = PHUITagView::getShades();
+    $tags = array();
+    foreach ($shades as $shade) {
+      $tags[] = id(new PHUITagView())
+        ->setType(PHUITagView::TYPE_OBJECT)
+        ->setShade($shade)
+        ->setIcon('fa-tags')
+        ->setName(ucwords($shade));
+      $tags[] = hsprintf('<br /><br />');
+    }
+
+    $content4 = id(new PHUIBoxView())
+      ->appendChild($tags)
+      ->addPadding(PHUI::PADDING_LARGE);
+
     $box = id(new PHUIObjectBoxView())
       ->setHeaderText('Inline')
       ->appendChild($intro);
@@ -172,6 +187,10 @@ final class PHUITagExample extends PhabricatorUIExample {
       ->setHeaderText('Icons')
       ->appendChild($content3);
 
-    return array($box, $box1, $box2, $box3);
+    $box4 = id(new PHUIObjectBoxView())
+      ->setHeaderText('Shades')
+      ->appendChild($content4);
+
+    return array($box, $box1, $box2, $box3, $box4);
   }
 }

src/view/phui/PHUIIconView.php

@@ -20,6 +20,7 @@ final class PHUIIconView extends AphrontTagView {
   private $spriteIcon;
   private $spriteSheet;
   private $iconFont;
+  private $iconColor;
 
   public function setHref($href) {
     $this->href = $href;
@@ -51,8 +52,9 @@ final class PHUIIconView extends AphrontTagView {
     return $this;
   }
 
-  public function setIconFont($icon) {
+  public function setIconFont($icon, $color = null) {
     $this->iconFont = $icon;
+    $this->iconColor = $color;
     return $this;
   }
 
@@ -75,13 +77,14 @@ final class PHUIIconView extends AphrontTagView {
       require_celerity_resource('sprite-'.$this->spriteSheet.'-css');
       $classes[] = 'sprite-'.$this->spriteSheet;
       $classes[] = $this->spriteSheet.'-'.$this->spriteIcon;
-
     } else if ($this->iconFont) {
       require_celerity_resource('phui-font-icon-base-css');
       require_celerity_resource('font-fontawesome');
       $classes[] = 'phui-font-fa';
       $classes[] = $this->iconFont;
-
+      if ($this->iconColor) {
+        $classes[] = $this->iconColor;
+      }
     } else {
       if ($this->headSize) {
         $classes[] = $this->headSize;

src/view/phui/PHUITagView.php

@@ -5,6 +5,7 @@ final class PHUITagView extends AphrontView {
   const TYPE_PERSON         = 'person';
   const TYPE_OBJECT         = 'object';
   const TYPE_STATE          = 'state';
+  const TYPE_SHADE          = 'shade';
 
   const COLOR_RED           = 'red';
   const COLOR_ORANGE        = 'orange';
@@ -16,6 +17,8 @@ final class PHUITagView extends AphrontView {
   const COLOR_BLACK         = 'black';
   const COLOR_GREY          = 'grey';
   const COLOR_WHITE         = 'white';
+  const COLOR_BLUEGREY      = 'bluegrey';
+  const COLOR_CHECKERED     = 'checkered';
 
   const COLOR_OBJECT        = 'object';
   const COLOR_PERSON        = 'person';
@@ -30,6 +33,7 @@ final class PHUITagView extends AphrontView {
   private $external;
   private $id;
   private $icon;
+  private $shade;
 
   public function setID($id) {
     $this->id = $id;
@@ -43,6 +47,8 @@ final class PHUITagView extends AphrontView {
   public function setType($type) {
     $this->type = $type;
     switch ($type) {
+      case self::TYPE_SHADE:
+        break;
       case self::TYPE_OBJECT:
         $this->setBackgroundColor(self::COLOR_OBJECT);
         break;
@@ -53,6 +59,11 @@ final class PHUITagView extends AphrontView {
     return $this;
   }
 
+  public function setShade($shade) {
+    $this->shade = $shade;
+    return $this;
+  }
+
   public function setDotColor($dot_color) {
     $this->dotColor = $dot_color;
     return $this;
@@ -84,9 +95,7 @@ final class PHUITagView extends AphrontView {
   }
 
   public function setIcon($icon) {
-    $icon_view = id(new PHUIIconView())
-      ->setIconFont($icon);
-    $this->icon = $icon_view;
+    $this->icon = $icon;
     return $this;
   }
 
@@ -102,7 +111,10 @@ final class PHUITagView extends AphrontView {
     );
 
     $color = null;
-    if ($this->backgroundColor) {
+    if ($this->shade) {
+      $classes[] = 'phui-tag-shade';
+      $color = 'phui-tag-shade-'.$this->shade;
+    } else if ($this->backgroundColor) {
       $color = 'phui-tag-color-'.$this->backgroundColor;
     }
 
@@ -119,7 +131,8 @@ final class PHUITagView extends AphrontView {
     }
 
     if ($this->icon) {
-      $icon = $this->icon;
+      $icon = id(new PHUIIconView())
+        ->setIconFont($this->icon, $this->shade);
       $classes[] = 'phui-tag-icon-view';
     } else {
       $icon = null;
@@ -196,6 +209,22 @@ final class PHUITagView extends AphrontView {
     );
   }
 
+  public static function getShades() {
+    return array(
+      self::COLOR_RED,
+      self::COLOR_ORANGE,
+      self::COLOR_YELLOW,
+      self::COLOR_BLUE,
+      self::COLOR_INDIGO,
+      self::COLOR_VIOLET,
+      self::COLOR_GREEN,
+      self::COLOR_BLACK,
+      self::COLOR_GREY,
+      self::COLOR_BLUEGREY,
+      self::COLOR_CHECKERED,
+    );
+  }
+
   public function setExternal($external) {
     $this->external = $external;
     return $this;

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

@@ -132,6 +132,82 @@ a.phui-tag-type-object:link,
   border-color: #f1f7ff;
 }
 
+.phui-tag-shade {
+  font-weight: normal;
+}
+
+.phui-tag-shade .phui-icon-view {
+  font-size: 12px;
+  top: 2px;
+}
+
+.phui-tag-shade-bluegrey {
+  background-color: {$lightbluebackground};
+  border-color: {$lightbluetext};
+  color: {$bluetext};
+}
+
+.phui-tag-shade-red {
+  background-color: {$lightred};
+  border-color: {$red};
+  color: {$red}
+}
+
+.phui-tag-shade-orange {
+  background-color: {$lightorange};
+  border-color: {$orange};
+  color: {$orange};
+}
+
+.phui-tag-shade-yellow {
+  background-color: {$lightyellow};
+  border-color: {$yellow};
+  color: {$yellow};
+}
+
+.phui-tag-shade-blue {
+  background-color: {$lightblue};
+  border-color: {$blue};
+  color: {$blue};
+}
+
+.phui-tag-shade-indigo {
+  background-color: {$lightindigo};
+  border-color: {$indigo};
+  color: {$indigo};
+}
+
+.phui-tag-shade-green {
+  background-color: {$lightgreen};
+  border-color: {$green};
+  color: {$green};
+}
+
+.phui-tag-shade-violet {
+  background-color: {$lightviolet};
+  border-color: {$violet};
+  color: {$violet};
+}
+
+.phui-tag-shade-black {
+  background-color: {$darkgreybackground};
+  border-color: #333333;
+}
+
+.phui-tag-shade-grey {
+  background-color: {$lightgreybackground};
+  border-color: {$lightgreytext};
+  color: {$lightgreytext};
+}
+
+.phui-tag-shade-checkered {
+  background: url(/rsrc/image/checker_light.png);
+  border-style: dashed;
+  border-color: {$greyborder};
+  color: black;
+  text-shadow: 1px 1px #fff;
+}
+
 a.phui-tag-view:hover
   .phui-tag-core.phui-tag-color-person {
   border-color: #d9ebfd;