From 8c1a1312e8c7512ead1c2d8fcda0c42e19b99f87 Mon Sep 17 00:00:00 2001 From: epriestley Date: Sat, 28 Mar 2015 06:54:23 -0700 Subject: [PATCH] Improve column device behaviors Summary: Fixes T7062. When the column is open, we only want to consider the screen width which is avilable for content when computing responsive breakpoints. Specificially, if you have a 1000px wide browser window (normally "desktop") but the column is open (300px) so you only have 700px free for content (normally "tablet"), we should drop to the tablet breakpoint. This lets you have a narrow column of "tablet" content next to the chat column, instead of a really squished column of "desktop" contnet. This also means the chat column can't directly use JX.Device to hide itself. Test Plan: Resized screen with column open, saw content go from Desktop + Column -> Tablet + Column -> Tablet -> Mobile. Reviewers: btrahan, chad Reviewed By: chad Subscribers: epriestley Maniphest Tasks: T7062 Differential Revision: https://secure.phabricator.com/D12189 --- resources/celerity/map.php | 48 ++++++------ .../conpherence/durable-column.css | 4 - .../conpherence/behavior-durable-column.js | 74 +++++++++---------- webroot/rsrc/js/core/behavior-device.js | 14 +++- 4 files changed, 74 insertions(+), 66 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 89d65aa75c..ae3dd0a8fd 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -8,7 +8,7 @@ return array( 'names' => array( 'core.pkg.css' => '2ff29d1d', - 'core.pkg.js' => '75599122', + 'core.pkg.js' => '2102d953', 'darkconsole.pkg.js' => '8ab24e01', 'differential.pkg.css' => '571b1cc1', 'differential.pkg.js' => 'c0506961', @@ -44,7 +44,7 @@ return array( 'rsrc/css/application/config/config-welcome.css' => '6abd79be', 'rsrc/css/application/config/setup-issue.css' => '22270af2', 'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2', - 'rsrc/css/application/conpherence/durable-column.css' => 'e11b2fbc', + 'rsrc/css/application/conpherence/durable-column.css' => 'e2011d85', 'rsrc/css/application/conpherence/menu.css' => '9b37a261', 'rsrc/css/application/conpherence/message-pane.css' => '69ff6e0f', 'rsrc/css/application/conpherence/notification.css' => '04a6e10a', @@ -354,7 +354,7 @@ return array( 'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18', 'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de', 'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => 'bb928342', - 'rsrc/js/application/conpherence/behavior-durable-column.js' => '70787038', + 'rsrc/js/application/conpherence/behavior-durable-column.js' => 'e5182926', 'rsrc/js/application/conpherence/behavior-menu.js' => 'de5579b4', 'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861', 'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3', @@ -457,7 +457,7 @@ return array( 'rsrc/js/core/behavior-choose-control.js' => '6153c708', 'rsrc/js/core/behavior-crop.js' => 'fa0f4fc2', 'rsrc/js/core/behavior-dark-console.js' => '08883e8b', - 'rsrc/js/core/behavior-device.js' => '03d6ed07', + 'rsrc/js/core/behavior-device.js' => 'a205cf28', 'rsrc/js/core/behavior-drag-and-drop-textarea.js' => '6d49590e', 'rsrc/js/core/behavior-error-log.js' => '6882e80a', 'rsrc/js/core/behavior-fancy-datepicker.js' => 'c51ae228', @@ -514,7 +514,7 @@ return array( 'changeset-view-manager' => '58562350', 'config-options-css' => '7fedf08b', 'config-welcome-css' => '6abd79be', - 'conpherence-durable-column-view' => 'e11b2fbc', + 'conpherence-durable-column-view' => 'e2011d85', 'conpherence-menu-css' => '9b37a261', 'conpherence-message-pane-css' => '69ff6e0f', 'conpherence-notification-css' => '04a6e10a', @@ -566,7 +566,7 @@ return array( 'javelin-behavior-dashboard-move-panels' => '82439934', 'javelin-behavior-dashboard-query-panel-select' => '453c5375', 'javelin-behavior-dashboard-tab-panel' => 'd4eecc63', - 'javelin-behavior-device' => '03d6ed07', + 'javelin-behavior-device' => 'a205cf28', 'javelin-behavior-differential-add-reviewers-and-ccs' => 'e10f8e18', 'javelin-behavior-differential-comment-jump' => '4fdb476d', 'javelin-behavior-differential-diff-radios' => 'e1ff79b1', @@ -584,7 +584,7 @@ return array( 'javelin-behavior-diffusion-locate-file' => '6d3e1947', 'javelin-behavior-diffusion-pull-lastmodified' => '2b228192', 'javelin-behavior-doorkeeper-tag' => 'e5822781', - 'javelin-behavior-durable-column' => '70787038', + 'javelin-behavior-durable-column' => 'e5182926', 'javelin-behavior-error-log' => '6882e80a', 'javelin-behavior-fancy-datepicker' => 'c51ae228', 'javelin-behavior-global-drag-and-drop' => 'bbdf75ca', @@ -847,13 +847,6 @@ return array( '029a133d' => array( 'aphront-dialog-view-css', ), - '03d6ed07' => array( - 'javelin-behavior', - 'javelin-stratcom', - 'javelin-dom', - 'javelin-vector', - 'javelin-install', - ), '05270951' => array( 'javelin-util', 'javelin-magical-init', @@ -1334,16 +1327,6 @@ return array( '6f7a9da8' => array( 'javelin-install', ), - 70787038 => array( - 'javelin-behavior', - 'javelin-dom', - 'javelin-stratcom', - 'javelin-behavior-device', - 'javelin-scrollbar', - 'javelin-quicksand', - 'phabricator-keyboard-shortcut', - 'conpherence-thread-manager', - ), '70baed2f' => array( 'javelin-install', 'javelin-dom', @@ -1618,6 +1601,13 @@ return array( 'javelin-vector', 'javelin-magical-init', ), + 'a205cf28' => array( + 'javelin-behavior', + 'javelin-stratcom', + 'javelin-dom', + 'javelin-vector', + 'javelin-install', + ), 'a80d0378' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1864,6 +1854,16 @@ return array( 'javelin-behavior', 'javelin-dom', ), + 'e5182926' => array( + 'javelin-behavior', + 'javelin-dom', + 'javelin-stratcom', + 'javelin-behavior-device', + 'javelin-scrollbar', + 'javelin-quicksand', + 'phabricator-keyboard-shortcut', + 'conpherence-thread-manager', + ), 'e566f52c' => array( 'javelin-behavior', 'javelin-stratcom', diff --git a/webroot/rsrc/css/application/conpherence/durable-column.css b/webroot/rsrc/css/application/conpherence/durable-column.css index 442a7aef69..314b78098b 100644 --- a/webroot/rsrc/css/application/conpherence/durable-column.css +++ b/webroot/rsrc/css/application/conpherence/durable-column.css @@ -29,10 +29,6 @@ background: #fff; } -.device .conpherence-durable-column { - display: none; -} - .conpherence-durable-column .loading-mask { position: absolute; top: 90px; diff --git a/webroot/rsrc/js/application/conpherence/behavior-durable-column.js b/webroot/rsrc/js/application/conpherence/behavior-durable-column.js index f7945017e8..2828c426bc 100644 --- a/webroot/rsrc/js/application/conpherence/behavior-durable-column.js +++ b/webroot/rsrc/js/application/conpherence/behavior-durable-column.js @@ -28,6 +28,10 @@ JX.behavior('durable-column', function(config, statics) { var loadThreadID = null; var scrollbar = null; + var columnWidth = 300; + // This is the smallest window size where we'll enable the column. + var minimumViewportWidth = 768; + var quick = JX.$('phabricator-standard-page-body'); function _getColumnNode() { @@ -39,14 +43,33 @@ JX.behavior('durable-column', function(config, statics) { return JX.DOM.find(column, 'div', 'conpherence-durable-column-main'); } + function _autocloseColumn() { + var viewport = JX.Vector.getViewport(); + if (viewport.x < minimumViewportWidth) { + if (show) { + _toggleColumn(false); + resizeClose = true; + } + return true; + } else { + if (resizeClose) { + resizeClose = false; + if (!show) { + _toggleColumn(false); + } + } + } + + return false; + } + function _toggleColumn(explicit) { if (explicit) { - var device = JX.Device.getDevice(); - // don't allow users to invoke the column from devices - if (device != 'desktop') { + if (_autocloseColumn()) { return; } } + show = !show; JX.DOM.alterClass(document.body, 'with-durable-column', show); var column = _getColumnNode(); @@ -59,6 +82,14 @@ JX.behavior('durable-column', function(config, statics) { JX.Stratcom.invoke('resize'); JX.Quicksand.setFrame(show ? quick : null); + // When we activate the column, adjust the tablet breakpoint so that we + // convert the left side of the screen to tablet mode on narrow displays. + var breakpoint = JX.Device.getTabletBreakpoint(); + JX.Device.setTabletBreakpoint( + show ? (breakpoint + columnWidth) : (breakpoint - columnWidth)); + + JX.log(JX.Device.getTabletBreakpoint()); + // If this was an explicit toggle action from the user, save their // preference. if (explicit) { @@ -188,31 +219,7 @@ JX.behavior('durable-column', function(config, statics) { }); var resizeClose = false; - JX.Stratcom.listen( - 'phabricator-device-change', - null, - function() { - var device = JX.Device.getDevice(); - switch (device) { - case 'phone': - case 'tablet': - if (show === true) { - _toggleColumn(false); - resizeClose = true; - } - break; - case 'desktop': - if (resizeClose) { - resizeClose = false; - if (show === false) { - _toggleColumn(false); - } - } - break; - default: - break; - } - }); + JX.Stratcom.listen('resize', null, _autocloseColumn); function _getColumnBodyNode() { var column = JX.$('conpherence-durable-column'); @@ -339,15 +346,8 @@ JX.behavior('durable-column', function(config, statics) { }); if (config.visible) { - var device = JX.Device.getDevice(); - if (device == 'desktop') { - _toggleColumn(false); - } else { - // pretend we closed due to resize so if we do resize later things work - // correctly - resizeClose = true; - JX.DOM.hide(_getColumnNode()); - } + _toggleColumn(false); + _autocloseColumn(); } }); diff --git a/webroot/rsrc/js/core/behavior-device.js b/webroot/rsrc/js/core/behavior-device.js index df6d9c6cd5..f0f00896dc 100644 --- a/webroot/rsrc/js/core/behavior-device.js +++ b/webroot/rsrc/js/core/behavior-device.js @@ -10,12 +10,24 @@ JX.install('Device', { statics : { _device : null, + _tabletBreakpoint: 768, + + setTabletBreakpoint: function(width) { + var self = JX.Device; + self._tabletBreakpoint = width; + self.recalculate(); + }, + + getTabletBreakpoint: function() { + return JX.Device._tabletBreakpoint; + }, + recalculate: function() { var v = JX.Vector.getViewport(); var self = JX.Device; var device = 'desktop'; - if (v.x <= 768) { + if (v.x <= self._tabletBreakpoint) { device = 'tablet'; } if (v.x <= 480) {