Add Outline tag type to PHUITagView

Summary: Adds a new tag type, starts to try to clean up the mess that are PHUITags

Test Plan:
Review UIExamples.

{F4972323}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'ff161f2d',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '5ffe8b79',
+    'core.pkg.css' => '6e9cf0af',
     'core.pkg.js' => '599698a7',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '7d4cfa59',
@@ -172,7 +172,7 @@ return array(
     'rsrc/css/phui/phui-segment-bar-view.css' => 'b1d1b892',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => 'd5263e49',
-    'rsrc/css/phui/phui-tag-view.css' => 'cc4fd402',
+    'rsrc/css/phui/phui-tag-view.css' => '3fa7765e',
     'rsrc/css/phui/phui-timeline-view.css' => '313c7f22',
     'rsrc/css/phui/phui-two-column-view.css' => 'ce9fa0b7',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5',
@@ -882,7 +882,7 @@ return array(
     'phui-segment-bar-view-css' => 'b1d1b892',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => 'd5263e49',
-    'phui-tag-view-css' => 'cc4fd402',
+    'phui-tag-view-css' => '3fa7765e',
     'phui-theme-css' => '9f261c6b',
     'phui-timeline-view-css' => '313c7f22',
     'phui-two-column-view-css' => 'ce9fa0b7',

src/applications/phid/PhabricatorObjectHandle.php

@@ -407,8 +407,8 @@ final class PhabricatorObjectHandle
 
   public function renderTag() {
     return id(new PHUITagView())
-      ->setType(PHUITagView::TYPE_OBJECT)
-      ->setShade($this->getTagColor())
+      ->setType(PHUITagView::TYPE_SHADE)
+      ->setColor($this->getTagColor())
       ->setIcon($this->getIcon())
       ->setHref($this->getURI())
       ->setName($this->getLinkName());

src/applications/phid/view/PHUIHandleTagListView.php

@@ -121,8 +121,8 @@ final class PHUIHandleTagListView extends AphrontTagView {
 
   private function newPlaceholderTag() {
     return id(new PHUITagView())
-      ->setType(PHUITagView::TYPE_OBJECT)
-      ->setShade(PHUITagView::COLOR_DISABLED)
+      ->setType(PHUITagView::TYPE_SHADE)
+      ->setColor(PHUITagView::COLOR_DISABLED)
       ->setSlimShady($this->slim);
   }
 

src/applications/uiexample/examples/PHUITagExample.php

@@ -162,15 +162,15 @@ final class PHUITagExample extends PhabricatorUIExample {
     $tags = array();
     foreach ($shades as $shade) {
       $tags[] = id(new PHUITagView())
-        ->setType(PHUITagView::TYPE_OBJECT)
-        ->setShade($shade)
+        ->setType(PHUITagView::TYPE_SHADE)
+        ->setColor($shade)
         ->setIcon('fa-tags')
         ->setName(ucwords($shade))
         ->setHref('#');
       $tags[] = hsprintf(' ');
       $tags[] = id(new PHUITagView())
-        ->setType(PHUITagView::TYPE_OBJECT)
-        ->setShade($shade)
+        ->setType(PHUITagView::TYPE_SHADE)
+        ->setColor($shade)
         ->setSlimShady(true)
         ->setIcon('fa-tags')
         ->setName(ucwords($shade))
@@ -182,6 +182,26 @@ final class PHUITagExample extends PhabricatorUIExample {
       ->appendChild($tags)
       ->addPadding(PHUI::PADDING_LARGE);
 
+    $outlines = PHUITagView::getOutlines();
+    $tags = array();
+    foreach ($outlines as $outline) {
+      $tags[] = id(new PHUITagView())
+        ->setType(PHUITagView::TYPE_OUTLINE)
+        ->setShade($outline)
+        ->setName($outline);
+      $tags[] = hsprintf(' ');
+      $tags[] = id(new PHUITagView())
+        ->setType(PHUITagView::TYPE_OUTLINE)
+        ->setShade($outline)
+        ->setSlimShady(true)
+        ->setName($outline);
+      $tags[] = hsprintf('<br /><br />');
+    }
+
+    $content5 = id(new PHUIBoxView())
+      ->appendChild($tags)
+      ->addPadding(PHUI::PADDING_LARGE);
+
     $box = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Inline'))
       ->appendChild($intro);
@@ -202,6 +222,10 @@ final class PHUITagExample extends PhabricatorUIExample {
       ->setHeaderText(pht('Shades'))
       ->appendChild($content4);
 
-    return array($box, $box1, $box2, $box3, $box4);
+    $box5 = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Outlines'))
+      ->appendChild($content5);
+
+    return array($box, $box1, $box2, $box3, $box4, $box5);
   }
 }

src/view/phui/PHUITagView.php

@@ -6,6 +6,7 @@ final class PHUITagView extends AphrontTagView {
   const TYPE_OBJECT         = 'object';
   const TYPE_STATE          = 'state';
   const TYPE_SHADE          = 'shade';
+  const TYPE_OUTLINE        = 'outline';
 
   const COLOR_RED           = 'red';
   const COLOR_ORANGE        = 'orange';
@@ -15,6 +16,8 @@ final class PHUITagView extends AphrontTagView {
   const COLOR_VIOLET        = 'violet';
   const COLOR_GREEN         = 'green';
   const COLOR_BLACK         = 'black';
+  const COLOR_SKY           = 'sky';
+  const COLOR_FIRE          = 'fire';
   const COLOR_GREY          = 'grey';
   const COLOR_WHITE         = 'white';
   const COLOR_PINK          = 'pink';
@@ -29,6 +32,7 @@ final class PHUITagView extends AphrontTagView {
   private $href;
   private $name;
   private $phid;
+  private $color;
   private $backgroundColor;
   private $dotColor;
   private $closed;
@@ -41,6 +45,7 @@ final class PHUITagView extends AphrontTagView {
     $this->type = $type;
     switch ($type) {
       case self::TYPE_SHADE:
+      case self::TYPE_OUTLINE:
         break;
       case self::TYPE_OBJECT:
         $this->setBackgroundColor(self::COLOR_OBJECT);
@@ -52,8 +57,14 @@ final class PHUITagView extends AphrontTagView {
     return $this;
   }
 
+  /* Deprecated, use setColor */
   public function setShade($shade) {
-    $this->shade = $shade;
+    $this->color = $shade;
+    return $this;
+  }
+
+  public function setColor($color) {
+    $this->color = $color;
     return $this;
   }
 
@@ -109,12 +120,16 @@ final class PHUITagView extends AphrontTagView {
       'phui-tag-type-'.$this->type,
     );
 
-    if ($this->shade) {
+    if ($this->color) {
+      $classes[] = 'phui-tag-'.$this->color;
+    }
+
+    if ($this->slimShady) {
+      $classes[] = 'phui-tag-slim';
+    }
+
+    if ($this->type == self::TYPE_SHADE) {
       $classes[] = 'phui-tag-shade';
-      $classes[] = 'phui-tag-shade-'.$this->shade;
-      if ($this->slimShady) {
-        $classes[] = 'phui-tag-shade-slim';
-      }
     }
 
     if ($this->icon) {
@@ -240,6 +255,32 @@ final class PHUITagView extends AphrontTagView {
     return idx(self::getShadeMap(), $shade, $shade);
   }
 
+  public static function getOutlines() {
+    return array_keys(self::getOutlineMap());
+  }
+
+  public static function getOutlineMap() {
+    return array(
+      self::COLOR_RED => pht('Red'),
+      self::COLOR_ORANGE => pht('Orange'),
+      self::COLOR_YELLOW => pht('Yellow'),
+      self::COLOR_BLUE => pht('Blue'),
+      self::COLOR_INDIGO => pht('Indigo'),
+      self::COLOR_VIOLET => pht('Violet'),
+      self::COLOR_GREEN => pht('Green'),
+      self::COLOR_GREY => pht('Grey'),
+      self::COLOR_PINK => pht('Pink'),
+      self::COLOR_SKY => pht('Sky'),
+      self::COLOR_FIRE => pht('Fire'),
+      self::COLOR_BLACK => pht('Black'),
+      self::COLOR_DISABLED => pht('Disabled'),
+    );
+  }
+
+  public static function getOutlineName($outline) {
+    return idx(self::getOutlineMap(), $outline, $outline);
+  }
+
 
   public function setExternal($external) {
     $this->external = $external;

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

@@ -161,225 +161,233 @@ a.phui-tag-view:hover
 
 */
 
-.phui-tag-shade {
+.phui-tag-view.phui-tag-type-shade {
   font-weight: normal;
 }
 
-.phui-tag-shade .phui-icon-view {
+.phui-tag-view.phui-tag-type-shade .phui-icon-view {
   font-size: 12px;
 }
 
-.phui-tag-shade-slim .phui-icon-view {
+
+/* - Slim Tags -----------------------------------------------------------------
+
+  A thinner tag for object list, workboards.
+
+*/
+
+.phui-tag-slim .phui-icon-view {
   font-size: 11px;
 }
 
-.phui-tag-shade-slim .phui-tag-core {
+.phui-tag-slim .phui-tag-core {
   font-size: {$smallerfontsize};
 }
 
+
 /* - Red -------------------------------------------------------------------- */
 
-.phui-tag-shade-red .phui-tag-core,
+.phui-tag-red .phui-tag-core,
 .jx-tokenizer-token.red {
   background: {$sh-redbackground};
   border-color: {$sh-lightredborder};
   color: {$sh-redtext};
 }
 
-.phui-tag-shade-red .phui-icon-view,
+.phui-tag-red .phui-icon-view,
 .jx-tokenizer-token.red .phui-icon-view,
 .jx-tokenizer-token.red .jx-tokenizer-x {
   color: {$sh-redicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-red .phui-tag-core,
 .jx-tokenizer-token.red:hover {
   border-color: {$sh-redborder};
 }
 
 /* - Orange ----------------------------------------------------------------- */
 
-.phui-tag-shade-orange .phui-tag-core,
+.phui-tag-orange .phui-tag-core,
 .jx-tokenizer-token.orange {
   background: {$sh-orangebackground};
   border-color: {$sh-lightorangeborder};
   color: {$sh-orangetext};
 }
 
-.phui-tag-shade-orange .phui-icon-view,
+.phui-tag-orange .phui-icon-view,
 .jx-tokenizer-token.orange .phui-icon-view,
 .jx-tokenizer-token.orange .jx-tokenizer-x {
   color: {$sh-orangeicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-orange .phui-tag-core,
 .jx-tokenizer-token.orange:hover {
   border-color: {$sh-orangeborder};
 }
 
 /* - Yellow ----------------------------------------------------------------- */
 
-.phui-tag-shade-yellow .phui-tag-core,
+.phui-tag-yellow .phui-tag-core,
 .jx-tokenizer-token.yellow {
   background: {$sh-yellowbackground};
   border-color: {$sh-lightyellowborder};
   color: {$sh-yellowtext};
 }
 
-.phui-tag-shade-yellow .phui-icon-view,
+.phui-tag-yellow .phui-icon-view,
 .jx-tokenizer-token.yellow .phui-icon-view,
 .jx-tokenizer-token.yellow .jx-tokenizer-x {
   color: {$sh-yellowicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-yellow .phui-tag-core,
 .jx-tokenizer-token.yellow:hover {
   border-color: {$sh-yellowborder};
 }
 
 /* - Blue ------------------------------------------------------------------- */
 
-.phui-tag-shade-blue .phui-tag-core,
+.phui-tag-blue .phui-tag-core,
 .jx-tokenizer-token.blue {
   background: {$sh-bluebackground};
   border-color: {$sh-lightblueborder};
   color: {$sh-bluetext};
 }
 
-.phui-tag-shade-blue .phui-icon-view,
+.phui-tag-blue .phui-icon-view,
 .jx-tokenizer-token.blue .phui-icon-view,
 .jx-tokenizer-token.blue .jx-tokenizer-x {
   color: {$sh-blueicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-blue .phui-tag-core,
 .jx-tokenizer-token.blue:hover {
   border-color: {$sh-blueborder};
 }
 
 /* - Sky ------------------------------------------------------------------- */
 
-.phui-tag-shade-sky .phui-tag-core,
+.phui-tag-sky .phui-tag-core,
 .jx-tokenizer-token.sky {
   background: #E0F0FA;
   border-color: {$sh-lightblueborder};
   color: {$sh-bluetext};
 }
 
-.phui-tag-shade-sky .phui-icon-view,
+.phui-tag-sky .phui-icon-view,
 .jx-tokenizer-token.sky .phui-icon-view,
 .jx-tokenizer-token.sky .jx-tokenizer-x {
   color: {$sh-blueicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-sky .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-sky .phui-tag-core,
 .jx-tokenizer-token.sky:hover {
   border-color: {$sh-blueborder};
 }
 
 /* - Indigo ----------------------------------------------------------------- */
 
-.phui-tag-shade-indigo .phui-tag-core,
+.phui-tag-indigo .phui-tag-core,
 .jx-tokenizer-token.indigo {
   background: {$sh-indigobackground};
   border-color: {$sh-lightindigoborder};
   color: {$sh-indigotext};
 }
 
-.phui-tag-shade-indigo .phui-icon-view,
+.phui-tag-indigo .phui-icon-view,
 .jx-tokenizer-token.indigo .phui-icon-view,
 .jx-tokenizer-token.indigo .jx-tokenizer-x {
   color: {$sh-indigoicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-indigo .phui-tag-core,
 .jx-tokenizer-token.indigo:hover {
   border-color: {$sh-indigoborder};
 }
 
 /* - Green ------------------------------------------------------------------ */
 
-.phui-tag-shade-green .phui-tag-core,
+.phui-tag-green .phui-tag-core,
 .jx-tokenizer-token.green {
   background: {$sh-greenbackground};
   border-color: {$sh-lightgreenborder};
   color: {$sh-greentext};
 }
 
-.phui-tag-shade-green .phui-icon-view,
+.phui-tag-green .phui-icon-view,
 .jx-tokenizer-token.green .phui-icon-view,
 .jx-tokenizer-token.green .jx-tokenizer-x {
   color: {$sh-greenicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-green .phui-tag-core,
 .jx-tokenizer-token.green:hover {
   border-color: {$sh-greenborder};
 }
 
 /* - Violet ----------------------------------------------------------------- */
 
-.phui-tag-shade-violet .phui-tag-core,
+.phui-tag-violet .phui-tag-core,
 .jx-tokenizer-token.violet {
   background: {$sh-violetbackground};
   border-color: {$sh-lightvioletborder};
   color: {$sh-violettext};
 }
 
-.phui-tag-shade-violet .phui-icon-view,
+.phui-tag-violet .phui-icon-view,
 .jx-tokenizer-token.violet .phui-icon-view,
 .jx-tokenizer-token.violet .jx-tokenizer-x {
   color: {$sh-violeticon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-violet .phui-tag-core,
 .jx-tokenizer-token.violet:hover {
   border-color: {$sh-violetborder};
 }
 
 /* - Pink ------------------------------------------------------------------- */
 
-.phui-tag-shade-pink .phui-tag-core,
+.phui-tag-pink .phui-tag-core,
 .jx-tokenizer-token.pink {
   background: {$sh-pinkbackground};
   border-color: {$sh-lightpinkborder};
   color: {$sh-pinktext};
 }
 
-.phui-tag-shade-pink .phui-icon-view,
+.phui-tag-pink .phui-icon-view,
 .jx-tokenizer-token.pink .phui-icon-view,
 .jx-tokenizer-token.pink .jx-tokenizer-x {
   color: {$sh-pinkicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-pink .phui-tag-core,
 .jx-tokenizer-token.pink:hover {
   border-color: {$sh-pinkborder};
 }
 
 /* - Grey ------------------------------------------------------------------- */
 
-.phui-tag-shade-grey .phui-tag-core,
+.phui-tag-grey .phui-tag-core,
 .jx-tokenizer-token.grey {
   background: {$sh-greybackground};
   border-color: {$sh-lightgreyborder};
   color: {$sh-greytext};
 }
 
-.phui-tag-shade-grey .phui-icon-view,
+.phui-tag-grey .phui-icon-view,
 .jx-tokenizer-token.grey .phui-icon-view,
 .jx-tokenizer-token.grey .jx-tokenizer-x {
   color: {$sh-greyicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-grey .phui-tag-core,
 .jx-tokenizer-token.grey:hover {
   border-color: {$sh-greyborder};
 }
 
 /* - Checkered -------------------------------------------------------------- */
 
-.phui-tag-shade-checkered .phui-tag-core,
+.phui-tag-checkered .phui-tag-core,
 .jx-tokenizer-token.checkered {
   background: url(/rsrc/image/checker_lighter.png);
   border-style: dashed;
@@ -388,13 +396,13 @@ a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core,
   text-shadow: 1px 1px #fff;
 }
 
-.phui-tag-shade-checkered .phui-icon-view,
+.phui-tag-checkered .phui-icon-view,
 .jx-tokenizer-token.checkered .phui-icon-view,
 .jx-tokenizer-token.checkered .jx-tokenizer-x {
   color: {$sh-greyicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core,
+a.phui-tag-view:hover.phui-tag-checkered .phui-tag-core,
 .jx-tokenizer-token.checkered:hover {
   border-style: solid;
   border-color: {$sh-greyborder};
@@ -402,16 +410,101 @@ a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core,
 
 /* - Disabled --------------------------------------------------------------- */
 
-.phui-tag-shade-disabled .phui-tag-core {
+.phui-tag-disabled .phui-tag-core {
   background-color: {$sh-disabledbackground};
   border-color: {$sh-lightdisabledborder};
   color: {$sh-disabledtext};
 }
 
-.phui-tag-shade-disabled .phui-icon-view {
+.phui-tag-disabled .phui-icon-view {
   color: {$sh-disabledicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-disabled .phui-tag-core {
   border-color: {$sh-disabledborder};
 }
+
+/* - Outline Tags --------------------------------------------------------------
+
+  Basic Tag with a bold border and white background
+
+*/
+
+.phui-tag-type-outline {
+  text-transform: uppercase;
+  font-weight: normal;
+}
+
+.phui-tag-view.phui-tag-type-outline .phui-tag-core {
+  background: #fff;
+  padding: 0 6px 1px 6px;
+}
+
+.phui-tag-slim.phui-tag-type-outline .phui-tag-core {
+  font-size: {$smallestfontsize};
+}
+
+.phui-tag-type-outline.phui-tag-red .phui-tag-core {
+  color: {$red};
+  border-color: {$red};
+}
+
+.phui-tag-type-outline.phui-tag-orange .phui-tag-core {
+  color: {$orange};
+  border-color: {$orange};
+}
+
+.phui-tag-type-outline.phui-tag-yellow .phui-tag-core {
+  color: {$yellow};
+  border-color: {$yellow};
+}
+
+.phui-tag-type-outline.phui-tag-green .phui-tag-core {
+  color: {$green};
+  border-color: {$green};
+}
+
+.phui-tag-type-outline.phui-tag-blue .phui-tag-core {
+  color: {$blue};
+  border-color: {$blue};
+}
+
+.phui-tag-type-outline.phui-tag-indigo .phui-tag-core {
+  color: {$indigo};
+  border-color: {$indigo};
+}
+
+.phui-tag-type-outline.phui-tag-violet .phui-tag-core {
+  color: {$violet};
+  border-color: {$violet};
+}
+
+.phui-tag-type-outline.phui-tag-grey .phui-tag-core {
+  color: {$bluetext};
+  border-color: {$bluetext};
+}
+
+.phui-tag-type-outline.phui-tag-disabled .phui-tag-core {
+  color: {$lightgreytext};
+  border-color: {$lightgreytext};
+}
+
+.phui-tag-type-outline.phui-tag-pink .phui-tag-core {
+  color: {$pink};
+  border-color: {$pink};
+}
+
+.phui-tag-type-outline.phui-tag-sky .phui-tag-core {
+  color: {$sky};
+  border-color: {$sky};
+}
+
+.phui-tag-type-outline.phui-tag-fire .phui-tag-core {
+  color: {$fire};
+  border-color: {$fire};
+}
+
+.phui-tag-type-outline.phui-tag-black .phui-tag-core {
+  color: #000;
+  border-color: #000;
+}