@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
Use ActionList-based dropdowns in Policy
Summary: See previous diffs. These mostly look reasonable with shared CSS.
Test Plan: {F150431}
Reviewers: chad, btrahan
Reviewed By: btrahan
Subscribers: epriestley
Differential Revision: https://secure.phabricator.com/D8975
+67
-47
+7
-7
resources/sprite/manifest/status.json
+7
-7
resources/sprite/manifest/status.json
···
263
263
},
264
264
"status-policy-admin-white" : {
265
265
"name" : "status-policy-admin-white",
266
-
"rule" : ".status-policy-admin-white, .dropdown-menu-item:hover .status-policy-admin",
266
+
"rule" : ".status-policy-admin-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-admin",
267
267
"hash" : "4b16ec5170bc30fb688f7e086e61a7f1"
268
268
},
269
269
"status-policy-all" : {
···
273
273
},
274
274
"status-policy-all-white" : {
275
275
"name" : "status-policy-all-white",
276
-
"rule" : ".status-policy-all-white, .dropdown-menu-item:hover .status-policy-all",
276
+
"rule" : ".status-policy-all-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-all",
277
277
"hash" : "24ed12bf6f58c21a82be125ace2ff0d0"
278
278
},
279
279
"status-policy-custom" : {
···
283
283
},
284
284
"status-policy-custom-white" : {
285
285
"name" : "status-policy-custom-white",
286
-
"rule" : ".status-policy-custom-white, .dropdown-menu-item:hover .status-policy-custom",
286
+
"rule" : ".status-policy-custom-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-custom",
287
287
"hash" : "ff8b4cbe21f3b4254f343fffc170ef4b"
288
288
},
289
289
"status-policy-elist" : {
···
303
303
},
304
304
"status-policy-noone-white" : {
305
305
"name" : "status-policy-noone-white",
306
-
"rule" : ".status-policy-noone-white, .dropdown-menu-item:hover .status-policy-noone",
306
+
"rule" : ".status-policy-noone-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-noone",
307
307
"hash" : "80fb9b153fec4d8136242c5ddc2d8e77"
308
308
},
309
309
"status-policy-project" : {
···
313
313
},
314
314
"status-policy-project-white" : {
315
315
"name" : "status-policy-project-white",
316
-
"rule" : ".status-policy-project-white, .dropdown-menu-item:hover .status-policy-project",
316
+
"rule" : ".status-policy-project-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-project",
317
317
"hash" : "ac2b6f19edb8d6c40f0bcb3fd477a067"
318
318
},
319
319
"status-policy-public" : {
···
323
323
},
324
324
"status-policy-public-white" : {
325
325
"name" : "status-policy-public-white",
326
-
"rule" : ".status-policy-public-white, .dropdown-menu-item:hover .status-policy-public",
326
+
"rule" : ".status-policy-public-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-public",
327
327
"hash" : "cf809ca49eefed5375c2ea081e721971"
328
328
},
329
329
"status-policy-unknown" : {
···
333
333
},
334
334
"status-policy-unknown-white" : {
335
335
"name" : "status-policy-unknown-white",
336
-
"rule" : ".status-policy-unknown-white, .dropdown-menu-item:hover .status-policy-unknown",
336
+
"rule" : ".status-policy-unknown-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-unknown",
337
337
"hash" : "98985bfa005672c4b88feaf88cfa72bc"
338
338
},
339
339
"status-policy-user" : {
+9
-14
src/infrastructure/celerity/CeleritySpriteGenerator.php
+9
-14
src/infrastructure/celerity/CeleritySpriteGenerator.php
···
558
558
559
559
$sprites = array();
560
560
$prefix = 'status_';
561
+
562
+
$pre_rule = ', .phuix-dropdown-menu .phabricator-action-view:hover ';
561
563
$extra_css = array(
562
-
'policy-custom-white' =>
563
-
', .dropdown-menu-item:hover .status-policy-custom',
564
-
'policy-all-white' =>
565
-
', .dropdown-menu-item:hover .status-policy-all',
566
-
'policy-unknown-white' =>
567
-
', .dropdown-menu-item:hover .status-policy-unknown',
568
-
'policy-admin-white' =>
569
-
', .dropdown-menu-item:hover .status-policy-admin',
570
-
'policy-public-white' =>
571
-
', .dropdown-menu-item:hover .status-policy-public',
572
-
'policy-project-white' =>
573
-
', .dropdown-menu-item:hover .status-policy-project',
574
-
'policy-noone-white' =>
575
-
', .dropdown-menu-item:hover .status-policy-noone',
564
+
'policy-custom-white' => $pre_rule.'.status-policy-custom',
565
+
'policy-all-white' => $pre_rule.'.status-policy-all',
566
+
'policy-unknown-white' => $pre_rule.'.status-policy-unknown',
567
+
'policy-admin-white' => $pre_rule.'.status-policy-admin',
568
+
'policy-public-white' => $pre_rule.'.status-policy-public',
569
+
'policy-project-white' => $pre_rule.'.status-policy-project',
570
+
'policy-noone-white' => $pre_rule.'.status-policy-noone',
576
571
);
577
572
578
573
foreach ($icons as $icon) {
+4
webroot/rsrc/css/layout/phabricator-action-list-view.css
+4
webroot/rsrc/css/layout/phabricator-action-list-view.css
+7
-7
webroot/rsrc/css/sprite-status.css
+7
-7
webroot/rsrc/css/sprite-status.css
···
222
222
background-position: 0px -75px;
223
223
}
224
224
225
-
.status-policy-admin-white, .dropdown-menu-item:hover .status-policy-admin {
225
+
.status-policy-admin-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-admin {
226
226
background-position: -15px -75px;
227
227
}
228
228
···
230
230
background-position: -30px -75px;
231
231
}
232
232
233
-
.status-policy-all-white, .dropdown-menu-item:hover .status-policy-all {
233
+
.status-policy-all-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-all {
234
234
background-position: -45px -75px;
235
235
}
236
236
···
238
238
background-position: -60px -75px;
239
239
}
240
240
241
-
.status-policy-custom-white, .dropdown-menu-item:hover .status-policy-custom {
241
+
.status-policy-custom-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-custom {
242
242
background-position: -75px -75px;
243
243
}
244
244
···
254
254
background-position: -120px -75px;
255
255
}
256
256
257
-
.status-policy-noone-white, .dropdown-menu-item:hover .status-policy-noone {
257
+
.status-policy-noone-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-noone {
258
258
background-position: -135px -75px;
259
259
}
260
260
···
262
262
background-position: 0px -90px;
263
263
}
264
264
265
-
.status-policy-project-white, .dropdown-menu-item:hover .status-policy-project {
265
+
.status-policy-project-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-project {
266
266
background-position: -15px -90px;
267
267
}
268
268
···
270
270
background-position: -30px -90px;
271
271
}
272
272
273
-
.status-policy-public-white, .dropdown-menu-item:hover .status-policy-public {
273
+
.status-policy-public-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-public {
274
274
background-position: -45px -90px;
275
275
}
276
276
···
278
278
background-position: -60px -90px;
279
279
}
280
280
281
-
.status-policy-unknown-white, .dropdown-menu-item:hover .status-policy-unknown {
281
+
.status-policy-unknown-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-unknown {
282
282
background-position: -75px -90px;
283
283
}
284
284
webroot/rsrc/image/sprite-status-X2.png
webroot/rsrc/image/sprite-status-X2.png
This is a binary file and will not be displayed.
webroot/rsrc/image/sprite-status.png
webroot/rsrc/image/sprite-status.png
This is a binary file and will not be displayed.
+22
-14
webroot/rsrc/js/application/policy/behavior-policy-control.js
+22
-14
webroot/rsrc/js/application/policy/behavior-policy-control.js
···
3
3
* @requires javelin-behavior
4
4
* javelin-dom
5
5
* javelin-util
6
-
* phabricator-dropdown-menu
7
-
* phabricator-menu-item
6
+
* phuix-dropdown-menu
7
+
* phuix-action-list-view
8
+
* phuix-action-view
8
9
* javelin-workflow
9
10
* @javelin
10
11
*/
···
13
14
var input = JX.$(config.inputID);
14
15
var value = config.value;
15
16
16
-
var menu = new JX.PhabricatorDropdownMenu(control)
17
-
.setWidth(260);
18
-
19
-
menu.toggleAlignDropdownRight(false);
17
+
var menu = new JX.PHUIXDropdownMenu(control)
18
+
.setWidth(260)
19
+
.setAlign('left');
20
20
21
21
menu.listen('open', function() {
22
-
menu.clear();
22
+
var list = new JX.PHUIXActionListView();
23
23
24
24
for (var ii = 0; ii < config.groups.length; ii++) {
25
25
var group = config.groups[ii];
26
26
27
-
var header = new JX.PhabricatorMenuItem(config.labels[group], JX.bag);
28
-
header.setDisabled(true);
29
-
menu.addItem(header);
27
+
list.addItem(
28
+
new JX.PHUIXActionView()
29
+
.setName(config.labels[group])
30
+
.setDisabled(true));
30
31
31
32
for (var jj = 0; jj < config.order[group].length; jj++) {
32
33
var phid = config.order[group][jj];
···
52
53
onselect = JX.bind(null, select_policy, phid);
53
54
}
54
55
55
-
var item = new JX.PhabricatorMenuItem(
56
-
render_option(phid, true),
57
-
onselect);
56
+
var option = config.options[phid];
57
+
var item = new JX.PHUIXActionView()
58
+
.setName(option.name)
59
+
.setIcon(option.icon, 'status')
60
+
.setHandler(JX.bind(null, function(fn, e) {
61
+
e.prevent();
62
+
menu.close();
63
+
fn();
64
+
}, onselect));
58
65
59
66
if (phid == value) {
60
67
item.setSelected(true);
61
68
}
62
69
63
-
menu.addItem(item);
70
+
list.addItem(item);
64
71
}
65
72
}
66
73
74
+
menu.setContent(list.getNode());
67
75
});
68
76
69
77
+18
-5
webroot/rsrc/js/phuix/PHUIXActionView.js
+18
-5
webroot/rsrc/js/phuix/PHUIXActionView.js
···
12
12
_node: null,
13
13
_name: null,
14
14
_icon: 'none',
15
+
_iconSheet: 'icons',
15
16
_disabled: false,
16
17
_handler: null,
18
+
_selected: false,
17
19
18
20
_iconNode: null,
19
21
_nameNode: null,
···
30
32
return this;
31
33
},
32
34
33
-
getDisabled: function() {
34
-
return this._disabled;
35
+
setSelected: function(selected) {
36
+
this._selected = selected;
37
+
JX.DOM.alterClass(
38
+
this.getNode(),
39
+
'phabricator-action-view-selected',
40
+
selected);
41
+
42
+
return this;
35
43
},
36
44
37
45
setName: function(name) {
···
46
54
return this;
47
55
},
48
56
49
-
setIcon: function(icon) {
57
+
setIcon: function(icon, sheet) {
50
58
this._icon = icon;
59
+
this._iconSheet = sheet || this._iconSheet;
51
60
this._buildIconNode(true);
52
61
return this;
53
62
},
···
78
87
_buildIconNode: function(dirty) {
79
88
if (!this._iconNode || dirty) {
80
89
var attr = {
81
-
className: 'phui-icon-view sprite-icons phabricator-action-view-icon'
90
+
className: [
91
+
'phui-icon-view',
92
+
'phabricator-action-view-icon',
93
+
'sprite-' + this._iconSheet
94
+
].join(' ')
82
95
};
83
96
var node = JX.$N('span', attr);
84
97
85
-
var icon_class = 'icons-' + this._icon;
98
+
var icon_class = this._iconSheet + '-' + this._icon;
86
99
if (this._disabled) {
87
100
icon_class = icon_class + '-grey';
88
101
}