@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
On tablet/mobile, open the datepicker control in the center of the screen and mask the background
Summary:
Ref T11816. We currently try to expand the picker control from the little calendar icon. This works alright on desktop, but not great on tablet/mobile.
On tablet/mobile, center the control on screen instead. Also, mask the background since it can get a bit busy because we can't really control what's under the control anymore.
Finally, move the little popup thing around if the user resizes the window.
Test Plan: {F1922773}
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T11816
Differential Revision: https://secure.phabricator.com/D16866
+65
-24
+14
-14
resources/celerity/map.php
+14
-14
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => '0b64e988',
11
11
'conpherence.pkg.js' => '6249a1cf',
12
-
'core.pkg.css' => '1bc01ec9',
12
+
'core.pkg.css' => '1478da1f',
13
13
'core.pkg.js' => '9dc857ed',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
15
15
'differential.pkg.css' => 'a4ba74b5',
···
21
21
'maniphest.pkg.js' => '949a7498',
22
22
'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
23
23
'rsrc/css/aphront/dark-console.css' => 'f54bf286',
24
-
'rsrc/css/aphront/dialog-view.css' => 'ea3745f5',
24
+
'rsrc/css/aphront/dialog-view.css' => 'c076ef55',
25
25
'rsrc/css/aphront/lightbox-attachment.css' => '90a84e83',
26
26
'rsrc/css/aphront/list-filter-view.css' => '5d6f0526',
27
27
'rsrc/css/aphront/multi-column.css' => '84cc6640',
···
140
140
'rsrc/css/phui/phui-document.css' => 'c32e8dec',
141
141
'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
142
142
'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
143
-
'rsrc/css/phui/phui-form-view.css' => '91adabe4',
143
+
'rsrc/css/phui/phui-form-view.css' => '8769972e',
144
144
'rsrc/css/phui/phui-form.css' => 'b8fb087a',
145
145
'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
146
146
'rsrc/css/phui/phui-header-view.css' => '6ec8f155',
···
494
494
'rsrc/js/core/behavior-device.js' => 'bb1dd507',
495
495
'rsrc/js/core/behavior-drag-and-drop-textarea.js' => '484a6e22',
496
496
'rsrc/js/core/behavior-error-log.js' => '6882e80a',
497
-
'rsrc/js/core/behavior-fancy-datepicker.js' => '568931f3',
497
+
'rsrc/js/core/behavior-fancy-datepicker.js' => 'a9210d03',
498
498
'rsrc/js/core/behavior-file-tree.js' => '88236f00',
499
499
'rsrc/js/core/behavior-form.js' => '5c54cbf3',
500
500
'rsrc/js/core/behavior-gesture.js' => '3ab51e2c',
···
544
544
'almanac-css' => 'dbb9b3af',
545
545
'aphront-bars' => '231ac33c',
546
546
'aphront-dark-console-css' => 'f54bf286',
547
-
'aphront-dialog-view-css' => 'ea3745f5',
547
+
'aphront-dialog-view-css' => 'c076ef55',
548
548
'aphront-list-filter-view-css' => '5d6f0526',
549
549
'aphront-multi-column-view-css' => '84cc6640',
550
550
'aphront-panel-view-css' => '8427b78d',
···
643
643
'javelin-behavior-editengine-reorder-fields' => 'b59e1e96',
644
644
'javelin-behavior-error-log' => '6882e80a',
645
645
'javelin-behavior-event-all-day' => 'b41537c9',
646
-
'javelin-behavior-fancy-datepicker' => '568931f3',
646
+
'javelin-behavior-fancy-datepicker' => 'a9210d03',
647
647
'javelin-behavior-global-drag-and-drop' => '960f6a39',
648
648
'javelin-behavior-herald-rule-editor' => '7ebaeed3',
649
649
'javelin-behavior-high-security-warning' => 'a464fe03',
···
856
856
'phui-font-icon-base-css' => '870a7360',
857
857
'phui-fontkit-css' => '9cda225e',
858
858
'phui-form-css' => 'b8fb087a',
859
-
'phui-form-view-css' => '91adabe4',
859
+
'phui-form-view-css' => '8769972e',
860
860
'phui-head-thing-view-css' => 'fd311e5f',
861
861
'phui-header-view-css' => '6ec8f155',
862
862
'phui-hovercard' => '1bd28176',
···
1356
1356
'phabricator-drag-and-drop-file-upload',
1357
1357
'javelin-workboard-board',
1358
1358
),
1359
-
'568931f3' => array(
1360
-
'javelin-behavior',
1361
-
'javelin-util',
1362
-
'javelin-dom',
1363
-
'javelin-stratcom',
1364
-
'javelin-vector',
1365
-
),
1366
1359
'58dea2fa' => array(
1367
1360
'javelin-install',
1368
1361
'javelin-util',
···
1810
1803
'javelin-behavior',
1811
1804
'javelin-uri',
1812
1805
'phabricator-keyboard-shortcut',
1806
+
),
1807
+
'a9210d03' => array(
1808
+
'javelin-behavior',
1809
+
'javelin-util',
1810
+
'javelin-dom',
1811
+
'javelin-stratcom',
1812
+
'javelin-vector',
1813
1813
),
1814
1814
'a9f88de2' => array(
1815
1815
'javelin-behavior',
+9
webroot/rsrc/css/aphront/dialog-view.css
+9
webroot/rsrc/css/aphront/dialog-view.css
+6
webroot/rsrc/css/phui/phui-form-view.css
+6
webroot/rsrc/css/phui/phui-form-view.css
+36
-10
webroot/rsrc/js/core/behavior-fancy-datepicker.js
+36
-10
webroot/rsrc/js/core/behavior-fancy-datepicker.js
···
14
14
statics.initialized = true;
15
15
16
16
var picker;
17
+
var anchor_node;
17
18
var root;
18
19
19
20
var value_y;
···
79
80
80
81
picker = JX.$N(
81
82
'div',
82
-
{className: 'fancy-datepicker', sigil: 'phabricator-datepicker'},
83
-
JX.$N('div', {className: 'fancy-datepicker-core'}));
83
+
{
84
+
className: 'fancy-datepicker',
85
+
sigil: 'phabricator-datepicker'
86
+
},
87
+
JX.$N(
88
+
'div',
89
+
{
90
+
className: 'fancy-datepicker-core',
91
+
sigil: 'fancy-datepicker-core'
92
+
}));
84
93
document.body.appendChild(picker);
85
94
86
-
var button = e.getNode('calendar-button');
87
-
var p = JX.$V(button);
88
-
var d = JX.Vector.getDim(picker);
95
+
anchor_node = e.getNode('calendar-button');
96
+
JX.DOM.alterClass(root, 'picker-open', true);
89
97
90
-
picker.style.left = (p.x - d.x - 2) + 'px';
91
-
picker.style.top = (p.y) + 'px';
92
-
93
-
JX.DOM.alterClass(root, 'picker-open', true);
98
+
JX.Mask.show('jx-date-mask');
94
99
95
100
read_date();
96
101
render();
···
101
106
return;
102
107
}
103
108
109
+
JX.Mask.hide('jx-date-mask');
110
+
104
111
JX.DOM.remove(picker);
105
112
picker = null;
106
113
JX.DOM.alterClass(root, 'picker-open', false);
···
198
205
};
199
206
200
207
var render = function() {
208
+
if (!picker) {
209
+
return;
210
+
}
211
+
212
+
var button = anchor_node;
213
+
var p = JX.$V(button);
214
+
var d = JX.Vector.getDim(picker);
215
+
var b = JX.Vector.getDim(button);
216
+
217
+
if (JX.Device.isDesktop()) {
218
+
picker.style.top = (p.y) + 'px';
219
+
picker.style.left = (p.x - d.x - 2) + 'px';
220
+
} else {
221
+
picker.style.top = (p.y + b.y) + 'px';
222
+
picker.style.left = '';
223
+
}
224
+
201
225
JX.DOM.setContent(
202
226
picker.firstChild,
203
227
[
···
408
432
});
409
433
410
434
JX.Stratcom.listen('click', null, function(e){
411
-
if (e.getNode('phabricator-datepicker')) {
435
+
if (e.getNode('phabricator-datepicker-core')) {
412
436
return;
413
437
}
414
438
onclose();
415
439
});
440
+
441
+
JX.Stratcom.listen('resize', null, render);
416
442
417
443
});