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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '0b64e988',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => '1bc01ec9',
+    'core.pkg.css' => '1478da1f',
     'core.pkg.js' => '9dc857ed',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'a4ba74b5',
@@ -21,7 +21,7 @@ return array(
     'maniphest.pkg.js' => '949a7498',
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
     'rsrc/css/aphront/dark-console.css' => 'f54bf286',
-    'rsrc/css/aphront/dialog-view.css' => 'ea3745f5',
+    'rsrc/css/aphront/dialog-view.css' => 'c076ef55',
     'rsrc/css/aphront/lightbox-attachment.css' => '90a84e83',
     'rsrc/css/aphront/list-filter-view.css' => '5d6f0526',
     'rsrc/css/aphront/multi-column.css' => '84cc6640',
@@ -140,7 +140,7 @@ return array(
     'rsrc/css/phui/phui-document.css' => 'c32e8dec',
     'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
     'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
-    'rsrc/css/phui/phui-form-view.css' => '91adabe4',
+    'rsrc/css/phui/phui-form-view.css' => '8769972e',
     'rsrc/css/phui/phui-form.css' => 'b8fb087a',
     'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
     'rsrc/css/phui/phui-header-view.css' => '6ec8f155',
@@ -494,7 +494,7 @@ return array(
     'rsrc/js/core/behavior-device.js' => 'bb1dd507',
     'rsrc/js/core/behavior-drag-and-drop-textarea.js' => '484a6e22',
     'rsrc/js/core/behavior-error-log.js' => '6882e80a',
-    'rsrc/js/core/behavior-fancy-datepicker.js' => '568931f3',
+    'rsrc/js/core/behavior-fancy-datepicker.js' => 'a9210d03',
     'rsrc/js/core/behavior-file-tree.js' => '88236f00',
     'rsrc/js/core/behavior-form.js' => '5c54cbf3',
     'rsrc/js/core/behavior-gesture.js' => '3ab51e2c',
@@ -544,7 +544,7 @@ return array(
     'almanac-css' => 'dbb9b3af',
     'aphront-bars' => '231ac33c',
     'aphront-dark-console-css' => 'f54bf286',
-    'aphront-dialog-view-css' => 'ea3745f5',
+    'aphront-dialog-view-css' => 'c076ef55',
     'aphront-list-filter-view-css' => '5d6f0526',
     'aphront-multi-column-view-css' => '84cc6640',
     'aphront-panel-view-css' => '8427b78d',
@@ -643,7 +643,7 @@ return array(
     'javelin-behavior-editengine-reorder-fields' => 'b59e1e96',
     'javelin-behavior-error-log' => '6882e80a',
     'javelin-behavior-event-all-day' => 'b41537c9',
-    'javelin-behavior-fancy-datepicker' => '568931f3',
+    'javelin-behavior-fancy-datepicker' => 'a9210d03',
     'javelin-behavior-global-drag-and-drop' => '960f6a39',
     'javelin-behavior-herald-rule-editor' => '7ebaeed3',
     'javelin-behavior-high-security-warning' => 'a464fe03',
@@ -856,7 +856,7 @@ return array(
     'phui-font-icon-base-css' => '870a7360',
     'phui-fontkit-css' => '9cda225e',
     'phui-form-css' => 'b8fb087a',
-    'phui-form-view-css' => '91adabe4',
+    'phui-form-view-css' => '8769972e',
     'phui-head-thing-view-css' => 'fd311e5f',
     'phui-header-view-css' => '6ec8f155',
     'phui-hovercard' => '1bd28176',
@@ -1356,13 +1356,6 @@ return array(
       'phabricator-drag-and-drop-file-upload',
       'javelin-workboard-board',
     ),
-    '568931f3' => array(
-      'javelin-behavior',
-      'javelin-util',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-vector',
-    ),
     '58dea2fa' => array(
       'javelin-install',
       'javelin-util',
@@ -1811,6 +1804,13 @@ return array(
       'javelin-uri',
       'phabricator-keyboard-shortcut',
     ),
+    'a9210d03' => array(
+      'javelin-behavior',
+      'javelin-util',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-vector',
+    ),
     'a9f88de2' => array(
       'javelin-behavior',
       'javelin-dom',

webroot/rsrc/css/aphront/dialog-view.css

@@ -108,6 +108,15 @@
   opacity: 0.95;
 }
 
+.jx-date-mask {
+  background: #292f33;
+  opacity: 0.5;
+}
+
+.device-desktop .jx-date-mask {
+  display: none;
+}
+
 .aphront-exception-dialog {
   width: 95%;
 }

webroot/rsrc/css/phui/phui-form-view.css

@@ -360,7 +360,13 @@ table.aphront-form-control-checkbox-layout th {
   width: 240px;
 }
 
+.device .fancy-datepicker {
+  width: 100%;
+}
+
 .fancy-datepicker-core {
+  width: 240px;
+  margin: 0 auto;
   padding: 1px;
   font-size: {$smallerfontsize};
   text-align: center;

webroot/rsrc/js/core/behavior-fancy-datepicker.js

@@ -14,6 +14,7 @@ JX.behavior('fancy-datepicker', function(config, statics) {
   statics.initialized = true;
 
   var picker;
+  var anchor_node;
   var root;
 
   var value_y;
@@ -79,19 +80,23 @@ JX.behavior('fancy-datepicker', function(config, statics) {
 
     picker = JX.$N(
       'div',
-      {className: 'fancy-datepicker', sigil: 'phabricator-datepicker'},
+      {
-      JX.$N('div', {className: 'fancy-datepicker-core'}));
+        className: 'fancy-datepicker',
+        sigil: 'phabricator-datepicker'
+      },
+      JX.$N(
+        'div',
+        {
+          className: 'fancy-datepicker-core',
+          sigil: 'fancy-datepicker-core'
+        }));
     document.body.appendChild(picker);
 
-    var button = e.getNode('calendar-button');
+    anchor_node = e.getNode('calendar-button');
-    var p = JX.$V(button);
-    var d = JX.Vector.getDim(picker);
-
-    picker.style.left = (p.x - d.x - 2) + 'px';
-    picker.style.top = (p.y) + 'px';
-
     JX.DOM.alterClass(root, 'picker-open', true);
 
+    JX.Mask.show('jx-date-mask');
+
     read_date();
     render();
   };
@@ -101,6 +106,8 @@ JX.behavior('fancy-datepicker', function(config, statics) {
       return;
     }
 
+    JX.Mask.hide('jx-date-mask');
+
     JX.DOM.remove(picker);
     picker = null;
     JX.DOM.alterClass(root, 'picker-open', false);
@@ -198,6 +205,23 @@ JX.behavior('fancy-datepicker', function(config, statics) {
   };
 
   var render = function() {
+    if (!picker) {
+      return;
+    }
+
+    var button = anchor_node;
+    var p = JX.$V(button);
+    var d = JX.Vector.getDim(picker);
+    var b = JX.Vector.getDim(button);
+
+    if (JX.Device.isDesktop()) {
+      picker.style.top = (p.y) + 'px';
+      picker.style.left = (p.x - d.x - 2) + 'px';
+    } else {
+      picker.style.top = (p.y + b.y) + 'px';
+      picker.style.left = '';
+    }
+
     JX.DOM.setContent(
       picker.firstChild,
       [
@@ -408,10 +432,12 @@ JX.behavior('fancy-datepicker', function(config, statics) {
     });
 
   JX.Stratcom.listen('click', null, function(e){
-    if (e.getNode('phabricator-datepicker')) {
+    if (e.getNode('phabricator-datepicker-core')) {
       return;
     }
     onclose();
   });
 
+  JX.Stratcom.listen('resize', null, render);
+
 });