@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 Conpherence
Summary:
See D8966, D8973. Replace PhabricatorDropdownMenu with PHUIXDropdownMenu.
These new menus look weird on mobile because all action lists pick up a bunch of weird styles on mobile and we're now reusing the CSS.
Test Plan:
{F150425}
{F150426}
Reviewers: btrahan, chad
Reviewed By: btrahan
Subscribers: epriestley
Differential Revision: https://secure.phabricator.com/D8974
+52
-29
+5
src/applications/conpherence/view/ConpherenceLayoutView.php
+5
src/applications/conpherence/view/ConpherenceLayoutView.php
···
81
81
'widgetRegistry' => array(
82
82
'conpherence-message-pane' => array(
83
83
'name' => pht('Thread'),
84
+
'icon' => 'comment',
84
85
'deviceOnly' => true,
85
86
'hasCreate' => false
86
87
),
87
88
'widgets-people' => array(
88
89
'name' => pht('Participants'),
90
+
'icon' => 'user',
89
91
'deviceOnly' => false,
90
92
'hasCreate' => true,
91
93
'createData' => array(
···
96
98
),
97
99
'widgets-files' => array(
98
100
'name' => pht('Files'),
101
+
'icon' => 'file',
99
102
'deviceOnly' => false,
100
103
'hasCreate' => false
101
104
),
102
105
'widgets-calendar' => array(
103
106
'name' => pht('Calendar'),
107
+
'icon' => 'calendar',
104
108
'deviceOnly' => false,
105
109
'hasCreate' => true,
106
110
'createData' => array(
···
111
115
),
112
116
'widgets-settings' => array(
113
117
'name' => pht('Settings'),
118
+
'icon' => 'wrench',
114
119
'deviceOnly' => false,
115
120
'hasCreate' => false
116
121
),
-5
webroot/rsrc/css/application/conpherence/widget-pane.css
-5
webroot/rsrc/css/application/conpherence/widget-pane.css
+6
webroot/rsrc/css/layout/phabricator-action-list-view.css
+6
webroot/rsrc/css/layout/phabricator-action-list-view.css
···
11
11
display: none;
12
12
}
13
13
14
+
.device .phuix-dropdown-menu .phabricator-action-list-view {
15
+
/* When an action list view appears inside a dropdown menu, don't hide it
16
+
by default. */
17
+
display: block;
18
+
}
19
+
14
20
.device .phabricator-action-list-view.phabricator-action-list-toggle {
15
21
display: block;
16
22
}
+36
-23
webroot/rsrc/js/application/conpherence/behavior-widget-pane.js
+36
-23
webroot/rsrc/js/application/conpherence/behavior-widget-pane.js
···
6
6
* javelin-util
7
7
* phabricator-notification
8
8
* javelin-behavior-device
9
-
* phabricator-dropdown-menu
10
-
* phabricator-menu-item
9
+
* phuix-dropdown-menu
10
+
* phuix-action-list-view
11
+
* phuix-action-view
11
12
* @provides javelin-behavior-conpherence-widget-pane
12
13
*/
13
14
···
37
38
return;
38
39
}
39
40
JX.DOM.show(device_header);
40
-
var device_menu = new JX.PhabricatorDropdownMenu(device_header);
41
+
var device_menu = new JX.PHUIXDropdownMenu(device_header);
41
42
data.deviceMenu = true;
42
43
_buildWidgetSelector(device_menu, data);
43
44
};
···
51
52
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
52
53
var widget_pane = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
53
54
var widget_header = JX.DOM.find(widget_pane, 'a', 'widgets-selector');
54
-
var menu = new JX.PhabricatorDropdownMenu(widget_header);
55
-
menu.toggleAlignDropdownRight(false);
55
+
56
+
var menu = new JX.PHUIXDropdownMenu(widget_header);
57
+
menu
58
+
.setAlign('left')
59
+
.setOffsetY(4);
60
+
56
61
data.deviceMenu = false;
57
62
_buildWidgetSelector(menu, data);
58
63
};
···
64
69
*/
65
70
var _buildWidgetSelector = function (menu, data) {
66
71
_loadedWidgetsID = data.threadID;
72
+
73
+
var list = new JX.PHUIXActionListView();
74
+
var map = {};
75
+
67
76
var widgets = config.widgetRegistry;
68
77
for (var widget in widgets) {
69
78
var widget_data = widgets[widget];
70
79
if (widget_data.deviceOnly && data.deviceMenu === false) {
71
80
continue;
72
81
}
73
-
menu.addItem(new JX.PhabricatorMenuItem(
74
-
widget_data.name,
75
-
JX.bind(null, toggleWidget, { widget : widget }),
76
-
'#'
77
-
).setDisabled(widget == data.widget));
82
+
83
+
var item = new JX.PHUIXActionView()
84
+
.setIcon(widget_data.icon || 'none')
85
+
.setName(widget_data.name)
86
+
.setHandler(
87
+
JX.bind(null, function(widget, e) {
88
+
toggleWidget({widget: widget});
89
+
e.prevent();
90
+
menu.close();
91
+
}, widget));
92
+
93
+
map[widget_data.name] = item;
94
+
list.addItem(item);
78
95
}
79
96
80
-
menu.listen(
81
-
'open',
82
-
JX.bind(menu, function () {
83
-
for (var ii = 0; ii < this._items.length; ii++) {
84
-
var item = this._items[ii];
85
-
var name = item.getName();
86
-
if (name == _selectedWidgetName) {
87
-
item.setDisabled(true);
88
-
} else {
89
-
item.setDisabled(false);
90
-
}
91
-
}
92
-
}));
97
+
menu
98
+
.setWidth(200)
99
+
.setContent(list.getNode());
100
+
101
+
menu.listen('open', function() {
102
+
for (var k in map) {
103
+
map[k].setDisabled((k == _selectedWidgetName));
104
+
}
105
+
});
93
106
};
94
107
95
108
/**
+5
-1
webroot/rsrc/js/phuix/PHUIXDropdownMenu.js
+5
-1
webroot/rsrc/js/phuix/PHUIXDropdownMenu.js
···
44
44
45
45
properties: {
46
46
width: null,
47
-
align: 'right'
47
+
align: 'right',
48
+
offsetX: 0,
49
+
offsetY: 0
48
50
},
49
51
50
52
members: {
···
170
172
v = v.add(0, d.y);
171
173
break;
172
174
}
175
+
176
+
v = v.add(this.getOffsetX(), this.getOffsetY());
173
177
174
178
v.setPos(this._menu);
175
179
}