From f91269a4a8a6b715d186d27441eca726f83cb7bd Mon Sep 17 00:00:00 2001 From: epriestley Date: Tue, 15 Nov 2016 10:09:52 -0800 Subject: [PATCH] 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 | 28 +++++------ webroot/rsrc/css/aphront/dialog-view.css | 9 ++++ webroot/rsrc/css/phui/phui-form-view.css | 6 +++ .../rsrc/js/core/behavior-fancy-datepicker.js | 46 +++++++++++++++---- 4 files changed, 65 insertions(+), 24 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 05ead243b9..46d3a51465 100644 --- a/resources/celerity/map.php +++ b/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', diff --git a/webroot/rsrc/css/aphront/dialog-view.css b/webroot/rsrc/css/aphront/dialog-view.css index 7e3f911af9..5d9d2046dc 100644 --- a/webroot/rsrc/css/aphront/dialog-view.css +++ b/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%; } diff --git a/webroot/rsrc/css/phui/phui-form-view.css b/webroot/rsrc/css/phui/phui-form-view.css index 11852a87f6..ce71910db9 100644 --- a/webroot/rsrc/css/phui/phui-form-view.css +++ b/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; diff --git a/webroot/rsrc/js/core/behavior-fancy-datepicker.js b/webroot/rsrc/js/core/behavior-fancy-datepicker.js index d3cdb1a8d3..15558dbfe1 100644 --- a/webroot/rsrc/js/core/behavior-fancy-datepicker.js +++ b/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'); - 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'; - + anchor_node = e.getNode('calendar-button'); 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); + });