@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
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
+139
-12
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
7
7
return array(
8
8
'names' =>
9
9
array(
10
-
'core.pkg.css' => 'fc4bf764',
10
+
'core.pkg.css' => 'd4378b92',
11
11
'core.pkg.js' => '8c184823',
12
12
'darkconsole.pkg.js' => 'df001cab',
13
13
'differential.pkg.css' => '4a93db37',
···
142
142
'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
143
143
'rsrc/css/phui/phui-spacing.css' => '042804d6',
144
144
'rsrc/css/phui/phui-status.css' => '2f562399',
145
-
'rsrc/css/phui/phui-tag-view.css' => 'ef0a9ca8',
145
+
'rsrc/css/phui/phui-tag-view.css' => '652934b3',
146
146
'rsrc/css/phui/phui-text.css' => '23e9b4b7',
147
147
'rsrc/css/phui/phui-timeline-view.css' => 'bbd990d0',
148
148
'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
···
787
787
'phui-remarkup-preview-css' => '19ad512b',
788
788
'phui-spacing-css' => '042804d6',
789
789
'phui-status-list-view-css' => '2f562399',
790
-
'phui-tag-view-css' => 'ef0a9ca8',
790
+
'phui-tag-view-css' => '652934b3',
791
791
'phui-text-css' => '23e9b4b7',
792
792
'phui-timeline-view-css' => 'bbd990d0',
793
793
'phui-workboard-view-css' => '2bf82d00',
+20
-1
src/applications/uiexample/examples/PHUITagExample.php
+20
-1
src/applications/uiexample/examples/PHUITagExample.php
···
156
156
->appendChild($icons)
157
157
->addPadding(PHUI::PADDING_LARGE);
158
158
159
+
$shades = PHUITagView::getShades();
160
+
$tags = array();
161
+
foreach ($shades as $shade) {
162
+
$tags[] = id(new PHUITagView())
163
+
->setType(PHUITagView::TYPE_OBJECT)
164
+
->setShade($shade)
165
+
->setIcon('fa-tags')
166
+
->setName(ucwords($shade));
167
+
$tags[] = hsprintf('<br /><br />');
168
+
}
169
+
170
+
$content4 = id(new PHUIBoxView())
171
+
->appendChild($tags)
172
+
->addPadding(PHUI::PADDING_LARGE);
173
+
159
174
$box = id(new PHUIObjectBoxView())
160
175
->setHeaderText('Inline')
161
176
->appendChild($intro);
···
172
187
->setHeaderText('Icons')
173
188
->appendChild($content3);
174
189
175
-
return array($box, $box1, $box2, $box3);
190
+
$box4 = id(new PHUIObjectBoxView())
191
+
->setHeaderText('Shades')
192
+
->appendChild($content4);
193
+
194
+
return array($box, $box1, $box2, $box3, $box4);
176
195
}
177
196
}
+6
-3
src/view/phui/PHUIIconView.php
+6
-3
src/view/phui/PHUIIconView.php
···
20
20
private $spriteIcon;
21
21
private $spriteSheet;
22
22
private $iconFont;
23
+
private $iconColor;
23
24
24
25
public function setHref($href) {
25
26
$this->href = $href;
···
51
52
return $this;
52
53
}
53
54
54
-
public function setIconFont($icon) {
55
+
public function setIconFont($icon, $color = null) {
55
56
$this->iconFont = $icon;
57
+
$this->iconColor = $color;
56
58
return $this;
57
59
}
58
60
···
75
77
require_celerity_resource('sprite-'.$this->spriteSheet.'-css');
76
78
$classes[] = 'sprite-'.$this->spriteSheet;
77
79
$classes[] = $this->spriteSheet.'-'.$this->spriteIcon;
78
-
79
80
} else if ($this->iconFont) {
80
81
require_celerity_resource('phui-font-icon-base-css');
81
82
require_celerity_resource('font-fontawesome');
82
83
$classes[] = 'phui-font-fa';
83
84
$classes[] = $this->iconFont;
84
-
85
+
if ($this->iconColor) {
86
+
$classes[] = $this->iconColor;
87
+
}
85
88
} else {
86
89
if ($this->headSize) {
87
90
$classes[] = $this->headSize;
+34
-5
src/view/phui/PHUITagView.php
+34
-5
src/view/phui/PHUITagView.php
···
5
5
const TYPE_PERSON = 'person';
6
6
const TYPE_OBJECT = 'object';
7
7
const TYPE_STATE = 'state';
8
+
const TYPE_SHADE = 'shade';
8
9
9
10
const COLOR_RED = 'red';
10
11
const COLOR_ORANGE = 'orange';
···
16
17
const COLOR_BLACK = 'black';
17
18
const COLOR_GREY = 'grey';
18
19
const COLOR_WHITE = 'white';
20
+
const COLOR_BLUEGREY = 'bluegrey';
21
+
const COLOR_CHECKERED = 'checkered';
19
22
20
23
const COLOR_OBJECT = 'object';
21
24
const COLOR_PERSON = 'person';
···
30
33
private $external;
31
34
private $id;
32
35
private $icon;
36
+
private $shade;
33
37
34
38
public function setID($id) {
35
39
$this->id = $id;
···
43
47
public function setType($type) {
44
48
$this->type = $type;
45
49
switch ($type) {
50
+
case self::TYPE_SHADE:
51
+
break;
46
52
case self::TYPE_OBJECT:
47
53
$this->setBackgroundColor(self::COLOR_OBJECT);
48
54
break;
···
53
59
return $this;
54
60
}
55
61
62
+
public function setShade($shade) {
63
+
$this->shade = $shade;
64
+
return $this;
65
+
}
66
+
56
67
public function setDotColor($dot_color) {
57
68
$this->dotColor = $dot_color;
58
69
return $this;
···
84
95
}
85
96
86
97
public function setIcon($icon) {
87
-
$icon_view = id(new PHUIIconView())
88
-
->setIconFont($icon);
89
-
$this->icon = $icon_view;
98
+
$this->icon = $icon;
90
99
return $this;
91
100
}
92
101
···
102
111
);
103
112
104
113
$color = null;
105
-
if ($this->backgroundColor) {
114
+
if ($this->shade) {
115
+
$classes[] = 'phui-tag-shade';
116
+
$color = 'phui-tag-shade-'.$this->shade;
117
+
} else if ($this->backgroundColor) {
106
118
$color = 'phui-tag-color-'.$this->backgroundColor;
107
119
}
108
120
···
119
131
}
120
132
121
133
if ($this->icon) {
122
-
$icon = $this->icon;
134
+
$icon = id(new PHUIIconView())
135
+
->setIconFont($this->icon, $this->shade);
123
136
$classes[] = 'phui-tag-icon-view';
124
137
} else {
125
138
$icon = null;
···
193
206
194
207
self::COLOR_OBJECT,
195
208
self::COLOR_PERSON,
209
+
);
210
+
}
211
+
212
+
public static function getShades() {
213
+
return array(
214
+
self::COLOR_RED,
215
+
self::COLOR_ORANGE,
216
+
self::COLOR_YELLOW,
217
+
self::COLOR_BLUE,
218
+
self::COLOR_INDIGO,
219
+
self::COLOR_VIOLET,
220
+
self::COLOR_GREEN,
221
+
self::COLOR_BLACK,
222
+
self::COLOR_GREY,
223
+
self::COLOR_BLUEGREY,
224
+
self::COLOR_CHECKERED,
196
225
);
197
226
}
198
227
+76
webroot/rsrc/css/phui/phui-tag-view.css
+76
webroot/rsrc/css/phui/phui-tag-view.css
···
132
132
border-color: #f1f7ff;
133
133
}
134
134
135
+
.phui-tag-shade {
136
+
font-weight: normal;
137
+
}
138
+
139
+
.phui-tag-shade .phui-icon-view {
140
+
font-size: 12px;
141
+
top: 2px;
142
+
}
143
+
144
+
.phui-tag-shade-bluegrey {
145
+
background-color: {$lightbluebackground};
146
+
border-color: {$lightbluetext};
147
+
color: {$bluetext};
148
+
}
149
+
150
+
.phui-tag-shade-red {
151
+
background-color: {$lightred};
152
+
border-color: {$red};
153
+
color: {$red}
154
+
}
155
+
156
+
.phui-tag-shade-orange {
157
+
background-color: {$lightorange};
158
+
border-color: {$orange};
159
+
color: {$orange};
160
+
}
161
+
162
+
.phui-tag-shade-yellow {
163
+
background-color: {$lightyellow};
164
+
border-color: {$yellow};
165
+
color: {$yellow};
166
+
}
167
+
168
+
.phui-tag-shade-blue {
169
+
background-color: {$lightblue};
170
+
border-color: {$blue};
171
+
color: {$blue};
172
+
}
173
+
174
+
.phui-tag-shade-indigo {
175
+
background-color: {$lightindigo};
176
+
border-color: {$indigo};
177
+
color: {$indigo};
178
+
}
179
+
180
+
.phui-tag-shade-green {
181
+
background-color: {$lightgreen};
182
+
border-color: {$green};
183
+
color: {$green};
184
+
}
185
+
186
+
.phui-tag-shade-violet {
187
+
background-color: {$lightviolet};
188
+
border-color: {$violet};
189
+
color: {$violet};
190
+
}
191
+
192
+
.phui-tag-shade-black {
193
+
background-color: {$darkgreybackground};
194
+
border-color: #333333;
195
+
}
196
+
197
+
.phui-tag-shade-grey {
198
+
background-color: {$lightgreybackground};
199
+
border-color: {$lightgreytext};
200
+
color: {$lightgreytext};
201
+
}
202
+
203
+
.phui-tag-shade-checkered {
204
+
background: url(/rsrc/image/checker_light.png);
205
+
border-style: dashed;
206
+
border-color: {$greyborder};
207
+
color: black;
208
+
text-shadow: 1px 1px #fff;
209
+
}
210
+
135
211
a.phui-tag-view:hover
136
212
.phui-tag-core.phui-tag-color-person {
137
213
border-color: #d9ebfd;