@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
PHUITagColors for Objects
Summary: Provides a base set of shaded object tags for use in Phabricator.
Test Plan:
Lots of Photoshop and Chrome.
{F170252, size=full}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Differential Revision: https://secure.phabricator.com/D9737
+220
-63
+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' => '47277ca5',
10
+
'core.pkg.css' => 'c2e44da2',
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' => '652934b3',
145
+
'rsrc/css/phui/phui-tag-view.css' => '67017012',
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' => '652934b3',
790
+
'phui-tag-view-css' => '67017012',
791
791
'phui-text-css' => '23e9b4b7',
792
792
'phui-timeline-view-css' => 'bbd990d0',
793
793
'phui-workboard-view-css' => '2bf82d00',
+2
-1
src/applications/uiexample/examples/PHUITagExample.php
+2
-1
src/applications/uiexample/examples/PHUITagExample.php
+79
-6
src/infrastructure/celerity/CelerityResourceTransformer.php
+79
-6
src/infrastructure/celerity/CelerityResourceTransformer.php
···
222
222
'darkbluetext' => '#464C5C',
223
223
224
224
// Base Greens
225
-
'lightgreenborder' => '#bfdac1',
226
-
'greenborder' => '#8cb89c',
225
+
'lightgreenborder' => '#bfdac1',
226
+
'greenborder' => '#8cb89c',
227
+
'greentext' => '#3e6d35',
228
+
'lightgreenbackground' => '#e6f2e4',
227
229
228
230
// Base Red
229
-
'lightredborder' => '#f4c6c6',
230
-
'redborder' => '#eb9797',
231
+
'lightredborder' => '#f4c6c6',
232
+
'redborder' => '#eb9797',
233
+
'redtext' => '#802b2b',
234
+
'lightredbackground' => '#f5e1e1',
231
235
232
236
// Base Violet
233
-
'lightvioletborder' => '#cfbddb',
234
-
'violetborder' => '#b589ba',
237
+
'lightvioletborder' => '#cfbddb',
238
+
'violetborder' => '#b589ba',
239
+
'violettext' => '#603c73',
240
+
'lightvioletbackground' => '#e9dfee',
241
+
242
+
// Shades are a more muted set of our base colors
243
+
// better suited to blending into other UIs.
244
+
245
+
// Shade Red
246
+
'sh-lightredborder' => '#eac0c0',
247
+
'sh-redborder' => '#d1abab',
248
+
'sh-redicon' => '#c85a5a',
249
+
'sh-redtext' => '#a53737',
250
+
'sh-redbackground' => '#f7e6e6',
251
+
252
+
// Shade Orange
253
+
'sh-lightorangeborder' => '#f6d0b1',
254
+
'sh-orangeborder' => '#dbb99e',
255
+
'sh-orangeicon' => '#e78331',
256
+
'sh-orangetext' => '#ba6016',
257
+
'sh-orangebackground' => '#fbede1',
258
+
259
+
// Shade Yellow
260
+
'sh-lightyellowborder' => '#e2cfbd',
261
+
'sh-yellowborder' => '#c9b8a8',
262
+
'sh-yellowicon' => '#9b946e',
263
+
'sh-yellowtext' => '#726f56',
264
+
'sh-yellowbackground' => '#fdf3da',
265
+
266
+
// Shade Green
267
+
'sh-lightgreenborder' => '#b4ddb5',
268
+
'sh-greenborder' => '#a0c4a1',
269
+
'sh-greenicon' => '#4ca74e',
270
+
'sh-greentext' => '#326d34',
271
+
'sh-greenbackground' => '#ddefdd',
272
+
273
+
// Shade Blue
274
+
'sh-lightblueborder' => '#bfcfda',
275
+
'sh-blueborder' => '#a7b5bf',
276
+
'sh-blueicon' => '#6b748c',
277
+
'sh-bluetext' => '#464c5c',
278
+
'sh-bluebackground' => '#dee7f8',
279
+
280
+
// Shade Indigo
281
+
'sh-lightindigoborder' => '#f3c7ea',
282
+
'sh-indigoborder' => '#d5aecd',
283
+
'sh-indigoicon' => '#e26fcb',
284
+
'sh-indigotext' => '#da49be',
285
+
'sh-indigobackground' => '#fbeaf8',
286
+
287
+
// Shade Violet
288
+
'sh-lightvioletborder' => '#d5c2df',
289
+
'sh-violetborder' => '#bcabc5',
290
+
'sh-violeticon' => '#9260ad',
291
+
'sh-violettext' => '#69427f',
292
+
'sh-violetbackground' => '#efe8f3',
293
+
294
+
// Shade Grey
295
+
'sh-lightgreyborder' => '#cbcbcb',
296
+
'sh-greyborder' => '#b2b2b2',
297
+
'sh-greyicon' => '#757575',
298
+
'sh-greytext' => '#555555',
299
+
'sh-greybackground' => '#e7e7e7',
300
+
301
+
// Shade Disabled
302
+
'sh-lightdisabledborder' => '#e5e5e5',
303
+
'sh-disabledborder' => '#cbcbcb',
304
+
'sh-disabledicon' => '#bababa',
305
+
'sh-disabledtext' => '#a6a6a6',
306
+
'sh-disabledbackground' => '#f3f3f3',
307
+
235
308
);
236
309
}
237
310
+4
-4
src/view/phui/PHUITagView.php
+4
-4
src/view/phui/PHUITagView.php
···
19
19
const COLOR_WHITE = 'white';
20
20
const COLOR_BLUEGREY = 'bluegrey';
21
21
const COLOR_CHECKERED = 'checkered';
22
+
const COLOR_DISABLED = 'disabled';
22
23
23
24
const COLOR_OBJECT = 'object';
24
25
const COLOR_PERSON = 'person';
···
113
114
$color = null;
114
115
if ($this->shade) {
115
116
$classes[] = 'phui-tag-shade';
116
-
$color = 'phui-tag-shade-'.$this->shade;
117
+
$classes[] = 'phui-tag-shade-'.$this->shade;;
117
118
} else if ($this->backgroundColor) {
118
119
$color = 'phui-tag-color-'.$this->backgroundColor;
119
120
}
···
132
133
133
134
if ($this->icon) {
134
135
$icon = id(new PHUIIconView())
135
-
->setIconFont($this->icon, $this->shade);
136
+
->setIconFont($this->icon);
136
137
$classes[] = 'phui-tag-icon-view';
137
138
} else {
138
139
$icon = null;
···
218
219
self::COLOR_INDIGO,
219
220
self::COLOR_VIOLET,
220
221
self::COLOR_GREEN,
221
-
self::COLOR_BLACK,
222
222
self::COLOR_GREY,
223
-
self::COLOR_BLUEGREY,
224
223
self::COLOR_CHECKERED,
224
+
self::COLOR_DISABLED,
225
225
);
226
226
}
227
227
+132
-49
webroot/rsrc/css/phui/phui-tag-view.css
+132
-49
webroot/rsrc/css/phui/phui-tag-view.css
···
132
132
border-color: #f1f7ff;
133
133
}
134
134
135
+
a.phui-tag-view:hover
136
+
.phui-tag-core.phui-tag-color-person {
137
+
border-color: #d9ebfd;
138
+
}
139
+
140
+
a.phui-tag-view:hover
141
+
.phui-tag-core.phui-tag-color-object {
142
+
border-color: #d7d7d7;
143
+
}
144
+
145
+
/* - Shaded Tags ---------------------------------------------------------------
146
+
147
+
For object representation inside text areas and lists.
148
+
149
+
*/
150
+
135
151
.phui-tag-shade {
136
152
font-weight: normal;
137
153
}
···
139
155
.phui-tag-shade .phui-icon-view {
140
156
font-size: 12px;
141
157
top: 2px;
158
+
left: 6px;
159
+
}
160
+
161
+
.phui-tag-shade-red .phui-tag-core {
162
+
background-color: {$sh-redbackground};
163
+
border-color: {$sh-lightredborder};
164
+
color: {$sh-redtext};
142
165
}
143
166
144
-
.phui-tag-shade-bluegrey {
145
-
background-color: {$lightbluebackground};
146
-
border-color: {$lightbluetext};
147
-
color: {$bluetext};
167
+
.phui-tag-shade-red .phui-icon-view {
168
+
color: {$sh-redicon};
169
+
}
170
+
171
+
a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core {
172
+
border-color: {$sh-redborder};
173
+
}
174
+
175
+
.phui-tag-shade-orange .phui-tag-core {
176
+
background-color: {$sh-orangebackground};
177
+
border-color: {$sh-lightorangeborder};
178
+
color: {$sh-orangetext};
179
+
}
180
+
181
+
.phui-tag-shade-orange .phui-icon-view {
182
+
color: {$sh-orangeicon};
183
+
}
184
+
185
+
a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core {
186
+
border-color: {$sh-orangeborder};
187
+
}
188
+
189
+
.phui-tag-shade-yellow .phui-tag-core {
190
+
background-color: {$sh-yellowbackground};
191
+
border-color: {$sh-lightyellowborder};
192
+
color: {$sh-yellowtext};
193
+
}
194
+
195
+
.phui-tag-shade-yellow .phui-icon-view {
196
+
color: {$sh-yellowicon};
197
+
}
198
+
199
+
a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core {
200
+
border-color: {$sh-yellowborder};
201
+
}
202
+
203
+
.phui-tag-shade-blue .phui-tag-core {
204
+
background-color: {$sh-bluebackground};
205
+
border-color: {$sh-lightblueborder};
206
+
color: {$sh-bluetext};
207
+
}
208
+
209
+
.phui-tag-shade-blue .phui-icon-view {
210
+
color: {$sh-blueicon};
211
+
}
212
+
213
+
a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core {
214
+
border-color: {$sh-blueborder};
148
215
}
149
216
150
-
.phui-tag-shade-red {
151
-
background-color: {$lightred};
152
-
border-color: {$red};
153
-
color: {$red}
217
+
.phui-tag-shade-indigo .phui-tag-core {
218
+
background-color: {$sh-indigobackground};
219
+
border-color: {$sh-lightindigoborder};
220
+
color: {$sh-indigotext};
221
+
}
222
+
223
+
.phui-tag-shade-indigo .phui-icon-view {
224
+
color: {$sh-indigoicon};
225
+
}
226
+
227
+
a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core {
228
+
border-color: {$sh-indigoborder};
229
+
}
230
+
231
+
.phui-tag-shade-green .phui-tag-core {
232
+
background-color: {$sh-greenbackground};
233
+
border-color: {$sh-lightgreenborder};
234
+
color: {$sh-greentext};
154
235
}
155
236
156
-
.phui-tag-shade-orange {
157
-
background-color: {$lightorange};
158
-
border-color: {$orange};
159
-
color: {$orange};
237
+
.phui-tag-shade-green .phui-icon-view {
238
+
color: {$sh-greenicon};
160
239
}
161
240
162
-
.phui-tag-shade-yellow {
163
-
background-color: {$lightyellow};
164
-
border-color: {$yellow};
165
-
color: {$yellow};
241
+
a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core {
242
+
border-color: {$sh-greenborder};
166
243
}
167
244
168
-
.phui-tag-shade-blue {
169
-
background-color: {$lightblue};
170
-
border-color: {$blue};
171
-
color: {$blue};
245
+
.phui-tag-shade-violet .phui-tag-core {
246
+
background-color: {$sh-violetbackground};
247
+
border-color: {$sh-lightvioletborder};
248
+
color: {$sh-violettext};
172
249
}
173
250
174
-
.phui-tag-shade-indigo {
175
-
background-color: {$lightindigo};
176
-
border-color: {$indigo};
177
-
color: {$indigo};
251
+
.phui-tag-shade-violet .phui-icon-view {
252
+
color: {$sh-violeticon};
178
253
}
179
254
180
-
.phui-tag-shade-green {
181
-
background-color: {$lightgreen};
182
-
border-color: {$green};
183
-
color: {$green};
255
+
a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core {
256
+
border-color: {$sh-violetborder};
184
257
}
185
258
186
-
.phui-tag-shade-violet {
187
-
background-color: {$lightviolet};
188
-
border-color: {$violet};
189
-
color: {$violet};
259
+
.phui-tag-shade-grey .phui-tag-core {
260
+
background-color: {$sh-greybackground};
261
+
border-color: {$sh-lightgreyborder};
262
+
color: {$sh-greytext};
190
263
}
191
264
192
-
.phui-tag-shade-black {
193
-
background-color: {$darkgreybackground};
194
-
border-color: #333333;
265
+
.phui-tag-shade-grey .phui-icon-view {
266
+
color: {$sh-greyicon};
195
267
}
196
268
197
-
.phui-tag-shade-grey {
198
-
background-color: {$lightgreybackground};
199
-
border-color: {$lightgreytext};
200
-
color: {$lightgreytext};
269
+
a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core {
270
+
border-color: {$sh-greyborder};
201
271
}
202
272
203
-
.phui-tag-shade-checkered {
204
-
background: url(/rsrc/image/checker_light.png);
273
+
.phui-tag-shade-checkered .phui-tag-core {
274
+
background: url(/rsrc/image/checker_lighter.png);
205
275
border-style: dashed;
206
-
border-color: {$greyborder};
207
-
color: black;
276
+
border-color: {$sh-greyborder};
277
+
color: {$sh-greytext};
208
278
text-shadow: 1px 1px #fff;
209
279
}
210
280
211
-
a.phui-tag-view:hover
212
-
.phui-tag-core.phui-tag-color-person {
213
-
border-color: #d9ebfd;
281
+
.phui-tag-shade-checkered .phui-icon-view {
282
+
color: {$sh-greyicon};
283
+
}
284
+
285
+
a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core {
286
+
border-style: solid;
287
+
border-color: {$sh-greyborder};
214
288
}
215
289
216
-
a.phui-tag-view:hover
217
-
.phui-tag-core.phui-tag-color-object {
218
-
border-color: #d7d7d7;
290
+
.phui-tag-shade-disabled .phui-tag-core {
291
+
background-color: {$sh-disabledbackground};
292
+
border-color: {$sh-lightdisabledborder};
293
+
color: {$sh-disabledtext};
294
+
}
295
+
296
+
.phui-tag-shade-disabled .phui-icon-view {
297
+
color: {$sh-disabledicon};
298
+
}
299
+
300
+
a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core {
301
+
border-color: {$sh-disabledborder};
219
302
}