@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+46
-10
+2
-1
src/applications/project/typeahead/PhabricatorProjectDatasource.php
+2
-1
src/applications/project/typeahead/PhabricatorProjectDatasource.php
···
63
63
->setDisplayType('Project')
64
64
->setURI('/tag/'.$proj->getPrimarySlug().'/')
65
65
->setPHID($proj->getPHID())
66
-
->setIcon($proj->getIcon().' '.$proj->getColor())
66
+
->setIcon($proj->getIcon())
67
+
->setColor($proj->getColor())
67
68
->setPriorityType('proj')
68
69
->setClosed($closed);
69
70
+12
-1
src/applications/typeahead/storage/PhabricatorTypeaheadResult.php
+12
-1
src/applications/typeahead/storage/PhabricatorTypeaheadResult.php
···
12
12
private $priorityType;
13
13
private $imageSprite;
14
14
private $icon;
15
+
private $color;
15
16
private $closed;
16
17
private $tokenType;
17
18
private $unique;
···
104
105
return $this->tokenType;
105
106
}
106
107
108
+
public function setColor($color) {
109
+
$this->color = $color;
110
+
return $this;
111
+
}
112
+
113
+
public function getColor() {
114
+
return $this->color;
115
+
}
116
+
107
117
public function getSortKey() {
108
118
// Put unique results (special parameter functions) ahead of other
109
119
// results.
···
129
139
$this->getIcon(),
130
140
$this->closed,
131
141
$this->imageSprite ? (string)$this->imageSprite : null,
142
+
$this->color,
132
143
$this->tokenType,
133
144
$this->unique ? 1 : null,
134
145
);
···
151
162
foreach ($types as $type) {
152
163
$icon = $type->getTypeIcon();
153
164
if ($icon !== null) {
154
-
$map[$type->getTypeConstant()] = "{$icon} bluegrey";
165
+
$map[$type->getTypeConstant()] = $icon;
155
166
}
156
167
}
157
168
+17
-2
src/applications/typeahead/view/PhabricatorTypeaheadTokenView.php
+17
-2
src/applications/typeahead/view/PhabricatorTypeaheadTokenView.php
···
10
10
11
11
private $key;
12
12
private $icon;
13
+
private $color;
13
14
private $inputName;
14
15
private $value;
15
16
private $tokenType = self::TYPE_OBJECT;
···
20
21
return id(new PhabricatorTypeaheadTokenView())
21
22
->setKey($result->getPHID())
22
23
->setIcon($result->getIcon())
24
+
->setColor($result->getColor())
23
25
->setValue($result->getDisplayName())
24
26
->setTokenType($result->getTokenType());
25
27
}
···
30
32
$token = id(new PhabricatorTypeaheadTokenView())
31
33
->setKey($handle->getPHID())
32
34
->setValue($handle->getFullName())
33
-
->setIcon(rtrim($handle->getIcon().' '.$handle->getIconColor()));
35
+
->setIcon($handle->getIcon());
34
36
35
37
if ($handle->isDisabled() ||
36
38
$handle->getStatus() == PhabricatorObjectHandleStatus::STATUS_CLOSED) {
37
39
$token->setTokenType(self::TYPE_DISABLED);
40
+
} else {
41
+
$token->setColor($handle->getTagColor());
38
42
}
39
43
40
44
return $token;
···
76
80
return $this->icon;
77
81
}
78
82
83
+
public function setColor($color) {
84
+
$this->color = $color;
85
+
return $this;
86
+
}
87
+
88
+
public function getColor() {
89
+
return $this->color;
90
+
}
91
+
79
92
public function setValue($value) {
80
93
$this->value = $value;
81
94
return $this;
···
107
120
break;
108
121
}
109
122
123
+
$classes[] = $this->getColor();
124
+
110
125
return array(
111
126
'class' => $classes,
112
127
);
···
126
141
phutil_tag(
127
142
'span',
128
143
array(
129
-
'class' => 'phui-icon-view phui-font-fa bluetext '.$icon,
144
+
'class' => 'phui-icon-view phui-font-fa '.$icon,
130
145
)),
131
146
$value,
132
147
);
+3
-2
src/applications/uiexample/examples/PHUITypeaheadExample.php
+3
-2
src/applications/uiexample/examples/PHUITypeaheadExample.php
···
24
24
->setIcon('fa-user');
25
25
26
26
$token_list[] = id(new PhabricatorTypeaheadTokenView())
27
-
->setValue(pht('Custom Object'))
28
-
->setIcon('fa-tag green');
27
+
->setValue(pht('Object with Color'))
28
+
->setIcon('fa-tag')
29
+
->setColor('green');
29
30
30
31
$token_list[] = id(new PhabricatorTypeaheadTokenView())
31
32
->setValue(pht('Function Token'))
+1
src/view/form/control/AphrontFormTokenizerControl.php
+1
src/view/form/control/AphrontFormTokenizerControl.php
···
125
125
'value' => mpull($tokens, 'getValue', 'getKey'),
126
126
'icons' => mpull($tokens, 'getIcon', 'getKey'),
127
127
'types' => mpull($tokens, 'getTokenType', 'getKey'),
128
+
'colors' => mpull($tokens, 'getColor', 'getKey'),
128
129
'limit' => $this->limit,
129
130
'username' => $username,
130
131
'placeholder' => $placeholder,
+11
-4
webroot/rsrc/js/core/Prefab.js
+11
-4
webroot/rsrc/js/core/Prefab.js
···
177
177
178
178
var icon;
179
179
var type;
180
+
var color;
180
181
if (result) {
181
182
icon = result.icon;
182
183
value = result.displayName;
183
184
type = result.tokenType;
185
+
color = result.color;
184
186
} else {
185
187
icon = config.icons[key];
186
188
type = config.types[key];
189
+
color = config.colors[key];
187
190
}
188
191
189
192
if (icon) {
190
193
icon = JX.Prefab._renderIcon(icon);
191
194
}
192
195
193
-
if (type) {
194
-
JX.DOM.alterClass(container, 'jx-tokenizer-token-' + type, true);
196
+
type = type || 'object';
197
+
JX.DOM.alterClass(container, 'jx-tokenizer-token-' + type, true);
198
+
199
+
if (color) {
200
+
JX.DOM.alterClass(container, color, true);
195
201
}
196
202
197
203
return [icon, value];
···
292
298
closed: closed,
293
299
type: fields[5],
294
300
sprite: fields[10],
295
-
tokenType: fields[11],
296
-
unique: fields[12] || false
301
+
color: fields[11],
302
+
tokenType: fields[12],
303
+
unique: fields[13] || false
297
304
};
298
305
},
299
306