From 415de4ce375a2477be95e37a97be938e3d038e73 Mon Sep 17 00:00:00 2001 From: epriestley Date: Mon, 27 Aug 2018 10:09:13 -0700 Subject: [PATCH] Repaint filetree more consistently for mobile/device views Summary: Ref T13189. See . We currently call a nonexistent `resetdrag()` which does nothing. Some sequences of interactions can result in a blank left column in mobile/device widths. Repaint the filetree away more consistently on device change. Test Plan: Viewed a revision, toggled filetree off + on, resized to narrow width. Before: bad left margin, JS console error. After: proper repaint at device breakpoint, no JS console error. Reviewers: amckinley Maniphest Tasks: T13189 Differential Revision: https://secure.phabricator.com/D19611 --- resources/celerity/map.php | 26 +++++----- .../rsrc/js/core/behavior-phabricator-nav.js | 51 ++++++++++++------- 2 files changed, 47 insertions(+), 30 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 66a568dabe..d674d399e7 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -10,7 +10,7 @@ return array( 'conpherence.pkg.css' => 'e68cf1fa', 'conpherence.pkg.js' => '15191c65', 'core.pkg.css' => 'fc4839c8', - 'core.pkg.js' => '2058ec09', + 'core.pkg.js' => 'b5a949ca', 'differential.pkg.css' => '06dc617c', 'differential.pkg.js' => 'c1cfa143', 'diffusion.pkg.css' => 'a2d17c7d', @@ -473,7 +473,7 @@ return array( 'rsrc/js/core/behavior-more.js' => 'a80d0378', 'rsrc/js/core/behavior-object-selector.js' => '77c1f0b0', 'rsrc/js/core/behavior-oncopy.js' => '2926fff2', - 'rsrc/js/core/behavior-phabricator-nav.js' => '94b7c320', + 'rsrc/js/core/behavior-phabricator-nav.js' => '9d32bc88', 'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => 'acd29eee', 'rsrc/js/core/behavior-read-only-warning.js' => 'ba158207', 'rsrc/js/core/behavior-redirect.js' => '0213259f', @@ -631,7 +631,7 @@ return array( 'javelin-behavior-phabricator-keyboard-pager' => 'a8da01f0', 'javelin-behavior-phabricator-keyboard-shortcuts' => '01fca1f0', 'javelin-behavior-phabricator-line-linker' => '66a62306', - 'javelin-behavior-phabricator-nav' => '94b7c320', + 'javelin-behavior-phabricator-nav' => '9d32bc88', 'javelin-behavior-phabricator-notification-example' => '8ce821c5', 'javelin-behavior-phabricator-object-selector' => '77c1f0b0', 'javelin-behavior-phabricator-oncopy' => '2926fff2', @@ -1628,16 +1628,6 @@ return array( 'javelin-resource', 'javelin-routable', ), - '94b7c320' => array( - 'javelin-behavior', - 'javelin-behavior-device', - 'javelin-stratcom', - 'javelin-dom', - 'javelin-magical-init', - 'javelin-vector', - 'javelin-request', - 'javelin-util', - ), '960f6a39' => array( 'javelin-behavior', 'javelin-dom', @@ -1658,6 +1648,16 @@ return array( 'javelin-workflow', 'javelin-stratcom', ), + '9d32bc88' => array( + 'javelin-behavior', + 'javelin-behavior-device', + 'javelin-stratcom', + 'javelin-dom', + 'javelin-magical-init', + 'javelin-vector', + 'javelin-request', + 'javelin-util', + ), '9d9685d6' => array( 'phui-oi-list-view-css', ), diff --git a/webroot/rsrc/js/core/behavior-phabricator-nav.js b/webroot/rsrc/js/core/behavior-phabricator-nav.js index cf6dc880bc..8bc4ad04e8 100644 --- a/webroot/rsrc/js/core/behavior-phabricator-nav.js +++ b/webroot/rsrc/js/core/behavior-phabricator-nav.js @@ -20,10 +20,13 @@ JX.behavior('phabricator-nav', function(config) { // - Flexible Navigation Column ------------------------------------------------ - var dragging; var track; + var collapsed = config.collapsed; + var narrowed; + var visible = null; + JX.enableDispatch(document.body, 'mousemove'); JX.DOM.listen(drag, 'mousedown', null, function(e) { @@ -95,6 +98,7 @@ JX.behavior('phabricator-nav', function(config) { if (!dragging) { return; } + JX.DOM.alterClass(document.body, 'jx-drag-col', false); dragging = false; @@ -117,6 +121,29 @@ JX.behavior('phabricator-nav', function(config) { return (JX.$V(drag).x - JX.Vector.getScroll().x); } + function repaint() { + narrowed = !JX.Device.isDesktop(); + + var was_visible = visible; + visible = (!collapsed && !narrowed); + + if (was_visible === visible) { + return; + } + + if (!visible) { + savedrag(); + } + + JX.DOM.alterClass(main, 'has-local-nav', visible); + JX.DOM.alterClass(main, 'has-drag-nav', visible); + JX.DOM.alterClass(main, 'has-closed-nav', !visible); + + if (visible) { + restoredrag(); + } + } + var saved_width = config.width; function savedrag() { saved_width = get_width(); @@ -136,21 +163,10 @@ JX.behavior('phabricator-nav', function(config) { content.style.marginLeft = (saved_width + JX.Vector.getDim(drag).x) + 'px'; } - var collapsed = config.collapsed; JX.Stratcom.listen('differential-filetree-toggle', null, function() { collapsed = !collapsed; - if (collapsed) { - savedrag(); - } - - JX.DOM.alterClass(main, 'has-local-nav', !collapsed); - JX.DOM.alterClass(main, 'has-drag-nav', !collapsed); - JX.DOM.alterClass(main, 'has-closed-nav', collapsed); - - if (!collapsed) { - restoredrag(); - } + repaint(); new JX.Request('/settings/adjust/', JX.bag) .setData({ key : 'nav-collapsed', value : (collapsed ? 1 : 0) }) @@ -168,7 +184,9 @@ JX.behavior('phabricator-nav', function(config) { // of the navigation bar. function onresize() { - if (JX.Device.getDevice() != 'desktop') { + repaint(); + + if (!visible) { return; } @@ -193,14 +211,13 @@ JX.behavior('phabricator-nav', function(config) { local.style.left = 0; JX.Stratcom.listen(['scroll', 'resize'], null, onresize); - onresize(); + repaint(); // - Navigation Reset ---------------------------------------------------------- JX.Stratcom.listen('phabricator-device-change', null, function() { - resetdrag(); - onresize(); + repaint(); }); });