From 8f61eb45ab3be629ded394a746f7762bb5001089 Mon Sep 17 00:00:00 2001 From: epriestley Date: Sun, 19 Apr 2015 07:17:54 -0700 Subject: [PATCH] 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 --- .../PhabricatorProjectDatasource.php | 3 ++- .../storage/PhabricatorTypeaheadResult.php | 13 ++++++++++++- .../view/PhabricatorTypeaheadTokenView.php | 19 +++++++++++++++++-- .../examples/PHUITypeaheadExample.php | 5 +++-- .../control/AphrontFormTokenizerControl.php | 1 + webroot/rsrc/js/core/Prefab.js | 15 +++++++++++---- 6 files changed, 46 insertions(+), 10 deletions(-) diff --git a/src/applications/project/typeahead/PhabricatorProjectDatasource.php b/src/applications/project/typeahead/PhabricatorProjectDatasource.php index 22a2fb68f6..0466ad9950 100644 --- a/src/applications/project/typeahead/PhabricatorProjectDatasource.php +++ b/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); diff --git a/src/applications/typeahead/storage/PhabricatorTypeaheadResult.php b/src/applications/typeahead/storage/PhabricatorTypeaheadResult.php index f364b142e8..516617093f 100644 --- a/src/applications/typeahead/storage/PhabricatorTypeaheadResult.php +++ b/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; } } diff --git a/src/applications/typeahead/view/PhabricatorTypeaheadTokenView.php b/src/applications/typeahead/view/PhabricatorTypeaheadTokenView.php index 0322fe544a..425de130fb 100644 --- a/src/applications/typeahead/view/PhabricatorTypeaheadTokenView.php +++ b/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, ); diff --git a/src/applications/uiexample/examples/PHUITypeaheadExample.php b/src/applications/uiexample/examples/PHUITypeaheadExample.php index 1c039c380d..810a6cc15e 100644 --- a/src/applications/uiexample/examples/PHUITypeaheadExample.php +++ b/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')) - ->setIcon('fa-tag green'); + ->setValue(pht('Object with Color')) + ->setIcon('fa-tag') + ->setColor('green'); $token_list[] = id(new PhabricatorTypeaheadTokenView()) ->setValue(pht('Function Token')) diff --git a/src/view/form/control/AphrontFormTokenizerControl.php b/src/view/form/control/AphrontFormTokenizerControl.php index 079349d12c..13fcd6b143 100644 --- a/src/view/form/control/AphrontFormTokenizerControl.php +++ b/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, diff --git a/webroot/rsrc/js/core/Prefab.js b/webroot/rsrc/js/core/Prefab.js index 085a2a4e1a..15e0333e41 100644 --- a/webroot/rsrc/js/core/Prefab.js +++ b/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) { - JX.DOM.alterClass(container, 'jx-tokenizer-token-' + type, true); + 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], - unique: fields[12] || false + color: fields[11], + tokenType: fields[12], + unique: fields[13] || false }; },