Give tokenizer tokens CSS color classes on the container instead of the icon

Summary:
Ref T4100. See D12465.

  - Instead of putting CSS color classes on the tokenizer icons, put them on the container tags.
  - Note that this removes the "bluegrey" default classes.
  - This doesn't actually add CSS for the classes so, e.g., "green" doesn't make things green yet. This just supports D12465.

Test Plan: Viewed markup, saw classes.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T4100

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

src/applications/project/typeahead/PhabricatorProjectDatasource.php

@@ -63,7 +63,8 @@ final class PhabricatorProjectDatasource
         ->setDisplayType('Project')
         ->setURI('/tag/'.$proj->getPrimarySlug().'/')
         ->setPHID($proj->getPHID())
-        ->setIcon($proj->getIcon().' '.$proj->getColor())
+        ->setIcon($proj->getIcon())
+        ->setColor($proj->getColor())
         ->setPriorityType('proj')
         ->setClosed($closed);
 

src/applications/typeahead/storage/PhabricatorTypeaheadResult.php

@@ -12,6 +12,7 @@ final class PhabricatorTypeaheadResult {
   private $priorityType;
   private $imageSprite;
   private $icon;
+  private $color;
   private $closed;
   private $tokenType;
   private $unique;
@@ -104,6 +105,15 @@ final class PhabricatorTypeaheadResult {
     return $this->tokenType;
   }
 
+  public function setColor($color) {
+    $this->color = $color;
+    return $this;
+  }
+
+  public function getColor() {
+    return $this->color;
+  }
+
   public function getSortKey() {
     // Put unique results (special parameter functions) ahead of other
     // results.
@@ -129,6 +139,7 @@ final class PhabricatorTypeaheadResult {
       $this->getIcon(),
       $this->closed,
       $this->imageSprite ? (string)$this->imageSprite : null,
+      $this->color,
       $this->tokenType,
       $this->unique ? 1 : null,
     );
@@ -151,7 +162,7 @@ final class PhabricatorTypeaheadResult {
       foreach ($types as $type) {
         $icon = $type->getTypeIcon();
         if ($icon !== null) {
-          $map[$type->getTypeConstant()] = "{$icon} bluegrey";
+          $map[$type->getTypeConstant()] = $icon;
         }
       }
 

src/applications/typeahead/view/PhabricatorTypeaheadTokenView.php

@@ -10,6 +10,7 @@ final class PhabricatorTypeaheadTokenView
 
   private $key;
   private $icon;
+  private $color;
   private $inputName;
   private $value;
   private $tokenType = self::TYPE_OBJECT;
@@ -20,6 +21,7 @@ final class PhabricatorTypeaheadTokenView
     return id(new PhabricatorTypeaheadTokenView())
       ->setKey($result->getPHID())
       ->setIcon($result->getIcon())
+      ->setColor($result->getColor())
       ->setValue($result->getDisplayName())
       ->setTokenType($result->getTokenType());
   }
@@ -30,11 +32,13 @@ final class PhabricatorTypeaheadTokenView
     $token = id(new PhabricatorTypeaheadTokenView())
       ->setKey($handle->getPHID())
       ->setValue($handle->getFullName())
-      ->setIcon(rtrim($handle->getIcon().' '.$handle->getIconColor()));
+      ->setIcon($handle->getIcon());
 
     if ($handle->isDisabled() ||
         $handle->getStatus() == PhabricatorObjectHandleStatus::STATUS_CLOSED) {
       $token->setTokenType(self::TYPE_DISABLED);
+    } else {
+      $token->setColor($handle->getTagColor());
     }
 
     return $token;
@@ -76,6 +80,15 @@ final class PhabricatorTypeaheadTokenView
     return $this->icon;
   }
 
+  public function setColor($color) {
+    $this->color = $color;
+    return $this;
+  }
+
+  public function getColor() {
+    return $this->color;
+  }
+
   public function setValue($value) {
     $this->value = $value;
     return $this;
@@ -107,6 +120,8 @@ final class PhabricatorTypeaheadTokenView
         break;
     }
 
+    $classes[] = $this->getColor();
+
     return array(
       'class' => $classes,
     );
@@ -126,7 +141,7 @@ final class PhabricatorTypeaheadTokenView
         phutil_tag(
           'span',
           array(
-            'class' => 'phui-icon-view phui-font-fa bluetext '.$icon,
+            'class' => 'phui-icon-view phui-font-fa '.$icon,
           )),
         $value,
       );

src/applications/uiexample/examples/PHUITypeaheadExample.php

@@ -24,8 +24,9 @@ final class PHUITypeaheadExample extends PhabricatorUIExample {
       ->setIcon('fa-user');
 
     $token_list[] = id(new PhabricatorTypeaheadTokenView())
-      ->setValue(pht('Custom Object'))
+      ->setValue(pht('Object with Color'))
-      ->setIcon('fa-tag green');
+      ->setIcon('fa-tag')
+      ->setColor('green');
 
     $token_list[] = id(new PhabricatorTypeaheadTokenView())
       ->setValue(pht('Function Token'))

src/view/form/control/AphrontFormTokenizerControl.php

@@ -125,6 +125,7 @@ final class AphrontFormTokenizerControl extends AphrontFormControl {
         'value' => mpull($tokens, 'getValue', 'getKey'),
         'icons' => mpull($tokens, 'getIcon', 'getKey'),
         'types' => mpull($tokens, 'getTokenType', 'getKey'),
+        'colors' => mpull($tokens, 'getColor', 'getKey'),
         'limit' => $this->limit,
         'username' => $username,
         'placeholder' => $placeholder,

webroot/rsrc/js/core/Prefab.js

@@ -177,21 +177,27 @@ JX.install('Prefab', {
 
         var icon;
         var type;
+        var color;
         if (result) {
           icon = result.icon;
           value = result.displayName;
           type = result.tokenType;
+          color = result.color;
         } else {
           icon = config.icons[key];
           type = config.types[key];
+          color = config.colors[key];
         }
 
         if (icon) {
           icon = JX.Prefab._renderIcon(icon);
         }
 
-        if (type) {
+        type = type || 'object';
         JX.DOM.alterClass(container, 'jx-tokenizer-token-' + type, true);
+
+        if (color) {
+          JX.DOM.alterClass(container, color, true);
         }
 
         return [icon, value];
@@ -292,8 +298,9 @@ JX.install('Prefab', {
         closed: closed,
         type: fields[5],
         sprite: fields[10],
-        tokenType: fields[11],
+        color: fields[11],
-        unique: fields[12] || false
+        tokenType: fields[12],
+        unique: fields[13] || false
       };
     },