@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
When a dropdown menu would render in a way that hides it offscreen, try a different alignment
Summary:
Depends on D20382. Ref T13272. When something near the edge of the screen has a dropdown menu, we currently may render the menu offscreen.
Instead, keep the menu onscreen.
(This is happening because I'm adding dropdown menus to tab query panels.)
Test Plan:
Before:
{F6363339}
After:
{F6363340}
Reviewers: amckinley
Reviewed By: amckinley
Maniphest Tasks: T13272
Differential Revision: https://secure.phabricator.com/D20383
+39
-11
+10
-10
resources/celerity/map.php
+10
-10
resources/celerity/map.php
···
10
10
'conpherence.pkg.css' => '3c8a0668',
11
11
'conpherence.pkg.js' => '020aebcf',
12
12
'core.pkg.css' => '2d4810eb',
13
-
'core.pkg.js' => 'a568e834',
13
+
'core.pkg.js' => 'c783d8f6',
14
14
'differential.pkg.css' => '8d8360fb',
15
15
'differential.pkg.js' => '67e02996',
16
16
'diffusion.pkg.css' => '42c75c37',
···
518
518
'rsrc/js/phuix/PHUIXActionView.js' => 'aaa08f3b',
519
519
'rsrc/js/phuix/PHUIXAutocomplete.js' => '2fbe234d',
520
520
'rsrc/js/phuix/PHUIXButtonView.js' => '55a24e84',
521
-
'rsrc/js/phuix/PHUIXDropdownMenu.js' => 'bdce4d78',
521
+
'rsrc/js/phuix/PHUIXDropdownMenu.js' => '7acfd98b',
522
522
'rsrc/js/phuix/PHUIXExample.js' => 'c2c500a7',
523
523
'rsrc/js/phuix/PHUIXFormControl.js' => '38c1f3fb',
524
524
'rsrc/js/phuix/PHUIXIconView.js' => 'a5257c4e',
···
874
874
'phuix-action-view' => 'aaa08f3b',
875
875
'phuix-autocomplete' => '2fbe234d',
876
876
'phuix-button-view' => '55a24e84',
877
-
'phuix-dropdown-menu' => 'bdce4d78',
877
+
'phuix-dropdown-menu' => '7acfd98b',
878
878
'phuix-form-control-view' => '38c1f3fb',
879
879
'phuix-icon-view' => 'a5257c4e',
880
880
'policy-css' => 'ceb56a08',
···
1563
1563
'javelin-install',
1564
1564
'javelin-dom',
1565
1565
),
1566
+
'7acfd98b' => array(
1567
+
'javelin-install',
1568
+
'javelin-util',
1569
+
'javelin-dom',
1570
+
'javelin-vector',
1571
+
'javelin-stratcom',
1572
+
),
1566
1573
'7ad020a5' => array(
1567
1574
'javelin-behavior',
1568
1575
'javelin-dom',
···
1921
1928
'javelin-behavior',
1922
1929
'javelin-uri',
1923
1930
'phabricator-notification',
1924
-
),
1925
-
'bdce4d78' => array(
1926
-
'javelin-install',
1927
-
'javelin-util',
1928
-
'javelin-dom',
1929
-
'javelin-vector',
1930
-
'javelin-stratcom',
1931
1931
),
1932
1932
'bde53589' => array(
1933
1933
'phui-inline-comment-view-css',
+29
-1
webroot/rsrc/js/phuix/PHUIXDropdownMenu.js
+29
-1
webroot/rsrc/js/phuix/PHUIXDropdownMenu.js
···
198
198
var v = JX.$V(this._node);
199
199
var d = JX.Vector.getDim(this._node);
200
200
201
-
switch (this.getAlign()) {
201
+
var alignments = ['right', 'left'];
202
+
var disallow = {};
203
+
var margin = 8;
204
+
205
+
// If "right" alignment would leave us with the dropdown near or off the
206
+
// left side of the screen, disallow it.
207
+
var x_min = ((v.x + d.x) - m.x);
208
+
if (x_min < margin) {
209
+
disallow.right = true;
210
+
}
211
+
212
+
var align = this.getAlign();
213
+
214
+
// If the position disallows the configured alignment, try the next
215
+
// best alignment instead.
216
+
217
+
// If no alignment is allowed, we'll stick with the original alignment
218
+
// and accept that it isn't going to render very nicely. This can happen
219
+
// if the browser window is very, very small.
220
+
if (align in disallow) {
221
+
for (var ii = 0; ii < alignments.length; ii++) {
222
+
if (!(alignments[ii] in disallow)) {
223
+
align = alignments[ii];
224
+
break;
225
+
}
226
+
}
227
+
}
228
+
229
+
switch (align) {
202
230
case 'right':
203
231
v = v.add(d)
204
232
.add(JX.$V(-m.x, 0));